diff --git a/.pnp.cjs b/.pnp.cjs index e8048f6b..d6dc272b 100755 --- a/.pnp.cjs +++ b/.pnp.cjs @@ -66,7 +66,6 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) { ["react-dom", "virtual:d9cd1cf96fc105240ce4126e416dd90faeefaf08cea474f2ffdd0a21bc6194bc993779567e0c0bf19c40cbbd585d546a065d8582fcc0925f8826e5fbca78aa72#npm:18.3.1"],\ ["storybook", "npm:8.2.1"],\ ["tailwind-merge", "npm:2.4.0"],\ - ["tailwind-variants", "virtual:d9cd1cf96fc105240ce4126e416dd90faeefaf08cea474f2ffdd0a21bc6194bc993779567e0c0bf19c40cbbd585d546a065d8582fcc0925f8826e5fbca78aa72#npm:0.2.1"],\ ["tailwindcss", "npm:3.4.4"],\ ["tailwindcss-animate", "virtual:d9cd1cf96fc105240ce4126e416dd90faeefaf08cea474f2ffdd0a21bc6194bc993779567e0c0bf19c40cbbd585d546a065d8582fcc0925f8826e5fbca78aa72#npm:1.0.7"],\ ["typescript", "patch:typescript@npm%3A5.1.6#~builtin::version=5.1.6&hash=5da071"],\ @@ -6659,7 +6658,6 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) { ["react-dom", "virtual:d9cd1cf96fc105240ce4126e416dd90faeefaf08cea474f2ffdd0a21bc6194bc993779567e0c0bf19c40cbbd585d546a065d8582fcc0925f8826e5fbca78aa72#npm:18.3.1"],\ ["storybook", "npm:8.2.1"],\ ["tailwind-merge", "npm:2.4.0"],\ - ["tailwind-variants", "virtual:d9cd1cf96fc105240ce4126e416dd90faeefaf08cea474f2ffdd0a21bc6194bc993779567e0c0bf19c40cbbd585d546a065d8582fcc0925f8826e5fbca78aa72#npm:0.2.1"],\ ["tailwindcss", "npm:3.4.4"],\ ["tailwindcss-animate", "virtual:d9cd1cf96fc105240ce4126e416dd90faeefaf08cea474f2ffdd0a21bc6194bc993779567e0c0bf19c40cbbd585d546a065d8582fcc0925f8826e5fbca78aa72#npm:1.0.7"],\ ["typescript", "patch:typescript@npm%3A5.1.6#~builtin::version=5.1.6&hash=5da071"],\ @@ -14806,29 +14804,6 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) { "linkType": "HARD"\ }]\ ]],\ - ["tailwind-variants", [\ - ["npm:0.2.1", {\ - "packageLocation": "./.yarn/cache/tailwind-variants-npm-0.2.1-853f67f9ea-39086c6333.zip/node_modules/tailwind-variants/",\ - "packageDependencies": [\ - ["tailwind-variants", "npm:0.2.1"]\ - ],\ - "linkType": "SOFT"\ - }],\ - ["virtual:d9cd1cf96fc105240ce4126e416dd90faeefaf08cea474f2ffdd0a21bc6194bc993779567e0c0bf19c40cbbd585d546a065d8582fcc0925f8826e5fbca78aa72#npm:0.2.1", {\ - "packageLocation": "./.yarn/__virtual__/tailwind-variants-virtual-6a9926aa49/0/cache/tailwind-variants-npm-0.2.1-853f67f9ea-39086c6333.zip/node_modules/tailwind-variants/",\ - "packageDependencies": [\ - ["tailwind-variants", "virtual:d9cd1cf96fc105240ce4126e416dd90faeefaf08cea474f2ffdd0a21bc6194bc993779567e0c0bf19c40cbbd585d546a065d8582fcc0925f8826e5fbca78aa72#npm:0.2.1"],\ - ["@types/tailwindcss", null],\ - ["tailwind-merge", "npm:2.4.0"],\ - ["tailwindcss", "npm:3.4.4"]\ - ],\ - "packagePeers": [\ - "@types/tailwindcss",\ - "tailwindcss"\ - ],\ - "linkType": "HARD"\ - }]\ - ]],\ ["tailwindcss", [\ ["npm:3.4.4", {\ "packageLocation": "./.yarn/cache/tailwindcss-npm-3.4.4-18aba64742-743639b6a5.zip/node_modules/tailwindcss/",\ diff --git a/.yarn/cache/tailwind-variants-npm-0.2.1-853f67f9ea-39086c6333.zip b/.yarn/cache/tailwind-variants-npm-0.2.1-853f67f9ea-39086c6333.zip deleted file mode 100644 index 555f7426..00000000 Binary files a/.yarn/cache/tailwind-variants-npm-0.2.1-853f67f9ea-39086c6333.zip and /dev/null differ diff --git a/package.json b/package.json index b99a345c..613f805e 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,6 @@ "react": "^18", "react-dom": "^18", "tailwind-merge": "^2.4.0", - "tailwind-variants": "^0.2.1", "tailwindcss-animate": "^1.0.7" }, "devDependencies": { diff --git a/src/app/layout.tsx b/src/app/layout.tsx index ee841aea..9d34562e 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -2,7 +2,6 @@ import type { Metadata } from 'next'; import { Inter } from 'next/font/google'; import { QueryProvider } from '@/lib'; import './globals.css'; -import QueryProvider from '@/context/QueryProvider/QueryProvider'; const inter = Inter({ subsets: ['latin'] }); diff --git a/src/app/page.tsx b/src/app/page.tsx index 6c503853..c5fb138c 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,3 +1,14 @@ +import { Text } from '@/system/components'; +import { typographyVariant } from '@/system/token/typography'; + export default function Home() { - return
123
; + return ( + <> + {typographyVariant.map((typo) => ( + + 하이하이 + + ))} + + ); } diff --git a/src/lib/AsyncBoundary/AsyncBoundary.tsx b/src/lib/AsyncBoundary/AsyncBoundary.tsx index fd78c715..3d87f4e5 100644 --- a/src/lib/AsyncBoundary/AsyncBoundary.tsx +++ b/src/lib/AsyncBoundary/AsyncBoundary.tsx @@ -4,7 +4,7 @@ import { forwardRef } from 'react'; import { useQueryErrorResetBoundary } from '@tanstack/react-query'; import { chain } from '@/utils'; import { ErrorBoundary } from '../ErrorBoundary/ErrorBoundary'; -import SSRSafeSuspense from '../SSRSafeSuspense/SSRSafeSuspense'; +import { SSRSafeSuspense } from '../SSRSafeSuspense/SSRSafeSuspense'; import type { StrictPropsWithChildren } from '@/types'; import type { ComponentProps, ComponentRef, Suspense } from 'react'; diff --git a/src/lib/ErrorBoundary/ErrorBoundaryContext.tsx b/src/lib/ErrorBoundary/ErrorBoundaryContext.tsx index 6b9fdd0e..a48fc62b 100644 --- a/src/lib/ErrorBoundary/ErrorBoundaryContext.tsx +++ b/src/lib/ErrorBoundary/ErrorBoundaryContext.tsx @@ -1,6 +1,6 @@ 'use client'; -import generateContext from '../generateContext/generateContext'; +import { generateContext } from '../generateContext/generateContext'; export const [ErrorboundaryProvider, useErrorBoundaryContext] = generateContext<{ error: Error | null; diff --git a/src/system/components/Text/Text.tsx b/src/system/components/Text/Text.tsx index 7ebc2b99..7bfd215e 100644 --- a/src/system/components/Text/Text.tsx +++ b/src/system/components/Text/Text.tsx @@ -2,28 +2,23 @@ import { forwardRef } from 'react'; import { useTextStyles } from './styles/useTextStyles'; import type { ComponentProps, ElementType } from 'react'; import type { Typography } from '@/system/token/typography'; +import { FontWeight } from '@/system/token/fontWeight'; // TODO: Polymorphic하게 변경 export type TextProps = ComponentProps<'p'> & { as?: ElementType; typography: Typography; + fontWeight: FontWeight; color?: string; }; export const Text = forwardRef(function Text( - { as: Component = 'p', className, typography, color, style, ...restProps }, + { as: Component = 'p', className, fontWeight, typography, color, style, ...restProps }, ref, ) { - const textStyle = useTextStyles({ typography, className }); + const textStyle = useTextStyles({ typography, fontWeight, className }); - return ( - - ); + return ; }); Text.displayName = 'Text'; diff --git a/src/system/components/Text/stories/Text.stories.tsx b/src/system/components/Text/stories/Text.stories.tsx index 25aaa231..d3fec893 100644 --- a/src/system/components/Text/stories/Text.stories.tsx +++ b/src/system/components/Text/stories/Text.stories.tsx @@ -14,7 +14,7 @@ export function Example() { return ( <> {typographyVariant.map((typography) => ( - + 테스트입니다 ))} diff --git a/src/system/components/Text/styles/typography.ts b/src/system/components/Text/styles/typography.ts new file mode 100644 index 00000000..4ca6129f --- /dev/null +++ b/src/system/components/Text/styles/typography.ts @@ -0,0 +1,45 @@ +import { Typography } from '@/system/token/typography/index'; + +// NOTE: px정보를 typography token에서 직접 가져올 경우 tailwind에서 인식하지 못하는 문제가 있어 임시적으로 값을 넣어놓습니다. +// FIXME: 추후 수정해야합니다. +export const fontSize: Record = { + title1: 'text-[36px]', + title2: 'text-[28px]', + title3: 'text-[24px]', + heading1: 'text-[20px]', + heading2: 'text-[18px]', + body1: 'text-[16px]', + body2: 'text-[15px]', + label1: 'text-[14px]', + label2: 'text-[13px]', + caption1: 'text-[12px]', + caption2: 'text-[11px]', +} as const; + +export const lineHeight: Record = { + title1: 'leading-[48px]', + title2: 'leading-[38px]', + title3: 'leading-[32px]', + heading1: 'leading-[28px]', + heading2: 'leading-[26px]', + body1: 'leading-[24px]', + body2: 'leading-[22px]', + label1: 'leading-[20px]', + label2: 'leading-[18px]', + caption1: 'leading-[16px]', + caption2: 'leading-[14px]', +} as const; + +export const letterSpacing: Record = { + title1: 'tracking-[-0.027em]', + title2: 'tracking-[-0.0236em]', + title3: 'tracking-[-0.023em]', + heading1: 'tracking-[-0.012em]', + heading2: 'tracking-[-0.002em]', + body1: 'tracking-[0.0057em]', + body2: 'tracking-[0.0096em]', + label1: 'tracking-[0.0145em]', + label2: 'tracking-[0.0194em]', + caption1: 'tracking-[0.0252em]', + caption2: 'tracking-[0.0311em]', +} as const; diff --git a/src/system/components/Text/styles/useTextStyles.ts b/src/system/components/Text/styles/useTextStyles.ts index fb43897e..18bf2ef3 100644 --- a/src/system/components/Text/styles/useTextStyles.ts +++ b/src/system/components/Text/styles/useTextStyles.ts @@ -1,22 +1,25 @@ import { clsx } from 'clsx'; -import { textVariants } from './variants'; +import { paragraphVariants } from './variants'; import type { Typography } from '@/system/token/typography'; import type { TextAnatomy } from '../anatomy'; +import { FontWeight } from '@/system/token/fontWeight'; interface Props { className?: string; + fontWeight?: FontWeight; typography: Typography; } export function useTextStyles({ className, typography, + fontWeight, }: Props): Record { - const styleVariants = textVariants({ typography }); + const paragraphStyle = paragraphVariants({ typography, fontWeight }); return { paragraph: { - className: clsx(className, styleVariants), + className: clsx(className, paragraphStyle), }, }; } diff --git a/src/system/components/Text/styles/variants.ts b/src/system/components/Text/styles/variants.ts index d8c73053..cf4e5aed 100644 --- a/src/system/components/Text/styles/variants.ts +++ b/src/system/components/Text/styles/variants.ts @@ -1,20 +1,24 @@ import { typographyVariant } from '@/system/token/typography'; -import { tv } from 'tailwind-variants'; +import { cva } from 'class-variance-authority'; import type { Typography } from '@/system/token/typography'; +import { fontSize, lineHeight, letterSpacing } from '@/system/components/Text/styles/typography'; +import { FontWeight, fontWeight, fontWeightVariant } from '@/system/token/fontWeight'; -export const textVariants = tv({ - base: 'm-0', - slots: { - paragraph: [], - }, +export const paragraphVariants = cva(['m-0'], { variants: { typography: typographyVariant.reduce( (acc, typography) => { - // TODO: fontsize, fontweight, lineheight등 tailwind정보 추가 - acc[typography] = []; + acc[typography] = [fontSize[typography], lineHeight[typography], letterSpacing[typography]]; + return acc; + }, + {} as Record, + ), + fontWeight: fontWeightVariant.reduce( + (acc, token) => { + acc[token] = `font-${fontWeight[token]}`; return acc; }, - {} as Record, + {} as Record, ), }, }); diff --git a/src/system/token/fontWeight.ts b/src/system/token/fontWeight.ts new file mode 100644 index 00000000..40ef59c4 --- /dev/null +++ b/src/system/token/fontWeight.ts @@ -0,0 +1,9 @@ +export const fontWeightVariant = ['bold', 'semibold', 'medium', 'regular'] as const; + +export type FontWeight = (typeof fontWeightVariant)[number]; +export const fontWeight: Record = { + bold: 700, + semibold: 600, + medium: 500, + regular: 400, +} as const; diff --git a/src/system/token/typography/index.ts b/src/system/token/typography/index.ts index 6a4536b8..6664bf46 100644 --- a/src/system/token/typography/index.ts +++ b/src/system/token/typography/index.ts @@ -1,38 +1,57 @@ export const typographyVariant = [ - 'Display1', - 'Display2', - 'Title1', - 'Title2', - 'Title3', - 'Heading1', - 'Heading2', - 'Headline1', - 'Headline2', - 'Body1', - 'Body2', - 'Label1', - 'Label2', - 'Caption1', - 'Caption2', + 'title1', + 'title2', + 'title3', + 'heading1', + 'heading2', + 'body1', + 'body2', + 'label1', + 'label2', + 'caption1', + 'caption2', ] as const; export type Typography = (typeof typographyVariant)[number]; -// TODO: 자간 / 행간 높이 설정 -export const fontSize: Record = { - Display1: 56, - Display2: 40, - Title1: 36, - Title2: 28, - Title3: 24, - Heading1: 22, - Heading2: 20, - Headline1: 18, - Headline2: 17, - Body1: 16, - Body2: 15, - Label1: 14, - Label2: 13, - Caption1: 12, - Caption2: 11, +export const fontSize: Record = { + title1: '36px', + title2: '28px', + title3: '24px', + heading1: '20px', + heading2: '18px', + body1: '16px', + body2: '15px', + label1: '14px', + label2: '13px', + caption1: '12px', + caption2: '11px', +} as const; + +export const lineHeight: Record = { + title1: '48px', + title2: '38px', + title3: '32px', + heading1: '28px', + heading2: '26px', + body1: '24px', + body2: '22px', + label1: '20px', + label2: '18px', + caption1: '16px', + caption2: '14px', +} as const; + +export const letterSpacing: Record = { + title1: '-0.027em', + title2: '-0.0236em', + title3: '-0.023em', + heading1: '-0.012em', + heading2: '-0.002em', + body1: '0.0057em', + body2: '0.0096em', + label1: '0.0145em', + label2: '0.0194em', + caption1: '0.0252em', + caption2: '0.0311em', } as const; diff --git a/yarn.lock b/yarn.lock index 4043a550..7f77b615 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4373,7 +4373,6 @@ __metadata: react-dom: ^18 storybook: ^8.2.1 tailwind-merge: ^2.4.0 - tailwind-variants: ^0.2.1 tailwindcss: ^3.4.1 tailwindcss-animate: ^1.0.7 typescript: 5.1 @@ -11249,24 +11248,13 @@ __metadata: languageName: node linkType: hard -"tailwind-merge@npm:^2.2.0, tailwind-merge@npm:^2.4.0": +"tailwind-merge@npm:^2.4.0": version: 2.4.0 resolution: "tailwind-merge@npm:2.4.0" checksum: 442ab18af754eb90a1c730289b10a5df89ec8f197b4783bd31651fffc06ac06dbe7a8f491c2e133c906d6ab466170a5fc1f45aa2d22874e47706acf9d8b0cfe5 languageName: node linkType: hard -"tailwind-variants@npm:^0.2.1": - version: 0.2.1 - resolution: "tailwind-variants@npm:0.2.1" - dependencies: - tailwind-merge: ^2.2.0 - peerDependencies: - tailwindcss: "*" - checksum: 39086c633399032fed3923c44980a05183e27179f64bcb945f05ca6efec9bae283a371502ae34c9cb5740b195ef3967aab23cdf79fe2cf87be8fa2f19fb38a03 - languageName: node - linkType: hard - "tailwindcss-animate@npm:^1.0.7": version: 1.0.7 resolution: "tailwindcss-animate@npm:1.0.7"