yoosangwook
37435d2cca
- Introduced diagrams for the Login component structure, project architecture, and login sequence. - Detailed state management, external hooks, event handling, and UI components in the Login documentation. - Provided an overview of the component relationships and roles within the application architecture.
89 lines
2.3 KiB
Markdown
89 lines
2.3 KiB
Markdown
# 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 엔드포인트를 사용하는 특징이 있습니다.
|