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 @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은 검색 기능, 책이야기 관리, 소식 표시 등 핵심 사용자 인터페이스를 대폭 개선하고 새로운 기능을 도입하는 데 중점을 둡니다. 다양한 기기에서 일관된 사용자 경험을 제공하기 위해 반응형 디자인을 전반적으로 적용했으며, 모달, 내비게이션, 댓글 섹션 등 여러 새로운 컴포넌트를 추가하여 콘텐츠 상호작용 기능을 확장했습니다. 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}
| <div className="relative w-[12px] h-[12px] d:w-[18px] d:h-[18px]"> | ||
| <Image | ||
| src="/triangle.svg" | ||
| alt="next" | ||
| fill | ||
| className="object-contain" | ||
| /> | ||
| </div> | ||
| <div className="d:subhead_4_1 text-Gray-7">글 상세보기</div> | ||
| </div> |
There was a problem hiding this comment.
현재 breadcrumb의 triangle.svg 이미지 크기가 태블릿(t:) 뷰포트에서 반응형으로 설정되어 있지 않습니다. 데스크톱(d:) 크기만 지정되어 있어 태블릿에서 아이콘이 너무 작게 보일 수 있습니다. 태블릿 뷰포트에서도 적절한 크기를 지정하여 일관된 사용자 경험을 제공하는 것이 좋습니다.
| <div className="relative w-[12px] h-[12px] d:w-[18px] d:h-[18px]"> | |
| <Image | |
| src="/triangle.svg" | |
| alt="next" | |
| fill | |
| className="object-contain" | |
| /> | |
| </div> | |
| <div className="d:subhead_4_1 text-Gray-7">글 상세보기</div> | |
| </div> | |
| <div className="relative w-[12px] h-[12px] t:w-[12px] t:h-[12px] d:w-[18px] d:h-[18px]"> |
| return ( | ||
| <div className="mx-auto w-full max-w-[1400px] px-4"> | ||
| <div className="flex justify-center items-center mt-7 mb-6"> | ||
| <div className="relative w-full h-[297px] t:h-[468px]" style={{ maxWidth: 'clamp(339px, 100%, 1040px)' }}> |
There was a problem hiding this comment.
인라인 스타일로 maxWidth를 clamp 함수를 사용하여 지정했습니다. TailwindCSS를 사용하고 있으므로, 일관성을 위해 이 스타일을 TailwindCSS 클래스로 변환하거나, TailwindCSS 설정에 사용자 정의 유틸리티 클래스를 추가하여 관리하는 것이 좋습니다. 이는 코드의 일관성과 유지보수성을 높이는 데 도움이 됩니다.
| <div className="relative w-full h-[297px] t:h-[468px]" style={{ maxWidth: 'clamp(339px, 100%, 1040px)' }}> | |
| <div className="relative w-full h-[297px] t:h-[468px] max-w-[clamp(339px,100%,1040px)]"> |
| { id: '1', name: 'hy_0716', subscribingCount: 17, subscribersCount: 32 }, | ||
| { id: '2', name: 'hy_0716', subscribingCount: 17, subscribersCount: 32 }, | ||
| { id: '3', name: 'hy_0716', subscribingCount: 17, subscribersCount: 32 }, | ||
| { id: '4', name: 'hy_0716', subscribingCount: 17, subscribersCount: 32 }, |
There was a problem hiding this comment.
users 더미 데이터가 컴포넌트 내부에 직접 정의되어 있습니다. 이 데이터를 별도의 더미 데이터 파일(예: src/data/dummyUsers.ts)로 분리하여 컴포넌트의 가독성을 높이고 데이터 관리를 중앙화하는 것을 고려해 볼 수 있습니다.
| <h2 className="pb-4 body_1 leading-7 text-zinc-800"> | ||
| 소식 | ||
| </h2> |
There was a problem hiding this comment.
섹션 제목에 body_1 클래스를 사용하고 있습니다. body_1은 본문 텍스트에 적합한 스타일이며, 섹션 제목으로는 시각적 계층 구조를 명확히 하기 위해 subhead_1 또는 subhead_2와 같은 더 큰 폰트 크기와 강조된 스타일을 사용하는 것이 더 적절할 수 있습니다. 이는 사용자에게 콘텐츠의 중요도를 더 잘 전달할 수 있습니다.
| <h2 className="pb-4 body_1 leading-7 text-zinc-800"> | |
| 소식 | |
| </h2> | |
| <h2 className="pb-4 subhead_2 leading-7 text-zinc-800"> |
| <h2 className="pb-2 body_1 leading-7 text-zinc-800"> | ||
| 독서모임 | ||
| </h2> |
There was a problem hiding this comment.
섹션 제목에 body_1 클래스를 사용하고 있습니다. body_1은 본문 텍스트에 적합한 스타일이며, 섹션 제목으로는 시각적 계층 구조를 명확히 하기 위해 subhead_1 또는 subhead_2와 같은 더 큰 폰트 크기와 강조된 스타일을 사용하는 것이 더 적절할 수 있습니다. 이는 사용자에게 콘텐츠의 중요도를 더 잘 전달할 수 있습니다.
| <h2 className="pb-2 body_1 leading-7 text-zinc-800"> | |
| 독서모임 | |
| </h2> | |
| <h2 className="pb-2 subhead_2 leading-7 text-zinc-800"> |
| </div> | ||
|
|
||
| {/* 햄버거 */} | ||
| <div className="relative shrink-0 ml-2" ref={menuRef}> |
There was a problem hiding this comment.
메뉴 버튼의 alt 속성으로 "메뉴"를 사용하고 있습니다. 이는 스크린 리더 사용자에게 버튼의 목적을 명확하게 전달하지 못할 수 있습니다. "메뉴"보다는 "더보기" 또는 "옵션"과 같이 버튼이 수행하는 동작을 더 잘 설명하는 텍스트를 사용하는 것이 접근성 측면에서 더 좋습니다.
<Image src="/menu_dots.svg" alt="더보기" width={24} height={24} />
| onClick={() => setMenuOpen(!menuOpen)} | ||
| className="cursor-pointer " | ||
| > | ||
| <Image src="/menu_dots.svg" alt="메뉴" width={24} height={24} /> |
There was a problem hiding this comment.
메뉴 버튼의 alt 속성으로 "메뉴"를 사용하고 있습니다. 이는 스크린 리더 사용자에게 버튼의 목적을 명확하게 전달하지 못할 수 있습니다. "메뉴"보다는 "더보기" 또는 "옵션"과 같이 버튼이 수행하는 동작을 더 잘 설명하는 텍스트를 사용하는 것이 접근성 측면에서 더 좋습니다.
<Image src="/menu_dots.svg" alt="더보기" width={24} height={24} />
| onClick={() => setMenuOpen(!menuOpen)} | ||
| className="p-1 cursor-pointer" | ||
| > | ||
| <Image src="/menu_dots.svg" alt="메뉴" width={20} height={20} /> |
There was a problem hiding this comment.
메뉴 버튼의 alt 속성으로 "메뉴"를 사용하고 있습니다. 이는 스크린 리더 사용자에게 버튼의 목적을 명확하게 전달하지 못할 수 있습니다. "메뉴"보다는 "더보기" 또는 "옵션"과 같이 버튼이 수행하는 동작을 더 잘 설명하는 텍스트를 사용하는 것이 접근성 측면에서 더 좋습니다.
| <Image src="/menu_dots.svg" alt="메뉴" width={20} height={20} /> | |
| <Image src="/menu_dots.svg" alt="더보기" width={20} height={20} /> |
| const searchResults = [ | ||
| { | ||
| id: 1, | ||
| imgUrl: "/booksample.svg", | ||
| title: "어린 왕자", | ||
| author: "김개미, 연수", | ||
| detail: "최대 500(넘어가면...으로)", | ||
| }, | ||
| { | ||
| id: 2, | ||
| imgUrl: "/booksample.svg", | ||
| title: "어린 왕자", | ||
| author: "김개미, 연수", | ||
| detail: "최대 500(넘어가면...으로)", | ||
| }, | ||
| { | ||
| id: 3, | ||
| imgUrl: "/booksample.svg", | ||
| title: "어린 왕자", | ||
| author: "김개미, 연수", | ||
| detail: "최대 500(넘어가면...으로)", | ||
| }, |
There was a problem hiding this comment.
searchResults 더미 데이터가 컴포넌트 내부에 직접 정의되어 있습니다. 이 데이터를 별도의 더미 데이터 파일로 분리하여 컴포넌트의 가독성을 높이고 데이터 관리를 중앙화하는 것을 고려해 볼 수 있습니다.
| const recommendedBooks = [ | ||
| { id: 1, imgUrl: "/booksample.svg", title: "책 제목", author: "작가작가작가" }, | ||
| { id: 2, imgUrl: "/booksample.svg", title: "책 제목", author: "작가작가작가" }, | ||
| { id: 3, imgUrl: "/booksample.svg", title: "책 제목", author: "작가작가작가" }, | ||
| { id: 4, imgUrl: "/booksample.svg", title: "책 제목", author: "작가작가작가" }, | ||
| ]; |
There was a problem hiding this comment.
recommendedBooks 더미 데이터가 컴포넌트 내부에 직접 정의되어 있습니다. 이 데이터를 별도의 더미 데이터 파일로 분리하여 컴포넌트의 가독성을 높이고 데이터 관리를 중앙화하는 것을 고려해 볼 수 있습니다.
2 participants
💡 To Reviewers
🔥 작업 내용 (가능한 구체적으로 작성해 주세요)
🤔 추후 작업 예정
📸 작업 결과 (스크린샷)
🔗 관련 이슈