From b6ff3aa99b92bdd2eda39bcf9043c1cad9f81d34 Mon Sep 17 00:00:00 2001 From: FF Date: Sun, 21 Sep 2025 12:12:51 +0900 Subject: [PATCH 1/3] =?UTF-8?q?style:=20=EC=BB=A4=EB=AE=A4=EB=8B=88?= =?UTF-8?q?=ED=8B=B0=20navbar=20=EC=9C=84=EC=B9=98=20=EB=B0=8F=20=EC=8A=A4?= =?UTF-8?q?=ED=83=80=EC=9D=BC=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/web/src/api/comments.ts | 4 +- apps/web/src/components/layout/AppLayout.tsx | 2 +- .../_components/CommunityAppLayout.tsx | 34 ++----- .../_components/CommunityNavigator.tsx | 96 +++++++++---------- apps/web/src/types/community.ts | 2 +- 5 files changed, 59 insertions(+), 79 deletions(-) diff --git a/apps/web/src/api/comments.ts b/apps/web/src/api/comments.ts index ce54647..95e2011 100644 --- a/apps/web/src/api/comments.ts +++ b/apps/web/src/api/comments.ts @@ -15,7 +15,7 @@ type CommentListItemRes = { content: string; createdAt: string; updatedAt: string; - authorInfo: AuthorInfoRes; // ✅ 추가 + authorInfo: AuthorInfoRes; }; type CommentListRes = { @@ -30,7 +30,7 @@ type CommentCreateRes = { content: string; createdAt: string; updatedAt: string; - authorInfo: AuthorInfoRes; // ✅ 생성 응답에서도 내려온다고 가정 + authorInfo: AuthorInfoRes; }; type CommentUpdateRes = { diff --git a/apps/web/src/components/layout/AppLayout.tsx b/apps/web/src/components/layout/AppLayout.tsx index 9e28bcd..4e9d03e 100644 --- a/apps/web/src/components/layout/AppLayout.tsx +++ b/apps/web/src/components/layout/AppLayout.tsx @@ -22,7 +22,7 @@ export default function AppLayout({ title, tabs, children, - topOffset = 72, + topOffset = 60, onBack, }: { title: string; diff --git a/apps/web/src/pages/Community/_components/CommunityAppLayout.tsx b/apps/web/src/pages/Community/_components/CommunityAppLayout.tsx index 401a8b6..3d3e6c8 100644 --- a/apps/web/src/pages/Community/_components/CommunityAppLayout.tsx +++ b/apps/web/src/pages/Community/_components/CommunityAppLayout.tsx @@ -1,45 +1,27 @@ import AppLayout from '@/components/layout/AppLayout'; import CommunityNavigator from '@/pages/Community/_components/CommunityNavigator'; -import type { NavKey } from '@/types/community'; import styled from '@emotion/styled'; type BaseProps = React.ComponentProps; -type Props = BaseProps & { activeNav?: NavKey }; - -const TAB_BAR_HEIGHT = 60; +type Props = BaseProps; export default function CommunityAppLayout({ children, ...rest }: Props) { return ( - <> - - - {children} - - - + + - - + {children} + + ); } const ScrollContainer = styled.div` min-height: 100vh; - /* iOS 부드러운 스크롤 */ -webkit-overflow-scrolling: touch; `; -const InnerScroll = styled.div<{ paddingBottom: number }>` +const Content = styled.div` overflow-y: auto; - /* AppLayout이 내부에서 height를 쓰더라도 여기가 스크롤을 맡습니다 */ - max-height: 100vh; - padding-bottom: ${({ paddingBottom }) => `${paddingBottom}px`}; -`; - -const FixedNav = styled.div` - position: fixed; - left: 0; - right: 0; - bottom: 0; - z-index: 50; /* 컨텐츠 위에 오도록 */ + max-height: 100%; `; diff --git a/apps/web/src/pages/Community/_components/CommunityNavigator.tsx b/apps/web/src/pages/Community/_components/CommunityNavigator.tsx index 895fbd6..e498931 100644 --- a/apps/web/src/pages/Community/_components/CommunityNavigator.tsx +++ b/apps/web/src/pages/Community/_components/CommunityNavigator.tsx @@ -3,13 +3,13 @@ import { useNavigate } from 'react-router-dom'; import { useCommunityStore } from '@/stores/communityStore'; const PATH_BY_KEY = { - home: '/community', - photo: '/community/feed/proof', route: '/community/feed/share', run: '/community/feed/mate', + photo: '/community/feed/proof', + all: '/community', } as const; -type NavKey = keyof typeof PATH_BY_KEY; +export type NavKey = keyof typeof PATH_BY_KEY; export default function CommunityNavigator() { const navigate = useNavigate(); @@ -22,71 +22,69 @@ export default function CommunityNavigator() { }; return ( - - - - 홈 - - - - - 인증샷 - - - + - - 경로 - - - + - - 메이트 - + 메이트 + + + 인증샷 + + + 전체보기 + ); } +/** 상단 고정(헤더 바로 아래) */ const Container = styled.nav` - position: fixed; - bottom: 0; - left: 0; - right: 0; + position: sticky; + top: 0; /* AppLayout 헤더가 fixed이면 필요에 따라 간격 조절 */ + z-index: ${({ theme }) => theme.zIndex.header}; display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; - border-top: 1px solid ${({ theme }) => theme.colors.border}; + gap: 0; background: ${({ theme }) => theme.colors.surface}; - padding: 6px 0; - z-index: ${({ theme }) => theme.zIndex.header}; + border-bottom: 1px solid ${({ theme }) => theme.colors.border}; `; -const NavItem = styled.button<{ active?: boolean }>` - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - gap: 2px; +const TabButton = styled.button<{ active?: boolean }>` ${({ theme }) => theme.typography.small}; + height: 36px; + background: ${({ theme, active }) => + active ? theme.colors.surfaceAlt : 'transparent'}; color: ${({ theme, active }) => active ? theme.colors.primary : theme.colors.subtext}; - i { - font-size: 20px; - line-height: 1; + transition: + background 0.15s ease, + color 0.15s ease, + border-color 0.15s ease; + + &:hover { + background: ${({ theme }) => theme.colors.surfaceAlt}; } `; diff --git a/apps/web/src/types/community.ts b/apps/web/src/types/community.ts index cea2257..33289e9 100644 --- a/apps/web/src/types/community.ts +++ b/apps/web/src/types/community.ts @@ -28,4 +28,4 @@ export interface Comment { authorInfo?: AuthorObj; } -export type NavKey = 'home' | 'photo' | 'route' | 'run'; +export type NavKey = 'home' | 'photo' | 'route' | 'run' | 'all'; From f335c6fe58936a8ad30791348e56ef37c2e1d664 Mon Sep 17 00:00:00 2001 From: FF Date: Sun, 21 Sep 2025 12:15:01 +0900 Subject: [PATCH 2/3] =?UTF-8?q?style:=20topOffset=20=EC=83=81=EC=88=98?= =?UTF-8?q?=EA=B0=92=20=EC=A1=B0=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/web/src/components/layout/AppLayout.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/web/src/components/layout/AppLayout.tsx b/apps/web/src/components/layout/AppLayout.tsx index 4e9d03e..ff17e09 100644 --- a/apps/web/src/components/layout/AppLayout.tsx +++ b/apps/web/src/components/layout/AppLayout.tsx @@ -22,7 +22,7 @@ export default function AppLayout({ title, tabs, children, - topOffset = 60, + topOffset = 56, onBack, }: { title: string; From 353a3334fd47a60e0422ecc79074eb821affc363 Mon Sep 17 00:00:00 2001 From: FF Date: Sun, 21 Sep 2025 12:17:52 +0900 Subject: [PATCH 3/3] =?UTF-8?q?style:=20Applayout=20topOffset=20=EC=A1=B0?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/web/src/components/layout/AppLayout.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/web/src/components/layout/AppLayout.tsx b/apps/web/src/components/layout/AppLayout.tsx index ff17e09..68c77e0 100644 --- a/apps/web/src/components/layout/AppLayout.tsx +++ b/apps/web/src/components/layout/AppLayout.tsx @@ -22,7 +22,7 @@ export default function AppLayout({ title, tabs, children, - topOffset = 56, + topOffset = 59, onBack, }: { title: string;