From 7d1018650d1e23989754537a884caa97ff8e1be8 Mon Sep 17 00:00:00 2001 From: Yeonseo-Jo Date: Sun, 6 Jul 2025 17:37:09 +0900 Subject: [PATCH 1/6] =?UTF-8?q?feat:=20=EC=95=84=EC=9D=B4=EC=BD=98=20?= =?UTF-8?q?=ED=8C=A8=ED=82=A4=EC=A7=80=20=EC=84=A4=EC=B9=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 5 ++++- pnpm-lock.yaml | 12 ++++++++++++ 2 files changed, 16 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 4e8c98c..57c722d 100644 --- a/package.json +++ b/package.json @@ -13,12 +13,15 @@ "prepare": "husky" }, "lint-staged": { - "*.{js,jsx,ts,tsx}": ["biome check"] + "*.{js,jsx,ts,tsx}": [ + "biome check" + ] }, "dependencies": { "@emotion/react": "^11.14.0", "@emotion/styled": "^11.13.5", "@radix-ui/colors": "^3.0.0", + "@radix-ui/react-icons": "^1.3.2", "@radix-ui/themes": "^3.1.6", "@tanstack/react-query": "^5.62.10", "@tanstack/react-query-devtools": "^5.62.11", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4992271..9de9780 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -17,6 +17,9 @@ importers: '@radix-ui/colors': specifier: ^3.0.0 version: 3.0.0 + '@radix-ui/react-icons': + specifier: ^1.3.2 + version: 1.3.2(react@19.0.0) '@radix-ui/themes': specifier: ^3.1.6 version: 3.1.6(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@19.0.0(react@19.0.0))(react@19.0.0) @@ -668,6 +671,11 @@ packages: '@types/react-dom': optional: true + '@radix-ui/react-icons@1.3.2': + resolution: {integrity: sha512-fyQIhGDhzfc9pK2kH6Pl9c4BDJGfMkPqkyIgYDthyNYoNg3wVhoJMMh19WS4Up/1KMPFVpNsT2q3WmXn2N1m6g==} + peerDependencies: + react: ^16.x || ^17.x || ^18.x || ^19.0.0 || ^19.0.0-rc + '@radix-ui/react-id@1.1.0': resolution: {integrity: sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==} peerDependencies: @@ -2468,6 +2476,10 @@ snapshots: '@types/react': 18.3.18 '@types/react-dom': 18.3.5(@types/react@18.3.18) + '@radix-ui/react-icons@1.3.2(react@19.0.0)': + dependencies: + react: 19.0.0 + '@radix-ui/react-id@1.1.0(@types/react@18.3.18)(react@19.0.0)': dependencies: '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.18)(react@19.0.0) From a9962c58da3074a8d7002e3834730942d12a469a Mon Sep 17 00:00:00 2001 From: Yeonseo-Jo Date: Sun, 6 Jul 2025 17:37:24 +0900 Subject: [PATCH 2/6] =?UTF-8?q?fix:=20header=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EC=9D=B8=ED=84=B0=ED=8E=98=EC=9D=B4=EC=8A=A4=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/common/components/Header.tsx | 57 ++++++++++++++++++++++++++++---- 1 file changed, 50 insertions(+), 7 deletions(-) diff --git a/src/common/components/Header.tsx b/src/common/components/Header.tsx index f665064..28fc496 100644 --- a/src/common/components/Header.tsx +++ b/src/common/components/Header.tsx @@ -1,19 +1,61 @@ import styled from "@emotion/styled"; +import { ChevronLeftIcon } from "@radix-ui/react-icons"; import type { ReactElement } from "react"; +import { useNavigate } from "react-router"; import { Z_INDEX } from "../constants/zIndex"; +import { rem } from "../utils/rem"; interface HeaderProps { - left?: ReactElement | string; - center: ReactElement | string; - right?: ReactElement | string; + backButton?: { + renderIcon?: () => ReactElement; + onClick?: () => void; + }; + title?: string; + renderLeft?: () => ReactElement; + renderCenter?: () => ReactElement; + renderRight?: () => ReactElement; } -function Header({ left, center, right }: HeaderProps) { +function Header({ backButton, title, renderLeft, renderCenter, renderRight }: HeaderProps) { + const navigate = useNavigate(); + + const renderBackButton = () => { + const onClickBackButton = () => { + if (backButton && "onClick" in backButton && backButton.onClick) { + backButton.onClick(); + return; + } + // default behavior + navigate(-1); + }; + + return ( + + ); + }; + + const renderCentnerElement = () => renderCenter && {renderCenter()}; + + const renderTitleElement = () => + title && ( + + {title} + + ); + return ( - {left} - {center} - {right} + {renderLeft?.() ?? renderBackButton()} + {renderCentnerElement() || renderTitleElement()} + {renderRight?.()} ); } @@ -31,6 +73,7 @@ const HeaderWrapper = styled.header({ height: "4.8rem", backgroundColor: "white", + boxShadow: "0 2px 4px 0 rgba(0, 0, 0, 0.1)", }); const LeftElement = styled.div({ From d2f4518398d376530b32fd0c1c6dcca6b4485b4d Mon Sep 17 00:00:00 2001 From: Yeonseo-Jo Date: Sun, 6 Jul 2025 17:37:42 +0900 Subject: [PATCH 3/6] =?UTF-8?q?fix:=20header=20=EC=98=88=EC=8B=9C=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Menu/page.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Menu/page.tsx b/src/Menu/page.tsx index 9dc87f2..6452997 100644 --- a/src/Menu/page.tsx +++ b/src/Menu/page.tsx @@ -13,7 +13,7 @@ import { Link } from "react-router"; export default function MenuPage() { return ( <> -
+
{version} menu From 16b0bbe2a1d45b54d8dc900bdc018327a8131677 Mon Sep 17 00:00:00 2001 From: Yeonseo-Jo Date: Sun, 6 Jul 2025 17:42:43 +0900 Subject: [PATCH 4/6] =?UTF-8?q?chore:=20header=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=84=A4=EB=AA=85=20=EC=A3=BC=EC=84=9D=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/common/components/Header.tsx | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/src/common/components/Header.tsx b/src/common/components/Header.tsx index 28fc496..7b6b400 100644 --- a/src/common/components/Header.tsx +++ b/src/common/components/Header.tsx @@ -5,17 +5,42 @@ import { useNavigate } from "react-router"; import { Z_INDEX } from "../constants/zIndex"; import { rem } from "../utils/rem"; +/** + * Header 컴포넌트 Props + * + * 우선순위: render* > backButton, title > 기본 뒤로가기 버튼 + */ interface HeaderProps { + /** 백 버튼 커스터마이징 */ backButton?: { renderIcon?: () => ReactElement; onClick?: () => void; }; + /** 헤더 제목 */ title?: string; + /** 왼쪽 섹션 커스터마이징 */ renderLeft?: () => ReactElement; + /** 중앙 섹션 커스터마이징 */ renderCenter?: () => ReactElement; + /** 오른쪽 섹션 커스터마이징 */ renderRight?: () => ReactElement; } +/** + * 페이지 헤더 컴포넌트 + * + * @example + * ```tsx + * // default (backButton, title) + *
+ * + * // backButton ui, 이벤트 커스터마이징 + *
navigate('/') }} /> + * + * // 섹션별 커스터마이징 (renderLeft, renderCenter, renderRight) + *
} /> + * ``` + */ function Header({ backButton, title, renderLeft, renderCenter, renderRight }: HeaderProps) { const navigate = useNavigate(); From 553e5ff27de77bd0e00deeffd30a065570fa342e Mon Sep 17 00:00:00 2001 From: Yeonseo-Jo Date: Sun, 6 Jul 2025 18:01:45 +0900 Subject: [PATCH 5/6] =?UTF-8?q?fix:=20=EC=98=A4=ED=83=80=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/common/components/Header.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/common/components/Header.tsx b/src/common/components/Header.tsx index 7b6b400..40796c3 100644 --- a/src/common/components/Header.tsx +++ b/src/common/components/Header.tsx @@ -67,7 +67,7 @@ function Header({ backButton, title, renderLeft, renderCenter, renderRight }: He ); }; - const renderCentnerElement = () => renderCenter && {renderCenter()}; + const renderCenterElement = () => renderCenter && {renderCenter()}; const renderTitleElement = () => title && ( @@ -79,7 +79,7 @@ function Header({ backButton, title, renderLeft, renderCenter, renderRight }: He return ( {renderLeft?.() ?? renderBackButton()} - {renderCentnerElement() || renderTitleElement()} + {renderCenterElement() || renderTitleElement()} {renderRight?.()} ); From 65424b5b227b188fe2661e4c09dbcad5542bc3c6 Mon Sep 17 00:00:00 2001 From: Yeonseo-Jo Date: Sun, 17 Aug 2025 22:19:31 +0900 Subject: [PATCH 6/6] =?UTF-8?q?fix:=20=3F=3F=EB=A1=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/common/components/Header.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/common/components/Header.tsx b/src/common/components/Header.tsx index 40796c3..2480e06 100644 --- a/src/common/components/Header.tsx +++ b/src/common/components/Header.tsx @@ -79,7 +79,7 @@ function Header({ backButton, title, renderLeft, renderCenter, renderRight }: He return ( {renderLeft?.() ?? renderBackButton()} - {renderCenterElement() || renderTitleElement()} + {renderCenterElement() ?? renderTitleElement()} {renderRight?.()} );