feat(frontend) : 연습생 신규 추가 페이지 구현 #18
Conversation
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
이 PR은 연습생(Companion)을 새로 추가하는 다단계 생성 플로우를 구현합니다. 전반적으로 코드는 깔끔하게 작성되었으며, 컴포넌트 기반 아키텍처를 잘 따르고 있습니다. 특히, 스타일 가이드에 따라 DaisyUI 시맨틱 토큰을 사용하고 clsx로 조건부 스타일을 관리하는 등 좋은 관행들이 적용된 점이 인상적입니다.
다만, 몇 가지 개선할 점이 보입니다. i18n JSON 파일에 중복된 키가 있어 잠재적인 버그를 유발할 수 있으며, 일부 페이지에서 단계(step) 번호가 일관되지 않게 표시되는 UI 문제가 있습니다. 또한, 성능 및 유지보수성 향상을 위해 약간의 리팩토링이 가능한 부분이 있습니다. 아래에 자세한 리뷰 의견을 남겼으니 확인 부탁드립니다.
frontend/src/app/[lang]/aidols/[aidolId]/companions/[companionId]/complete/page.tsx
Outdated
Show resolved
Hide resolved
ywkim
left a comment
ywkim
left a comment
There was a problem hiding this comment.
surface 토큰 제거:
surface/surface-content 토큰을 추가하셨는데, 이렇게 구현하신 이유가 궁금합니다!
Figma 색상 팔레트에는 surface라는 토큰이 정의되어 있지 않습니다.
그리고 커스텀 토큰을 추가할 때 디자인 시스템 문서도 함께 업데이트 부탁드립니다.
그래야 다른 팀원들도 이 토큰의 존재와 용도를 알 수 있습니다.
|
그리고, 프로젝트에 repositories/CompanionRepository.ts가 있어서, Mock 파일도 repositories/MockCompanionRepository.ts로 만들면 찾기 쉽고, 백엔드 연동 시 같은 인터페이스로 교체하기도 쉬워질 것 같습니다! @zhwltlr |
- ProgressBar: 높이 8px→12px, 트랙 bg-base-300→bg-primary/20, 그라데이션→단색 bg-primary - GenderSelector: rounded-full→rounded-lg, border-2→border - ProfileImageGenerator 플레이스홀더: bg-base-200→bg-base-100 + border, 아이콘 48px→24px, 텍스트 색상 text-neutral - 캐스팅 완료 버튼: btn-primary→btn-neutral - companion/index.ts 중복 export 제거
- GenderSelector 비선택 버튼 bg-base-100 배경 추가 - ProgressBar에 px-6 패딩 적용하여 StepCard와 너비 일치 - CompanionNameInput 글자 수 카운터 제거 - 캐스팅 완료 버튼 SparklesIcon을 텍스트 뒤로 이동 - next.config.js에 placehold.co 이미지 호스트 허용
- GenderSelector 선택 상태: bg-primary/10(반투명) → bg-base-100 - ProfileImageGenerator, CompanionNameInput, BiographyInput input에 bg-base-100 추가
- globals.css 라이트/다크 테마에 --color-surface: #fff 추가 - tailwind.config.ts에 colors.surface 등록 - GenderSelector, ProfileImageGenerator, CompanionNameInput, BiographyInput에서 bg-base-100 → bg-surface로 변경 (다크모드에서도 흰색 유지)
- globals.css 라이트/다크 테마에 --color-surface-content: #000 추가 - tailwind.config.ts에 surface-content 색상 등록 - ProfileImageGenerator, CompanionNameInput, BiographyInput에 text-surface-content 적용
9개 언어 파일에서 머지 과정에서 발생한 중복 "common" 키 제거
이름/서사 입력 페이지까지만 구현하고 CastingCompleteModal 삭제
zhwltlr
force-pushed
the
feat/companion-create
branch
from
334134a to
494af02
Compare
song-eun
left a comment
song-eun
left a comment
There was a problem hiding this comment.
체크리스트 기반으로 모두 확인하였습니다!
요약
캐스팅된 연습생의 성별 선택 → MBTI 성격 설정 → 프로필 사진 생성 → 이름/서사 입력까지 4단계 생성 플로우를 구현하고, 다크모드 호환
목적
캐스팅 이후 연습생의 세부 정보를 설정하는 생성 플로우를 구현하여, 사용자가 연습생을 커스터마이징할 수 있도록 합니다.
주요 변경 사항
연습생 생성 플로우 (5 Step)
컴포넌트
다크모드 / 스타일링
다국어
리팩토링
테스트 체크리스트