From b9b3432f5d83c87a5c1154c77c5063f0ecf522ab Mon Sep 17 00:00:00 2001 From: celine Date: Mon, 29 Sep 2025 18:34:44 +0900 Subject: [PATCH 1/4] =?UTF-8?q?=E2=9C=A8=C2=A0feat:=20container=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/components/layout/container/container.tsx | 31 +++++++++++++++++++ src/components/layout/container/index.ts | 1 + src/components/layout/index.ts | 2 ++ 3 files changed, 34 insertions(+) create mode 100644 src/components/layout/container/container.tsx create mode 100644 src/components/layout/container/index.ts diff --git a/src/components/layout/container/container.tsx b/src/components/layout/container/container.tsx new file mode 100644 index 0000000..6640504 --- /dev/null +++ b/src/components/layout/container/container.tsx @@ -0,0 +1,31 @@ +import { cn } from '@/lib/utils/cn'; +import { ElementType, ReactNode } from 'react'; + +interface Props { + as?: ElementType; + className?: string; + children: ReactNode; +} + +export const Wrapper = ({ children }: { children: ReactNode }) => { + return
{children}
; +}; + +const Container = ({ as: Component = 'main', className, children }: Props) => { + const isMain = Component === 'main'; + + return ( + + {children} + + ); +}; +export default Container; diff --git a/src/components/layout/container/index.ts b/src/components/layout/container/index.ts new file mode 100644 index 0000000..7a76bc1 --- /dev/null +++ b/src/components/layout/container/index.ts @@ -0,0 +1 @@ +export { default as Container, Wrapper } from './container'; diff --git a/src/components/layout/index.ts b/src/components/layout/index.ts index e69de29..7dda070 100644 --- a/src/components/layout/index.ts +++ b/src/components/layout/index.ts @@ -0,0 +1,2 @@ +export { Container, Wrapper } from './container'; +export { Header } from './header'; From 6f29d96fa7338b777bbddd513df5dfaced32e337 Mon Sep 17 00:00:00 2001 From: celine Date: Mon, 29 Sep 2025 20:50:29 +0900 Subject: [PATCH 2/4] =?UTF-8?q?=F0=9F=8D=B1=C2=A0asset:=20=EB=A1=9C?= =?UTF-8?q?=EA=B3=A0=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/images/logo.svg | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/assets/images/logo.svg b/src/assets/images/logo.svg index 36cff94..11d7469 100644 --- a/src/assets/images/logo.svg +++ b/src/assets/images/logo.svg @@ -1,10 +1,10 @@ - - - - - - - - - + + + + + + + + + From 1ff10638d90bff691a1619f0dcc32e9157d4d5aa Mon Sep 17 00:00:00 2001 From: celine Date: Mon, 29 Sep 2025 20:51:14 +0900 Subject: [PATCH 3/4] =?UTF-8?q?=E2=9C=A8=C2=A0feat:=20=EC=95=84=EC=9D=B4?= =?UTF-8?q?=EC=BD=98=20744px=20=EC=9D=B4=EC=83=81=20=EC=82=AC=EC=9D=B4?= =?UTF-8?q?=EC=A6=88=20=EB=8C=80=EC=9D=91=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ui/icon/icon.tsx | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/src/components/ui/icon/icon.tsx b/src/components/ui/icon/icon.tsx index 70dbb34..0996598 100644 --- a/src/components/ui/icon/icon.tsx +++ b/src/components/ui/icon/icon.tsx @@ -1,11 +1,12 @@ -import { forwardRef } from 'react'; -import { cn } from '@/lib/utils/cn'; import { ICONS, ICON_SIZES, type IconName, type IconSize } from '@/constants/icon'; +import { cn } from '@/lib/utils/cn'; +import { forwardRef } from 'react'; interface IconProps extends React.HTMLAttributes { iconName: IconName; - iconSize?: IconSize; + iconSize?: IconSize; // 모바일 기본 사이즈 + bigScreenSize?: IconSize; // PC에서 사이즈 다를때 사용 className?: string; - ariaLabel?: string; + ariaLabel: string; // 접근성 라벨 } /** @@ -16,14 +17,15 @@ interface IconProps extends React.HTMLAttributes { */ const Icon = forwardRef( - ({ iconName, iconSize = 'md', className, ariaLabel, ...props }, ref) => { + ({ iconName, iconSize = 'md', bigScreenSize, className, ariaLabel, ...props }, ref) => { const url = ICONS[iconName]; const size = ICON_SIZES[iconSize]; + const bigSize = bigScreenSize ? `tablet:${ICON_SIZES[bigScreenSize]}` : ''; return ( Date: Mon, 29 Sep 2025 20:51:50 +0900 Subject: [PATCH 4/4] =?UTF-8?q?=E2=9C=A8=C2=A0feat:=20=ED=97=A4=EB=8D=94?= =?UTF-8?q?=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=ED=8D=BC=EB=B8=94?= =?UTF-8?q?=EB=A6=AC=EC=8B=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/layout/header/header.tsx | 49 +++++++++++++++++++ src/components/layout/header/index.ts | 1 + src/pages/_app.tsx | 9 +++- .../DesignTokens/Typography.stories.tsx | 16 +++--- 4 files changed, 65 insertions(+), 10 deletions(-) create mode 100644 src/components/layout/header/header.tsx create mode 100644 src/components/layout/header/index.ts diff --git a/src/components/layout/header/header.tsx b/src/components/layout/header/header.tsx new file mode 100644 index 0000000..ef31fbb --- /dev/null +++ b/src/components/layout/header/header.tsx @@ -0,0 +1,49 @@ +import logo from '@/assets/images/logo.svg'; +import { Icon } from '@/components/ui'; +import { cn } from '@/lib/utils/cn'; +import Image from 'next/image'; +import Link from 'next/link'; + +const Header = () => { + return ( +
+
+ 더 줄게 +
+
+ + +
+ +
+ ); +}; +export default Header; diff --git a/src/components/layout/header/index.ts b/src/components/layout/header/index.ts new file mode 100644 index 0000000..7899000 --- /dev/null +++ b/src/components/layout/header/index.ts @@ -0,0 +1 @@ +export { default as Header } from './header'; diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index ee38e28..0243deb 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -1,8 +1,8 @@ +import { Container, Header, Wrapper } from '@/components/layout'; import '@/styles/fonts.css'; import '@/styles/globals.css'; import type { AppProps } from 'next/app'; import Head from 'next/head'; - export default function App({ Component, pageProps }: AppProps) { return ( <> @@ -11,7 +11,12 @@ export default function App({ Component, pageProps }: AppProps) { - + +
+ + + + ); } diff --git a/src/stories/DesignTokens/Typography.stories.tsx b/src/stories/DesignTokens/Typography.stories.tsx index 5ba187f..3989ded 100644 --- a/src/stories/DesignTokens/Typography.stories.tsx +++ b/src/stories/DesignTokens/Typography.stories.tsx @@ -1,14 +1,14 @@ import type { Meta, StoryObj } from '@storybook/nextjs'; const texts = [ - { name: 'caption', label: 'Caption text', size: 12 }, - { name: 'body-s', label: 'Body Small', size: 14 }, - { name: 'body-m', label: 'Body Medium', size: 16 }, - { name: 'body-l', label: 'Body Large', size: 16 }, + { name: 'caption', label: 'Caption', size: 12 }, + { name: 'body-s', label: 'Body-2 regular', size: 14 }, + { name: 'body-m', label: 'Body-1 bold', size: 16 }, + { name: 'body-l', label: 'Body-1 regular', size: 16 }, { name: 'modal', label: 'Modal text', size: 18 }, - { name: 'heading-s', label: 'Heading Small', size: 20 }, - { name: 'heading-m', label: 'Heading Medium', size: 24 }, - { name: 'heading-l', label: 'Heading Large', size: 28 }, + { name: 'heading-s', label: 'h3', size: 20 }, + { name: 'heading-m', label: 'h2', size: 24 }, + { name: 'heading-l', label: 'h1', size: 28 }, ]; const meta: Meta = { @@ -23,7 +23,7 @@ export const TextStyles: Story = {
{texts.map(t => (

- text-{t.name} : {t.size}px - 가나다 ABC abc 123 + text-{t.name} : {t.size}px - 피그마 기준: {t.label}

))}