추가 팝업 구현

[kimnamheeee]

📝 설명

게임 생성 페이지에서 사용자 경험을 개선하기 위해 figma에 등록된 추가 팝업들을 구현하고, 기존 팝업 시스템을 개선했습니다

🛠️ 주요 변경 사항

• 파일 업로드 에러 팝업 통합 79c25f8
• 저장 전 검증 팝업 추가 d118c35
• 저장 에러 팝업 개선 5be4b32
• 질문 컴포넌트 레이아웃 안정화 32e0aad
• 질문 텍스트 간격 조정 c5dd7eb
• 에러 메시지 표시 기능 추가 9c2301e
• Storybook 이미지 경로 문제 해결 a8c564c
• 팝업 상태 통합 79c25f8

리뷰 시 고려해야 할 사항

Summary by CodeRabbit

• 신규 기능

  • 저장 실패 시 네트워크 확인 및 재시도를 안내하는 저장 오류 팝업이 추가되었습니다.
  • 필수 질문 또는 답변이 누락된 경우 저장 전에 안내하는 검증 오류 팝업이 추가되었습니다.
  • 저장하지 않고 나갈 경우 변경 사항이 사라질 수 있음을 경고하는 확인 팝업이 추가되었습니다.

• 버그 수정

  • 파일 업로드 오류 메시지가 하나의 팝업으로 통합되어, 허용 파일 형식(JPG, JPEG, PNG) 및 2MB 용량 제한을 명확히 안내합니다.
  • 질문 및 답변 입력란에 즉시 오류 메시지가 표시되어 입력 시 실시간 피드백을 제공합니다.

• 스타일

  • 질문 카드의 테두리와 제목 우측 여백이 개선되어 시각적 일관성이 향상되었습니다.

[coderabbitai]

Walkthrough

파일 업로드 에러 처리와 저장/검증 관련 팝업 로직이 통합 및 개선되었습니다. 파일 업로드 에러 팝업이 하나로 통합되었고, 저장 실패 및 유효성 검증 실패 시 각각 새로운 팝업이 추가되었습니다. 질문 입력 폼에는 즉각적인 에러 메시지가 표시됩니다.

Changes

Cohort / File(s)	Change Summary
팝업 액션 및 상태 통합 service/app/src/entities/game/model/useGamePopupActions.tsx, service/app/src/entities/game/model/state/create/actions.ts, service/app/src/entities/game/model/state/create/state.ts, service/app/src/entities/game/model/state/create/utils.ts	팝업 에러 상태(파일 크기/타입 에러)를 하나의 showFileUploadError로 통합. 저장 실패(showSaveError), 유효성 검증 실패(showValidationError), 라이브러리 등록(이전의 파일 타입 에러) 등 새로운 팝업 액션 추가 및 기존 팝업 액션 리네이밍. 관련 상태 및 초기화 로직도 일괄 수정.
파일 업로드 에러 처리 리팩토링 service/app/src/entities/game/ui/components/fileUploadArea.tsx	파일 업로드 에러 처리에서 기존의 두 개 팝업(showFileSizeError, showFileTypeError)를 하나의 통합 팝업(showFileUploadError)으로 대체. 조건 분기 제거 및 에러 처리 단순화.
저장 버튼 유효성 검증 추가 service/app/src/entities/game/ui/interactions/saveButton.tsx	저장 버튼 클릭 시 질문 유효성 검증을 먼저 수행하고, 에러 발생 시 저장 팝업 대신 유효성 에러 팝업을 띄움. 정상일 때만 저장 확인 팝업 호출.
질문 입력 폼 에러 메시지 표시 service/app/src/entities/game/ui/components/questionInputForm.tsx	질문/답변 입력란 아래에 유효성 에러 발생 시 즉각적으로 에러 메시지(ErrorText 컴포넌트) 렌더링 추가.
질문 카드 스타일 개선 shared/design/src/components/question/index.tsx	질문 카드의 테두리 스타일을 항상 2px로 고정하고, 선택 상태에 따라 색상만 변경. 질문 제목의 오른쪽 패딩을 증가. 이미지 alt 속성의 공백 미세 조정.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant SaveButton
    participant useGamePopupActions
    participant Validation
    participant Popup

    User->>SaveButton: 클릭
    SaveButton->>Validation: 질문 유효성 검증
    alt 유효성 실패
        SaveButton->>useGamePopupActions: showValidationError()
        useGamePopupActions->>Popup: 유효성 에러 팝업 표시
    else 유효성 통과
        SaveButton->>useGamePopupActions: showSaveConfirm()
        useGamePopupActions->>Popup: 저장 확인 팝업 표시
        Popup->>SaveButton: 저장 시도
        alt 저장 실패
            SaveButton->>useGamePopupActions: showSaveError()
            useGamePopupActions->>Popup: 저장 실패 팝업 표시
        end
    end

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~15–20 minutes

Possibly related PRs

