feat(frontend): 그룹 기획 페이지 구현

[song-eun]

요약

포지션 배정 완료 후 그룹 이름과 엠블럼을 설정하는 2단계 그룹 기획 페이지를 구현했습니다.

목적

사용자가 그룹 이름을 짓고 AI로 엠블럼 이미지를 생성할 수 있습니다.

변경 사항

그룹 기획 페이지

• Step 1: 그룹 이름 입력 (최대 20자)
• Step 2: 엠블럼 이미지 생성 (AI 프롬프트 기반)
• DaisyUI progress 컴포넌트로 진행률 표시
• 완료 시 /complete 페이지로 이동

컴포넌트 구조

• GroupPlanningForm: 메인 폼 컴포넌트 (스텝 관리, 버튼)
• EmblemStep: Step 2 엠블럼 생성 컴포넌트 분리

스타일 수정

• Header: shrink-0 추가 (화면 높이 작을 때 헤더 높이 유지)
• StepCard: w-full 추가

테스트

• 그룹 이름 입력 필드가 비어있고, "다음" 버튼 비활성화
• 이름 입력 시 "다음" 버튼 활성화
• step2 첫 입장시, 프로그레스바 50%, 프롬프트 입력 필드와 빈 이미지 영역 표시
• 이미지 로딩 시 이미지 영역에 로딩 스피너 표시
• 생성된 엠블럼 이미지 표시, "다음" 버튼 활성화
• "다음" 버튼에 로딩 스피너 표시

[gemini-code-assist]

Code Review

그룹 기획 페이지와 관련 컴포넌트, 다국어 리소스, Storybook 스토리를 추가하는 Pull Request 잘 보았습니다. 전반적으로 기능 구현이 잘 이루어졌습니다. 몇 가지 개선점을 제안합니다. 특히, 스타일 가이드 및 관련 규칙에 따라 일부 컴포넌트에서 하드코딩된 색상 값을 DaisyUI 시맨틱 토큰으로 변경하는 것이 필요합니다. 또한, Storybook에서 alert 대신 addon-actions를 사용하고, 다국어 파일의 플레이스홀더에 더 구체적인 예시를 추가하여 개발자 경험과 사용자 경험을 개선할 수 있습니다. 코드 가독성을 높일 수 있는 부분에 대한 제안도 포함했습니다. 자세한 내용은 각 파일의 주석을 참고해 주세요.

[ywkim]

LGTM!

[zhwltlr]

확인했습니다!