From ad65dc5de912cde8ced790b2740467aa6292545d Mon Sep 17 00:00:00 2001 From: jjangminii Date: Wed, 15 Oct 2025 18:44:46 +0900 Subject: [PATCH 01/14] =?UTF-8?q?feat:=20header=20=ED=8C=8C=EC=9D=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/shared/components/header/Header.tsx | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 src/shared/components/header/Header.tsx diff --git a/src/shared/components/header/Header.tsx b/src/shared/components/header/Header.tsx new file mode 100644 index 0000000..e69de29 From f68187fde68a2cbcfafb587c036e40777a214f9a Mon Sep 17 00:00:00 2001 From: jjangminii Date: Fri, 17 Oct 2025 16:20:17 +0900 Subject: [PATCH 02/14] =?UTF-8?q?feat:=20header=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/shared/components/header/Header.tsx | 45 +++++++++++++++++++++++++ 1 file changed, 45 insertions(+) diff --git a/src/shared/components/header/Header.tsx b/src/shared/components/header/Header.tsx index e69de29..20fbaef 100644 --- a/src/shared/components/header/Header.tsx +++ b/src/shared/components/header/Header.tsx @@ -0,0 +1,45 @@ +import { Icon } from '@/shared/icons'; +import { cn } from '@/shared/lib'; + +type HeaderProps = { + title: string; + onClick: () => void; + className?: string; +}; + +const Header = ({ title, onClick, className }: HeaderProps) => { + return ( +
+
+ + +

+ {title} +

+ +
+
+
+ ); +}; + +export default Header; From 02b693e318fe150c447959b8af0222a38becd1b6 Mon Sep 17 00:00:00 2001 From: jjangminii Date: Fri, 17 Oct 2025 16:21:34 +0900 Subject: [PATCH 03/14] =?UTF-8?q?feat:=20HeaderProps=20=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/index.tsx | 7 +++---- src/shared/components/header/Header.tsx | 3 ++- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 1f35400..1f89521 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,3 +1,4 @@ +import Header from '@/shared/components/header/Header'; import { Icon } from '@/shared/icons'; export default function Home() { @@ -5,14 +6,12 @@ export default function Home() { <>
+
{}} className='' />

초기 세팅 완료

- - - - +

Next.js(Page Router) + TS + Tailwind + Axios

diff --git a/src/shared/components/header/Header.tsx b/src/shared/components/header/Header.tsx index 20fbaef..47270c7 100644 --- a/src/shared/components/header/Header.tsx +++ b/src/shared/components/header/Header.tsx @@ -3,8 +3,9 @@ import { cn } from '@/shared/lib'; type HeaderProps = { title: string; - onClick: () => void; className?: string; + + onClick: () => void; }; const Header = ({ title, onClick, className }: HeaderProps) => { From 65579d99a8180e888466b926b1cfcee1d913b333 Mon Sep 17 00:00:00 2001 From: jjangminii Date: Fri, 17 Oct 2025 16:22:09 +0900 Subject: [PATCH 04/14] =?UTF-8?q?feat:=20=EC=8A=A4=ED=83=80=EC=9D=BC=20?= =?UTF-8?q?=EC=A0=95=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/shared/components/header/Header.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/shared/components/header/Header.tsx b/src/shared/components/header/Header.tsx index 47270c7..20fbaef 100644 --- a/src/shared/components/header/Header.tsx +++ b/src/shared/components/header/Header.tsx @@ -3,9 +3,8 @@ import { cn } from '@/shared/lib'; type HeaderProps = { title: string; - className?: string; - onClick: () => void; + className?: string; }; const Header = ({ title, onClick, className }: HeaderProps) => { From 581323622b28188981b4ca24d521c55f165d9b59 Mon Sep 17 00:00:00 2001 From: jjangminii Date: Fri, 17 Oct 2025 16:32:47 +0900 Subject: [PATCH 05/14] =?UTF-8?q?feat:=20header=20=EB=B6=84=EA=B8=B0?= =?UTF-8?q?=EC=B2=98=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/shared/components/header/Header.tsx | 40 +++++++++++++++---------- 1 file changed, 25 insertions(+), 15 deletions(-) diff --git a/src/shared/components/header/Header.tsx b/src/shared/components/header/Header.tsx index 20fbaef..a75306e 100644 --- a/src/shared/components/header/Header.tsx +++ b/src/shared/components/header/Header.tsx @@ -1,36 +1,46 @@ import { Icon } from '@/shared/icons'; import { cn } from '@/shared/lib'; +import { cva, type VariantProps } from 'class-variance-authority'; -type HeaderProps = { +interface HeaderProps { title: string; onClick: () => void; className?: string; -}; + color?: VariantProps['color']; +} + +const headerStyle = cva( + 'w-full h-[11.8rem] px-[1.6rem] pb-[1.8rem] pt-[7.6rem] fixed top-0 left-0 right-0 z-[100]', + { + variants: { + color: { + mint300: 'bg-mint-300', + mint50: 'bg-mint-50', + }, + }, + defaultVariants: { + color: 'mint300', + }, + }, +); -const Header = ({ title, onClick, className }: HeaderProps) => { +const Header = ({ title, onClick, color, className }: HeaderProps) => { return ( -
-
+
+

{title} From aa6dcf965868283f66c16526fc3b0ac3a673d60d Mon Sep 17 00:00:00 2001 From: jjangminii Date: Fri, 17 Oct 2025 16:45:07 +0900 Subject: [PATCH 06/14] =?UTF-8?q?feat:=20index=20=ED=8C=8C=EC=9D=BC=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/shared/components/index.ts | 1 + 1 file changed, 1 insertion(+) create mode 100644 src/shared/components/index.ts diff --git a/src/shared/components/index.ts b/src/shared/components/index.ts new file mode 100644 index 0000000..c51110f --- /dev/null +++ b/src/shared/components/index.ts @@ -0,0 +1 @@ +export { default as Header } from './header/Header'; From 7330b4347079ea5a50ea102aefff0bc47a9a92a1 Mon Sep 17 00:00:00 2001 From: jjangminii Date: Fri, 17 Oct 2025 17:33:14 +0900 Subject: [PATCH 07/14] =?UTF-8?q?feat:=20ControlBar=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80=20=EB=B0=8F=20index=20?= =?UTF-8?q?=ED=8C=8C=EC=9D=BC=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/index.tsx | 6 +- src/shared/components/header/ControlBar.tsx | 91 +++++++++++++++++++++ src/shared/components/index.ts | 1 + 3 files changed, 96 insertions(+), 2 deletions(-) create mode 100644 src/shared/components/header/ControlBar.tsx diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 1f89521..d270d6b 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,4 +1,4 @@ -import Header from '@/shared/components/header/Header'; +import { ControlBar, Header } from '@/shared/components'; import { Icon } from '@/shared/icons'; export default function Home() { @@ -6,7 +6,9 @@ export default function Home() { <>
-
{}} className='' /> +
{}} className='' title={'글다'} /> + +

초기 세팅 완료 diff --git a/src/shared/components/header/ControlBar.tsx b/src/shared/components/header/ControlBar.tsx new file mode 100644 index 0000000..a26a09f --- /dev/null +++ b/src/shared/components/header/ControlBar.tsx @@ -0,0 +1,91 @@ +import { Icon } from '@/shared/icons'; +import { cn } from '@/shared/lib'; +import { cva } from 'class-variance-authority'; + +interface ControlBarProps { + onLogin?: () => void; + isLoggedIn: boolean; + userName?: string; + className?: string; + disabled?: boolean; +} + +const rightStyle = cva('flex items-center gap-[0.6rem] transition w-[7.8rem]', { + variants: { + state: { + loggedIn: 'text-mint-600', + guest: 'text-gray-400 hover:text-gray-600', + }, + disabled: { + true: 'opacity-60 pointer-events-none', + false: '', + }, + }, + defaultVariants: { state: 'guest', disabled: false }, +}); + +const ControlBar = ({ + onLogin, + isLoggedIn = false, + userName = '홍길동님', + className, + disabled = false, +}: ControlBarProps) => { + const rightState = isLoggedIn ? 'loggedIn' : ('guest' as const); + const iconColor = isLoggedIn ? 'mint-600' : ('gray-400' as const); + + return ( +
+
+
+ +

+ 글다 +

+ + {isLoggedIn ? ( +
+ + + {userName}님 + +
+ ) : ( + + )} +
+
+ ); +}; + +export default ControlBar; diff --git a/src/shared/components/index.ts b/src/shared/components/index.ts index c51110f..bfac3a9 100644 --- a/src/shared/components/index.ts +++ b/src/shared/components/index.ts @@ -1 +1,2 @@ export { default as Header } from './header/Header'; +export { default as ControlBar } from './header/ControlBar'; From d41e808bf52e63b6811c1026eb0f0de89708fba1 Mon Sep 17 00:00:00 2001 From: jjangminii Date: Fri, 17 Oct 2025 17:43:47 +0900 Subject: [PATCH 08/14] =?UTF-8?q?feat:=20=ED=94=84=EB=A1=AD=EC=8A=A4=20?= =?UTF-8?q?=EC=A0=95=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/index.tsx | 2 +- src/shared/components/header/ControlBar.tsx | 27 +++++---------------- 2 files changed, 7 insertions(+), 22 deletions(-) diff --git a/src/pages/index.tsx b/src/pages/index.tsx index d270d6b..09477ed 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -8,7 +8,7 @@ export default function Home() {
{}} className='' title={'글다'} /> - +

초기 세팅 완료 diff --git a/src/shared/components/header/ControlBar.tsx b/src/shared/components/header/ControlBar.tsx index a26a09f..59016bd 100644 --- a/src/shared/components/header/ControlBar.tsx +++ b/src/shared/components/header/ControlBar.tsx @@ -7,29 +7,23 @@ interface ControlBarProps { isLoggedIn: boolean; userName?: string; className?: string; - disabled?: boolean; } -const rightStyle = cva('flex items-center gap-[0.6rem] transition w-[7.8rem]', { +const rightStyle = cva('flex items-center gap-[0.6rem] transition', { variants: { state: { loggedIn: 'text-mint-600', guest: 'text-gray-400 hover:text-gray-600', }, - disabled: { - true: 'opacity-60 pointer-events-none', - false: '', - }, }, - defaultVariants: { state: 'guest', disabled: false }, + defaultVariants: { state: 'guest' }, }); const ControlBar = ({ onLogin, isLoggedIn = false, - userName = '홍길동님', + userName = '홍길동', className, - disabled = false, }: ControlBarProps) => { const rightState = isLoggedIn ? 'loggedIn' : ('guest' as const); const iconColor = isLoggedIn ? 'mint-600' : ('gray-400' as const); @@ -37,7 +31,6 @@ const ControlBar = ({ return (
@@ -51,12 +44,7 @@ const ControlBar = ({

{isLoggedIn ? ( -
+
{ e.stopPropagation(); - { - /*TODO: 로그인 페이지 이동 연결*/ - } - if (!disabled) onLogin?.(); + onLogin?.(); }} - className={rightStyle({ state: rightState, disabled })} + className={rightStyle({ state: rightState })} aria-label='Log In' > From 02bbcb7a5af85225a58f2f7a51324251ca555668 Mon Sep 17 00:00:00 2001 From: jjangminii Date: Fri, 17 Oct 2025 17:50:56 +0900 Subject: [PATCH 09/14] =?UTF-8?q?feat:=20ControlBar=20=EC=8A=A4=ED=83=80?= =?UTF-8?q?=EC=9D=BC=20=EC=88=98=EC=A0=95=20=EB=B0=8F=20=EB=A0=88=EC=9D=B4?= =?UTF-8?q?=EC=95=84=EC=9B=83=20=EA=B0=9C=EC=84=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/shared/components/header/ControlBar.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/shared/components/header/ControlBar.tsx b/src/shared/components/header/ControlBar.tsx index 59016bd..5922d7e 100644 --- a/src/shared/components/header/ControlBar.tsx +++ b/src/shared/components/header/ControlBar.tsx @@ -9,7 +9,7 @@ interface ControlBarProps { className?: string; } -const rightStyle = cva('flex items-center gap-[0.6rem] transition', { +const rightStyle = cva('flex items-center gap-[0.6rem] transition w-[7.8rem]', { variants: { state: { loggedIn: 'text-mint-600', @@ -42,12 +42,11 @@ const ControlBar = ({

글다

- {isLoggedIn ? (
From 20850784f15c0c4836dc1f6bacde401555f8b001 Mon Sep 17 00:00:00 2001 From: jjangminii Date: Fri, 17 Oct 2025 17:55:42 +0900 Subject: [PATCH 10/14] =?UTF-8?q?fix:=20ControlBar=20=EC=82=AC=EC=9A=A9?= =?UTF-8?q?=EC=9E=90=20=EC=9D=B4=EB=A6=84=20=ED=91=9C=EC=8B=9C=20=EC=8A=A4?= =?UTF-8?q?=ED=83=80=EC=9D=BC=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/index.tsx | 2 +- src/shared/components/header/ControlBar.tsx | 3 +-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 09477ed..d270d6b 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -8,7 +8,7 @@ export default function Home() {
{}} className='' title={'글다'} /> - +

초기 세팅 완료 diff --git a/src/shared/components/header/ControlBar.tsx b/src/shared/components/header/ControlBar.tsx index 5922d7e..6e47bf3 100644 --- a/src/shared/components/header/ControlBar.tsx +++ b/src/shared/components/header/ControlBar.tsx @@ -46,8 +46,7 @@ const ControlBar = ({
{userName}님 From c3c916e04b03c0bb2942127bd8c2e160d543d59d Mon Sep 17 00:00:00 2001 From: jjangminii Date: Fri, 17 Oct 2025 18:03:53 +0900 Subject: [PATCH 11/14] =?UTF-8?q?feat:=20ControlBar=EC=97=90=20onLogin=20p?= =?UTF-8?q?rop=20=EC=B6=94=EA=B0=80=20=EB=B0=8F=20=EC=8A=A4=ED=83=80?= =?UTF-8?q?=EC=9D=BC=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/index.tsx | 2 +- src/shared/components/header/ControlBar.tsx | 13 +++++-------- 2 files changed, 6 insertions(+), 9 deletions(-) diff --git a/src/pages/index.tsx b/src/pages/index.tsx index d270d6b..ed37f85 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -7,7 +7,7 @@ export default function Home() {
{}} className='' title={'글다'} /> - + {}} />

초기 세팅 완료 diff --git a/src/shared/components/header/ControlBar.tsx b/src/shared/components/header/ControlBar.tsx index 6e47bf3..a439404 100644 --- a/src/shared/components/header/ControlBar.tsx +++ b/src/shared/components/header/ControlBar.tsx @@ -3,8 +3,8 @@ import { cn } from '@/shared/lib'; import { cva } from 'class-variance-authority'; interface ControlBarProps { - onLogin?: () => void; isLoggedIn: boolean; + onLogin?: () => void; userName?: string; className?: string; } @@ -22,24 +22,21 @@ const rightStyle = cva('flex items-center gap-[0.6rem] transition w-[7.8rem]', { const ControlBar = ({ onLogin, isLoggedIn = false, - userName = '홍길동', + userName = '글다', className, }: ControlBarProps) => { const rightState = isLoggedIn ? 'loggedIn' : ('guest' as const); const iconColor = isLoggedIn ? 'mint-600' : ('gray-400' as const); return ( -
+
-

+

글다

{isLoggedIn ? ( @@ -67,7 +64,7 @@ const ControlBar = ({ )}
-
+

); }; From 5c6f604b377725f1c3acfe67eeca6c56f934cd9f Mon Sep 17 00:00:00 2001 From: jjangminii Date: Fri, 17 Oct 2025 18:06:10 +0900 Subject: [PATCH 12/14] =?UTF-8?q?chore:=20=EC=95=88=EC=93=B0=EB=8A=94=20?= =?UTF-8?q?=EC=BD=94=EB=93=9C=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/index.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/pages/index.tsx b/src/pages/index.tsx index ed37f85..66babc4 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -6,9 +6,6 @@ export default function Home() { <>
-
{}} className='' title={'글다'} /> - {}} /> -

초기 세팅 완료 From a7cf7b4f37ddb61ef9672aada9d3a5218ce495a3 Mon Sep 17 00:00:00 2001 From: jjangminii Date: Fri, 17 Oct 2025 18:17:41 +0900 Subject: [PATCH 13/14] =?UTF-8?q?feat:=20ControlBar=EC=97=90=EC=84=9C=20on?= =?UTF-8?q?Login=20=EB=B0=8F=20userName=20prop=EC=9D=84=20=ED=95=84?= =?UTF-8?q?=EC=88=98=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/shared/components/header/ControlBar.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/shared/components/header/ControlBar.tsx b/src/shared/components/header/ControlBar.tsx index a439404..290d39b 100644 --- a/src/shared/components/header/ControlBar.tsx +++ b/src/shared/components/header/ControlBar.tsx @@ -4,8 +4,8 @@ import { cva } from 'class-variance-authority'; interface ControlBarProps { isLoggedIn: boolean; - onLogin?: () => void; - userName?: string; + onLogin: () => void; + userName: string; className?: string; } From 1dc291583859f53724659f13f97fdb2581ebdfeb Mon Sep 17 00:00:00 2001 From: jjangminii Date: Fri, 17 Oct 2025 18:27:27 +0900 Subject: [PATCH 14/14] =?UTF-8?q?fix:=20ControlBar=EC=97=90=EC=84=9C=20isL?= =?UTF-8?q?oggedIn=20prop=EC=9D=98=20=EA=B8=B0=EB=B3=B8=EA=B0=92=20?= =?UTF-8?q?=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/index.tsx | 3 +++ src/shared/components/header/ControlBar.tsx | 2 +- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 66babc4..5976bc7 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -6,6 +6,9 @@ export default function Home() { <>
+
{}} className='' title={'글다'} /> + {}} userName={''} /> + {}} />

초기 세팅 완료 diff --git a/src/shared/components/header/ControlBar.tsx b/src/shared/components/header/ControlBar.tsx index 290d39b..df6f630 100644 --- a/src/shared/components/header/ControlBar.tsx +++ b/src/shared/components/header/ControlBar.tsx @@ -21,7 +21,7 @@ const rightStyle = cva('flex items-center gap-[0.6rem] transition w-[7.8rem]', { const ControlBar = ({ onLogin, - isLoggedIn = false, + isLoggedIn, userName = '글다', className, }: ControlBarProps) => {