• 게임 생성 폼 상태관리 추가 #47: 팝업 상태 및 액션의 초기 구현과 관련, 본 PR은 해당 팝업 상태/액션 구조를 확장 및 개선함.
• 팝업 ui 시스템 구축 및 ui 컴포넌트 디렉토리 정리 #43: 팝업 UI 시스템 및 개별 팝업 컴포넌트의 도입과 직접적으로 연결되어, 본 PR이 해당 시스템을 리팩토링 및 확장함.
• overlay-kit 활용 팝업 관리 로직 리팩토링 #60: 기존 팝업 관리 시스템을 overlay-kit 기반으로 전환한 PR로, 본 PR의 팝업 액션 확장 및 통합과 직접 관련.

Suggested labels

👩🏻‍💻frontend

Poem

🐇
팝업이 하나로, 에러는 똑똑히!
저장 실패도, 검증 실패도
토끼가 알려줘요, 걱정 말아요
질문엔 에러 메시지,
파일 업로드엔 단일 경고
오늘도 깔끔한 코드로 점프!

Note

⚡️ Unit Test Generation is now available in beta!

Learn more here, or try it out under "Finishing Touches" below.

---

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between e4d87d8 and 27c3a70.

⛔ Files ignored due to path filters (1)

• shared/design/public/checker.svg is excluded by !**/*.svg

📒 Files selected for processing (8)

• service/app/src/entities/game/model/state/create/actions.ts (1 hunks)
• service/app/src/entities/game/model/state/create/state.ts (1 hunks)
• service/app/src/entities/game/model/state/create/utils.ts (1 hunks)
• service/app/src/entities/game/model/useGamePopupActions.tsx (5 hunks)
• service/app/src/entities/game/ui/components/fileUploadArea.tsx (2 hunks)
• service/app/src/entities/game/ui/components/questionInputForm.tsx (3 hunks)
• service/app/src/entities/game/ui/interactions/saveButton.tsx (1 hunks)
• shared/design/src/components/question/index.tsx (2 hunks)

✅ Files skipped from review due to trivial changes (3)

• service/app/src/entities/game/model/state/create/state.ts
• service/app/src/entities/game/model/state/create/actions.ts
• service/app/src/entities/game/model/state/create/utils.ts

🚧 Files skipped from review as they are similar to previous changes (3)

• service/app/src/entities/game/ui/components/fileUploadArea.tsx
• service/app/src/entities/game/model/useGamePopupActions.tsx
• service/app/src/entities/game/ui/interactions/saveButton.tsx

🧰 Additional context used

🧬 Code Graph Analysis (1)

service/app/src/entities/game/ui/components/questionInputForm.tsx (1)

shared/design/src/components/input/index.tsx (1)

• ErrorText (175-184)

🔇 Additional comments (5)

service/app/src/entities/game/ui/components/questionInputForm.tsx (2)

5-5: ErrorText 컴포넌트 import 추가가 적절합니다.

공유 디자인 시스템에서 ErrorText 컴포넌트를 import하여 일관된 에러 메시지 스타일링을 사용하는 것이 좋습니다.

---

51-51: 인라인 에러 메시지 표시가 사용자 경험을 개선합니다.

질문과 답안 필드에 각각 조건부로 에러 메시지를 표시하여 사용자에게 즉각적인 피드백을 제공하는 것이 훌륭합니다. 이는 폼 유효성 검사의 접근성과 사용성을 크게 향상시킵니다.

Also applies to: 68-68

shared/design/src/components/question/index.tsx (3)

32-36: border 로직 개선이 일관된 UI를 제공합니다.

항상 2px border를 유지하면서 selected 상태에서만 색상을 변경하는 방식으로 변경하여 레이아웃 shift 없이 일관된 UI를 제공하는 것이 좋습니다.

---

56-56: alt 속성 공백 정리가 코드 품질을 개선합니다.

alt 속성의 불필요한 공백을 제거하여 코드 가독성을 향상시킨 것이 좋습니다.

---

40-40: h3 태그의 pr-[157px]는 이미지·버튼 레이아웃을 반영한 값입니다

pr-[157px] 설정은 절대 위치된 이미지(right-14 → 56px)와 버튼(right-4 → 16px, 버튼 폭 약 32px)을 모두 피하기 위한 값으로,
– 이미지: 56px(offset) + 78px(width) = 134px
– 추가 여유 23px = 157px

따라서 텍스트와 겹침이 없으며 의도된 동작으로 보입니다. 추후 디자인 변경 시 Tailwind spacing scale 활용을 검토해보시면 좋겠습니다.

• 파일: shared/design/src/components/question/index.tsx
• 관련 변경:

- <h3 className="typography-heading-sm-medium … pr-12 …">
+ <h3 className="typography-heading-sm-medium … pr-[157px] …">

✨ Finishing Touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch 58-implement-additional-popups

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Explain this complex logic.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai explain this code block.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and explain its main purpose.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
• @coderabbitai generate unit tests to generate unit tests for this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[kimnamheeee]

@coderabbitai review

[coderabbitai]

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.