[feature] CustomDropdown 컴포넌트 구현 및 질문 입력 필드 UX 개선#466
Conversation
1. CharCount 위치 및 크기 조정으로 UI 개선 2. font-size를 14px로 변경하여 가독성 향상 Co-Authored-By: Seongwon Seo <seongwon0903@gmail.com>
1. maxLength 속성을 추가하여 입력 가능한 최대 문자 수 제한 기능 구현 2. mode에 따라 showMaxChar와 showClearButton 속성 조건부 설정 3. input의 width를 60%로 지정하여 UI 정렬 개선 Co-Authored-By: Seongwon Seo <seongwon0903@gmail.com>
1. QUESTION_TITLE과 QUESTION_DESCRIPTION 상수를 추가하여 제목 및 설명 입력 기능 구현 2. 각 필드에 placeholder와 maxLength를 지정하여 입력 제한 및 사용자 가이드 제공
1. APPLICATION_FORM 상수를 사용하여 제목 입력 필드에 maxLength와 placeholder를 동적으로 설정 2. 입력 값이 maxLength를 초과하지 않도록 onChange 핸들러에 조건 추가
1. 설명 입력 시 텍스트 길이에 따라 입력 필드가 자동으로 크기 조정되도록 구현 2. focus 상태에서 placeholder가 사라지도록 스타일 개선 3. textAreaRef와 useEffect를 활용하여 동적 크기 설정을 적용
1. 기존 input에서 textarea로 변경하여 다중 줄 입력 지원 2. APPLICATION_FORM 상수를 활용해 placeholder와 maxLength를 동적으로 설정 3. 입력 값이 maxLength를 초과하지 않도록 onChange 핸들러에 조건 추가 Co-Authored-By: Seongwon Seo <seongwon0903@gmail.com>
- QUESTION_LABEL_MAP 추가: 질문 유형별 라벨 정의 - DROPDOWN_OPTIONS 추가: 드롭다운 옵션과 라벨 매핑 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. 옵션 선택에 사용할 CustomDropdown 컴포넌트 추가 2. 선택된 옵션 표시 및 클릭 이벤트를 통한 드롭다운 동작 구현 3. 외부에서 전달받은 옵션과 선택 핸들러를 활용 가능하도록 설계 Co-Authored-By: Seongwon Seo <seongwon0903@gmail.com>
1. CustomDropDown 컴포넌트의 스타일 파일 분리 및 작성 2. 드롭다운 선택/비선택 상태에 따른 스타일 차별화 Co-Authored-By: Seongwon Seo <seongwon0903@gmail.com>
1. 기존 드롭다운 구현을 CustomDropdown 컴포넌트로 대체하여 코드 재사용성 및 일관성 향상 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>
✅ Deploy Preview for moadong ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
Warning
|
| 파일/그룹 | 변경 요약 |
|---|---|
| frontend/src/components/common/CustomDropDown/CustomDropDown.styles.ts, frontend/src/components/common/CustomDropDown/CustomDropDown.tsx | 커스텀 드롭다운 컴포넌트 및 스타일 신규 추가 |
| frontend/src/constants/APPLICATION_FORM.ts | 지원서 폼 상수 확장 및 드롭다운 옵션, 라벨 매핑 상수 추가, export 방식 변경 |
| frontend/src/pages/AdminPage/application/components/QuestionBuilder/QuestionBuilder.styles.ts | 드롭다운 관련 스타일 제거, 토글 및 버튼 스타일 개선, 트랜지션 효과 추가 |
| frontend/src/pages/AdminPage/application/components/QuestionBuilder/QuestionBuilder.tsx | 드롭다운 UI를 커스텀 컴포넌트로 교체, 타입 체크 로직 변경, 관련 코드 정리 |
| frontend/src/pages/AdminPage/application/components/QuestionDescription/QuestionDescription.tsx | 설명 입력을 textarea로 변경, 자동 높이 조절, 상수 기반 placeholder/maxLength 적용, 입력 길이 제한 로직 추가 |
| frontend/src/pages/AdminPage/application/components/QuestionTitle/QuestionTitle.styles.ts | 제목 입력 필드 스타일 개선: 100% 폭, placeholder 트랜지션 추가 |
| frontend/src/pages/AdminPage/application/components/QuestionTitle/QuestionTitle.tsx | 상수 기반 placeholder/maxLength 적용, 입력 길이 제한 로직 추가 |
| frontend/src/pages/AdminPage/application/fields/Choice.tsx, frontend/src/pages/AdminPage/application/fields/LongText.tsx | APPLICATION_FORM import 방식 변경 (default → named) |
| frontend/src/pages/AdminPage/application/fields/ShortText.tsx | APPLICATION_FORM import 방식 변경, InputField prop 추가 및 조건부 showMaxChar 적용, maxLength 및 width 설정 |
| frontend/src/components/common/InputField/InputField.styles.ts | CharCount 스타일 위치 및 크기 조정, 폰트 크기 증가 |
| frontend/src/styles/Global.styles.ts | textarea에 Pretendard 폰트 적용 |
| frontend/src/types/application.ts | QUESTION_TYPE_LIST 제거, QuestionType 타입을 QUESTION_LABEL_MAP 기반으로 변경 |
| frontend/src/pages/AdminPage/application/CreateApplicationForm.styles.ts | AddQuestionButton 마진 변경 및 QuestionDivider 신규 추가 |
| frontend/src/pages/AdminPage/application/CreateApplicationForm.tsx | QuestionBuilder id prop을 index+1로 변경, QuestionDivider 추가 |
Sequence Diagram(s)
sequenceDiagram
participant User
participant QuestionBuilder
participant CustomDropdown
User->>QuestionBuilder: 드롭다운 클릭
QuestionBuilder->>CustomDropdown: 옵션 및 선택값 전달
CustomDropdown->>User: 옵션 리스트 표시
User->>CustomDropdown: 옵션 선택
CustomDropdown->>QuestionBuilder: onSelect(선택값)
QuestionBuilder->>QuestionBuilder: 상태 업데이트 및 처리
Assessment against linked issues
| Objective | Addressed | Explanation |
|---|---|---|
| 지원서 작성 페이지 UI 개선 (ShortText, QuestionBuilder, Layout) (FE-133) | ✅ |
Assessment against linked issues: Out-of-scope changes
(해당 변경사항에서 linked issue의 목적과 관련 없는 변경은 발견되지 않았습니다.)
Possibly related PRs
- Moadong/moadong#445: QuestionBuilder 및 지원서 폼 컴포넌트에서 커스텀 드롭다운 도입 및 관련 로직 변경이 직접적으로 연관됨.
- Moadong/moadong#452: 지원서 폼 생성 UI 개선 관련 PR로, 본 PR의 드롭다운 및 QuestionBuilder 변경과 코드 수준에서 연관됨.
Suggested labels
🎨 Design
Suggested reviewers
- seongwon030
"""
📜 Recent review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
frontend/src/pages/AdminPage/application/fields/Choice.tsx(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- frontend/src/pages/AdminPage/application/fields/Choice.tsx
✨ 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! |
There was a problem hiding this comment.
Pull Request Overview
This PR introduces a reusable dropdown component, centralizes form constants, and enhances the UX of question input fields in the application form builder.
- Added
CustomDropdownand replaced native<select>inQuestionBuilder - Improved
ShortTextandLongTextfields with dynamicplaceholder,maxLength, clear button, and auto-resizing for descriptions - Consolidated constants in
APPLICATION_FORMand addedQUESTION_LABEL_MAP/DROPDOWN_OPTIONS
Reviewed Changes
Copilot reviewed 14 out of 14 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| frontend/src/types/application.ts | Switched QuestionType to use QUESTION_LABEL_MAP keys |
| frontend/src/styles/Global.styles.ts | Added global textarea font-family |
| frontend/src/pages/AdminPage/application/fields/ShortText.tsx | Updated import style and added maxLength/count props |
| frontend/src/pages/AdminPage/application/fields/LongText.tsx | Updated import style |
| frontend/src/pages/AdminPage/application/fields/Choice.tsx | Updated import style |
| frontend/src/pages/AdminPage/application/components/QuestionTitle/QuestionTitle.tsx | Hooked APPLICATION_FORM constants into title input |
| frontend/src/pages/AdminPage/application/components/QuestionTitle/QuestionTitle.styles.ts | Extended placeholder/focus styling |
| frontend/src/pages/AdminPage/application/components/QuestionDescription/QuestionDescription.tsx | Converted to textarea with auto-resize logic |
| frontend/src/pages/AdminPage/application/components/QuestionBuilder/QuestionBuilder.tsx | Replaced native <select> with CustomDropdown |
| frontend/src/pages/AdminPage/application/components/QuestionBuilder/QuestionBuilder.styles.ts | Removed old dropdown styles |
| frontend/src/constants/APPLICATION_FORM.ts | Defined APPLICATION_FORM, QUESTION_LABEL_MAP, and DROPDOWN_OPTIONS |
| frontend/src/components/common/InputField/InputField.styles.ts | Adjusted character count positioning |
| frontend/src/components/common/CustomDropDown/CustomDropDown.tsx | New dropdown component implementation |
| frontend/src/components/common/CustomDropDown/CustomDropDown.styles.ts | Styles for CustomDropdown |
Comments suppressed due to low confidence (2)
frontend/src/components/common/CustomDropDown/CustomDropDown.tsx:16
- [nitpick] The component name
CustomDropdowndoesn’t match the file and folder naming (CustomDropDown). Consider renaming either the component or the file/folder for consistent casing.
const CustomDropdown = ({ options, selected, onSelect }: DropdownProps) => {
frontend/src/pages/AdminPage/application/components/QuestionBuilder/QuestionBuilder.tsx:26
- This guard hides fields for question types like EMAIL, PHONE_NUMBER, and NAME since they exist in
QUESTION_LABEL_MAPbut may lack corresponding dropdown options. Ensure all supported types are covered or adjust the condition accordingly.
if (!(type in QUESTION_LABEL_MAP)) {
| }: QuestionDescriptionProps) => { | ||
| const textAreaRef = useRef<HTMLTextAreaElement>(null); | ||
|
|
||
| useEffect(() => { |
There was a problem hiding this comment.
The auto-resize effect only depends on description. If mode switches from 'answer' to 'builder' without a description change, the textarea height won't update. Add mode to the dependency array.
| if (value.length <= APPLICATION_FORM.QUESTION_TITLE.maxLength) { | ||
| onTitleChange?.(value); | ||
| } |
There was a problem hiding this comment.
[nitpick] Since the input already has a maxLength attribute, the manual length check in onChange is redundant. You can simplify onChange to directly call onTitleChange.
| if (value.length <= APPLICATION_FORM.QUESTION_TITLE.maxLength) { | |
| onTitleChange?.(value); | |
| } | |
| onTitleChange?.(value); |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (6)
frontend/src/pages/AdminPage/application/components/QuestionTitle/QuestionTitle.tsx (1)
29-34: onChange 핸들러의 길이 검증 로직 개선 제안현재 구현에서
maxLength속성과 onChange에서의 길이 검증이 중복됩니다. HTML의maxLength속성이 이미 입력 길이를 제한하므로, onChange에서의 추가 검증이 불필요할 수 있습니다.- onChange={(e) => { - const value = e.target.value; - if (value.length <= APPLICATION_FORM.QUESTION_TITLE.maxLength) { - onTitleChange?.(value); - } - }} + onChange={(e) => onTitleChange?.(e.target.value)}다만, 프로그래매틱하게 값을 설정하는 경우를 대비한 추가 보안이라면 현재 구현도 적절합니다.
🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 30-30: frontend/src/pages/AdminPage/application/components/QuestionTitle/QuestionTitle.tsx#L30
Added line #L30 was not covered by testsfrontend/src/pages/AdminPage/application/components/QuestionDescription/QuestionDescription.tsx (2)
38-49: 자동 리사이징 구현이 잘 되었지만 의존성 배열 검토 필요자동 리사이징 로직이 잘 구현되었습니다. 다만 useEffect의 의존성 배열에
mode를 추가하는 것을 고려해보세요:- }, [description]); + }, [description, mode]);
mode가 변경될 때도 높이 재계산이 필요할 수 있습니다.🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 38-38: frontend/src/pages/AdminPage/application/components/QuestionDescription/QuestionDescription.tsx#L38
Added line #L38 was not covered by tests
[warning] 40-40: frontend/src/pages/AdminPage/application/components/QuestionDescription/QuestionDescription.tsx#L40
Added line #L40 was not covered by tests
[warning] 42-42: frontend/src/pages/AdminPage/application/components/QuestionDescription/QuestionDescription.tsx#L42
Added line #L42 was not covered by tests
[warning] 44-44: frontend/src/pages/AdminPage/application/components/QuestionDescription/QuestionDescription.tsx#L44
Added line #L44 was not covered by tests
[warning] 46-47: frontend/src/pages/AdminPage/application/components/QuestionDescription/QuestionDescription.tsx#L46-L47
Added lines #L46 - L47 were not covered by tests
60-65: onChange 핸들러의 중복 검증 로직QuestionTitle 컴포넌트와 동일한 이슈로,
maxLength속성과 onChange에서의 길이 검증이 중복됩니다. HTML의maxLength가 이미 입력을 제한하므로 추가 검증이 불필요할 수 있습니다.- onChange={(e) => { - const value = e.target.value; - if (value.length <= APPLICATION_FORM.QUESTION_DESCRIPTION.maxLength) { - onDescriptionChange?.(value); - } - }} + onChange={(e) => onDescriptionChange?.(e.target.value)}🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 61-61: frontend/src/pages/AdminPage/application/components/QuestionDescription/QuestionDescription.tsx#L61
Added line #L61 was not covered by testsfrontend/src/components/common/CustomDropDown/CustomDropDown.tsx (1)
27-47: 접근성 및 사용성 개선 제안기본 기능은 잘 구현되었지만, 다음과 같은 개선사항을 고려해보세요:
- 키보드 내비게이션 지원
- 외부 클릭 시 드롭다운 닫기
- ARIA 속성 추가
+ import { useEffect, useRef } from 'react'; const CustomDropdown = ({ options, selected, onSelect }: DropdownProps) => { const [open, setOpen] = useState(false); + const dropdownRef = useRef<HTMLDivElement>(null); + useEffect(() => { + const handleClickOutside = (event: MouseEvent) => { + if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) { + setOpen(false); + } + }; + + document.addEventListener('mousedown', handleClickOutside); + return () => document.removeEventListener('mousedown', handleClickOutside); + }, []); return ( - <Styled.DropDownWrapper> + <Styled.DropDownWrapper ref={dropdownRef}> - <Styled.Selected onClick={() => setOpen((prev) => !prev)} open={open}> + <Styled.Selected + onClick={() => setOpen((prev) => !prev)} + open={open} + role="combobox" + aria-expanded={open} + aria-haspopup="listbox" + >🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 27-27: frontend/src/components/common/CustomDropDown/CustomDropDown.tsx#L27
Added line #L27 was not covered by tests
[warning] 29-29: frontend/src/components/common/CustomDropDown/CustomDropDown.tsx#L29
Added line #L29 was not covered by tests
[warning] 36-36: frontend/src/components/common/CustomDropDown/CustomDropDown.tsx#L36
Added line #L36 was not covered by tests
[warning] 39-39: frontend/src/components/common/CustomDropDown/CustomDropDown.tsx#L39
Added line #L39 was not covered by testsfrontend/src/pages/AdminPage/application/components/QuestionBuilder/QuestionBuilder.tsx (1)
128-134: CustomDropdown 구현이 기능과 UX를 개선합니다.주요 개선사항:
MULTI_CHOICE→CHOICE표시 정규화로 UI 일관성 확보onSelect콜백에서 적절한 타입 캐스팅 처리- 상수 기반 옵션 사용으로 유지보수성 향상
타입 캐스팅을 더 안전하게 처리하는 방법을 고려해보세요:
- onSelect={(value) => { - onTypeChange?.(value as QuestionType); - }} + onSelect={(value) => { + if (value in QUESTION_LABEL_MAP) { + onTypeChange?.(value as QuestionType); + } + }}현재
DROPDOWN_OPTIONS가QUESTION_LABEL_MAP에서 파생되므로 안전하지만, 추가적인 런타임 체크로 더욱 견고해집니다.frontend/src/pages/AdminPage/application/components/QuestionBuilder/QuestionBuilder.styles.ts (1)
40-52: ::after 의사 요소를 활용한 부드러운 활성 상태 표시.
opacity전환을 사용한 ::after 의사 요소로 기존 배경색 변경 방식보다 더 부드럽고 정교한 활성 상태 애니메이션을 구현했습니다.전환 시간의 일관성을 위해 고려해보세요:
- transition: opacity 0.1s ease; + transition: opacity 0.2s ease;배경색 전환(0.2s)과 동일한 시간으로 맞추면 더 일관된 애니메이션 경험을 제공할 수 있습니다.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (14)
frontend/src/components/common/CustomDropDown/CustomDropDown.styles.ts(1 hunks)frontend/src/components/common/CustomDropDown/CustomDropDown.tsx(1 hunks)frontend/src/components/common/InputField/InputField.styles.ts(1 hunks)frontend/src/constants/APPLICATION_FORM.ts(2 hunks)frontend/src/pages/AdminPage/application/components/QuestionBuilder/QuestionBuilder.styles.ts(2 hunks)frontend/src/pages/AdminPage/application/components/QuestionBuilder/QuestionBuilder.tsx(3 hunks)frontend/src/pages/AdminPage/application/components/QuestionDescription/QuestionDescription.tsx(1 hunks)frontend/src/pages/AdminPage/application/components/QuestionTitle/QuestionTitle.styles.ts(1 hunks)frontend/src/pages/AdminPage/application/components/QuestionTitle/QuestionTitle.tsx(2 hunks)frontend/src/pages/AdminPage/application/fields/Choice.tsx(1 hunks)frontend/src/pages/AdminPage/application/fields/LongText.tsx(1 hunks)frontend/src/pages/AdminPage/application/fields/ShortText.tsx(2 hunks)frontend/src/styles/Global.styles.ts(1 hunks)frontend/src/types/application.ts(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (5)
frontend/src/pages/AdminPage/application/fields/ShortText.tsx (1)
frontend/src/constants/APPLICATION_FORM.ts (1)
APPLICATION_FORM(1-22)
frontend/src/pages/AdminPage/application/components/QuestionDescription/QuestionDescription.tsx (1)
frontend/src/constants/APPLICATION_FORM.ts (1)
APPLICATION_FORM(1-22)
frontend/src/pages/AdminPage/application/components/QuestionTitle/QuestionTitle.tsx (1)
frontend/src/constants/APPLICATION_FORM.ts (1)
APPLICATION_FORM(1-22)
frontend/src/types/application.ts (1)
frontend/src/constants/APPLICATION_FORM.ts (1)
QUESTION_LABEL_MAP(24-32)
frontend/src/pages/AdminPage/application/components/QuestionBuilder/QuestionBuilder.tsx (2)
frontend/src/constants/APPLICATION_FORM.ts (2)
QUESTION_LABEL_MAP(24-32)DROPDOWN_OPTIONS(36-39)frontend/src/types/application.ts (1)
QuestionType(3-3)
🪛 GitHub Check: codecov/patch
frontend/src/pages/AdminPage/application/components/QuestionDescription/QuestionDescription.tsx
[warning] 2-3: frontend/src/pages/AdminPage/application/components/QuestionDescription/QuestionDescription.tsx#L2-L3
Added lines #L2 - L3 were not covered by tests
[warning] 11-11: frontend/src/pages/AdminPage/application/components/QuestionDescription/QuestionDescription.tsx#L11
Added line #L11 was not covered by tests
[warning] 38-38: frontend/src/pages/AdminPage/application/components/QuestionDescription/QuestionDescription.tsx#L38
Added line #L38 was not covered by tests
[warning] 40-40: frontend/src/pages/AdminPage/application/components/QuestionDescription/QuestionDescription.tsx#L40
Added line #L40 was not covered by tests
[warning] 42-42: frontend/src/pages/AdminPage/application/components/QuestionDescription/QuestionDescription.tsx#L42
Added line #L42 was not covered by tests
[warning] 44-44: frontend/src/pages/AdminPage/application/components/QuestionDescription/QuestionDescription.tsx#L44
Added line #L44 was not covered by tests
[warning] 46-47: frontend/src/pages/AdminPage/application/components/QuestionDescription/QuestionDescription.tsx#L46-L47
Added lines #L46 - L47 were not covered by tests
[warning] 61-61: frontend/src/pages/AdminPage/application/components/QuestionDescription/QuestionDescription.tsx#L61
Added line #L61 was not covered by tests
frontend/src/pages/AdminPage/application/components/QuestionTitle/QuestionTitle.tsx
[warning] 2-2: frontend/src/pages/AdminPage/application/components/QuestionTitle/QuestionTitle.tsx#L2
Added line #L2 was not covered by tests
[warning] 30-30: frontend/src/pages/AdminPage/application/components/QuestionTitle/QuestionTitle.tsx#L30
Added line #L30 was not covered by tests
frontend/src/constants/APPLICATION_FORM.ts
[warning] 1-1: frontend/src/constants/APPLICATION_FORM.ts#L1
Added line #L1 was not covered by tests
[warning] 24-24: frontend/src/constants/APPLICATION_FORM.ts#L24
Added line #L24 was not covered by tests
[warning] 34-34: frontend/src/constants/APPLICATION_FORM.ts#L34
Added line #L34 was not covered by tests
[warning] 36-36: frontend/src/constants/APPLICATION_FORM.ts#L36
Added line #L36 was not covered by tests
frontend/src/components/common/CustomDropDown/CustomDropDown.tsx
[warning] 1-3: frontend/src/components/common/CustomDropDown/CustomDropDown.tsx#L1-L3
Added lines #L1 - L3 were not covered by tests
[warning] 16-17: frontend/src/components/common/CustomDropDown/CustomDropDown.tsx#L16-L17
Added lines #L16 - L17 were not covered by tests
[warning] 19-21: frontend/src/components/common/CustomDropDown/CustomDropDown.tsx#L19-L21
Added lines #L19 - L21 were not covered by tests
[warning] 27-27: frontend/src/components/common/CustomDropDown/CustomDropDown.tsx#L27
Added line #L27 was not covered by tests
[warning] 29-29: frontend/src/components/common/CustomDropDown/CustomDropDown.tsx#L29
Added line #L29 was not covered by tests
[warning] 36-36: frontend/src/components/common/CustomDropDown/CustomDropDown.tsx#L36
Added line #L36 was not covered by tests
[warning] 39-39: frontend/src/components/common/CustomDropDown/CustomDropDown.tsx#L39
Added line #L39 was not covered by tests
[warning] 50-50: frontend/src/components/common/CustomDropDown/CustomDropDown.tsx#L50
Added line #L50 was not covered by tests
frontend/src/components/common/CustomDropDown/CustomDropDown.styles.ts
[warning] 1-1: frontend/src/components/common/CustomDropDown/CustomDropDown.styles.ts#L1
Added line #L1 was not covered by tests
[warning] 3-3: frontend/src/components/common/CustomDropDown/CustomDropDown.styles.ts#L3
Added line #L3 was not covered by tests
[warning] 8-8: frontend/src/components/common/CustomDropDown/CustomDropDown.styles.ts#L8
Added line #L8 was not covered by tests
[warning] 24-24: frontend/src/components/common/CustomDropDown/CustomDropDown.styles.ts#L24
Added line #L24 was not covered by tests
[warning] 36-36: frontend/src/components/common/CustomDropDown/CustomDropDown.styles.ts#L36
Added line #L36 was not covered by tests
[warning] 54-54: frontend/src/components/common/CustomDropDown/CustomDropDown.styles.ts#L54
Added line #L54 was not covered by tests
frontend/src/pages/AdminPage/application/components/QuestionBuilder/QuestionBuilder.tsx
[warning] 7-8: frontend/src/pages/AdminPage/application/components/QuestionBuilder/QuestionBuilder.tsx#L7-L8
Added lines #L7 - L8 were not covered by tests
[warning] 10-10: frontend/src/pages/AdminPage/application/components/QuestionBuilder/QuestionBuilder.tsx#L10
Added line #L10 was not covered by tests
🔇 Additional comments (30)
frontend/src/styles/Global.styles.ts (1)
9-11: 일관된 폰트 적용이 잘 되었습니다!textarea 요소에 Pretendard 폰트를 명시적으로 적용한 것은 좋은 접근입니다. 이는 QuestionDescription 컴포넌트에서 input에서 textarea로 변경된 것과 일관성을 유지합니다.
frontend/src/constants/APPLICATION_FORM.ts (3)
1-22: 상수 구조화 및 타입 안정성이 잘 개선되었습니다!APPLICATION_FORM을 named export로 변경하고 QUESTION_TITLE, QUESTION_DESCRIPTION을 추가한 것은 좋은 개선입니다.
as const어서션을 통해 타입 안정성도 잘 보장하고 있습니다.🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 1-1: frontend/src/constants/APPLICATION_FORM.ts#L1
Added line #L1 was not covered by tests
24-32: QUESTION_LABEL_MAP 구조가 잘 설계되었습니다!한국어 라벨을 중앙집중식으로 관리하는 것은 유지보수에 좋습니다.
as const로 타입 안정성도 보장되어 있어 훌륭합니다.🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 24-24: frontend/src/constants/APPLICATION_FORM.ts#L24
Added line #L24 was not covered by tests
34-39: 드롭다운 옵션 생성 로직이 효율적입니다!DROPDOWN_QUESTION_TYPES를 기반으로 DROPDOWN_OPTIONS를 동적으로 생성하는 접근 방식이 DRY 원칙을 잘 따르고 있습니다. 향후 질문 타입 추가 시에도 쉽게 확장 가능한 구조입니다.
🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 34-34: frontend/src/constants/APPLICATION_FORM.ts#L34
Added line #L34 was not covered by tests
[warning] 36-36: frontend/src/constants/APPLICATION_FORM.ts#L36
Added line #L36 was not covered by testsfrontend/src/components/common/CustomDropDown/CustomDropDown.styles.ts (4)
8-22: Selected 컴포넌트의 동적 스타일링이 잘 구현되었습니다!open 상태에 따른 background와 border 변화가 명확하고, transition 효과로 부드러운 UX를 제공합니다.
user-select: none으로 의도하지 않은 텍스트 선택도 방지하고 있어 좋습니다.🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 8-8: frontend/src/components/common/CustomDropDown/CustomDropDown.styles.ts#L8
Added line #L8 was not covered by tests
24-34: OptionList의 z-index와 shadow 설정이 적절합니다!
z-index: 10과 적절한 box-shadow로 드롭다운이 다른 요소들 위에 잘 표시되도록 설정되어 있습니다.🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 24-24: frontend/src/components/common/CustomDropDown/CustomDropDown.styles.ts#L24
Added line #L24 was not covered by tests
36-52: OptionItem의 호버 및 선택 상태 스타일이 우수합니다!
isSelectedprop에 따른 배경색 변화와 hover 효과가 사용자 경험을 향상시킵니다. transition으로 부드러운 상태 변화도 제공하고 있어 훌륭합니다.🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 36-36: frontend/src/components/common/CustomDropDown/CustomDropDown.styles.ts#L36
Added line #L36 was not covered by tests
54-60: Icon 컴포넌트의 위치 설정이 정확합니다!
pointer-events: none으로 아이콘 클릭 시 부모 요소의 이벤트가 정상 작동하도록 설정되어 있어 좋습니다.🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 54-54: frontend/src/components/common/CustomDropDown/CustomDropDown.styles.ts#L54
Added line #L54 was not covered by testsfrontend/src/pages/AdminPage/application/fields/LongText.tsx (1)
3-3: import 구문 변경이 일관성 있게 적용되었습니다!APPLICATION_FORM이 named export로 변경됨에 따라 import 구문도 올바르게 수정되었습니다.
frontend/src/pages/AdminPage/application/fields/Choice.tsx (1)
5-5: Import 변경 승인
APPLICATION_FORM을 default import에서 named import로 변경한 것은 상수 파일의 export 패턴 변경과 일치하여 적절합니다.frontend/src/components/common/InputField/InputField.styles.ts (1)
85-87: 문자 수 표시 위치 개선 승인문자 수 표시를 입력 필드 아래쪽으로 이동시키고 글자 크기를 증가시킨 변경사항이 적절합니다. 이는 입력 내용과의 겹침을 방지하고 가독성을 향상시킵니다.
frontend/src/pages/AdminPage/application/components/QuestionTitle/QuestionTitle.styles.ts (1)
23-32: 질문 제목 입력 필드 UX 개선 승인전체 너비 사용과 placeholder 애니메이션 효과가 사용자 경험을 향상시킵니다. 0.15초 트랜지션은 자연스러운 애니메이션을 제공합니다.
frontend/src/pages/AdminPage/application/fields/ShortText.tsx (2)
4-4: 상수 Import 변경 승인
APPLICATION_FORM을 named import로 변경한 것은 다른 파일들과 일관성을 유지합니다.
37-40:Details
❓ Verification inconclusive
InputField props 추가 검토
추가된 props들이 적절해 보입니다:
showMaxChar를 답변 모드에서만 표시하는 것이 합리적- 중앙화된 상수 사용으로 일관성 확보
- 명시적인 너비 설정으로 UI 통일성 향상
다만
InputField컴포넌트가 이러한 모든 props를 지원하는지 확인이 필요합니다.
🏁 Script executed:
#!/bin/bash # InputField 컴포넌트의 props 인터페이스 확인 ast-grep --pattern $'interface $_ { $$$ showMaxChar$_: $_ $$$ }' # InputField 컴포넌트 구현 확인 ast-grep --pattern $'const InputField = ({ $$$, showMaxChar, $$$, showClearButton, $$$, width, $$$ }: $_) => { $$$ }'Length of output: 192
InputField 컴포넌트 props 선언 확인 요청
추가된 props들이 적절해 보이나, 실제로InputField가 아래 모든 props를 지원하는지 직접 확인이 필요합니다:
- showMaxChar
- maxLength
- showClearButton
- width
위 props들이
frontend/src/components/InputField.tsx(또는 해당 컴포넌트 정의 파일)의 Props 인터페이스/타입 선언이나 함수 파라미터 디스트럭처링에 포함되어 있는지 검증 부탁드립니다.frontend/src/pages/AdminPage/application/components/QuestionTitle/QuestionTitle.tsx (2)
2-2: 상수 중앙화 개선이 잘 적용되었습니다하드코딩된 값들을
APPLICATION_FORM상수로 대체한 것은 유지보수성 향상에 도움이 됩니다.🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 2-2: frontend/src/pages/AdminPage/application/components/QuestionTitle/QuestionTitle.tsx#L2
Added line #L2 was not covered by tests
25-26: 상수 활용이 적절히 구현되었습니다
maxLength와placeholder값을 중앙화된 상수에서 가져오는 것이 일관성 있게 적용되었습니다.frontend/src/types/application.ts (2)
1-1: 타입 정의 개선을 위한 적절한 import
QUESTION_LABEL_MAP을 import하여 타입 정의에 활용하는 것은 좋은 접근입니다.
3-3: 동적 타입 정의로의 우수한 개선하드코딩된 문자열 리터럴 유니온 타입에서
keyof typeof QUESTION_LABEL_MAP으로 변경한 것은 매우 훌륭한 개선사항입니다. 이를 통해:
- 타입 안전성 향상: QUESTION_LABEL_MAP의 키가 변경되면 타입도 자동으로 업데이트
- 단일 진실 공급원(Single Source of Truth) 원칙 준수
- 유지보수성 향상: 질문 타입 추가/제거 시 한 곳에서만 수정
frontend/src/pages/AdminPage/application/components/QuestionDescription/QuestionDescription.tsx (3)
2-3: 필요한 의존성 import가 적절히 추가되었습니다
APPLICATION_FORM상수와 React hooks를 추가로 import한 것이 적절합니다.🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 2-3: frontend/src/pages/AdminPage/application/components/QuestionDescription/QuestionDescription.tsx#L2-L3
Added lines #L2 - L3 were not covered by tests
11-31: UI 개선을 위한 우수한 스타일 변경input에서 textarea로 변경하고 다음과 같은 스타일 개선사항들이 잘 적용되었습니다:
- 전체 너비 사용 (
width: 100%)- 리사이징 비활성화 (
resize: none)- 오버플로우 숨김 (
overflow: hidden)- 플레이스홀더 fade 애니메이션
이러한 변경으로 사용자 경험이 크게 향상될 것으로 예상됩니다.
🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 11-11: frontend/src/pages/AdminPage/application/components/QuestionDescription/QuestionDescription.tsx#L11
Added line #L11 was not covered by tests
56-57: 상수 활용이 일관성 있게 적용되었습니다
APPLICATION_FORM.QUESTION_DESCRIPTION의maxLength와placeholder를 활용한 것이 좋습니다.frontend/src/components/common/CustomDropDown/CustomDropDown.tsx (4)
5-14: 타입 정의가 명확하고 적절합니다
DropdownOption과DropdownProps인터페이스가 명확하게 정의되었고, 컴포넌트의 API가 직관적입니다.
16-22: 기본 기능이 잘 구현되었습니다상태 관리와 선택 핸들링 로직이 깔끔하게 구현되었습니다.
🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 16-17: frontend/src/components/common/CustomDropDown/CustomDropDown.tsx#L16-L17
Added lines #L16 - L17 were not covered by tests
[warning] 19-21: frontend/src/components/common/CustomDropDown/CustomDropDown.tsx#L19-L21
Added lines #L19 - L21 were not covered by tests
24-26: 적절한 기본값 처리선택된 옵션이 없을 때 "선택하세요" 기본값을 보여주는 로직이 잘 구현되었습니다.
50-50: 컴포넌트 export가 적절합니다default export를 사용하여 컴포넌트를 내보내는 것이 적절합니다.
🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 50-50: frontend/src/components/common/CustomDropDown/CustomDropDown.tsx#L50
Added line #L50 was not covered by testsfrontend/src/pages/AdminPage/application/components/QuestionBuilder/QuestionBuilder.tsx (2)
26-28: 유효성 검사 로직 개선이 효율성을 높입니다.배열 포함 확인(
QUESTION_TYPE_LIST.includes())에서 객체 키 확인(type in QUESTION_LABEL_MAP)으로 변경하여 성능이 개선되고 타입 안전성이 향상되었습니다.
10-10:Details
❓ Verification inconclusive
CustomDropdown 컴포넌트 도입이 UI 일관성을 향상시킵니다.
재사용 가능한 CustomDropdown 컴포넌트로 교체하여 전체 애플리케이션의 UI 일관성이 개선되었습니다.
새로운 CustomDropdown 컴포넌트의 구현을 확인하여 기존 네이티브 select와 동일한 기능을 제공하는지 검증해보세요:
🏁 Script executed:
#!/bin/bash # Description: CustomDropdown 컴포넌트 구현 확인 # Expected: props 인터페이스와 기능이 요구사항을 충족하는지 확인 # CustomDropdown 컴포넌트 파일 확인 cat frontend/src/components/common/CustomDropDown/CustomDropDown.tsx # CustomDropdown의 props 타입 정의 확인 rg "interface.*Props|type.*Props" frontend/src/components/common/CustomDropDown/ -A 10Length of output: 2497
🏁 Script executed:
#!/bin/bash # CustomDropdown 컴포넌트의 접근성(ARIA) 및 키보드 내비게이션 지원 확인 rg -n "aria|role|tabIndex|onKeyDown|onKeyUp|onKeyPress" frontend/src/components/common/CustomDropDown/Length of output: 104
UI 일관성 향상을 위한 CustomDropdown 도입 승인 및 접근성 검토 요청
CustomDropdown 컴포넌트로 교체되어 UI 일관성이 개선되었습니다.
다만, 아래 접근성(ARIA 및 키보드 내비게이션) 요건이 충족되는지 반드시 확인해 주세요:
aria-haspopup,aria-expanded등 ARIA 속성 적용 여부- Tab, Enter/Space, Arrow 키로 드롭다운 열기·닫기 및 옵션 선택 지원 여부
위 사항이 제대로 구현되었는지 검증 부탁드립니다.
🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 10-10: frontend/src/pages/AdminPage/application/components/QuestionBuilder/QuestionBuilder.tsx#L10
Added line #L10 was not covered by testsfrontend/src/pages/AdminPage/application/components/QuestionBuilder/QuestionBuilder.styles.ts (3)
28-28: 텍스트 선택 방지로 UX가 개선되었습니다.
user-select: none추가로 토글 버튼 클릭 시 의도치 않은 텍스트 선택을 방지하여 사용자 경험이 향상되었습니다.
36-38: 일관된 배경색과 동적 테두리로 시각적 일관성이 향상되었습니다.흰색 배경을 고정하고 활성 상태에 따라 테두리 색상만 변경하여 더 깔끔하고 일관된 디자인을 구현했습니다.
73-75: 전환 효과 추가로 상호작용이 더 자연스러워졌습니다.배경색과 텍스트 색상에 전환 효과를 추가하여 토글 버튼의 상태 변화가 더 부드럽고 반응성이 좋아졌습니다.
| import { QUESTION_LABEL_MAP } from '@/constants/APPLICATION_FORM'; | ||
| import { DROPDOWN_OPTIONS } from '@/constants/APPLICATION_FORM'; |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
상수 import 추가가 코드 구조를 개선합니다.
중앙화된 상수 관리로 유지보수성이 향상되었습니다. QUESTION_LABEL_MAP과 DROPDOWN_OPTIONS를 사용하여 타입 안전성과 일관성을 확보했습니다.
정적 분석 도구에서 테스트 커버리지 경고가 발생했습니다. 새로 추가된 import 라인들에 대한 테스트 커버리지를 확인해보세요:
🏁 Script executed:
#!/bin/bash
# Description: QuestionBuilder 컴포넌트의 테스트 커버리지 확인
# Expected: 새로운 상수 사용에 대한 테스트 케이스 존재 여부 확인
# QuestionBuilder 관련 테스트 파일 찾기
fd -e test.tsx -e test.ts -e spec.tsx -e spec.ts | rg -i questionbuilder
# 테스트에서 QUESTION_LABEL_MAP 사용 확인
rg "QUESTION_LABEL_MAP" --type ts --type tsx -A 3 -B 3Length of output: 157
아래 수정된 스크립트로 테스트 커버리지를 다시 확인해보겠습니다. tsx 타입 인식 오류를 우회하고, QuestionBuilder 테스트 파일과 상수 사용 여부를 모두 검사합니다.
🏁 Script executed:
#!/bin/bash
# QuestionBuilder 관련 테스트 파일 찾기
echo "== QuestionBuilder 테스트 파일 검색 =="
find . -type f \( -name "*test.ts" -o -name "*test.tsx" -o -name "*spec.ts" -o -name "*spec.tsx" \) -exec grep -Hi "questionbuilder" {} +
# QUESTION_LABEL_MAP 사용 여부 확인
echo "== QUESTION_LABEL_MAP 테스트 내 사용 여부 =="
grep -R --include="*test.ts*" --include="*test.tsx" --include="*spec.ts*" --include="*spec.tsx" "QUESTION_LABEL_MAP" -n .
# DROPDOWN_OPTIONS 사용 여부 확인
echo "== DROPDOWN_OPTIONS 테스트 내 사용 여부 =="
grep -R --include="*test.ts*" --include="*test.tsx" --include="*spec.ts*" --include="*spec.tsx" "DROPDOWN_OPTIONS" -n .Length of output: 618
QuestionBuilder: 테스트 커버리지 추가 필요
QuestionBuilder 컴포넌트에서 도입된 QUESTION_LABEL_MAP과 DROPDOWN_OPTIONS 상수에 대한 테스트가 현재 존재하지 않습니다. 아래 항목을 확인 후, 관련 테스트 케이스를 추가해주세요.
• QuestionBuilder 테스트 파일에서 QUESTION_LABEL_MAP 사용 검증
• QuestionBuilder 테스트 파일에서 DROPDOWN_OPTIONS 사용 검증
• CustomDropdown 렌더링과 유효성 검사 로직이 올바르게 작동하는지 시나리오별 테스트
🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 7-8: frontend/src/pages/AdminPage/application/components/QuestionBuilder/QuestionBuilder.tsx#L7-L8
Added lines #L7 - L8 were not covered by tests
🤖 Prompt for AI Agents
In
frontend/src/pages/AdminPage/application/components/QuestionBuilder/QuestionBuilder.tsx
around lines 7 to 8, the newly imported constants QUESTION_LABEL_MAP and
DROPDOWN_OPTIONS lack corresponding test coverage. To fix this, add test cases
in the QuestionBuilder test files that verify the usage of QUESTION_LABEL_MAP
and DROPDOWN_OPTIONS. Also, include scenario tests to ensure the CustomDropdown
component renders correctly and its validation logic works as expected when
these constants are used.
seongwon030
left a comment
seongwon030
left a comment
There was a problem hiding this comment.
이제 UI가 거의 끝나가네요 ㅎㅎ 남은 부분 마무리짓고 api까지 열심히 해봅시다!
1. 섹션 구분을 위한 QuestionDivider 스타일 정의 2. 기존 버튼 margin 조정으로 레이아웃 수정
기존 question.id 대신 map index를 활용하여 id 할당 방식을 변경
2 participants
#️⃣연관된 이슈
📝작업 내용
🎨 CustomDropdown 컴포넌트 개발
✏️ 질문 입력 필드 UX 개선
🔧 코드 구조 개선
APPLICATION_FORM,QUESTION_LABEL_MAP추가🐛 버그 수정
🫡 참고사항
성원님과 2시간 짝프로그래밍 진행
공동 작성자 표시를 깜박해서 뒤늦게 rebase로 커밋 메세지 수정했습니다!
추가 수정 사항
1️⃣ 질문 번호 렌더링 개선
[기존 문제]
[개선 사항]
default.mp4
2️⃣ 질문 구분선 및 마진 추가
구분선 상하 마진(40px)을 적용하여 질문 간격을 명확하게 조절
Summary by CodeRabbit
신규 기능
기능 개선
버그 수정
스타일
리팩터