# Login Component Structure

## Component Diagram

```mermaid
graph TD
    A[Login Component] --> B[State Management]
    B --> B1[useState Hooks]
    B1 --> B1a[pwShow: 비밀번호 표시 여부]
    B1 --> B1b[idSave: ID 저장 여부]
    B1 --> B1c[isPartners: Q.PARTNERS 여부]
    B1 --> B1d[isLogin: 로그인 상태]

    A --> C[Account Management]
    C --> C1[useReducer]
    C1 --> C1a[loginId]
    C1 --> C1b[pwd]

    A --> D[External Hooks]
    D --> D1[useRouter]
    D --> D2[useLocalStorage]
    D --> D3[useSessionStore]
    D --> D4[useAxios]
    D --> D5[useQuery]

    A --> E[Event Handlers]
    E --> E1[handleLogin]
    E --> E2[handleKeyDown]
    E --> E3[validateLogin]

    A --> F[Effects]
    F --> F1[Login Success Effect]
    F1 --> F1a[세션 저장]
    F1 --> F1b[라우팅]
    F --> F2[Email Validation Effect]
    F2 --> F2a[Partners 모드 전환]

    A --> G[UI Components]
    G --> G1[Login Form]
    G1 --> G1a[ID Input]
    G1 --> G1b[Password Input]
    G1 --> G1c[Checkboxes]
    G1 --> G1d[Login Button]
```

## 주요 특징과 동작 방식

### 1. 상태 관리

- `useState`를 사용하여 UI 상태 관리 (비밀번호 표시, ID 저장, Partners 모드)
- `useReducer`를 사용하여 계정 정보(loginId, pwd) 관리

### 2. 외부 훅 통합

- `useRouter`: 페이지 라우팅
- `useLocalStorage`: 로컬 스토리지 데이터 관리
- `useSessionStore`: 세션 상태 관리
- `useAxios`: API 통신
- `useQuery`: 로그인 API 호출 및 상태 관리

### 3. 이벤트 처리

- `handleLogin`: 로그인 시도
- `handleKeyDown`: Enter 키 입력 처리
- `validateLogin`: 입력값 유효성 검사

### 4. 효과 처리

- 로그인 성공 시 세션 저장 및 라우팅
- 이메일 형식에 따른 Partners 모드 자동 전환

### 5. UI 구성

- ID/PW 입력 필드
- 비밀번호 표시/숨김 토글
- ID 저장 체크박스
- Q.PARTNERS 토글
- 로그인 버튼

### 6. 보안 및 유효성 검사

- 이메일 형식 검증
- 필수 입력값 검증
- API 응답 코드에 따른 처리 (200: 성공, 400: 실패)

## 특징

이 컴포넌트는 클라이언트 사이드에서 동작하며('use client'), 사용자 인증과 관련된 모든 로직을 포함하고 있습니다. 특히 Q.PARTNERS 모드와 일반 모드를 구분하여 다른 API 엔드포인트를 사용하는 특징이 있습니다.