[fix] 질문 제목 줄바꿈, 설명 커서 노출, 객관식 선택 해제 등 지원서 폼 UI/UX 개선#573
[fix] 질문 제목 줄바꿈, 설명 커서 노출, 객관식 선택 해제 등 지원서 폼 UI/UX 개선#573oesnuj merged 10 commits intodevelop-fefrom
Conversation
✅ Deploy Preview for moadong ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
Warning
|
| 파일/경로 그룹 | 변경 요약 |
|---|---|
| frontend/src/components/application/QuestionDescription/QuestionDescription.tsx | mode에 따라 스타일된 단락 또는 textarea를 조건부 렌더링, auto-resize 로직 개선, 새로운 AnswerText 컴포넌트 추가 |
| frontend/src/components/application/QuestionTitle/QuestionTitle.styles.ts, frontend/src/components/application/QuestionTitle/QuestionTitle.tsx | 제목 컴포넌트 레이아웃을 flex row/column 구조로 변경, input을 contentEditable div로 변경, 모바일 대응 스타일 추가, QuestionTitleId 조건부 렌더링 |
| frontend/src/components/application/questionTypes/Choice.tsx | 단일 선택형 질문에서 이미 선택된 항목 클릭 시 선택 해제(토글) 기능 추가, 선택 여부 판별 로직 개선 |
| frontend/src/constants/APPLICATION_FORM.ts | QUESTION_DESCRIPTION의 최대 길이 200자 → 300자로 변경, placeholder 텍스트 수정 |
| frontend/src/pages/ApplicationFormPage/ApplicationFormPage.styles.ts, frontend/src/pages/ApplicationFormPage/components/ChoiceItem/ChoiceItem.styles.ts | 스타일 컴포넌트에서 불필요한 공백 제거, CSS 속성 포맷 및 선택자 방식 개선 |
| frontend/src/pages/ApplicationFormPage/ApplicationFormPage.tsx, frontend/src/pages/ApplicationFormPage/components/ChoiceItem/ChoiceItem.tsx, frontend/src/pages/ApplicationFormPage/components/QuestionContainer/QuestionContainer.tsx, frontend/src/pages/ClubDetailPage/components/ClubApplyButton/ClubApplyButton.tsx | 코드 포맷팅 및 일관성 개선, 논리/동작 변화 없음 |
| frontend/src/components/common/Footer/Footer.styles.ts, frontend/src/components/common/Footer/Footer.tsx | Footer의 개인정보 처리방침 텍스트를 링크로 변경, 스타일 및 접근성 개선 |
Sequence Diagram(s)
sequenceDiagram
participant User
participant QuestionDescription
participant QuestionTitle
participant Choice
User->>QuestionDescription: mode='answer'인 경우
QuestionDescription-->>User: 스타일된 AnswerText 단락 렌더링
User->>QuestionDescription: mode='builder'인 경우
QuestionDescription-->>User: textarea 렌더링 및 auto-resize
User->>QuestionTitle: 제목 입력/수정
QuestionTitle-->>User: contentEditable div로 입력값 반영
User->>Choice: 단일 선택 항목 클릭
alt 이미 선택됨
Choice-->>User: 선택 해제 (빈 값)
else 선택 안됨
Choice-->>User: 해당 값 선택
end
Estimated code review effort
🎯 3 (Moderate) | ⏱️ ~15–20 minutes
Possibly related PRs
- [feature] 지원서 작성/편집 기능 구현 및 질문 컴포넌트 구조화 #445: 최초 QuestionDescription 컴포넌트 도입 PR로, 본 PR은 해당 컴포넌트의 조건부 렌더링 및 스타일 개선을 직접적으로 확장합니다.
- [feature] CustomDropdown 컴포넌트 구현 및 질문 입력 필드 UX 개선 #466: QuestionDescription의 textarea 자동 크기 조정, 상수 중앙화 등 유사한 개선을 다루며, 본 PR과 중첩되는 부분이 많습니다.
- [refactor] 관리자 페이지에서 지원서 제작 시 글자 수 제한 수정 #568: QUESTION_DESCRIPTION 최대 길이 변경과 관련된 PR로, 본 PR과 상반된 최대 길이 변경을 다루고 있어 관련성이 높습니다.
Suggested labels
🎨 Design
Suggested reviewers
- seongwon030
- lepitaaar
- Zepelown
"""
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
📒 Files selected for processing (2)
frontend/src/components/application/QuestionTitle/QuestionTitle.styles.ts(1 hunks)frontend/src/components/application/QuestionTitle/QuestionTitle.tsx(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- frontend/src/components/application/QuestionTitle/QuestionTitle.tsx
- frontend/src/components/application/QuestionTitle/QuestionTitle.styles.ts
✨ Finishing Touches
- 📝 Generate Docstrings
🧪 Generate unit tests
- Create PR with unit tests
- Post copyable unit tests in a comment
- Commit unit tests in branch
fix/#572-question-ui-placeholder-bug
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 generate unit teststo generate unit tests for 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.
![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 (2)
frontend/src/pages/ClubDetailPage/components/ClubApplyButton/ClubApplyButton.tsx (1)
48-52: alert 사용 대신 UX-일관성 있는 피드백 컴포넌트 고려 권장브라우저 기본
alert는
- 모던 UI 흐름과 맞지 않고
- 동기 블로킹이 발생해 사용 경험을 저하시킬 수 있습니다.
앱 전역에서 사용 중인 토스트/모달 유틸(예:
useToast,ModalProvider)이 있다면 교체를 추천드립니다.- alert('지원모집이 마감되었습니다. 다음에 지원해 주세요.'); + toast.info('지원 모집이 마감되었습니다. 다음에 지원해 주세요.');토스트 훅·컴포넌트가 없다면 추후 도입을 검토해 주세요.
frontend/src/components/application/QuestionTitle/QuestionTitle.styles.ts (1)
12-12: 매직 넘버를 상수로 분리 권장
gap: 6px와margin-top: 4px같은 매직 넘버들을 명명된 상수로 분리하면 코드 가독성과 유지보수성이 향상됩니다.+const LAYOUT_SPACING = { + TITLE_GAP: '6px', + REQUIRED_MARGIN_TOP: '4px', +} as const; export const QuestionTitleRow = styled.div` display: flex; align-items: flex-start; - gap: 6px; + gap: ${LAYOUT_SPACING.TITLE_GAP}; width: 100%; `; export const QuestionRequired = styled.div` width: 8px; height: 8px; - margin-top: 4px; + margin-top: ${LAYOUT_SPACING.REQUIRED_MARGIN_TOP}; border-radius: 50%; background-color: #ff5414; `;Also applies to: 59-59
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (11)
frontend/src/components/application/QuestionDescription/QuestionDescription.tsx(2 hunks)frontend/src/components/application/QuestionTitle/QuestionTitle.styles.ts(2 hunks)frontend/src/components/application/QuestionTitle/QuestionTitle.tsx(3 hunks)frontend/src/components/application/questionTypes/Choice.tsx(2 hunks)frontend/src/constants/APPLICATION_FORM.ts(1 hunks)frontend/src/pages/ApplicationFormPage/ApplicationFormPage.styles.ts(1 hunks)frontend/src/pages/ApplicationFormPage/ApplicationFormPage.tsx(1 hunks)frontend/src/pages/ApplicationFormPage/components/ChoiceItem/ChoiceItem.styles.ts(1 hunks)frontend/src/pages/ApplicationFormPage/components/ChoiceItem/ChoiceItem.tsx(1 hunks)frontend/src/pages/ApplicationFormPage/components/QuestionContainer/QuestionContainer.tsx(1 hunks)frontend/src/pages/ClubDetailPage/components/ClubApplyButton/ClubApplyButton.tsx(2 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
frontend/**/*.{ts,tsx}
📄 CodeRabbit Inference Engine (frontend/.cursorrules)
frontend/**/*.{ts,tsx}: Replace magic numbers with named constants for clarity.
Replace complex or nested ternary operators with if/else statements or IIFEs for readability.
Assign complex boolean conditions to named variables.
Use consistent return types for similar functions and hooks.
Avoid hidden side effects; functions should only perform actions implied by their signature (Single Responsibility Principle).
Use unique, descriptive names for custom wrappers and functions to avoid ambiguity.
Define constants near related logic or ensure names link them clearly.
Files:
frontend/src/pages/ApplicationFormPage/components/ChoiceItem/ChoiceItem.tsxfrontend/src/pages/ClubDetailPage/components/ClubApplyButton/ClubApplyButton.tsxfrontend/src/pages/ApplicationFormPage/ApplicationFormPage.styles.tsfrontend/src/pages/ApplicationFormPage/components/QuestionContainer/QuestionContainer.tsxfrontend/src/pages/ApplicationFormPage/components/ChoiceItem/ChoiceItem.styles.tsfrontend/src/components/application/questionTypes/Choice.tsxfrontend/src/constants/APPLICATION_FORM.tsfrontend/src/pages/ApplicationFormPage/ApplicationFormPage.tsxfrontend/src/components/application/QuestionTitle/QuestionTitle.tsxfrontend/src/components/application/QuestionTitle/QuestionTitle.styles.tsfrontend/src/components/application/QuestionDescription/QuestionDescription.tsx
frontend/**/*.tsx
📄 CodeRabbit Inference Engine (frontend/.cursorrules)
frontend/**/*.tsx: Abstract complex logic/interactions into dedicated components or higher-order components (HOCs).
Separate significantly different conditional UI/logic into distinct components.
Colocate simple, localized logic or use inline definitions to reduce context switching.
Choose field-level or form-level cohesion based on form requirements.
Break down broad state management into smaller, focused hooks or contexts.
Use component composition instead of props drilling.
Files:
frontend/src/pages/ApplicationFormPage/components/ChoiceItem/ChoiceItem.tsxfrontend/src/pages/ClubDetailPage/components/ClubApplyButton/ClubApplyButton.tsxfrontend/src/pages/ApplicationFormPage/components/QuestionContainer/QuestionContainer.tsxfrontend/src/components/application/questionTypes/Choice.tsxfrontend/src/pages/ApplicationFormPage/ApplicationFormPage.tsxfrontend/src/components/application/QuestionTitle/QuestionTitle.tsxfrontend/src/components/application/QuestionDescription/QuestionDescription.tsx
🧠 Learnings (10)
frontend/src/pages/ApplicationFormPage/components/ChoiceItem/ChoiceItem.tsx (10)
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.tsx : Choose field-level or form-level cohesion based on form requirements.
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.{ts,tsx} : Replace magic numbers with named constants for clarity.
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.tsx : Separate significantly different conditional UI/logic into distinct components.
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.{ts,tsx} : Use consistent return types for similar functions and hooks.
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.{ts,tsx} : Replace complex or nested ternary operators with if/else statements or IIFEs for readability.
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.tsx : Use component composition instead of props drilling.
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.{ts,tsx} : Define constants near related logic or ensure names link them clearly.
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.tsx : Colocate simple, localized logic or use inline definitions to reduce context switching.
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.{ts,tsx} : Avoid hidden side effects; functions should only perform actions implied by their signature (Single Responsibility Principle).
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.tsx : Abstract complex logic/interactions into dedicated components or higher-order components (HOCs).
frontend/src/pages/ClubDetailPage/components/ClubApplyButton/ClubApplyButton.tsx (10)
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.tsx : Separate significantly different conditional UI/logic into distinct components.
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.tsx : Colocate simple, localized logic or use inline definitions to reduce context switching.
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.tsx : Use component composition instead of props drilling.
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.tsx : Abstract complex logic/interactions into dedicated components or higher-order components (HOCs).
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.{ts,tsx} : Use consistent return types for similar functions and hooks.
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.{ts,tsx} : Replace complex or nested ternary operators with if/else statements or IIFEs for readability.
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.{ts,tsx} : Define constants near related logic or ensure names link them clearly.
Learnt from: seongwon030
PR: #195
File: frontend/src/pages/AdminPage/AdminPage.tsx:7-7
Timestamp: 2025-03-19T05:18:07.818Z
Learning: AdminPage.tsx에서 현재 하드코딩된 클럽 ID('67d2e3b9b15c136c6acbf20b')는 로그인 기능 구현 후 동적으로 가져오는 방식으로 수정될 예정입니다.
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.{ts,tsx} : Avoid hidden side effects; functions should only perform actions implied by their signature (Single Responsibility Principle).
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.tsx : Choose field-level or form-level cohesion based on form requirements.
frontend/src/pages/ApplicationFormPage/ApplicationFormPage.styles.ts (6)
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.tsx : Choose field-level or form-level cohesion based on form requirements.
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.{ts,tsx} : Replace magic numbers with named constants for clarity.
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.tsx : Separate significantly different conditional UI/logic into distinct components.
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.{ts,tsx} : Define constants near related logic or ensure names link them clearly.
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.tsx : Colocate simple, localized logic or use inline definitions to reduce context switching.
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.{ts,tsx} : Use unique, descriptive names for custom wrappers and functions to avoid ambiguity.
frontend/src/pages/ApplicationFormPage/components/QuestionContainer/QuestionContainer.tsx (4)
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.{ts,tsx} : Replace magic numbers with named constants for clarity.
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.tsx : Separate significantly different conditional UI/logic into distinct components.
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.tsx : Choose field-level or form-level cohesion based on form requirements.
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.tsx : Use component composition instead of props drilling.
frontend/src/pages/ApplicationFormPage/components/ChoiceItem/ChoiceItem.styles.ts (6)
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.tsx : Choose field-level or form-level cohesion based on form requirements.
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.tsx : Separate significantly different conditional UI/logic into distinct components.
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.{ts,tsx} : Replace magic numbers with named constants for clarity.
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.{ts,tsx} : Replace complex or nested ternary operators with if/else statements or IIFEs for readability.
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.tsx : Use component composition instead of props drilling.
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.{ts,tsx} : Use unique, descriptive names for custom wrappers and functions to avoid ambiguity.
frontend/src/constants/APPLICATION_FORM.ts (2)
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.{ts,tsx} : Replace magic numbers with named constants for clarity.
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.{ts,tsx} : Define constants near related logic or ensure names link them clearly.
frontend/src/pages/ApplicationFormPage/ApplicationFormPage.tsx (10)
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.tsx : Separate significantly different conditional UI/logic into distinct components.
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.tsx : Choose field-level or form-level cohesion based on form requirements.
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.tsx : Abstract complex logic/interactions into dedicated components or higher-order components (HOCs).
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.tsx : Colocate simple, localized logic or use inline definitions to reduce context switching.
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.{ts,tsx} : Use consistent return types for similar functions and hooks.
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.tsx : Use component composition instead of props drilling.
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.{ts,tsx} : Replace complex or nested ternary operators with if/else statements or IIFEs for readability.
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.{ts,tsx} : Avoid hidden side effects; functions should only perform actions implied by their signature (Single Responsibility Principle).
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.{ts,tsx} : Replace magic numbers with named constants for clarity.
Learnt from: seongwon030
PR: #195
File: frontend/src/pages/AdminPage/AdminPage.tsx:7-7
Timestamp: 2025-03-19T05:18:07.818Z
Learning: AdminPage.tsx에서 현재 하드코딩된 클럽 ID('67d2e3b9b15c136c6acbf20b')는 로그인 기능 구현 후 동적으로 가져오는 방식으로 수정될 예정입니다.
frontend/src/components/application/QuestionTitle/QuestionTitle.tsx (6)
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.tsx : Separate significantly different conditional UI/logic into distinct components.
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.tsx : Use component composition instead of props drilling.
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.{ts,tsx} : Replace magic numbers with named constants for clarity.
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.{ts,tsx} : Use consistent return types for similar functions and hooks.
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.tsx : Break down broad state management into smaller, focused hooks or contexts.
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.tsx : Choose field-level or form-level cohesion based on form requirements.
frontend/src/components/application/QuestionTitle/QuestionTitle.styles.ts (3)
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.{ts,tsx} : Replace magic numbers with named constants for clarity.
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.tsx : Separate significantly different conditional UI/logic into distinct components.
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.tsx : Choose field-level or form-level cohesion based on form requirements.
frontend/src/components/application/QuestionDescription/QuestionDescription.tsx (2)
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.tsx : Separate significantly different conditional UI/logic into distinct components.
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.tsx : Break down broad state management into smaller, focused hooks or contexts.
🧬 Code Graph Analysis (4)
frontend/src/pages/ClubDetailPage/components/ClubApplyButton/ClubApplyButton.tsx (1)
frontend/src/components/common/Button/Button.tsx (1)
ButtonProps(3-9)
frontend/src/components/application/QuestionTitle/QuestionTitle.tsx (1)
frontend/src/constants/APPLICATION_FORM.ts (1)
APPLICATION_FORM(1-26)
frontend/src/components/application/QuestionTitle/QuestionTitle.styles.ts (1)
frontend/src/styles/mediaQuery.ts (1)
media(6-9)
frontend/src/components/application/QuestionDescription/QuestionDescription.tsx (1)
frontend/src/constants/APPLICATION_FORM.ts (1)
APPLICATION_FORM(1-26)
🔇 Additional comments (18)
frontend/src/pages/ClubDetailPage/components/ClubApplyButton/ClubApplyButton.tsx (1)
39-43: 타입 주석 인라인화 👍
({ isRecruiting }: ButtonProps)형태로 파라미터와 타입을 한곳에 모아 가독성이 좋아졌습니다. 별도 인터페이스를 유지하면서도 호출부와 시그니처를 한눈에 확인할 수 있어 유지보수성이 향상되었습니다.frontend/src/constants/APPLICATION_FORM.ts (1)
10-12: 변경사항이 올바르게 적용되었습니다.질문 설명의 최대 길이를 200자에서 300자로 확장하고, placeholder 텍스트도 일관되게 업데이트했습니다. 상수 정의와 사용이 적절하며 PR 목표와 일치합니다.
frontend/src/pages/ApplicationFormPage/ApplicationFormPage.styles.ts (1)
24-24: 코드 포맷팅이 개선되었습니다.들여쓰기가 일관되게 수정되어 코드 가독성이 향상되었습니다.
frontend/src/pages/ApplicationFormPage/components/ChoiceItem/ChoiceItem.tsx (1)
4-17: 코드 포맷팅이 일관되게 개선되었습니다.컴포넌트의 기능적 변경 없이 들여쓰기와 공백이 일관되게 정리되어 코드 가독성이 향상되었습니다.
frontend/src/pages/ApplicationFormPage/components/QuestionContainer/QuestionContainer.tsx (2)
14-14: 색상 코드 표준화가 적용되었습니다.hex 색상 코드를 소문자로 통일하여 코드 일관성이 개선되었습니다.
21-33: 코드 포맷팅이 개선되었습니다.인터페이스와 컴포넌트의 들여쓰기가 일관되게 정리되어 가독성이 향상되었습니다.
frontend/src/pages/ApplicationFormPage/components/ChoiceItem/ChoiceItem.styles.ts (1)
3-21: 스타일링 로직이 효과적으로 리팩토링되었습니다.TypeScript 제네릭 prop 대신 CSS 속성 선택자
[data-selected='true']를 사용하여 조건부 스타일링을 구현한 것이 좋습니다. 이는 더 표준적이고 유지보수하기 쉬운 접근 방식입니다.추가 개선사항:
- 기본 스타일과 선택된 상태의 스타일이 명확하게 분리되어 있음
- transition 속성이 가독성 있게 포맷팅됨
frontend/src/components/application/QuestionTitle/QuestionTitle.tsx (3)
3-3: 모바일 반응형 처리를 위한 적절한 훅 사용
useIsMobile훅을 사용하여 모바일 환경에서의 UI 차별화를 구현한 것이 좋습니다.
22-25: 모바일에서 질문 번호 숨김 처리가 적절함모바일 화면에서 공간 효율성을 위해 질문 번호를 조건부로 숨기는 로직이 UX 개선에 도움이 됩니다.
27-29: 입력 요소를 textarea로 변경한 것이 적절함
input에서textarea로 변경하고rows={1}을 설정하여 긴 제목의 자동 줄바꿈을 지원하면서도 초기 높이를 유지한 것이 좋은 개선입니다.frontend/src/pages/ApplicationFormPage/ApplicationFormPage.tsx (1)
19-145: 코드 포맷팅 개선 확인일관된 들여쓰기와 포맷팅으로 코드 가독성이 향상되었습니다. 기존 로직과 기능은 그대로 유지되어 안전한 리팩토링입니다.
frontend/src/components/application/questionTypes/Choice.tsx (2)
61-66: 단일 선택 토글 기능 추가가 UX 개선에 도움됨선택된 항목을 다시 클릭하여 선택 해제할 수 있는 기능이 추가되어 사용자 경험이 향상되었습니다. 선택/해제 로직이 명확하게 구현되었습니다.
86-90: 선택 상태 판별 로직 개선다중 선택과 단일 선택 모드를 모두 고려한
isSelected계산 로직이 타입 안전성을 고려하여 잘 구현되었습니다.frontend/src/components/application/QuestionDescription/QuestionDescription.tsx (3)
33-41: 답변 모드를 위한 전용 컴포넌트 추가가 적절함
AnswerText스타일드 컴포넌트를 별도로 생성하여 답변 모드와 빌더 모드의 UI를 명확히 분리한 것이 좋습니다.white-space: pre-wrap으로 줄바꿈 처리도 적절합니다.
51-56: 빌더 모드에서만 자동 크기 조절하도록 개선
useEffect가 빌더 모드에서만 실행되도록 조건을 추가하고, 의존성 배열에mode를 포함한 것이 효율적입니다.
58-61: 조건부 렌더링으로 컴포넌트 분리 잘됨답변 모드에서 early return을 사용하여 다른 UI 로직과 명확히 분리한 것이 코딩 가이드라인을 잘 따른 구현입니다.
frontend/src/components/application/QuestionTitle/QuestionTitle.styles.ts (2)
2-2: 반응형 디자인 구현이 잘됨미디어 쿼리를 활용한 모바일 대응 스타일링이 적절하게 구현되었습니다. 폰트 크기와 행간 조정이 모바일 UX를 고려한 좋은 접근입니다.
Also applies to: 22-25, 50-53
28-32: textarea 스타일링이 적절함
input에서textarea로 변경하면서flex: 1,overflow-wrap: break-word,white-space: pre-wrap등의 속성으로 텍스트 래핑과 반응형 동작을 잘 처리했습니다.Also applies to: 37-38
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
frontend/src/components/common/Footer/Footer.styles.ts(1 hunks)frontend/src/components/common/Footer/Footer.tsx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
frontend/**/*.{ts,tsx}
📄 CodeRabbit Inference Engine (frontend/.cursorrules)
frontend/**/*.{ts,tsx}: Replace magic numbers with named constants for clarity.
Replace complex or nested ternary operators with if/else statements or IIFEs for readability.
Assign complex boolean conditions to named variables.
Use consistent return types for similar functions and hooks.
Avoid hidden side effects; functions should only perform actions implied by their signature (Single Responsibility Principle).
Use unique, descriptive names for custom wrappers and functions to avoid ambiguity.
Define constants near related logic or ensure names link them clearly.
Files:
frontend/src/components/common/Footer/Footer.tsxfrontend/src/components/common/Footer/Footer.styles.ts
frontend/**/*.tsx
📄 CodeRabbit Inference Engine (frontend/.cursorrules)
frontend/**/*.tsx: Abstract complex logic/interactions into dedicated components or higher-order components (HOCs).
Separate significantly different conditional UI/logic into distinct components.
Colocate simple, localized logic or use inline definitions to reduce context switching.
Choose field-level or form-level cohesion based on form requirements.
Break down broad state management into smaller, focused hooks or contexts.
Use component composition instead of props drilling.
Files:
frontend/src/components/common/Footer/Footer.tsx
🧠 Learnings (1)
frontend/src/components/common/Footer/Footer.styles.ts (3)
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.{ts,tsx} : Replace magic numbers with named constants for clarity.
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.tsx : Separate significantly different conditional UI/logic into distinct components.
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.{ts,tsx} : Define constants near related logic or ensure names link them clearly.
3 participants
#️⃣ 연관된 이슈
📝 작업 내용
사용자 지원서 폼과 관리자 페이지에서 다음과 같은 UI/UX 이슈를 수정했습니다.
✅ 사용자 FE
모바일 질문 제목이 UI를 벗어나는 현상 수정
단일 선택 객관식 선택 해제 기능 추가
설명 미입력 시 placeholder 커서 노출 문제 수정
질문 설명이 두 줄 이상일 경우 잘리는 문제 해결
객관식 항목 선택 시 색상 강조
푸터에 개인정보취급방침 추가
✅ 관리자 FE
APPLICATION_FORM.ts상수 수정Summary by CodeRabbit
Summary by CodeRabbit
신규 기능
버그 수정
스타일
리팩터
사소한 작업