Conversation
Summary of ChangesHello @Dobbymin, 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은 모바일 환경에서의 사용자 경험을 대폭 개선하고, Tab 컴포넌트에 동적인 필터링 기능을 추가하며, FSD 아키텍처 원칙에 따라 컴포넌트 구조를 리팩토링하는 것을 목표로 합니다. 전반적인 레이아웃 문제를 해결하고, 반응형 디자인을 강화하여 블로그의 접근성과 유지보수성을 향상시켰습니다. Highlights
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
모바일 반응형 레이아웃을 적용하고 Tab 필터링 기능을 구현하는 등 사용자 경험을 크게 개선한 PR입니다. FSD 아키텍처에 따라 컴포넌트 구조를 리팩토링하고, 반응형 디자인 원칙을 일관되게 적용한 점이 훌륭합니다. 특히 PostList 컴포넌트를 features 레이어로 이동하여 관심사를 분리한 것은 좋은 설계 결정입니다.
코드 리뷰에서는 주로 성능 최적화에 대한 몇 가지 제안을 드렸습니다. PostList와 Tabs 컴포넌트에서 매 렌더링 시 실행되는 데이터 처리 로직에 useMemo를 적용하여 불필요한 계산을 방지하도록 수정하는 것을 권장합니다. 이를 통해 애플리케이션의 반응성을 더욱 향상시킬 수 있을 것입니다. 전체적으로 훌륭한 작업입니다!
src/features/main/ui/PostList.tsx
Outdated
| const filteredPosts = selectedCategory | ||
| ? posts.filter((post) => post.category === selectedCategory) | ||
| : posts; |
There was a problem hiding this comment.
filteredPosts 배열이 렌더링될 때마다 새로 생성되고 있습니다. 게시물 수가 많아지면 성능에 영향을 줄 수 있습니다. useMemo 훅을 사용하여 posts나 selectedCategory가 변경될 때만 필터링 로직이 다시 실행되도록 최적화하는 것을 권장합니다.
이를 위해 파일 상단에 useMemo를 import해야 합니다: import { useMemo, useState } from 'react';
const filteredPosts = useMemo(() => {
return selectedCategory
? posts.filter((post) => post.category === selectedCategory)
: posts;
}, [posts, selectedCategory]);
| // 게시글에서 카테고리 추출 및 카운트 | ||
| const getCategoryCounts = () => { | ||
| const categoryCounts: Record<string, number> = {}; | ||
|
|
||
| posts.forEach((post) => { | ||
| const category = post.category; | ||
| categoryCounts[category] = (categoryCounts[category] || 0) + 1; | ||
| }); | ||
|
|
||
| return categoryCounts; | ||
| }; | ||
|
|
||
| const categoryCounts = getCategoryCounts(); | ||
|
|
||
| // All 탭 + 각 카테고리 탭 생성 | ||
| const tabs = [ | ||
| { name: 'All.tsx', count: 49 }, | ||
| { name: 'Develop.tsx', count: 3 }, | ||
| { name: 'Daily.tsx', count: 9 }, | ||
| { name: 'Review.tsx', count: 4 }, | ||
| { name: 'All', count: posts.length, category: null }, | ||
| ...Object.entries(categoryCounts).map(([category, count]) => ({ | ||
| name: category, | ||
| count, | ||
| category, | ||
| })), | ||
| ]; |
There was a problem hiding this comment.
tabs 배열이 렌더링될 때마다 재생성되고 있습니다. 게시물 수가 많을 경우 성능 저하의 원인이 될 수 있습니다. useMemo를 사용하여 posts prop이 변경될 때만 tabs 배열을 다시 계산하도록 메모이제이션하는 것이 좋습니다.
추가로, getCategoryCounts 함수 내부의 forEach 대신 reduce를 사용하면 코드를 더 간결하게 만들 수 있습니다.
이를 위해 파일 상단에 useMemo를 import해야 합니다: import { useMemo, useState } from 'react';
| // 게시글에서 카테고리 추출 및 카운트 | |
| const getCategoryCounts = () => { | |
| const categoryCounts: Record<string, number> = {}; | |
| posts.forEach((post) => { | |
| const category = post.category; | |
| categoryCounts[category] = (categoryCounts[category] || 0) + 1; | |
| }); | |
| return categoryCounts; | |
| }; | |
| const categoryCounts = getCategoryCounts(); | |
| // All 탭 + 각 카테고리 탭 생성 | |
| const tabs = [ | |
| { name: 'All.tsx', count: 49 }, | |
| { name: 'Develop.tsx', count: 3 }, | |
| { name: 'Daily.tsx', count: 9 }, | |
| { name: 'Review.tsx', count: 4 }, | |
| { name: 'All', count: posts.length, category: null }, | |
| ...Object.entries(categoryCounts).map(([category, count]) => ({ | |
| name: category, | |
| count, | |
| category, | |
| })), | |
| ]; | |
| const tabs = useMemo(() => { | |
| const categoryCounts = posts.reduce<Record<string, number>>((acc, { category }) => { | |
| acc[category] = (acc[category] || 0) + 1; | |
| return acc; | |
| }, {}); | |
| return [ | |
| { name: 'All', count: posts.length, category: null }, | |
| ...Object.entries(categoryCounts).map(([category, count]) => ({ | |
| name: category, | |
| count, | |
| category, | |
| })), | |
| ]; | |
| }, [posts]); |
1 participant
📝 상세 내용
모바일 환경 최적화 및 Tab 기능 개선
모바일 환경에서 레이아웃이 깨지는 문제를 해결하고, Tab 컴포넌트에 동적 필터링 기능을 추가했습니다.
또한 FSD 아키텍처에 맞게 컴포넌트 구조를 리팩토링했습니다.
🎯 주요 구현 사항
1. Tab 컴포넌트 전면 개선
모바일 레이아웃 수정
shrink-0,whitespace-nowrap로 탭 줄바꿈 방지overflow-x-auto로 가로 스크롤 활성화px-4 md:px-5max-w-7xl px-4 md:px-8동적 카테고리 기능
2. Header 모바일 최적화
텍스트 크기 조정
text-xl md:text-3xl(20px → 30px)text-base md:text-xl(16px → 20px)로고 표시 방식
레이아웃 구조 개선
3. Footer 반응형 구현
모바일 환경
표시 항목:
숨김 항목:
스타일 개선
text-sm md:text-base: 반응형 텍스트 크기flex-wrap: 줄바꿈 지원px-4: 좌우 패딩 추가4. 전역 레이아웃 문제 해결
globals.css 수정
문제: body에
justify-center가 있어서 콘텐츠가 중앙 정렬되면서 모바일에서 오른쪽 여백 발생해결: 불필요한 flex 레이아웃 제거 및
overflow-x-hidden추가5. PostCard 간격 문제 해결
Grid 컴포넌트 수정
원인: Tailwind CSS는 빌드 타임에 클래스를 스캔하므로 동적으로 생성된 클래스명(
gap-${gap})을 인식하지 못함6. FSD 아키텍처 리팩토링
PostList 컴포넌트 이동
이유:
widgets: 재사용 가능한 UI 조각 (Grid, Header, Footer)features: 비즈니스 로직 + 상태 관리 (PostList의 필터링 기능)서버/클라이언트 컴포넌트 분리
app/page.tsx: 서버 컴포넌트 (데이터 로드)features/main/ui/PostList.tsx: 클라이언트 컴포넌트 (상태 관리)7. PostCard 높이 조정
min-h-[300px]: 최소 높이 설정h-full: 그리드 내 균일한 높이p-3 → p-4: 콘텐츠 영역 패딩 증가line-clamp-3: description 3줄 초과 시 말줄임표🏗️ 기술 스택 및 아키텍처
반응형 디자인 전략
일관된 패딩 시스템:
px-4(1rem / 16px)md:px-8(2rem / 32px)lg:px-0+max-w-7xl적용 컴포넌트:
FSD 아키텍처
🐛 해결된 버그
1. 모바일 레이아웃 오버플로우
justify-center+ 컴포넌트 고정 너비overflow-x-hidden+ 일관된 패딩 시스템2. Tab 너비 불일치
max-w-7xl px-4 md:px-8 lg:px-0적용3. PostCard 간격 없음
className에gap-5직접 명시4. Header 오버플로우
max-w-7xl+relative포지셔닝✨ 주요 특징
✅ 장점
overflow-x-hidden은 html/body에 모두 적용relative부모 기준absolute포지셔닝📊 변경 파일 목록
새로 생성된 파일
src/features/main/ui/PostList.tsxsrc/features/main/ui/index.tssrc/features/main/index.ts수정된 파일
src/shared/components/features/tabs/Tabs.tsxsrc/shared/components/features/layout/Header.tsxsrc/shared/components/features/layout/Footer.tsxsrc/shared/components/features/card/PostCard.tsxsrc/app/page.tsxsrc/app/globals.csssrc/features/index.tssrc/widgets/index.ts삭제된 파일
src/widgets/post/PostList.tsxsrc/widgets/post/index.ts#️⃣ 이슈 번호
⏰ 현재 버그
X
📷 주요 변경사항
1. Tab 컴포넌트
2. Header
3. Footer
4. PostCard
5. 전체 레이아웃
스크린샷 (모바일 화면)