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 @@ - - - - - - - - - + + + + + + + + + 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/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/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'; 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 ( @@ -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}

))}