From 06b601be0ce1eabada841a424f0bfc4fa2083a32 Mon Sep 17 00:00:00 2001 From: qkrdmstlr3 Date: Sun, 21 Jul 2024 17:14:24 +0900 Subject: [PATCH 1/5] =?UTF-8?q?feat(system):=20Text=EC=97=90=20typography?= =?UTF-8?q?=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 - src/app/layout.tsx | 1 - src/app/page.tsx | 13 ++- src/system/components/Text/Text.tsx | 10 +-- .../components/Text/styles/typography.ts | 45 ++++++++++ .../components/Text/styles/useTextStyles.ts | 11 +-- src/system/components/Text/styles/variants.ts | 14 ++-- src/system/token/typography/index.ts | 83 ++++++++++++------- 8 files changed, 119 insertions(+), 59 deletions(-) create mode 100644 src/system/components/Text/styles/typography.ts 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..c37bdbbd 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/system/components/Text/Text.tsx b/src/system/components/Text/Text.tsx index 7ebc2b99..cf01fceb 100644 --- a/src/system/components/Text/Text.tsx +++ b/src/system/components/Text/Text.tsx @@ -1,3 +1,4 @@ +'use-client'; import { forwardRef } from 'react'; import { useTextStyles } from './styles/useTextStyles'; import type { ComponentProps, ElementType } from 'react'; @@ -16,14 +17,7 @@ export const Text = forwardRef(function Text( ) { const textStyle = useTextStyles({ typography, className }); - return ( - - ); + return ; }); Text.displayName = 'Text'; 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..beea5662 100644 --- a/src/system/components/Text/styles/useTextStyles.ts +++ b/src/system/components/Text/styles/useTextStyles.ts @@ -1,5 +1,5 @@ import { clsx } from 'clsx'; -import { textVariants } from './variants'; +import { paragraphVariants } from './variants'; import type { Typography } from '@/system/token/typography'; import type { TextAnatomy } from '../anatomy'; @@ -8,15 +8,12 @@ interface Props { typography: Typography; } -export function useTextStyles({ - className, - typography, -}: Props): Record { - const styleVariants = textVariants({ typography }); +export function useTextStyles({ className, typography }: Props): Record { + const paragraphStyle = paragraphVariants({ typography }); 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..c8487578 100644 --- a/src/system/components/Text/styles/variants.ts +++ b/src/system/components/Text/styles/variants.ts @@ -1,20 +1,16 @@ 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'; -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, + {} as Record, ), }, }); 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; From ada7d548221840f8f62345970b01b2d64e113ab8 Mon Sep 17 00:00:00 2001 From: qkrdmstlr3 Date: Sun, 21 Jul 2024 17:26:41 +0900 Subject: [PATCH 2/5] yarn lock --- .pnp.cjs | 25 ------------------ ...riants-npm-0.2.1-853f67f9ea-39086c6333.zip | Bin 19977 -> 0 bytes yarn.lock | 14 +--------- 3 files changed, 1 insertion(+), 38 deletions(-) delete mode 100644 .yarn/cache/tailwind-variants-npm-0.2.1-853f67f9ea-39086c6333.zip 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 555f7426a147b3ddba9156ddab1a29eb2c90eb4f..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 19977 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 Date: Sun, 21 Jul 2024 17:29:51 +0900 Subject: [PATCH 3/5] fix conflict --- src/lib/AsyncBoundary/AsyncBoundary.tsx | 2 +- src/lib/ErrorBoundary/ErrorBoundaryContext.tsx | 2 +- src/system/components/Text/Text.tsx | 1 - 3 files changed, 2 insertions(+), 3 deletions(-) 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 cf01fceb..09103291 100644 --- a/src/system/components/Text/Text.tsx +++ b/src/system/components/Text/Text.tsx @@ -1,4 +1,3 @@ -'use-client'; import { forwardRef } from 'react'; import { useTextStyles } from './styles/useTextStyles'; import type { ComponentProps, ElementType } from 'react'; From 9bb90f0e002919c0babb60ed23f856a1c32d266f Mon Sep 17 00:00:00 2001 From: qkrdmstlr3 Date: Sun, 21 Jul 2024 21:25:44 +0900 Subject: [PATCH 4/5] add font weight --- src/app/page.tsx | 2 +- src/system/components/Text/Text.tsx | 6 ++++-- src/system/components/Text/styles/useTextStyles.ts | 10 ++++++++-- src/system/components/Text/styles/variants.ts | 8 ++++++++ src/system/token/fontWeight.ts | 9 +++++++++ 5 files changed, 30 insertions(+), 5 deletions(-) create mode 100644 src/system/token/fontWeight.ts diff --git a/src/app/page.tsx b/src/app/page.tsx index c37bdbbd..c5fb138c 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -5,7 +5,7 @@ export default function Home() { return ( <> {typographyVariant.map((typo) => ( - + 하이하이 ))} diff --git a/src/system/components/Text/Text.tsx b/src/system/components/Text/Text.tsx index 09103291..7bfd215e 100644 --- a/src/system/components/Text/Text.tsx +++ b/src/system/components/Text/Text.tsx @@ -2,19 +2,21 @@ 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 ; }); diff --git a/src/system/components/Text/styles/useTextStyles.ts b/src/system/components/Text/styles/useTextStyles.ts index beea5662..18bf2ef3 100644 --- a/src/system/components/Text/styles/useTextStyles.ts +++ b/src/system/components/Text/styles/useTextStyles.ts @@ -2,14 +2,20 @@ import { clsx } from 'clsx'; 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 }: Props): Record { - const paragraphStyle = paragraphVariants({ typography }); +export function useTextStyles({ + className, + typography, + fontWeight, +}: Props): Record { + const paragraphStyle = paragraphVariants({ typography, fontWeight }); return { paragraph: { diff --git a/src/system/components/Text/styles/variants.ts b/src/system/components/Text/styles/variants.ts index c8487578..cf4e5aed 100644 --- a/src/system/components/Text/styles/variants.ts +++ b/src/system/components/Text/styles/variants.ts @@ -2,6 +2,7 @@ import { typographyVariant } from '@/system/token/typography'; 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 paragraphVariants = cva(['m-0'], { variants: { @@ -12,5 +13,12 @@ export const paragraphVariants = cva(['m-0'], { }, {} as Record, ), + fontWeight: fontWeightVariant.reduce( + (acc, token) => { + acc[token] = `font-${fontWeight[token]}`; + return acc; + }, + {} 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; From 71d9aef226993c446d7cc375266d372e7307c633 Mon Sep 17 00:00:00 2001 From: qkrdmstlr3 Date: Sun, 21 Jul 2024 21:29:34 +0900 Subject: [PATCH 5/5] fix --- src/system/components/Text/stories/Text.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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) => ( - + 테스트입니다 ))}