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.
2.3 KiB
2.3 KiB
Login Component Structure
Component Diagram
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 엔드포인트를 사용하는 특징이 있습니다.