id: 'login-form'
status: ready
Login Form
Reference
- URL:
http://standard-commerce.makitt.localhost:3006/admin?component=login-form
- 위치: standard-commerce auth 진입 페이지의 로그인 화면
- 구조: 좌측 이메일/비밀번호 로그인 폼 + 소셜 로그인 영역 + 우측 프로모션 이미지 패널
- 시각 톤: white canvas, black CTA, beauty promo visual, thin borders
React Component
- Path:
apps/makitt-standard-commerce/src/components/assets/login-form/
- Status: implemented
- 반응형: 데스크톱 2컬럼 / 모바일 단일 컬럼
- i18n: ko, en, ja
- API:
shopApi.login(), shopApi.getSocialLoginConfig()
Prerequisites
makitt-server (shop-api)
고객 대면 API. shop storefront에서 호출.
| API | Method | Endpoint | Status |
|---|
| 이메일 로그인 | POST | /shop/{shopId}/auth/login/email-password | available |
| 소셜 로그인 설정 조회 | GET | /shop/{shopId}/auth/social-login-config?marketCode={code} | available |
| 인증 상태 조회 | GET | /shop/{shopId}/auth/me | available |
makitt-server (admin-api)
셀러가 로그인 수단과 provider 연결 상태를 관리하는 API.
| API | Method | Endpoint | Status |
|---|
| 로그인 설정 조회 | GET | /api/v1/shops/{shopId}/auth/settings | available |
| 기본 로그인 설정 수정 | PUT | /api/v1/shops/{shopId}/auth/default-config | available |
| 마켓별 로그인 설정 수정 | PUT | /api/v1/shops/{shopId}/auth/regions/{regionCode} | available |
| provider 연결 정보 저장 | PUT | /api/v1/shops/{shopId}/auth/providers/{provider} | available |
makitt-server (도메인/모델링)
| 항목 | 내용 | Status |
|---|
| DynamoDB Entity | ShopAuthSettings — PK: SHOP#{shopId}, SK: AUTH_SETTINGS | available |
| Domain Service | ShopAuthSettingsService | available |
| Application | ShopAuthApplication, ShopAuthSettingsApplication | available |
makitt-web (셀러 어드민 UI)
| 기능 | 설명 | Status |
|---|
| 고객 로그인 설정 페이지 | /home/customers/settings | available |
| 마켓별 기본/다른 로그인 수단 설정 | social config 제어 | available |
| 소셜 로그인 연결 모달 | provider credential 저장/테스트 | available |
makitt-shop (HCS 렌더링)
| 항목 | 설명 | Status |
|---|
form renderer | 이메일/비밀번호 폼 렌더링 | available |
input, button, image, heading, icon renderer | auth layout 구성 | available |
auth.login action | 로그인 실행 | available |
navigate action | 로그인 후 홈 이동 | available |
setState action | accordion 토글 | available |
HCS Conversion Notes
- 좌측은 실제 submit 가능한
auth.login form으로 변환
- 저장 옵션, 비밀번호 찾기, 회원가입 CTA는 static action/button 수준으로 유지
- 소셜 로그인은 마켓별 설정 UI를 설명하는 정적 버튼 세트로 구성
- “다른 로그인 수단”은 state 기반 accordion으로 처리
- 우측 beauty promo image는 standard-commerce asset과 동일한 generated image 사용