From c158382af99ca7312ab96932ea1f518954298e12 Mon Sep 17 00:00:00 2001 From: jungwoo3490 Date: Tue, 28 Jan 2025 22:18:17 +0900 Subject: [PATCH 1/7] feat: add Header component --- src/common/components/Header.tsx | 48 ++++++++++++++++++++++++++++++++ 1 file changed, 48 insertions(+) create mode 100644 src/common/components/Header.tsx diff --git a/src/common/components/Header.tsx b/src/common/components/Header.tsx new file mode 100644 index 0000000..b7f92ee --- /dev/null +++ b/src/common/components/Header.tsx @@ -0,0 +1,48 @@ +import { Flex } from "@radix-ui/themes"; +import type { ReactNode } from "react"; +import styled from "@emotion/styled"; + +interface HeaderProps { + leftElement?: ReactNode; + centerElement: ReactNode; + rightElement?: ReactNode; +} + +function Header({ leftElement, centerElement, rightElement }: HeaderProps) { + return ( + + + {leftElement} + {centerElement} + {rightElement} + + + ); +} + +export default Header; + +const HeaderWrapper = styled.header({ + position: "sticky", + zIndex: 999, + top: 0, + + width: "100%", + height: "4.8rem", + + backgroundColor: "white", +}); + +const LeftElement = styled.div` + position: absolute; + left: 1.5rem; +`; + +const CenterElement = styled.div` + margin: 0 auto; +`; + +const RightElement = styled.div` + position: absolute; + right: 1.5rem; +`; From 1c64a58c47301d17206246237aec65d44566797e Mon Sep 17 00:00:00 2001 From: jungwoo3490 Date: Tue, 28 Jan 2025 22:25:19 +0900 Subject: [PATCH 2/7] chore: add preview code --- src/Menu/page.tsx | 22 ++++++++++++++++++---- 1 file changed, 18 insertions(+), 4 deletions(-) diff --git a/src/Menu/page.tsx b/src/Menu/page.tsx index 0f5cebf..c94dd67 100644 --- a/src/Menu/page.tsx +++ b/src/Menu/page.tsx @@ -1,13 +1,27 @@ +import Header from "@/common/components/Header"; import UserListItemCard from "@/common/components/UserListItemCard"; import { css } from "@emotion/react"; import styled from "@emotion/styled"; -import { Blockquote, Card, Checkbox, Flex, Heading, Radio, Text } from "@radix-ui/themes"; +import { + Blockquote, + Card, + Checkbox, + Flex, + Heading, + Radio, + Text, +} from "@radix-ui/themes"; import { version } from "react"; import { Link } from "react-router"; export default function MenuPage() { return ( - <> +
+
{version} menu @@ -50,11 +64,11 @@ export default function MenuPage() { 유저4 - +
); } const UserListContainer = styled.div({ width: "100vw", - padding: "10px", + padding: "1rem", }); From f663a4ad6dfc9a3830fa4c19161f8bd0345166fd Mon Sep 17 00:00:00 2001 From: jungwoo3490 Date: Tue, 28 Jan 2025 22:27:07 +0900 Subject: [PATCH 3/7] fix: remove Flex component and change HeaderWrapper to have flex property --- src/common/components/Header.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/common/components/Header.tsx b/src/common/components/Header.tsx index b7f92ee..ec73d2b 100644 --- a/src/common/components/Header.tsx +++ b/src/common/components/Header.tsx @@ -1,4 +1,3 @@ -import { Flex } from "@radix-ui/themes"; import type { ReactNode } from "react"; import styled from "@emotion/styled"; @@ -11,11 +10,9 @@ interface HeaderProps { function Header({ leftElement, centerElement, rightElement }: HeaderProps) { return ( - - {leftElement} - {centerElement} - {rightElement} - + {leftElement} + {centerElement} + {rightElement} ); } @@ -27,6 +24,9 @@ const HeaderWrapper = styled.header({ zIndex: 999, top: 0, + display: "flex", + alignItems: "center", + width: "100%", height: "4.8rem", From 3f2f03e43649890fb0ee5ead191b66d1e89f3af5 Mon Sep 17 00:00:00 2001 From: jungwoo3490 Date: Tue, 4 Feb 2025 01:35:00 +0900 Subject: [PATCH 4/7] feat: dynamically change CenterElement tag based on content type --- src/common/components/Header.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/common/components/Header.tsx b/src/common/components/Header.tsx index ec73d2b..0e37307 100644 --- a/src/common/components/Header.tsx +++ b/src/common/components/Header.tsx @@ -11,7 +11,9 @@ function Header({ leftElement, centerElement, rightElement }: HeaderProps) { return ( {leftElement} - {centerElement} + + {centerElement} + {rightElement} ); From 9efe246856fa4dc34d519229fd9fd2278edaa54f Mon Sep 17 00:00:00 2001 From: jungwoo3490 Date: Tue, 4 Feb 2025 01:40:59 +0900 Subject: [PATCH 5/7] fix: narrow HeaderProps types to ReactElement or string --- src/common/components/Header.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/common/components/Header.tsx b/src/common/components/Header.tsx index 0e37307..2d5001d 100644 --- a/src/common/components/Header.tsx +++ b/src/common/components/Header.tsx @@ -1,10 +1,10 @@ -import type { ReactNode } from "react"; +import type { ReactElement } from "react"; import styled from "@emotion/styled"; interface HeaderProps { - leftElement?: ReactNode; - centerElement: ReactNode; - rightElement?: ReactNode; + leftElement?: ReactElement | string; + centerElement: ReactElement | string; + rightElement?: ReactElement | string; } function Header({ leftElement, centerElement, rightElement }: HeaderProps) { From 626a4dd5b625d54d1df135db5c1e467ac7e1a3d8 Mon Sep 17 00:00:00 2001 From: jungwoo3490 Date: Tue, 4 Feb 2025 01:44:42 +0900 Subject: [PATCH 6/7] fix: convert styled components to object syntax --- src/common/components/Header.tsx | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/src/common/components/Header.tsx b/src/common/components/Header.tsx index 2d5001d..ea5e4e4 100644 --- a/src/common/components/Header.tsx +++ b/src/common/components/Header.tsx @@ -35,16 +35,16 @@ const HeaderWrapper = styled.header({ backgroundColor: "white", }); -const LeftElement = styled.div` - position: absolute; - left: 1.5rem; -`; - -const CenterElement = styled.div` - margin: 0 auto; -`; - -const RightElement = styled.div` - position: absolute; - right: 1.5rem; -`; +const LeftElement = styled.div({ + position: "absolute", + left: "1.5rem", +}); + +const CenterElement = styled.div({ + margin: "0 auto", +}); + +const RightElement = styled.div({ + position: "absolute", + right: "1.5rem", +}); From 0252fdc8f01d00a2864f39d5f6e7d89ca18bcbe0 Mon Sep 17 00:00:00 2001 From: jungwoo3490 Date: Tue, 4 Feb 2025 02:02:14 +0900 Subject: [PATCH 7/7] fix: manage z-index values using constants --- src/common/components/Header.tsx | 3 ++- src/common/constants/zIndex.ts | 5 +++++ 2 files changed, 7 insertions(+), 1 deletion(-) create mode 100644 src/common/constants/zIndex.ts diff --git a/src/common/components/Header.tsx b/src/common/components/Header.tsx index ea5e4e4..9ba41f4 100644 --- a/src/common/components/Header.tsx +++ b/src/common/components/Header.tsx @@ -1,5 +1,6 @@ import type { ReactElement } from "react"; import styled from "@emotion/styled"; +import { Z_INDEX } from "../constants/zIndex"; interface HeaderProps { leftElement?: ReactElement | string; @@ -23,7 +24,7 @@ export default Header; const HeaderWrapper = styled.header({ position: "sticky", - zIndex: 999, + zIndex: Z_INDEX.HEADER, top: 0, display: "flex", diff --git a/src/common/constants/zIndex.ts b/src/common/constants/zIndex.ts new file mode 100644 index 0000000..48a5f01 --- /dev/null +++ b/src/common/constants/zIndex.ts @@ -0,0 +1,5 @@ +export const Z_INDEX = { + MODAL: 1000, + DROPDOWN: 100, + HEADER: 10, +} as const;