Conversation
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the 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. Comment |
Summary of ChangesHello @hongik-luke, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! 이 PR은 사용자가 새로운 독서 모임을 쉽게 생성할 수 있도록 돕는 다단계 마법사 기능을 도입합니다. 이와 함께, 기존 모임 검색 및 목록 표시 페이지의 사용자 인터페이스와 경험을 전반적으로 개선하여, 특히 모바일 환경에서의 접근성과 사용 편의성을 향상시켰습니다. 전반적인 디자인 일관성을 위해 새로운 SVG 에셋과 반응형 브레이크포인트 정의도 포함되어 있습니다. Highlights
🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console. Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces a new multi-step wizard for creating reading clubs, including new SVG assets for UI elements like checkboxes, default profiles, and plus/minus icons. It also refactors the club search page to integrate the new club creation flow and improve responsiveness. Key changes include adding a dedicated layout for the club creation page, implementing state management for the wizard form (club name, description, profile, visibility, categories, participants, SNS links), and updating the club search list items to handle application reasons directly on mobile, while retaining a modal for tablet/desktop. The ClubSummary interface was modified to include a reason function (which was an incorrect addition), and the onSubmit signature for the application modal was updated to pass clubId. Additionally, new CSS breakpoints were defined, and various UI components received styling adjustments for better responsiveness and consistency, such as updated category tag spacing and alignment, and responsive height/font sizes for search inputs and club list items. Review comments highlight several issues: an incorrect function signature for onSubmit in search_clublist_item.tsx where clubId is missing, a Tailwind CSS class typo (Body_1_3 should be body_1_3), an invalid Tailwind class (t:box should be t:inline or t:inline-block), a typo in item-center (should be items-center), unused imports in create/page.tsx, inconsistent camelCase and potential typos in variable names (DuplicationCheckisConfirmed, DuplicationCheckisDisabled), a whitespace error in a useMemo dependency array, and hardcoded styles in create/page.tsx that should use design system tokens.
| club: ClubSummary | null; | ||
| onClose: () => void; | ||
| onSubmit: (reason: string) => void; | ||
| onSubmit: (club: number, reason: string) => void; |
There was a problem hiding this comment.
onSubmit 함수의 타입 시그니처가 (club: number, reason: string) => void로 올바르게 변경되었지만, 실제 이 함수를 호출하는 부분에서는 clubId가 누락된 채 onSubmit(reason) 형태로 호출되고 있어 애플리케이션에 버그를 유발합니다. club.clubId를 인자로 함께 전달하도록 호출부를 수정해야 합니다.
| no-scrollbar | ||
| resize-none | ||
| outline-none | ||
| Body_1_3 |
There was a problem hiding this comment.
Tailwind CSS 클래스명에 오타가 있습니다. Body_1_3는 globals.css에 body_1_3으로 정의되어 있으므로, 대문자 B를 소문자 b로 수정해야 스타일이 올바르게 적용됩니다.
| Body_1_3 | |
| body_1_3 |
| <section> | ||
| <h2 className="subhead_4_1 t:subhead_1"> | ||
| 선호하는 독서 카테고리를 선택해주세요!{" "} | ||
| <span className="hidden t:box Gray_4 caption_1_1">(최대 6개)</span> |
There was a problem hiding this comment.
t:box는 유효한 Tailwind CSS 클래스가 아니며 globals.css에도 정의되어 있지 않습니다. 이로 인해 해당 요소에 의도한 스타일이 적용되지 않습니다. t:inline 또는 t:inline-block과 같이 유효한 클래스로 수정해야 합니다.
| <span className="hidden t:box Gray_4 caption_1_1">(최대 6개)</span> | |
| <span className="hidden t:inline Gray_4 caption_1_1">(최대 6개)</span> |
| key={n} | ||
| className={[ | ||
| 'h-[21px] inline-flex items-center justify-center body_1_2', | ||
| 'h-[21px] my-auto py-[1px] inline-flex item-center justify-center body_1_2', |
There was a problem hiding this comment.
Tailwind CSS 클래스명에 오타가 있습니다. item-center가 아니라 items-center가 올바른 클래스명입니다. 이 오타로 인해 flex 아이템의 수직 정렬이 적용되지 않고 있습니다.
| 'h-[21px] my-auto py-[1px] inline-flex item-center justify-center body_1_2', | |
| 'h-[21px] my-auto py-[1px] inline-flex items-center justify-center body_1_2', |
| import Link from "next/link"; | ||
| import StepDot from "@/components/base-ui/Group-Create/StepDot"; | ||
| import Chip from "@/components/base-ui/Group-Create/Chip"; | ||
| import { BOOK_CATEGORIES, BookCategory, PARTICIPANT_LABEL_TO_TYPE, ParticipantLabel, PARTICIPANTS, ParticipantType } from "@/types/groups/groups"; |
There was a problem hiding this comment.
PARTICIPANT_LABEL_TO_TYPE와 ParticipantType이 import되었지만 컴포넌트 내에서 사용되지 않고 있습니다. 불필요한 import는 코드 가독성을 해치고 번들 크기에 미미한 영향을 줄 수 있으므로 제거하는 것이 좋습니다.
| import { BOOK_CATEGORIES, BookCategory, PARTICIPANT_LABEL_TO_TYPE, ParticipantLabel, PARTICIPANTS, ParticipantType } from "@/types/groups/groups"; | |
| import { BOOK_CATEGORIES, BookCategory, ParticipantLabel, PARTICIPANTS } from "@/types/groups/groups"; |
| const DuplicationCheckisConfirmed = nameCheck === "available"; | ||
| const DuplicationCheckisDisabled = !clubName.trim() || nameCheck === "checking" || DuplicationCheckisConfirmed ; |
There was a problem hiding this comment.
변수명 DuplicationCheckisConfirmed와 DuplicationCheckisDisabled에 오타가 있고 camelCase 컨벤션을 따르지 않아 가독성을 해칩니다. isDuplicationCheckConfirmed, isDuplicationCheckDisabled와 같이 더 명확한 이름으로 수정하고, 해당 변수가 사용되는 모든 곳(31, 156, 167 라인)도 함께 변경하는 것을 권장합니다.
| const DuplicationCheckisConfirmed = nameCheck === "available"; | |
| const DuplicationCheckisDisabled = !clubName.trim() || nameCheck === "checking" || DuplicationCheckisConfirmed ; | |
| const isDuplicationCheckConfirmed = nameCheck === "available"; | |
| const isDuplicationCheckDisabled = !clubName.trim() || nameCheck === "checking" || isDuplicationCheckConfirmed ; |
| if (step === 3) return selectedCategories.length > 0 && selectedParticipants.length > 0 && activityArea.trim(); | ||
| if (step === 4) return true; // 선택 | ||
| return false; | ||
| }, [step, clubName, clubDescription,nameCheck ,visibility, selectedCategories, selectedParticipants, activityArea]); |
There was a problem hiding this comment.
useMemo의 의존성 배열에 nameCheck 변수 뒤에 공백이 포함되어 nameCheck 로 잘못 입력되었습니다. 의도치 않은 버그를 유발할 수 있으므로 공백을 제거해야 합니다.
| }, [step, clubName, clubDescription,nameCheck ,visibility, selectedCategories, selectedParticipants, activityArea]); | |
| }, [step, clubName, clubDescription, nameCheck, visibility, selectedCategories, selectedParticipants, activityArea]); |
| <h2 className="mt-10 text-[18px] font-semibold text-[#2C2C2C]">활동 지역을 입력해주세요!</h2> | ||
| <input | ||
| value={activityArea} | ||
| onChange={(e) => setActivityArea(e.target.value)} | ||
| placeholder="활동 지역을 입력해주세요 (40자 제한)" | ||
| className="mt-4 w-full h-[44px] t:h-[56px] rounded-[8px] border border-[#EAE5E2] body_1_3 bg-white px-4 outline-none" | ||
| /> | ||
|
|
||
| <h2 className="mt-10 text-[18px] font-semibold text-[#2C2C2C]"> | ||
| 모임의 대상을 선택해주세요! <span className="text-[12px] text-[#8D8D8D]">(최대 6개)</span> | ||
| </h2> |
There was a problem hiding this comment.
text-[18px], text-[#2C2C2C]와 같이 스타일 속성이 하드코딩되어 있습니다. globals.css에 정의된 디자인 시스템 토큰(subhead_3_1, text-Gray-7 등)을 사용하면 코드의 일관성을 유지하고 향후 유지보수를 용이하게 할 수 있습니다.
| <h2 className="mt-10 text-[18px] font-semibold text-[#2C2C2C]">활동 지역을 입력해주세요!</h2> | |
| <input | |
| value={activityArea} | |
| onChange={(e) => setActivityArea(e.target.value)} | |
| placeholder="활동 지역을 입력해주세요 (40자 제한)" | |
| className="mt-4 w-full h-[44px] t:h-[56px] rounded-[8px] border border-[#EAE5E2] body_1_3 bg-white px-4 outline-none" | |
| /> | |
| <h2 className="mt-10 text-[18px] font-semibold text-[#2C2C2C]"> | |
| 모임의 대상을 선택해주세요! <span className="text-[12px] text-[#8D8D8D]">(최대 6개)</span> | |
| </h2> | |
| <h2 className="mt-10 subhead_3_1 text-Gray-7">활동 지역을 입력해주세요!</h2> | |
| <input | |
| value={activityArea} | |
| onChange={(e) => setActivityArea(e.target.value)} | |
| placeholder="활동 지역을 입력해주세요 (40자 제한)" | |
| className="mt-4 w-full h-[44px] t:h-[56px] rounded-[8px] border border-[#EAE5E2] body_1_3 bg-white px-4 outline-none" | |
| /> | |
| <h2 className="mt-10 subhead_3_1 text-Gray-7"> | |
| 모임의 대상을 선택해주세요! <span className="caption_1_2 text-Gray-4">(최대 6개)</span> | |
| </h2> |
| </aside> | ||
|
|
||
| <main className = "w-full max-w-[1040px]" > | ||
| <main className = "w-full max-w-[1440px]" > |
There was a problem hiding this comment.
여기를 위에 globals.css에서 만든 --breakpoint-d 로 사용해야 될듯?
| className={cx( | ||
| "flex justify-center items-center", | ||
| "w-[90px] h-[32px] t:w-[150px] t:h-[48px]", | ||
| "rounded-full", | ||
| "body_1_3 t:subhead_4_1", | ||
| "bg-White border border-primary-2 t:border-2", | ||
| "hover:bg-Subbrown-4", | ||
| "disabled:text-Gray-4 disabled:border-Gray-4 disabled:hover:bg-White disabled:cursor-not-allowed", | ||
| selected | ||
| ? "bg-primary-2 text-White border-primary-2 hover:bg-primary-1 hover:border-primary-1" | ||
| : "text-Gray-5" |
There was a problem hiding this comment.
여기가 어디 부분이징?
뭔가 공용 컴포넌트면 따로 뺴는게 좋을 듯 !
3 participants
💡 To Reviewers
tailwind 일부버전의 경우에
global.css 에
@theme {
--breakpoint-t: 768px;
--breakpoint-d: 1440px;
}
를 넣어야 적용이 된다는 사실을 알고 수정했습니다.
🔥 작업 내용 (가능한 구체적으로 작성해 주세요)
📸 작업 결과 (스크린샷)
모임 생성 UI
테블릿 / 데스크탑
2026-01-13.151905.mp4
모바일
2026-01-13.152329.mp4
모임 검색 UI 반응형 조절
2026-01-13.152703.mp4
🔗 관련 이슈
Summary by CodeRabbit
New Features
UI/Style Updates
✏️ Tip: You can customize this high-level summary in your review settings.