[feature] 동아리 지원서 입력 페이지에 객관식 선택 컴포넌트 연동#493
Conversation
✅ Deploy Preview for moadong ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
Warning
|
| 파일/그룹 | 변경 요약 |
|---|---|
| frontend/src/pages/AdminPage/application/components/QuestionAnswerer/QuestionAnswerer.tsx | QuestionAnswerer 컴포넌트 신규 추가: 질문 타입에 따라 입력 필드 분기 렌더링, Choice 타입 완전 활성화 |
| frontend/src/pages/AdminPage/application/fields/Choice.tsx frontend/src/types/application.ts |
Choice 컴포넌트가 answer/onAnswerChange prop으로 외부 상태 제어, 내부 선택 state 제거, 타입 정의 확장 |
| frontend/src/pages/AdminPage/application/answer/AnswerApplicationForm.tsx | clubId를 URL 파라미터에서 동적으로 가져오도록 변경, 질문 목록을 스타일드 래퍼로 감쌈 |
| frontend/src/pages/AdminPage/application/answer/AnswerApplicationForm.styles.ts | AnswerApplicationForm용 스타일드 컴포넌트(FormTitle, QuestionsWrapper 등) 추가 |
| frontend/src/App.tsx | AnswerApplicationForm 라우팅을 clubId 기반 동적 경로로 변경 |
| frontend/src/pages/AdminPage/application/CreateApplicationForm.tsx frontend/src/pages/AdminPage/application/CreateApplicationForm.styles.ts |
CreateApplicationForm에 제출 버튼 및 스타일 추가 |
| frontend/src/components/common/InputField/InputField.tsx | InputField 기본 배경색을 흰색으로 변경 |
| frontend/src/pages/AdminPage/components/SideBar/SideBar.tsx | 사이드바 탭 순서 변경 및 로그아웃 에러 콘솔 제거 |
| frontend/src/pages/ClubDetailPage/components/ClubApplyButton/ClubApplyButton.tsx | clubId 파라미터 추출 및 향후 지원서 경로 이동 주석 추가(기능 변화 없음) |
Sequence Diagram(s)
sequenceDiagram
participant User
participant AnswerApplicationForm
participant QuestionAnswerer
participant Choice
User->>AnswerApplicationForm: 페이지 접속 (clubId 포함)
AnswerApplicationForm->>QuestionAnswerer: 각 질문에 대해 렌더링
QuestionAnswerer->>Choice: 객관식(CHOICE/MULTI_CHOICE) 질문일 경우 렌더링
User->>Choice: 선택 항목 클릭
Choice->>QuestionAnswerer: onAnswerChange 호출 (선택값 전달)
QuestionAnswerer->>AnswerApplicationForm: onChange 호출 (질문ID, 값 전달)
Assessment against linked issues
| Objective | Addressed | Explanation |
|---|---|---|
| 동아리 지원서 입력 페이지에 객관식 선택 컴포넌트 연동 (MOA-35) | ✅ |
Assessment against linked issues: Out-of-scope changes
해당 변경사항 내에서는 MOA-35의 범위를 벗어나는 기능적 코드 변경이 발견되지 않았습니다.
Possibly related PRs
- Moadong/moadong#445: 어드민 지원서 폼 및 입력 컴포넌트 구조와 스타일을 도입한 PR로, 이번 PR의 기반이 되는 컴포넌트와 폼 구조를 제공합니다.
- Moadong/moadong#490: AnswerApplicationForm에서 clubId 동적 처리, QuestionAnswerer에서 Choice 컴포넌트 활성화 등 본 PR과 직접적으로 연관된 컴포넌트 개선을 포함합니다.
Suggested labels
✨ Feature, 💻 FE
Suggested reviewers
- oesnuj
"""
📜 Recent review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
frontend/src/App.tsx(1 hunks)
🔇 Additional comments (1)
frontend/src/App.tsx (1)
79-81: 라우팅 구조가 깔끔하게 구현되었습니다.동적 매개변수
clubId를 사용한 라우트 패턴이 기존/club/:clubId라우트와 일관성을 유지하고 있으며,AnswerApplicationForm컴포넌트의 import도 적절히 포함되어 있습니다. 지원서 답변 기능을 위한 공개 라우트로서 적절한 위치에 배치되었습니다.
✨ 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.
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}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
frontend/src/pages/AdminPage/application/fields/Choice.tsx (1)
52-52: 불필요한 배열 타입 체크를 제거하는 것을 고려하세요.
answerprop이 항상 배열이라면Array.isArray(answer)체크가 불필요할 수 있습니다.만약
answer가 항상 배열이어야 한다면 다음과 같이 단순화할 수 있습니다:if (isMulti) { - if (Array.isArray(answer)) { - if (answer.includes(value)) { - onAnswerChange?.(answer.filter((v) => v !== value)); - } else { - onAnswerChange?.([...answer, value]); - } - } + if (answer.includes(value)) { + onAnswerChange?.(answer.filter((v) => v !== value)); + } else { + onAnswerChange?.([...answer, value]); + } } else {
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
frontend/src/components/common/InputField/InputField.tsx(1 hunks)frontend/src/pages/AdminPage/application/answer/AnswerApplicationForm.styles.ts(1 hunks)frontend/src/pages/AdminPage/application/answer/AnswerApplicationForm.tsx(2 hunks)frontend/src/pages/AdminPage/application/components/QuestionAnswerer/QuestionAnswerer.tsx(1 hunks)frontend/src/pages/AdminPage/application/fields/Choice.tsx(2 hunks)frontend/src/types/application.ts(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
frontend/src/pages/AdminPage/application/answer/AnswerApplicationForm.tsx (1)
frontend/src/mocks/data/mockData.ts (1)
mockData(25-122)
🔇 Additional comments (10)
frontend/src/pages/AdminPage/application/answer/AnswerApplicationForm.styles.ts (1)
12-16: 새로운 QuestionsWrapper 컴포넌트가 잘 구현되었습니다.flexbox와 50px gap을 사용하여 질문들 간의 일관된 간격을 제공하는 깔끔한 스타일링입니다. 네이밍도 직관적이고 목적이 명확합니다.
frontend/src/components/common/InputField/InputField.tsx (1)
82-82: 입력 필드 배경색 변경이 UI 개선에 도움이 됩니다.기본 배경색을 흰색으로 변경하여 더 깔끔하고 현대적인 외관을 제공합니다.
frontend/src/pages/AdminPage/application/answer/AnswerApplicationForm.tsx (2)
12-14: TODO 코멘트가 적절히 추가되었습니다.useParams를 사용하여 동적으로 clubId를 가져오도록 개선해야 한다는 점이 명확히 표시되어 있습니다. 현재 하드코딩된 값은 개발/테스트 단계에서는 허용 가능하지만, 프로덕션 배포 전에 반드시 수정되어야 합니다.
37-46: QuestionsWrapper를 사용한 레이아웃 개선이 잘 구현되었습니다.새로운 QuestionsWrapper 컴포넌트로 질문들을 감싸서 일관된 간격과 레이아웃을 제공합니다. 각 질문에 대해 적절한 props를 전달하여 답변 상태 관리도 올바르게 연결되어 있습니다.
frontend/src/types/application.ts (1)
44-45: ChoiceProps 인터페이스 확장이 적절합니다.
answer와onAnswerChange프로퍼티를 추가하여 Choice 컴포넌트가 제어 컴포넌트 패턴을 지원할 수 있도록 했습니다.string | string[]타입을 사용하여 단일 선택과 다중 선택을 모두 지원하며, TextProps와 일관된 패턴을 따릅니다.frontend/src/pages/AdminPage/application/components/QuestionAnswerer/QuestionAnswerer.tsx (1)
50-56: Choice 컴포넌트 활성화가 올바르게 구현되었습니다!모든 필요한 props가 적절히 전달되고 있으며, 다른 질문 유형들과 일관된 패턴을 따르고 있습니다.
frontend/src/pages/AdminPage/application/fields/Choice.tsx (4)
22-23: 제어 컴포넌트로의 리팩토링이 잘 구현되었습니다!외부 상태 관리를 통한 제어 컴포넌트 패턴이 올바르게 적용되었습니다.
83-83: 선택 상태 판별 로직이 올바르게 구현되었습니다!
answer.includes(item.value)를 사용한 선택 상태 판별이 명확하고 직관적입니다.
97-105: 선택된 항목의 시각적 피드백이 잘 구현되었습니다!배경색, 텍스트 색상, 테두리 색상을 통한 선택 상태 표시가 사용자 경험을 개선합니다.
52-63:Details
✅ Verification successful
단일 선택과 다중 선택 모드 간 타입 일관성을 확인하세요.
단일 선택 모드에서는
string을, 다중 선택 모드에서는string[]을 반환하고 있습니다. 이는 타입 불일치를 야기할 수 있습니다.다음 스크립트로
onAnswerChange콜백의 타입 정의를 확인해보세요:
🏁 Script executed:
#!/bin/bash # Description: Check the type definition of onAnswerChange callback # Find ChoiceProps interface definition ast-grep --pattern 'interface ChoiceProps { $$$ onAnswerChange$$$ $$$ }' # Also check how onChange is called in QuestionAnswerer rg -A 3 -B 3 "onChange.*question\.id"Length of output: 3441
다음 스크립트로
Choice.tsx내onAnswerChange의 타입 정의 위치와Choice컴포넌트의 props 선언부를 확인해보세요.
🏁 Script executed:
#!/bin/bash # Choice.tsx에서 onAnswerChange 사용 위치 확인 rg -n "onAnswerChange" frontend/src/pages/AdminPage/application/fields/Choice.tsx # 파일 상단(1~200줄) 출력하여 props 타입 또는 인터페이스 확인 sed -n '1,200p' frontend/src/pages/AdminPage/application/fields/Choice.tsxLength of output: 4011
ChoiceProps의 onAnswerChange 타입 정의를 확인하기 위해 아래 스크립트를 실행해주세요.
🏁 Script executed:
#!/bin/bash # ChoiceProps 정의 위치 찾기 rg -n "export.*ChoiceProps" -n frontend/src/types # 첫 번째 파일에서 정의 주변 출력 FILE=$(rg -l "export.*ChoiceProps" -n frontend/src/types | head -n1) sed -n '1,200p' "$FILE"Length of output: 1727
onAnswerChange 타입 일관성 확인 완료
ChoiceProps에서
onAnswerChange?: (value: string | string[]) => void로 정의되어 있어, 단일 선택 모드(string)와 다중 선택 모드(string[]) 모두를 지원합니다. 별도 수정이 필요 없습니다.
seongwon030
left a comment
seongwon030
left a comment
There was a problem hiding this comment.
지원서 제작 탭을 사이드바에 유지할 지는 한 번 더 얘기해보면 좋겠네요!
api연결까지 가 봅시다.
oesnuj
changed the title
There was a problem hiding this comment.
Actionable comments posted: 4
🔭 Outside diff range comments (1)
frontend/src/pages/AdminPage/components/SideBar/SideBar.tsx (1)
46-48: 🛠️ Refactor suggestion에러 로깅 제거를 재고해주세요.
console.error(error)구문이 제거되어 로그아웃 실패 시 디버깅이 어려워질 수 있습니다. 개발 및 운영 환경에서의 에러 추적을 위해 로깅을 유지하는 것을 권장합니다.} catch (error) { + console.error('로그아웃 실패:', error); alert('로그아웃에 실패했습니다.'); }
🧹 Nitpick comments (2)
frontend/src/pages/ClubDetailPage/components/ClubApplyButton/ClubApplyButton.tsx (2)
3-4: 사용하지 않는 import 제거 필요
useGetClubDetail훅이 import되었지만 컴포넌트 내에서 사용되지 않고 있습니다.import { useNavigate, useParams } from 'react-router-dom'; -import { useGetClubDetail } from '@/hooks/queries/club/useGetClubDetail';
51-53: TODO 구현 완료 필요지원서가 있는 동아리에 대한 조건부 리다이렉트 로직 구현이 필요합니다.
recruitmentFormprop을 활용하여 조건을 확인하고 navigation을 활성화할 수 있습니다.구현 예시:
-//TODO: 지원서를 작성한 동아리의 경우에만 리다이렉트 -//navigate(`/application/${clubId}`); +if (recruitmentForm) { + navigate(`/application/${clubId}`); + return; +}TODO 구현을 위한 추가 로직이 필요하시면 도움을 드릴 수 있습니다.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
frontend/src/App.tsx(1 hunks)frontend/src/pages/AdminPage/application/CreateApplicationForm.styles.ts(2 hunks)frontend/src/pages/AdminPage/application/CreateApplicationForm.tsx(1 hunks)frontend/src/pages/AdminPage/application/answer/AnswerApplicationForm.tsx(2 hunks)frontend/src/pages/AdminPage/components/SideBar/SideBar.tsx(1 hunks)frontend/src/pages/ClubDetailPage/components/ClubApplyButton/ClubApplyButton.tsx(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- frontend/src/pages/AdminPage/application/answer/AnswerApplicationForm.tsx
🔇 Additional comments (4)
frontend/src/pages/AdminPage/components/SideBar/SideBar.tsx (1)
18-18: 탭 순서 변경이 적절히 적용되었습니다.'계정 관리' 탭을 마지막으로 이동시킨 것은 UI 플로우 개선에 도움이 됩니다.
frontend/src/pages/AdminPage/application/CreateApplicationForm.styles.ts (2)
34-34: 마진 조정이 적절합니다.버튼 간격을 200px에서 60px로 줄여 더 나은 레이아웃을 제공합니다.
45-48: ButtonWrapper 컴포넌트가 잘 구현되었습니다.버튼을 오른쪽으로 정렬하는 레이아웃이 적절히 구현되었습니다.
frontend/src/pages/ClubDetailPage/components/ClubApplyButton/ClubApplyButton.tsx (1)
46-46: 향후 구현을 위한 적절한 준비navigation 기능 구현을 위한
useNavigate훅 선언이 적절합니다.
frontend/src/pages/AdminPage/application/CreateApplicationForm.styles.ts
Show resolved
Hide resolved
frontend/src/pages/ClubDetailPage/components/ClubApplyButton/ClubApplyButton.tsx
Show resolved
Hide resolved
1. 동아리 지원서 답변 화면 구현을 위한 AnswerApplicationForm 컴포넌트 신규 추가 2. ClubProfile, QuestionAnswerer, mockData 등을 활용한 화면 구성 3. 하드코딩된 clubId 사용 및 기본 예외 처리 추가 Co-Authored-By: Seongwon Seo <seongwon0903@gmail.com>
1. 동아리 지원서 답변 데이터를 다루기 위한 새로운 AnswerItem 인터페이스 추가 2. id와 answer 속성을 포함하여 답변 항목의 구조를 정의
1. 단일 답변 및 다중 답변 업데이트를 처리하는 로직 추가 2. 답변 id를 기준으로 답변 데이터를 조회하는 기능 구현 3. 동아리 지원서 답변 관리를 위한 재사용 가능한 훅 제공
1. 동아리 지원서 질문에 대한 답변 처리를 위한 QuestionAnswerer 컴포넌트 신규 추가 2. SHORT_TEXT, LONG_TEXT 유형의 답변 UI 컴포넌트 렌더링 지원 3. 미지원 질문 유형에 대한 기본 예외 처리 추가
1. 기본 배경색을 `#F5F5F5`에서 `#FFF`로 변경하여 더 일관된 디자인 적용 2. 명확하고 깔끔한 UI 제공을 위해 스타일 업데이트 Co-Authored-By: Seongwon Seo <seongwon0903@gmail.com>
1. 지원서 항목에 답변 데이터(answer)와 답변 변경 핸들러(onAnswerChange) 속성 추가 2. 단일 및 다중 답변 관리 기능 확장을 위한 타입 수정 Co-Authored-By: Seongwon Seo <seongwon0903@gmail.com>
1. answer와 onAnswerChange 속성을 활용하여 선택 상태 관리 로직 최적화 2. 기존 selected 상태를 제거하고 answer.includes()로 판별하도록 변경 3. 빌더 모드 및 답변(UI/기능) 모드의 아이템 추가, 삭제 및 선택 동작 개선 Co-Authored-By: Seongwon Seo <seongwon0903@gmail.com>
Co-Authored-By: Seongwon Seo <seongwon0903@gmail.com>
Co-Authored-By: Seongwon Seo <seongwon0903@gmail.com>
Co-Authored-By: Seongwon Seo <seongwon0903@gmail.com>
Co-Authored-By: Seongwon Seo <seongwon0903@gmail.com>
1. 정적 값 대신 useParams를 사용해 clubId를 동적으로 가져오도록 개선 2. 더 유연하고 유지보수성이 높은 코드 구조를 위한 변경
1. `/application/:clubId` 경로로 변경하여 클럽 ID를 동적으로 받을 수 있도록 수정 2. 기존 주석 처리된 코드 제거 및 관련 TODO 반영 Co-Authored-By: Seongwon Seo <seongwon0903@gmail.com>
1. 클럽 상세 데이터를 가져오기 위해 useGetClubDetail 훅 추가 2. 네비게이션 로직을 위해 useNavigate 및 useParams 활용 3. ClubApplyButton 컴포넌트의 기능 확장을 위한 사전 작업 수행 Co-Authored-By: Seongwon Seo <seongwon0903@gmail.com>
1. useParams를 활용해 clubId를 동적으로 가져올 수 있도록 수정 2. 지원서와 리다이렉트 로직 관련 TODO 주석 추가 3. 향후 기능 확장을 위한 사전 준비 작업 수행 Co-Authored-By: Seongwon Seo <seongwon0903@gmail.com>
1. '계정 관리' 메뉴 항목의 순서를 적절히 조정하여 가독성 및 UI 정렬 개선 2. 기존 순서로 인해 발생할 수 있는 혼란을 방지하기 위한 수정 Co-Authored-By: Seongwon Seo <seongwon0903@gmail.com>
Co-Authored-By: Seongwon Seo <seongwon0903@gmail.com>
Co-Authored-By: Seongwon Seo <seongwon0903@gmail.com>
oesnuj
force-pushed
the
feature/#491-apply-mc-field-MOA-35
branch
from
c0ec7b1 to
be386a1
Compare
There was a problem hiding this comment.
Actionable comments posted: 5
♻️ Duplicate comments (2)
frontend/src/pages/AdminPage/application/CreateApplicationForm.styles.ts (1)
62-65:⚠️ Potential issuepulse 애니메이션이 여전히 정의되지 않았습니다.
이전 리뷰에서 지적된 문제가 해결되지 않았습니다. hover 상태에서
pulse애니메이션을 사용하고 있지만 해당 keyframes가 정의되지 않았습니다.파일 상단에 애니메이션을 정의해주세요:
import styled from 'styled-components'; +const pulseAnimation = ` + @keyframes pulse { + 0% { transform: scale(1); } + 50% { transform: scale(1.05); } + 100% { transform: scale(1); } + } +`; export const submitButton = styled.button` padding: 10px 56px; background-color: #ff5414; border-radius: 10px; border: none; color: #fff; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.4px; transition: background-color 0.2s; margin: 50px 0; + ${pulseAnimation} &:hover { background-color: #ffad8e; animation: pulse 0.4s ease-in-out; } &:active { transform: scale(0.95); } `;frontend/src/App.tsx (1)
78-81: 라우팅 구조가 적절합니다.동적 라우트와 정적 라우트를 구분하여 설정한 것이 좋습니다. 클럽별 지원서 접근과 지원서 생성을 명확히 분리했습니다.
다만 이전 리뷰에서 언급된 대로, 실제로 이 동적 라우트를 사용하는 컴포넌트들의 네비게이션 구현이 필요합니다.
🧹 Nitpick comments (3)
frontend/src/pages/AdminPage/application/answer/AnswerApplicationForm.tsx (1)
12-12: 완료된 TODO 주석을 제거하세요.주석에서 언급한
useParams를 통한 동적 clubId 가져오기가 이미 13번째 줄에서 구현되어 있습니다. 완료된 TODO 주석은 혼란을 방지하기 위해 제거해야 합니다.- //ToDO: useParams를 사용하여 clubId를 동적으로 가져오도록 수정frontend/src/pages/AdminPage/application/answer/AnswerApplicationForm.styles.ts (1)
23-23: 일관된 네이밍 컨벤션을 사용하세요.다른 styled component들은 PascalCase를 사용하는데,
submitButton만 camelCase를 사용하고 있습니다. 일관성을 위해 PascalCase로 변경해야 합니다.-export const submitButton = styled.button` +export const SubmitButton = styled.button`그리고 사용하는 곳에서도 변경하세요:
-<Styled.submitButton>제출하기</Styled.submitButton> +<Styled.SubmitButton>제출하기</Styled.SubmitButton>🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 23-23: frontend/src/pages/AdminPage/application/answer/AnswerApplicationForm.styles.ts#L23
Added line #L23 was not covered by testsfrontend/src/pages/AdminPage/application/components/QuestionAnswerer/QuestionAnswerer.tsx (1)
60-60: 에러 메시지를 사용자 친화적으로 개선하세요.개발자 친화적인 에러 메시지보다는 사용자가 이해할 수 있는 메시지로 변경하는 것이 좋겠습니다.
- return <div>지원하지 않는 질문 유형입니다: {question.type}</div>; + return <div>현재 지원하지 않는 질문 형식입니다. 관리자에게 문의해주세요.</div>;
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (14)
frontend/src/App.tsx(1 hunks)frontend/src/components/common/InputField/InputField.tsx(1 hunks)frontend/src/hooks/useAnswers.ts(1 hunks)frontend/src/pages/AdminPage/application/ApplicationForm.tsx(0 hunks)frontend/src/pages/AdminPage/application/CreateApplicationForm.styles.ts(2 hunks)frontend/src/pages/AdminPage/application/CreateApplicationForm.tsx(1 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/pages/AdminPage/application/fields/Choice.tsx(2 hunks)frontend/src/pages/AdminPage/components/SideBar/SideBar.tsx(1 hunks)frontend/src/pages/ClubDetailPage/components/ClubApplyButton/ClubApplyButton.tsx(2 hunks)frontend/src/types/application.ts(1 hunks)
💤 Files with no reviewable changes (1)
- frontend/src/pages/AdminPage/application/ApplicationForm.tsx
🚧 Files skipped from review as they are similar to previous changes (6)
- frontend/src/pages/AdminPage/components/SideBar/SideBar.tsx
- frontend/src/pages/AdminPage/application/CreateApplicationForm.tsx
- frontend/src/components/common/InputField/InputField.tsx
- frontend/src/pages/ClubDetailPage/components/ClubApplyButton/ClubApplyButton.tsx
- frontend/src/types/application.ts
- frontend/src/pages/AdminPage/application/fields/Choice.tsx
🧰 Additional context used
🧬 Code Graph Analysis (2)
frontend/src/hooks/useAnswers.ts (1)
frontend/src/types/application.ts (1)
AnswerItem(53-56)
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)
🪛 GitHub Check: codecov/patch
frontend/src/hooks/useAnswers.ts
[warning] 1-1: frontend/src/hooks/useAnswers.ts#L1
Added line #L1 was not covered by tests
[warning] 4-5: frontend/src/hooks/useAnswers.ts#L4-L5
Added lines #L4 - L5 were not covered by tests
[warning] 7-9: frontend/src/hooks/useAnswers.ts#L7-L9
Added lines #L7 - L9 were not covered by tests
[warning] 14-17: frontend/src/hooks/useAnswers.ts#L14-L17
Added lines #L14 - L17 were not covered by tests
[warning] 21-21: frontend/src/hooks/useAnswers.ts#L21
Added line #L21 was not covered by tests
[warning] 23-23: frontend/src/hooks/useAnswers.ts#L23
Added line #L23 was not covered by tests
[warning] 25-25: frontend/src/hooks/useAnswers.ts#L25
Added line #L25 was not covered by tests
[warning] 29-30: frontend/src/hooks/useAnswers.ts#L29-L30
Added lines #L29 - L30 were not covered by tests
[warning] 32-32: frontend/src/hooks/useAnswers.ts#L32
Added line #L32 was not covered by tests
frontend/src/pages/AdminPage/application/answer/AnswerApplicationForm.styles.ts
[warning] 1-1: frontend/src/pages/AdminPage/application/answer/AnswerApplicationForm.styles.ts#L1
Added line #L1 was not covered by tests
[warning] 3-3: frontend/src/pages/AdminPage/application/answer/AnswerApplicationForm.styles.ts#L3
Added line #L3 was not covered by tests
[warning] 12-12: frontend/src/pages/AdminPage/application/answer/AnswerApplicationForm.styles.ts#L12
Added line #L12 was not covered by tests
[warning] 18-18: frontend/src/pages/AdminPage/application/answer/AnswerApplicationForm.styles.ts#L18
Added line #L18 was not covered by tests
[warning] 23-23: frontend/src/pages/AdminPage/application/answer/AnswerApplicationForm.styles.ts#L23
Added line #L23 was not covered by tests
frontend/src/pages/AdminPage/application/CreateApplicationForm.styles.ts
[warning] 45-45: frontend/src/pages/AdminPage/application/CreateApplicationForm.styles.ts#L45
Added line #L45 was not covered by tests
[warning] 50-50: frontend/src/pages/AdminPage/application/CreateApplicationForm.styles.ts#L50
Added line #L50 was not covered by tests
frontend/src/pages/AdminPage/application/answer/AnswerApplicationForm.tsx
[warning] 1-9: frontend/src/pages/AdminPage/application/answer/AnswerApplicationForm.tsx#L1-L9
Added lines #L1 - L9 were not covered by tests
[warning] 11-11: frontend/src/pages/AdminPage/application/answer/AnswerApplicationForm.tsx#L11
Added line #L11 was not covered by tests
[warning] 13-13: frontend/src/pages/AdminPage/application/answer/AnswerApplicationForm.tsx#L13
Added line #L13 was not covered by tests
[warning] 15-15: frontend/src/pages/AdminPage/application/answer/AnswerApplicationForm.tsx#L15
Added line #L15 was not covered by tests
[warning] 17-17: frontend/src/pages/AdminPage/application/answer/AnswerApplicationForm.tsx#L17
Added line #L17 was not covered by tests
[warning] 21-21: frontend/src/pages/AdminPage/application/answer/AnswerApplicationForm.tsx#L21
Added line #L21 was not covered by tests
[warning] 24-24: frontend/src/pages/AdminPage/application/answer/AnswerApplicationForm.tsx#L24
Added line #L24 was not covered by tests
[warning] 38-38: frontend/src/pages/AdminPage/application/answer/AnswerApplicationForm.tsx#L38
Added line #L38 was not covered by tests
[warning] 54-54: frontend/src/pages/AdminPage/application/answer/AnswerApplicationForm.tsx#L54
Added line #L54 was not covered by tests
frontend/src/pages/AdminPage/application/components/QuestionAnswerer/QuestionAnswerer.tsx
[warning] 2-4: frontend/src/pages/AdminPage/application/components/QuestionAnswerer/QuestionAnswerer.tsx#L2-L4
Added lines #L2 - L4 were not covered by tests
[warning] 12-12: frontend/src/pages/AdminPage/application/components/QuestionAnswerer/QuestionAnswerer.tsx#L12
Added line #L12 was not covered by tests
[warning] 17-17: frontend/src/pages/AdminPage/application/components/QuestionAnswerer/QuestionAnswerer.tsx#L17
Added line #L17 was not covered by tests
[warning] 30-30: frontend/src/pages/AdminPage/application/components/QuestionAnswerer/QuestionAnswerer.tsx#L30
Added line #L30 was not covered by tests
[warning] 34-34: frontend/src/pages/AdminPage/application/components/QuestionAnswerer/QuestionAnswerer.tsx#L34
Added line #L34 was not covered by tests
🔇 Additional comments (7)
frontend/src/pages/AdminPage/application/CreateApplicationForm.styles.ts (2)
34-34: 마진 조정이 적절합니다.
AddQuestionButton의 하단 마진을 200px에서 60px로 줄인 것은 UI 개선에 도움이 됩니다.
45-48: ButtonWrapper 컴포넌트 구조가 좋습니다.flex layout을 사용하여 버튼을 우측 정렬하는 구조가 적절합니다.
🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 45-45: frontend/src/pages/AdminPage/application/CreateApplicationForm.styles.ts#L45
Added line #L45 was not covered by testsfrontend/src/pages/AdminPage/application/components/QuestionTitle/QuestionTitle.styles.ts (1)
23-23: field-sizing 속성 적용이 UX 개선에 도움됩니다.
width: 100%에서field-sizing: content로 변경하여 입력 내용에 따라 동적으로 크기가 조정되는 것은 좋은 개선입니다. 질문 제목 입력 시 시각적 피드백이 향상됩니다.frontend/src/hooks/useAnswers.ts (2)
4-33: useAnswers 훅 구현이 잘 설계되었습니다.답변 상태 관리를 위한 깔끔한 API를 제공하며, 단일/다중 답변 처리 로직이 적절히 분리되어 있습니다.
🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 4-5: frontend/src/hooks/useAnswers.ts#L4-L5
Added lines #L4 - L5 were not covered by tests
[warning] 7-9: frontend/src/hooks/useAnswers.ts#L7-L9
Added lines #L7 - L9 were not covered by tests
[warning] 14-17: frontend/src/hooks/useAnswers.ts#L14-L17
Added lines #L14 - L17 were not covered by tests
[warning] 21-21: frontend/src/hooks/useAnswers.ts#L21
Added line #L21 was not covered by tests
[warning] 23-23: frontend/src/hooks/useAnswers.ts#L23
Added line #L23 was not covered by tests
[warning] 25-25: frontend/src/hooks/useAnswers.ts#L25
Added line #L25 was not covered by tests
[warning] 29-30: frontend/src/hooks/useAnswers.ts#L29-L30
Added lines #L29 - L30 were not covered by tests
[warning] 32-32: frontend/src/hooks/useAnswers.ts#L32
Added line #L32 was not covered by tests
7-19: 상태 업데이트 로직이 올바릅니다.기존 답변을 필터링한 후 새 답변을 추가하는 방식으로 상태 불변성을 잘 유지하고 있습니다.
🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 7-9: frontend/src/hooks/useAnswers.ts#L7-L9
Added lines #L7 - L9 were not covered by tests
[warning] 14-17: frontend/src/hooks/useAnswers.ts#L14-L17
Added lines #L14 - L17 were not covered by testsfrontend/src/pages/AdminPage/application/answer/AnswerApplicationForm.tsx (1)
35-35: 하드코딩된 mock 데이터 사용을 검토하세요.프로덕션 환경에서는 실제 API에서 폼 데이터를 가져와야 합니다. mock 데이터에 대한 의존성을 제거하고 실제 데이터 소스로 전환하는 계획이 필요합니다.
실제 폼 데이터를 가져올 API가 준비되어 있는지 확인해주세요. 준비되지 않았다면 이슈를 생성하여 API 개발을 추적할 수 있도록 도와드릴까요?
frontend/src/pages/AdminPage/application/components/QuestionAnswerer/QuestionAnswerer.tsx (1)
12-62: 잘 구현된 컴포넌트입니다!QuestionAnswerer 컴포넌트가 깔끔하게 구현되었습니다. 특히 다음 부분들이 우수합니다:
- 명확한 인터페이스 정의와 타입 안전성
- switch 문을 통한 질문 타입별 렌더링 로직
- 일관된 props 전달 패턴
- 지원하지 않는 질문 타입에 대한 적절한 폴백 처리
🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 12-12: frontend/src/pages/AdminPage/application/components/QuestionAnswerer/QuestionAnswerer.tsx#L12
Added line #L12 was not covered by tests
[warning] 17-17: frontend/src/pages/AdminPage/application/components/QuestionAnswerer/QuestionAnswerer.tsx#L17
Added line #L17 was not covered by tests
[warning] 30-30: frontend/src/pages/AdminPage/application/components/QuestionAnswerer/QuestionAnswerer.tsx#L30
Added line #L30 was not covered by tests
[warning] 34-34: frontend/src/pages/AdminPage/application/components/QuestionAnswerer/QuestionAnswerer.tsx#L34
Added line #L34 was not covered by tests
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.styles.ts
Show resolved
Hide resolved
Co-Authored-By: Seongwon Seo <seongwon0903@gmail.com>
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (1)
frontend/src/pages/AdminPage/application/answer/AnswerApplicationForm.tsx (1)
12-12: clubId 타입 안전성 문제가 여전히 해결되지 않았습니다.과거 리뷰에서 제기된 clubId의 타입 안전성 문제가 여전히 존재합니다. URL 파라미터에서 가져온 clubId가 undefined일 수 있으므로, 13번 라인에서
clubId || ''와 같은 임시방편보다는 더 엄격한 타입 체크와 에러 처리가 필요합니다.const { clubId } = useParams<{ clubId: string }>(); + +if (!clubId) { + return <div>유효하지 않은 동아리 ID입니다.</div>; +} + -const { data: clubDetail, error } = useGetClubDetail(clubId || ''); +const { data: clubDetail, error } = useGetClubDetail(clubId);🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 12-12: frontend/src/pages/AdminPage/application/answer/AnswerApplicationForm.tsx#L12
Added line #L12 was not covered by tests
🧹 Nitpick comments (1)
frontend/src/pages/AdminPage/application/answer/AnswerApplicationForm.tsx (1)
35-44: 객관식 선택 컴포넌트 연동이 잘 구현되었습니다.
QuestionsWrapper로 질문들을 구조화하고QuestionAnswerer컴포넌트를 통해 질문 타입별 렌더링 로직을 분리한 것이 좋습니다.selectedAnswers와onChange핸들러의 전달도 적절하게 처리되어 있어 상태 관리가 올바르게 이루어지고 있습니다.다만 정적 분석에서 지적한 대로 해당 코드에 대한 테스트 커버리지가 부족합니다. QuestionAnswerer 컴포넌트의 동작을 검증하는 테스트 케이스 추가를 고려해보세요.
🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 37-37: frontend/src/pages/AdminPage/application/answer/AnswerApplicationForm.tsx#L37
Added line #L37 was not covered by tests
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
frontend/src/App.tsx(1 hunks)frontend/src/pages/AdminPage/application/answer/AnswerApplicationForm.tsx(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- frontend/src/App.tsx
🧰 Additional context used
🧬 Code Graph Analysis (1)
frontend/src/pages/AdminPage/application/answer/AnswerApplicationForm.tsx (1)
frontend/src/mocks/data/mockData.ts (1)
mockData(25-122)
🪛 GitHub Check: codecov/patch
frontend/src/pages/AdminPage/application/answer/AnswerApplicationForm.tsx
[warning] 12-12: frontend/src/pages/AdminPage/application/answer/AnswerApplicationForm.tsx#L12
Added line #L12 was not covered by tests
[warning] 37-37: frontend/src/pages/AdminPage/application/answer/AnswerApplicationForm.tsx#L37
Added line #L37 was not covered by tests
…35' into feature/#491-apply-mc-field-MOA-35
2 participants
#️⃣연관된 이슈
📝작업 내용
이번 PR에서는 AnswerApplicationForm 페이지의 답변 기능을 구현하고 전반적인 UI를 개선했습니다.
주요 변경사항
Choice 컴포넌트 선택 로직 개선
answer.includes()기반의 선택 상태 관리로 변경QuestionAnswerer 컴포넌트 기능 추가
AnswerApplicationForm 스타일 구조 개선
기술적 개선사항
selected상태 제거하고answerprop을 활용한 상태 관리논의하고 싶은 부분(선택)
🫡 참고사항
Summary by CodeRabbit
신규 기능
UI/스타일 개선
버그 수정
기타