[feature] 동아리 지원서 답변 화면 구현 및 관련 컴포넌트 개발#490
Merged
oesnuj merged 10 commits intodevelop-fefrom Jun 4, 2025
Merged
Conversation
1. 동아리 지원서 답변 화면 구현을 위한 AnswerApplicationForm 컴포넌트 신규 추가 2. ClubProfile, QuestionAnswerer, mockData 등을 활용한 화면 구성 3. 하드코딩된 clubId 사용 및 기본 예외 처리 추가
1. 동아리 지원서 답변 데이터를 다루기 위한 새로운 AnswerItem 인터페이스 추가 2. id와 answer 속성을 포함하여 답변 항목의 구조를 정의
1. 단일 답변 및 다중 답변 업데이트를 처리하는 로직 추가 2. 답변 id를 기준으로 답변 데이터를 조회하는 기능 구현 3. 동아리 지원서 답변 관리를 위한 재사용 가능한 훅 제공
1. 동아리 지원서 질문에 대한 답변 처리를 위한 QuestionAnswerer 컴포넌트 신규 추가 2. SHORT_TEXT, LONG_TEXT 유형의 답변 UI 컴포넌트 렌더링 지원 3. 미지원 질문 유형에 대한 기본 예외 처리 추가
✅ Deploy Preview for moadong ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Contributor
|
Warning
|
| 파일/경로 그룹 | 변경 요약 |
|---|---|
| frontend/src/App.tsx | ApplicationForm 삭제, AnswerApplicationForm로 라우트 및 import 교체, 동적 clubid 라우트 TODO 주석 추가 |
| frontend/src/pages/AdminPage/application/ApplicationForm.tsx | ApplicationForm 컴포넌트 및 관련 타입 전체 삭제 |
| frontend/src/pages/AdminPage/application/answer/AnswerApplicationForm.tsx | AnswerApplicationForm 컴포넌트 새로 추가, club 정보 fetch, 질문 렌더링 및 응답 상태 관리 |
| frontend/src/pages/AdminPage/application/answer/AnswerApplicationForm.styles.ts | AnswerApplicationForm용 스타일 컴포넌트(FormTitle, ButtonWrapper, submitButton) 추가 |
| frontend/src/pages/AdminPage/application/components/QuestionAnswerer/QuestionAnswerer.tsx | QuestionAnswerer 컴포넌트 추가, 질문 유형별 입력 필드 분기 렌더링 |
| frontend/src/pages/AdminPage/application/components/QuestionTitle/QuestionTitle.styles.ts | QuestionTitleText 스타일 width → field-sizing: content으로 변경 |
| frontend/src/hooks/useAnswers.ts | useAnswers 커스텀 훅 추가, 응답 상태 배열 관리 및 변경 함수 제공 |
| frontend/src/types/application.ts | AnswerItem 인터페이스(id, answer) 추가 |
Sequence Diagram(s)
sequenceDiagram
participant User
participant AnswerApplicationForm
participant useGetClubDetail
participant useAnswers
participant QuestionAnswerer
User->>AnswerApplicationForm: /application 라우트 접근
AnswerApplicationForm->>useGetClubDetail: club 정보 fetch
useGetClubDetail-->>AnswerApplicationForm: club 데이터 반환
AnswerApplicationForm->>QuestionAnswerer: 각 질문별 렌더링
User->>QuestionAnswerer: 답변 입력
QuestionAnswerer->>useAnswers: onChange 호출로 응답 상태 변경
User->>AnswerApplicationForm: 제출 버튼 클릭
Assessment against linked issues
| Objective (이슈 번호) | Addressed | Explanation |
|---|---|---|
| 반응형 레이아웃 구조 설계, 질문 유형별 입력 필드 컴포넌트 개발, 단답형/장문형/객관식/특수타입 렌더링, 응답 상태 저장 로직, 스타일 조정 (MOA-33) | ❓ | CHOICE, MULTI_CHOICE 등 일부 입력 필드 미구현 |
| 필수 항목 처리 및 유효성 검사 로직 구현 (MOA-33) | ❌ | 필수 항목/유효성 검사 로직 미포함 |
| 모바일/태블릿/PC에서 UI 테스트 및 스타일 조정 (MOA-33) | ❓ | 반응형 스타일 일부 적용 여부 코드상 불명확 |
Assessment against linked issues: Out-of-scope changes
| Code Change (파일 경로 및 라인) | Explanation |
|---|---|
| QuestionTitleText 스타일의 field-sizing 속성 변경 (frontend/src/pages/AdminPage/application/components/QuestionTitle/QuestionTitle.styles.ts) | 본 이슈의 Answer 폼 UI 구현과 직접적 관련이 명확하지 않음. |
Possibly related PRs
- [feature] 지원서 작성/편집 기능 구현 및 질문 컴포넌트 구조화 #445: 기존 ApplicationForm 컴포넌트 및 라우트 추가 PR로, 이번 PR의 ApplicationForm 제거 및 AnswerApplicationForm 교체와 직접적으로 연관됨.
- [feature] 지원서 작성 탭 UI 완성 #452: CreateApplicationForm 컴포넌트 및 라우트 관련 PR로, 본 PR에서 추가된 create-application 라우트와 관련 있음.
Suggested reviewers
- seongwon030
"""
✨ Finishing Touches
- 📝 Generate Docstrings
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.
🪧 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
@coderabbitaiin a new review comment at the desired location with your query. Examples:@coderabbitai explain this code block.@coderabbitai modularize this function.
- PR comments: Tag
@coderabbitaiin 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.@coderabbitai help me debug CodeRabbit configuration file.
Support
Need help? Create a ticket on our support page for assistance with any issues or questions.
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.
CodeRabbit Commands (Invoked using PR comments)
@coderabbitai pauseto pause the reviews on a PR.@coderabbitai resumeto resume the paused reviews.@coderabbitai reviewto trigger an incremental review. This is useful when automatic reviews are disabled for the repository.@coderabbitai full reviewto do a full review from scratch and review all the files again.@coderabbitai summaryto regenerate the summary of the PR.@coderabbitai generate docstringsto generate docstrings for this PR.@coderabbitai generate sequence diagramto generate a sequence diagram of the changes in this PR.@coderabbitai resolveresolve all the CodeRabbit review comments.@coderabbitai configurationto show the current CodeRabbit configuration for the repository.@coderabbitai helpto get help.
Other keywords and placeholders
- Add
@coderabbitai ignoreanywhere in the PR description to prevent this PR from being reviewed. - Add
@coderabbitai summaryto generate the high-level summary at a specific location in the PR description. - Add
@coderabbitaianywhere in the PR title to generate the title automatically.
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.
There was a problem hiding this comment.
Pull Request Overview
This PR introduces a new AnswerApplicationForm for handling club application answers along with its supporting components and hooks, while removing an obsolete ApplicationForm. Key changes include:
- Implementation of AnswerApplicationForm and associated styles.
- Development of QuestionAnswerer to support multiple question types.
- Addition of the useAnswers hook for answer state management.
Reviewed Changes
Copilot reviewed 8 out of 8 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| frontend/src/types/application.ts | Added AnswerItem type definition to support answer data structures. |
| frontend/src/pages/AdminPage/application/components/QuestionTitle/QuestionTitle.styles.ts | Updated styling properties for QuestionTitle but replaced width with a non-standard CSS property. |
| frontend/src/pages/AdminPage/application/components/QuestionAnswerer/QuestionAnswerer.tsx | Introduced a new component to render question-specific answer fields with commented-out code for choice-based questions. |
| frontend/src/pages/AdminPage/application/answer/AnswerApplicationForm.tsx | Created a new component for rendering the answer submission form with club details and question mapping. |
| frontend/src/pages/AdminPage/application/answer/AnswerApplicationForm.styles.ts | Added new styles dedicated to the AnswerApplicationForm component. |
| frontend/src/pages/AdminPage/application/ApplicationForm.tsx | Removed obsolete ApplicationForm code. |
| frontend/src/hooks/useAnswers.ts | Introduced a custom hook to manage answer state updates and retrieval. |
| frontend/src/App.tsx | Updated routing to load AnswerApplicationForm, with comments indicating further route adjustments. |
Comments suppressed due to low confidence (1)
frontend/src/App.tsx:74
- [nitpick] The TODO comment and commented-out route may cause confusion in production. It is recommended to update or remove them once the final routing is determined.
//todo /:clubid로 수정 필요
frontend/src/pages/AdminPage/application/components/QuestionTitle/QuestionTitle.styles.ts
Show resolved
Hide resolved
frontend/src/pages/AdminPage/application/components/QuestionAnswerer/QuestionAnswerer.tsx
Show resolved
Hide resolved
Codecov ReportAttention: Patch coverage is 📢 Thoughts on this report? Let us know! |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 7
🧹 Nitpick comments (3)
frontend/src/pages/AdminPage/application/answer/AnswerApplicationForm.styles.ts (1)
17-37: 컴포넌트 이름을 PascalCase로 변경해야 합니다.React 컴포넌트는 PascalCase 명명 규칙을 따라야 합니다.
다음과 같이 수정하세요:
-export const submitButton = styled.button` +export const SubmitButton = styled.button`그리고 사용하는 곳에서도 업데이트해야 합니다:
- <Styled.submitButton onClick={handleSubmit}>제출하기</Styled.submitButton> + <Styled.SubmitButton onClick={handleSubmit}>제출하기</Styled.SubmitButton>frontend/src/pages/AdminPage/application/components/QuestionAnswerer/QuestionAnswerer.tsx (2)
26-36: 중복된 코드를 리팩토링하는 것을 고려해보세요.여러 질문 타입이 동일한 ShortText 컴포넌트를 사용하고 있습니다. 코드 가독성을 위해 그룹화할 수 있습니다.
다음과 같이 리팩토링할 수 있습니다:
+ const shortTextTypes = ['NAME', 'EMAIL', 'PHONE_NUMBER', 'SHORT_TEXT']; + + if (shortTextTypes.includes(question.type)) { + return ( + <ShortText + {...baseProps} + answer={selectedAnswers[0] ?? ''} + onAnswerChange={(value) => onChange(question.id, value)} + /> + ); + } switch (question.type) { - case 'NAME': - case 'EMAIL': - case 'PHONE_NUMBER': - case 'SHORT_TEXT': - return ( - <ShortText - {...baseProps} - answer={selectedAnswers[0] ?? ''} - onAnswerChange={(value) => onChange(question.id, value)} - /> - );
61-61: 국제화(i18n)를 고려하여 하드코딩된 텍스트를 상수로 분리하세요.오류 메시지가 한국어로 하드코딩되어 있습니다. 향후 다국어 지원을 위해 상수로 분리하는 것을 권장합니다.
상수 파일에 메시지를 정의하고 import하여 사용하세요:
+// constants/messages.ts +export const MESSAGES = { + UNSUPPORTED_QUESTION_TYPE: '지원하지 않는 질문 유형입니다', +}; - return <div>지원하지 않는 질문 유형입니다: {question.type}</div>; + return <div>{MESSAGES.UNSUPPORTED_QUESTION_TYPE}: {question.type}</div>;
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (8)
frontend/src/App.tsx(2 hunks)frontend/src/hooks/useAnswers.ts(1 hunks)frontend/src/pages/AdminPage/application/ApplicationForm.tsx(0 hunks)frontend/src/pages/AdminPage/application/answer/AnswerApplicationForm.styles.ts(1 hunks)frontend/src/pages/AdminPage/application/answer/AnswerApplicationForm.tsx(1 hunks)frontend/src/pages/AdminPage/application/components/QuestionAnswerer/QuestionAnswerer.tsx(1 hunks)frontend/src/pages/AdminPage/application/components/QuestionTitle/QuestionTitle.styles.ts(1 hunks)frontend/src/types/application.ts(1 hunks)
💤 Files with no reviewable changes (1)
- frontend/src/pages/AdminPage/application/ApplicationForm.tsx
🧰 Additional context used
🧬 Code Graph Analysis (2)
frontend/src/hooks/useAnswers.ts (1)
frontend/src/types/application.ts (1)
AnswerItem(51-54)
frontend/src/pages/AdminPage/application/answer/AnswerApplicationForm.tsx (4)
frontend/src/hooks/queries/club/useGetClubDetail.ts (1)
useGetClubDetail(6-20)frontend/src/hooks/useAnswers.ts (1)
useAnswers(4-33)frontend/src/pages/MainPage/MainPage.styles.ts (1)
PageContainer(3-15)frontend/src/mocks/data/mockData.ts (1)
mockData(25-122)
🪛 Biome (1.9.4)
frontend/src/App.tsx
[error] 74-75: Wrap comments inside children within braces.
Unsafe fix: Wrap the comments with braces
(lint/suspicious/noCommentText)
🔇 Additional comments (3)
frontend/src/types/application.ts (1)
51-54: 잘 정의된 인터페이스입니다.
AnswerItem인터페이스가 명확하고 간결하게 정의되어 있습니다. 답변 데이터를 관리하기 위한 구조가 적절합니다.frontend/src/hooks/useAnswers.ts (1)
4-33: 잘 구현된 커스텀 훅입니다.답변 상태 관리 로직이 명확하게 분리되어 있고, 단일/다중 답변 처리가 적절히 구현되었습니다. ID별 중복 제거 로직과 타입 안전성도 잘 보장되어 있습니다.
frontend/src/pages/AdminPage/application/answer/AnswerApplicationForm.tsx (1)
36-43: 프로덕션 환경에서 mockData 사용을 검증해야 합니다.현재 하드코딩된 mock 데이터를 사용하고 있습니다. 실제 API에서 질문 데이터를 가져와야 하는지 확인이 필요합니다.
Mock 데이터 사용이 의도된 것인지 확인하고, 실제 API 연동이 필요한 경우 관련 훅을 구현해야 합니다.
frontend/src/pages/AdminPage/application/components/QuestionTitle/QuestionTitle.styles.ts
Show resolved
Hide resolved
frontend/src/pages/AdminPage/application/answer/AnswerApplicationForm.tsx
Show resolved
Hide resolved
frontend/src/pages/AdminPage/application/answer/AnswerApplicationForm.tsx
Show resolved
Hide resolved
frontend/src/pages/AdminPage/application/answer/AnswerApplicationForm.tsx
Show resolved
Hide resolved
frontend/src/pages/AdminPage/application/components/QuestionAnswerer/QuestionAnswerer.tsx
Show resolved
Hide resolved
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (1)
frontend/src/App.tsx (1)
78-78: JSX 주석 구문을 수정해주세요.JSX 내부에서
//todo형태의 주석은 올바르지 않습니다. JSX 주석은{/* */}형태로만 사용해야 합니다.- {/*//todo /:clubid로 수정 필요*/} + {/* todo /:clubid로 수정 필요 */}
🧹 Nitpick comments (1)
frontend/src/App.tsx (1)
17-17: 테스트 커버리지 개선이 필요합니다.새로운
AnswerApplicationForm컴포넌트 임포트가 테스트로 커버되지 않고 있습니다. 라우팅 변경사항에 대한 테스트 케이스 추가를 고려해주세요.🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 17-17: frontend/src/App.tsx#L17
Added line #L17 was not covered by tests
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
frontend/src/App.tsx(2 hunks)
🧰 Additional context used
🧠 Learnings (1)
frontend/src/App.tsx (1)
Learnt from: seongwon030
PR: Moadong/moadong#195
File: frontend/src/pages/AdminPage/AdminPage.tsx:7-7
Timestamp: 2025-03-19T05:18:07.818Z
Learning: AdminPage.tsx에서 현재 하드코딩된 클럽 ID('67d2e3b9b15c136c6acbf20b')는 로그인 기능 구현 후 동적으로 가져오는 방식으로 수정될 예정입니다.
🪛 GitHub Check: codecov/patch
frontend/src/App.tsx
[warning] 17-17: frontend/src/App.tsx#L17
Added line #L17 was not covered by tests
This was referenced Jun 6, 2025
Merged
This was referenced Jul 11, 2025
Merged
Merged
This was referenced Jul 20, 2025
Merged
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
#️⃣연관된 이슈
📝작업 내용
🚀 주요 기능 추가
🔧 기능 상세
답변 화면 구성
답변 처리 로직
리팩토링
🎨 스타일링
중점적으로 리뷰받고 싶은 부분(선택)
논의하고 싶은 부분(선택)
🫡 참고사항
Summary by CodeRabbit