π λ³κ²½λ λ°λν νΌ μμ± api μ μ© #90
Conversation
Walkthroughμ΄ PRμ νΌ κ΄λ ¨ UI μ»΄ν¬λνΈλ€μ ꡬ쑰μ μ΄λ²€νΈ μ²λ¦¬λ₯Ό κ°μ ν©λλ€. μ£Όμ λ³κ²½ μ¬νμΌλ‘λ CheckBox λ° RequiredToggle μ»΄ν¬λνΈκ° κΈ°μ‘΄μ λ‘컬 μν λμ Changes
Sequence Diagram(s)sequenceDiagram
participant U as μ¬μ©μ
participant CB as CheckBox/RequiredToggle
participant RHF as react-hook-form
participant CF as CreateForm
participant PE as preventEvent
U->>CB: 체ν¬λ°μ€ ν κΈ μ΄λ²€νΈ λ°μ
CB->>RHF: useControllerλ₯Ό ν΅ν΄ νΌ μν μ
λ°μ΄νΈ
Note right of RHF: μν λ³κ²½ (otherJson, requiredStatus)
U->>CF: νΌ μ μΆ λ²νΌ ν΄λ¦
CF->>PE: preventEvent νΈμΆλ‘ κΈ°λ³Έ μ΄λ²€νΈ λ°©μ§
CF->>RHF: μ μΆ λ°μ΄ν° μμ§ λ° ν¬λ§·ν
CF->>CF: createForm νΈμΆνμ¬ λ°μ΄ν° μ μ‘
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
β¨ Finishing Touches
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? πͺ§ TipsChatThere are 3 ways to chat with CodeRabbit:
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)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![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 (3)
src/shared/ui/AddItemButton/index.tsx (1)
8-15: μ κ·Όμ± κ°μ μ μν μ μμ¬νμ΄ μμ΅λλ€.λ²νΌ ꡬνμ μ λ°μ μΌλ‘ μ λμ΄μμ§λ§, λ€μκ³Ό κ°μ κ°μ μ¬νμ κ³ λ €ν΄λ³΄μλ©΄ μ’μ κ² κ°μ΅λλ€:
<button type="button" className="mx-auto flex items-center gap-5" + aria-label="νλͺ© μΆκ°νκΈ°" onClick={onClick} > - <Plus fill="#448FFF" /> + <Plus fill="var(--color-main-600)" /> <div className="text-body3 text-main-600">μΆκ°νκΈ°</div> </button>
- μ€ν¬λ¦° 리λ μ¬μ©μλ₯Ό μν
aria-labelμΆκ°- νλμ½λ©λ μμ κ°μ μλ§¨ν± ν ν°μΌλ‘ λ³κ²½
src/entities/create-form/ui/CheckBox/index.tsx (1)
19-20: 'etc' νλμ½λ©κ° μμν μ μ
ν κΈ μ'etc'λ¬Έμμ΄λ‘ κ³ μ νλ λ‘μ§μ λ€λ₯Έ κ³³μμλ μ¬μ¬μ©νκ±°λ λ€μ λ³λλ μ¬μ§κ° μλ€λ©΄, μμλ enumμΌλ‘ κ΄λ¦¬νλ νΈμ΄ μ’μ΅λλ€.src/views/create-form/ui/createForm/index.tsx (1)
112-118: νμ μμ μ±μ λμ΄λ κ²μ κ³ λ €ν΄λ³΄μΈμ.μλ‘μ΄ νλλ€μ΄ μ μΆκ°λμμ΅λλ€. νμ μμ μ±μ λμ΄κΈ° μν΄ μμ κ°μ²΄λ₯Ό μ¬μ©νλ κ²μ μ μλ립λλ€:
const DEFAULT_QUESTION = { title: '', formType: 'SENTENCE' as const, options: [], requiredStatus: false, otherJson: null, } as const; // μ¬μ©μ append({ ...DEFAULT_QUESTION });
π Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
π Files selected for processing (12)
src/entities/create-form/ui/CheckBox/index.tsx(1 hunks)src/entities/create-form/ui/CreateFormButton/index.tsx(1 hunks)src/entities/create-form/ui/DeleteButton/index.tsx(1 hunks)src/entities/create-form/ui/FormTypeSelect/index.tsx(3 hunks)src/entities/create-form/ui/RequiredToggle/index.tsx(1 hunks)src/shared/model/preventEvent.ts(1 hunks)src/shared/types/create-form/type.ts(1 hunks)src/shared/ui/AddItemButton/index.tsx(1 hunks)src/shared/ui/PageHeader/index.tsx(1 hunks)src/shared/ui/ToggleButton/index.tsx(1 hunks)src/views/create-form/ui/createForm/index.tsx(3 hunks)src/widgets/create-form/ui/FormContainer/index.tsx(1 hunks)
β Files skipped from review due to trivial changes (3)
- src/entities/create-form/ui/CreateFormButton/index.tsx
- src/entities/create-form/ui/DeleteButton/index.tsx
- src/shared/ui/PageHeader/index.tsx
π Additional comments (22)
src/shared/ui/AddItemButton/index.tsx (1)
3-5: Props νμ μ μκ° κ°μ λμμ΅λλ€!
onClickνΈλ€λ¬μ νμ μReact.MouseEventHandler<HTMLButtonElement>λ‘ λ³κ²½ν κ²μ μ’μ κ°μ μ λλ€. μ΄λ₯Ό ν΅ν΄ λ μ νν νμ μμ μ±μ ν보νκ³ μ΄λ²€νΈ κ°μ²΄μ λν μ κ·Όμ΄ κ°λ₯ν΄μ‘μ΅λλ€.src/entities/create-form/ui/CheckBox/index.tsx (7)
2-4: react-hook-form κ΄λ ¨ import μ μ μ©λ¨
react-hook-formκ³ΌFormValuesλ₯Ό μ μμ μΌλ‘ λΆλ¬μ€κ³ μμΌλ©°, νλ‘μ νΈ κ΅¬μ‘° μ μ μ ν΄ λ³΄μ λλ€.
7-8: Propsμ control, index μΆκ°
ν΄λΉ Propsκ°useControllerμ¬μ©μ μν μ€μν μμ‘΄μ±μ λͺ μνκ³ μμ΄, λͺ ννκ³ μ μ§λ³΄μμλ μ 리ν©λλ€.
12-17: useController μ¬μ© λ°©μ μ κ²
defaultValue: nullλ‘ μ€μ λ λΆλΆμ΄ μ€μ νΌ λ‘μ§κ³Ό νΈνλλμ§ νμΈμ΄ νμν©λλ€.nullμνμμμ νΌ λ°Έλ¦¬λ°μ΄μ , μ μΆ μ λ°μ΄ν° μ²λ¦¬ λ±μ΄ μνλ λλ‘ λμνλμ§ νλ² λ νμΈν΄ μ£ΌμΈμ.
24-28: λ²νΌ νμ μ§μ νμΈ
type="button"μΌλ‘ μ§μ ν΄ νΌ μ μΆμ λ§μμ£Όλ μ²λ¦¬κ° μ μμ μΌλ‘ μ΄λ€μ‘μ΅λλ€. ν΄λ¦ μ΄λ²€νΈ μ νΌμ΄ μκΈ°μΉ μκ² μ μ‘λμ§ μλλ‘ μ€μ λ μ μ΄ μ’μ΅λλ€.
31-31: λμ ν΄λμ€ λ€μ΄λ°
field.valueμ λ°λΌ ν΄λμ€κ° μ μ ν λ³κ²½λμ΄, UI μν ννμ΄ λͺ νν©λλ€.
34-34: μ‘°κ±΄λΆ λ λλ§μ΄ μ§κ΄μ μ λλ€
field.value && <Check />ννλ‘ λΆνμν λλλ§μ΄λ κΈ΄ μΌν μ°μ°μ μ΅μνν μ μ΄ κΉλν©λλ€.
37-37: ν μ€νΈ μμ μ²λ¦¬
field.valueμ¬λΆμ λ°λ₯Έ ν μ€νΈ μμ κ°μ΄ λͺ μμ μ΄μ΄μ κ°λ μ±μ΄ μ’μ΅λλ€.src/shared/model/preventEvent.ts (1)
1-1: λ€μν μ΄λ²€νΈ νμ μ§μ
preventEventν¨μκ°React.FormEvent | React.MouseEventλ₯Ό λͺ¨λ μ²λ¦¬νλλ‘ κ°μ λμ΄, λ²μ©μ±μ΄ ν₯μλμμ΅λλ€.src/entities/create-form/ui/RequiredToggle/index.tsx (4)
2-4: react-hook-form import μ μ μ±
useControllerλ₯Ό ν΅ν νΌ μν κ΄λ¦¬λ₯Ό μνμ¬ νμν μμ‘΄μ±μ μ λΆλ¬μ€κ³ μμ΅λλ€.
6-9: Props μ μ
controlκ³Όindexλ₯Ό ν΅ν΄ νΌ λ°μ΄ν°μ μ κ·Όνλ κ΅¬μ‘°κ° λͺ νν΄μ Έμ μ¬μ¬μ©μ±κ³Ό μ μ§λ³΄μμ±μ΄ λμμ‘μ΅λλ€.
11-16: useControllerλ‘ μ°λλ ν κΈ νλ
defaultValueλ₯Όfalseλ‘ μ€μ νμ¬ νμ μ¬λΆλ₯Ό μ μ΄νλ λ‘μ§μ΄ κ°κ²°νκ³ μ§κ΄μ μ λλ€. μ΄ν νΌ μ μΆ μrequiredStatusκ° μ²λ¦¬λ μ μ λμνλμ§ νμΈν΄ μ£ΌμΈμ.
21-21: ToggleButton κ° μ°λ
value={field.value ?? false}λ₯Ό ν΅ν΄ κΈ°λ³Έκ° λλ½ μν©λ μ°ννλ©°, λ³κ²½ μfield.onChangeλ₯Ό μ¦μ νΈμΆν΄ νΌ μνκ° μλ λ°μλ©λλ€.ꡬν μλκ° λͺ ννλ―λ‘ μ μ§λ³΄μμ μ 리ν©λλ€.src/shared/types/create-form/type.ts (1)
15-16: FormValues μΈν°νμ΄μ€μ μλ‘μ΄ νλκ° μΆκ°λμμ΅λλ€.νΌ μμ± APIμ μ λ°μ΄νΈμ λ§μΆ° νμ νλμ μΆκ° λ°μ΄ν°λ₯Ό μ§μνλλ‘ νμ μ΄ νμ₯λμμ΅λλ€.
λ€μ μ¬νμ νμΈν΄ μ£ΌμΈμ:
requiredStatus: νμ μ λ ₯ μ¬λΆλ₯Ό λνλ΄λ λΆλ¦¬μΈ κ°otherJson: μΆκ° λ°μ΄ν°λ₯Ό JSON λ¬Έμμ΄λ‘ μ μ₯νκ±°λ null κ° νμ©src/shared/ui/ToggleButton/index.tsx (3)
4-7: Props μΈν°νμ΄μ€κ° λͺ ννκ² μ μλμμ΅λλ€.μ»΄ν¬λνΈμ κ³μ½μ λͺ νν νκ³ νμ μμ μ±μ 보μ₯ν©λλ€.
9-13: μ μ΄ μ»΄ν¬λνΈλ‘ 리ν©ν λ§λμμ΅λλ€.λ‘컬 μν λμ propsλ₯Ό ν΅ν μν κ΄λ¦¬λ‘ λ³κ²½λμ΄ μ¬μ¬μ©μ±μ΄ ν₯μλμμ΅λλ€.
16-22: λ²νΌ νμ μ΄ λͺ μμ μΌλ‘ μ§μ λμμ΅λλ€.
type="button"μμ± μΆκ°λ‘ μλνμ§ μμ νΌ μ μΆμ λ°©μ§ν©λλ€.src/entities/create-form/ui/FormTypeSelect/index.tsx (2)
43-46: μ΄λ²€νΈ μ²λ¦¬κ° κ°μ λμμ΅λλ€.
preventEventλ₯Ό μ¬μ©νμ¬ μλνμ§ μμ μ΄λ²€νΈ μ νλ₯Ό λ°©μ§ν©λλ€.
62-67: μ΅μ μ ν νΈλ€λ¬κ° κ°μ λμμ΅λλ€.μ΄λ²€νΈ μ²λ¦¬μ μν μ λ°μ΄νΈ λ‘μ§μ΄ λͺ ννκ² κ΅¬μ±λμμ΅λλ€.
src/widgets/create-form/ui/FormContainer/index.tsx (2)
125-130: AddItemButtonμ μ΄λ²€νΈ μ²λ¦¬κ° κ°μ λμμ΅λλ€.
preventEventλ₯Ό μ¬μ©νμ¬ μμ ν νλͺ© μΆκ°λ₯Ό 보μ₯ν©λλ€.
136-136: νΌ μ»¨νΈλ‘€ μ»΄ν¬λνΈλ€μ propsκ° κ°μ λμμ΅λλ€.
CheckBoxμRequiredToggleμ»΄ν¬λνΈκ°react-hook-formμcontrolμ μ§μ μ¬μ©νλλ‘ λ³κ²½λμμ΅λλ€.Also applies to: 144-144
src/views/create-form/ui/createForm/index.tsx (1)
63-64: νΌ λ°μ΄ν° κ΅¬μ‘°κ° μ μ ν νμ₯λμμ΅λλ€!νμ μ λ ₯ μ¬λΆμ κΈ°ν JSON λ°μ΄ν°κ° API μꡬμ¬νμ λ§κ² μ μΆκ°λμμ΅λλ€.
| onSubmit={(e: React.FormEvent<HTMLFormElement>) => { | ||
| preventEvent(e); | ||
| handleSubmit(onSubmit, (errors) => { | ||
| console.log(errors); | ||
| handleFormErrors(errors, showError); | ||
| })(e); | ||
| }} |
There was a problem hiding this comment.
π οΈ Refactor suggestion
μλ¬ μ²λ¦¬λ₯Ό κ°μ ν΄μ£ΌμΈμ.
μ½μ λ‘κ·Έλ νλ‘λμ νκ²½μμ μ κ±°λμ΄μΌ ν©λλ€. μλ¬ μ²λ¦¬λ₯Ό λ€μκ³Ό κ°μ΄ κ°μ νλ κ²μ μ μλ립λλ€:
onSubmit={(e: React.FormEvent<HTMLFormElement>) => {
preventEvent(e);
handleSubmit(onSubmit, (errors) => {
- console.log(errors);
handleFormErrors(errors, showError);
})(e);
}}π Committable suggestion
βΌοΈ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| onSubmit={(e: React.FormEvent<HTMLFormElement>) => { | |
| preventEvent(e); | |
| handleSubmit(onSubmit, (errors) => { | |
| console.log(errors); | |
| handleFormErrors(errors, showError); | |
| })(e); | |
| }} | |
| onSubmit={(e: React.FormEvent<HTMLFormElement>) => { | |
| preventEvent(e); | |
| handleSubmit(onSubmit, (errors) => { | |
| handleFormErrors(errors, showError); | |
| })(e); | |
| }} |
π‘ λ°°κ²½ λ° κ°μ
λ³κ²½λ λ°λν νΌ μμ± api μ μ©
π μμ λ΄μ©
Summary by CodeRabbit
리ν©ν λ§
λ²κ·Έ μμ