Conversation
- /manage -> /admin으로 경로 변경 - /admin용 레이아웃 구분
|
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
✨ Finishing touches🧪 Generate unit tests (beta)
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 @bini0918, 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은 모임 운영진이 그룹 홈을 효율적으로 관리할 수 있도록 새로운 관리자 UI를 도입합니다. 운영진은 이제 전용 페이지에서 공지사항을 작성하고 책장 항목을 추가할 수 있으며, 기존 댓글 기능에 운영진 전용 관리 옵션이 추가되어 콘텐츠 관리가 용이해졌습니다. 이를 통해 그룹 운영의 편의성과 기능성이 크게 향상될 것입니다. 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. Changelog
Activity
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
이번 PR은 모임 운영진을 위한 UI를 추가하는 작업으로, 공지사항과 책장 관리 페이지 등 많은 기능이 추가되었습니다. 전반적으로 코드가 잘 구성되어 있지만, 몇 가지 개선점을 발견했습니다. 특히 '임시저장' 버튼의 오작동 가능성, 미구현된 기능, 반응형 레이아웃 문제 등은 수정이 필요해 보입니다. 또한, 일부 페이지 컴포넌트가 비대하므로 추후 리팩토링을 통해 더 작은 단위로 분리하면 유지보수성이 향상될 것입니다. 자세한 내용은 각 파일에 남긴 코멘트를 참고해주세요.
| <div className="flex justify-center t:justify-end gap-2 "> | ||
| <button | ||
| type="button" | ||
| onClick={handleCancel} |
There was a problem hiding this comment.
'임시저장' 버튼이 handleCancel 함수를 호출하고 있어, router.back()이 실행됩니다. 이는 사용자가 입력한 내용을 저장하지 않고 뒤로 가기 때문에 버그로 보입니다. 임시저장 기능을 구현하려면 입력된 데이터를 저장하는 별도의 핸들러를 구현해야 합니다. 예를 들어, localStorage에 저장하거나 서버에 임시 저장 요청을 보낼 수 있습니다.
| <div className="flex items-center gap-3"> | ||
| <div className="relative w-6 h-6"> | ||
| <Image | ||
| src="/Calendar.svg" | ||
| alt="날짜" | ||
| fill | ||
| className="object-contain" | ||
| /> | ||
| </div> | ||
| <span className="body_1_2 text-Gray-4">날짜선택</span> | ||
| </div> |
There was a problem hiding this comment.
투표 마감 날짜를 선택하는 기능이 구현되어 있지 않습니다. 현재는 UI만 표시되고 실제 날짜를 선택하거나 상태를 업데이트하는 로직이 없습니다. onClick 핸들러를 추가하여 날짜 선택 모달을 열거나, <input type="date" /> 등을 사용하여 사용자가 날짜를 선택하고 voteDate 상태를 업데이트할 수 있도록 구현해야 합니다.
| <div className="flex w-full max-w-[1040px] justify-center t:justify-end gap-4 mt-6"> | ||
| <button | ||
| type="button" | ||
| onClick={handleCancel} |
There was a problem hiding this comment.
'임시저장' 버튼이 handleCancel 함수를 호출하여 router.back()을 실행합니다. 이는 사용자가 작성한 내용을 저장하지 않고 이전 페이지로 돌아가게 되므로 버그로 보입니다. 임시저장 기능을 구현하려면 폼 데이터를 저장하는 별도의 로직이 필요합니다.
| </div> | ||
|
|
||
| {/* 2. 상세 정보 영역 (Frame 2087328745) */} | ||
| <div className="flex h-[230px] w-[857px] flex-col items-start gap-[20px]"> |
There was a problem hiding this comment.
w-[857px]와 같이 고정된 너비 값을 사용하면 화면 크기가 줄어들었을 때 레이아웃이 깨질 수 있습니다. w-full이나 max-w-full과 같은 반응형 유틸리티를 사용하거나, flex-grow 속성을 활용하여 유연한 레이아웃을 만드는 것을 권장합니다. 다른 고정 너비 값들(w-[132px], w-[115px], w-[61px])도 함께 검토해보시면 좋을 것 같습니다.
| <div className="flex h-[230px] w-[857px] flex-col items-start gap-[20px]"> | |
| <div className="flex h-[230px] flex-1 flex-col items-start gap-[20px] min-w-0"> |
| <input | ||
| type="text" | ||
| value={meetingStartDate} | ||
| onChange={(e) => setMeetingStartDate(e.target.value)} | ||
| placeholder="2000.00.00의 양식으로 작성해주세요" | ||
| className="flex-1 px-4 py-3 h-14 rounded-[8px] border border-Subbrown-4 bg-White text-Gray-7 body_1_3 placeholder:text-Gray-3" | ||
| /> |
There was a problem hiding this comment.
모임 날짜를 type="text"로 받고 있어 사용자가 형식에 맞지 않게 입력할 수 있습니다. 이는 데이터 일관성을 해칠 수 있고 사용자 경험에도 좋지 않습니다. 브라우저 네이티브 <input type="date" />를 사용하거나, 일관된 UI를 위해 별도의 달력/데이트 피커 컴포넌트를 사용하는 것을 고려해보세요.
| <input | |
| type="text" | |
| value={meetingStartDate} | |
| onChange={(e) => setMeetingStartDate(e.target.value)} | |
| placeholder="2000.00.00의 양식으로 작성해주세요" | |
| className="flex-1 px-4 py-3 h-14 rounded-[8px] border border-Subbrown-4 bg-White text-Gray-7 body_1_3 placeholder:text-Gray-3" | |
| /> | |
| <input | |
| type="date" | |
| value={meetingStartDate} | |
| onChange={(e) => setMeetingStartDate(e.target.value)} | |
| className="flex-1 px-4 py-3 h-14 rounded-[8px] border border-Subbrown-4 bg-White text-Gray-7 body_1_3 placeholder:text-Gray-3" | |
| /> |
| {[0, 1, 2, 3].map((index) => ( | ||
| <div | ||
| key={index} | ||
| className="w-full rounded-[8px] border border-Subbrown-4 bg-White px-5 py-5" | ||
| > | ||
| <input | ||
| value={voteItems[index]} | ||
| onChange={(e) => | ||
| handleVoteItemChange(index, e.target.value) | ||
| } | ||
| placeholder={`투표 항목 ${index + 1} 입력`} | ||
| className="w-full bg-transparent outline-none text-Gray-7 body_1_2 placeholder:text-Gray-3" | ||
| /> | ||
| </div> | ||
| ))} |
There was a problem hiding this comment.
투표 항목이 4개로 고정되어 있습니다. 사용자가 투표 항목을 동적으로 추가하거나 삭제할 수 있도록 기능을 개선하면 사용성이 더 좋아질 것 같습니다. 예를 들어, voteItems 상태를 배열로 관리하고, 항목을 추가/삭제하는 버튼을 제공할 수 있습니다.
| content={notice.content} | ||
| date={notice.date} | ||
| isPinned={true} | ||
| onClick={() => handleNoticeClick(notice.id!)} |
There was a problem hiding this comment.
notice.id!와 같이 non-null assertion !을 사용하고 있습니다. 현재 더미 데이터에서는 id가 항상 존재하지만, 실제 API 응답에서는 id가 undefined일 가능성을 배제할 수 없습니다. onClick={() => notice.id && handleNoticeClick(notice.id)} 와 같이 id가 존재할 때만 함수를 호출하도록 하여 더 안전한 코드를 작성하는 것이 좋습니다. 이 패턴이 90번 줄에도 반복됩니다.
| onClick={() => handleNoticeClick(notice.id!)} | |
| onClick={() => notice.id && handleNoticeClick(notice.id)} |
2 participants
💡 To Reviewers
groups/[id]/의 코드 재활용했습니다.
🔥 작업 내용 (가능한 구체적으로 작성해 주세요)
🤔 추후 작업 예정
📸 작업 결과 (스크린샷)
🔗 관련 이슈