Merge pull request #72 from YAPP-Github/feature/PRODUCT-144

Seojunhwan · web-flow · commit 38c77d5e8d0e · 2025-07-07T22:15:27.000+09:00
diff --git a/src/components/ui/Bleed/Bleed.stories.tsx b/src/components/ui/Bleed/Bleed.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
 
 import { Bleed } from "./Bleed";
 
diff --git a/src/components/ui/BottomSheet/BottomSheet.css.ts b/src/components/ui/BottomSheet/BottomSheet.css.ts
@@ -46,8 +46,7 @@ export const title = style({
   display: "flex",
   gap: "10px",
   padding: "14px 20px",
-  ...typography.title2,
-  fontWeight: 600,
+  ...typography.title2Sb,
   color: semantic.text.normal,
 });
 
@@ -60,14 +59,12 @@ export const sheetBody = style({
 });
 
 export const sheetBodyTitle = style({
-  ...typography.title3,
-  fontWeight: 600,
+  ...typography.title3Sb,
   color: semantic.text.normal,
 });
 
 export const sheetBodyDescription = style({
-  ...typography.body2,
-  fontWeight: 400,
+  ...typography.body2Rg,
   color: semantic.text.alternative,
 });
 
diff --git a/src/components/ui/Spacer/Spacer.stories.tsx b/src/components/ui/Spacer/Spacer.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
 
 import { Stack } from "../Stack";
 import { Text } from "../Text";
diff --git a/src/components/ui/Stack/Stack.stories.tsx b/src/components/ui/Stack/Stack.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
 import { Fragment } from "react";
 
 import { Stack } from "./Stack";
diff --git a/src/components/ui/Text/Text.css.ts b/src/components/ui/Text/Text.css.ts
@@ -4,6 +4,7 @@ export const fontSizeVar = createVar();
 export const lineHeightVar = createVar();
 export const letterSpacingVar = createVar();
 export const colorVar = createVar();
+export const fontWeightVar = createVar();
 
 export const container = style({
   color: colorVar,
diff --git a/src/components/ui/Text/Text.stories.tsx b/src/components/ui/Text/Text.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
 import { Fragment } from "react";
 
 import { typography } from "@/styles/typography.css";
@@ -24,7 +24,7 @@ const meta: Meta<typeof Text> = {
       description: "미리 정의된 타이포그래피 스타일을 적용합니다.",
       table: {
         type: { summary: "keyof typeof typography" },
-        defaultValue: { summary: "body1" },
+        defaultValue: { summary: "body1Sb" },
       },
     },
     color: {
@@ -54,7 +54,7 @@ type Story = StoryObj<typeof Text>;
 export const Default: Story = {
   args: {
     children: "이것은 기본 텍스트입니다.",
-    typo: "body1",
+    typo: "body1Sb",
     color: "neutral.10",
   },
 };
@@ -103,13 +103,13 @@ export const Colors: Story = {
 export const AsHeading: Story = {
   render: () => (
     <div>
-      <Text as='h1' typo='title1'>
+      <Text as='h1' typo='title1Bd'>
         이것은 H1 태그입니다. (typo: title1)
       </Text>
-      <Text as='h2' typo='title2'>
+      <Text as='h2' typo='title2Sb'>
         이것은 H2 태그입니다. (typo: title2)
       </Text>
-      <Text as='span' typo='body1'>
+      <Text as='span' typo='body1Sb'>
         이것은 SPAN 태그입니다.
       </Text>
     </div>
diff --git a/src/components/ui/Text/Text.tsx b/src/components/ui/Text/Text.tsx
@@ -76,7 +76,7 @@ export type TextProps<T extends ElementType> = PolymorphicComponentPropsWithRef<
 export const Text = <T extends ElementType = "p">({
   as,
   className,
-  typo = "body1",
+  typo = "body1Sb",
   color = "neutral.10",
   style: styleFromProps,
   ref,
@@ -90,6 +90,7 @@ export const Text = <T extends ElementType = "p">({
       [styles.fontSizeVar]: typography[typo]?.fontSize,
       [styles.lineHeightVar]: typography[typo]?.lineHeight,
       [styles.letterSpacingVar]: typography[typo]?.letterSpacing,
+      [styles.fontWeightVar]: typography[typo]?.fontWeight,
       [styles.colorVar]: color ? resolveColor(color) : undefined,
     }),
   };
diff --git a/src/components/ui/TextField/TextField.css.ts b/src/components/ui/TextField/TextField.css.ts
@@ -11,7 +11,6 @@ export const wrapper = style({
 
 export const label = style({
   ...typography.label1,
-  fontWeight: 600,
   color: semantic.text.alternative,
 });
 
@@ -20,8 +19,7 @@ export const input = recipe({
     width: "100%",
     height: "52px",
     padding: "14px 12px",
-    ...typography.body1,
-    fontWeight: "500",
+    ...typography.body1Md,
     border: "1px solid transparent",
     borderRadius: radius[160],
     outline: "none",
@@ -65,8 +63,7 @@ export const input = recipe({
 
 export const helperText = recipe({
   base: {
-    ...typography.caption1,
-    fontWeight: "500",
+    ...typography.caption1Md,
     color: semantic.text.alternative,
   },
   variants: {
diff --git a/src/styles/typography.css.ts b/src/styles/typography.css.ts
@@ -5,60 +5,144 @@ export const typography = createGlobalTheme(":root", {
     fontSize: "40px",
     lineHeight: "52px",
     letterSpacing: "-0.0282em",
+    fontWeight: "700",
   },
   display2: {
     fontSize: "36px",
     lineHeight: "48px",
     letterSpacing: "-0.027em",
+    fontWeight: "700",
   },
   display3: {
     fontSize: "32px",
     lineHeight: "42px",
     letterSpacing: "-0.025em",
+    fontWeight: "700",
   },
-  title1: {
+  title1Bd: {
     fontSize: "24px",
     lineHeight: "32px",
     letterSpacing: "-0.023em",
+    fontWeight: "700",
   },
-  title2: {
+  title1Md: {
+    fontSize: "24px",
+    lineHeight: "32px",
+    letterSpacing: "-0.023em",
+    fontWeight: "500",
+  },
+  title1Rg: {
+    fontSize: "24px",
+    lineHeight: "32px",
+    letterSpacing: "-0.023em",
+    fontWeight: "400",
+  },
+  title2Sb: {
+    fontSize: "20px",
+    lineHeight: "28px",
+    letterSpacing: "-0.012em",
+    fontWeight: "600",
+  },
+  title2Md: {
     fontSize: "20px",
     lineHeight: "28px",
     letterSpacing: "-0.012em",
+    fontWeight: "500",
+  },
+  title2Rg: {
+    fontSize: "20px",
+    lineHeight: "28px",
+    letterSpacing: "-0.012em",
+    fontWeight: "400",
+  },
+  title3Sb: {
+    fontSize: "18px",
+    lineHeight: "26px",
+    letterSpacing: "-0.002em",
+    fontWeight: "600",
+  },
+  title3Md: {
+    fontSize: "18px",
+    lineHeight: "26px",
+    letterSpacing: "-0.002em",
+    fontWeight: "500",
   },
-  title3: {
+  title3Rg: {
     fontSize: "18px",
     lineHeight: "26px",
     letterSpacing: "-0.002em",
+    fontWeight: "400",
   },
-  body1: {
+  body1Sb: {
     fontSize: "16px",
     lineHeight: "24px",
     letterSpacing: "0.0057em",
+    fontWeight: "600",
   },
-  body2: {
+  body1Md: {
+    fontSize: "16px",
+    lineHeight: "24px",
+    letterSpacing: "0.0057em",
+    fontWeight: "500",
+  },
+  body1Rg: {
+    fontSize: "16px",
+    lineHeight: "24px",
+    letterSpacing: "0.0057em",
+    fontWeight: "400",
+  },
+  body2Sb: {
+    fontSize: "15px",
+    lineHeight: "22px",
+    letterSpacing: "0.0096em",
+    fontWeight: "600",
+  },
+  body2Md: {
     fontSize: "15px",
     lineHeight: "22px",
     letterSpacing: "0.0096em",
+    fontWeight: "500",
+  },
+  body2Rg: {
+    fontSize: "15px",
+    lineHeight: "22px",
+    letterSpacing: "0.0096em",
+    fontWeight: "400",
   },
   label1: {
     fontSize: "14px",
     lineHeight: "20px",
     letterSpacing: "0.0145em",
+    fontWeight: "600",
   },
   label2: {
     fontSize: "13px",
     lineHeight: "18px",
     letterSpacing: "0.0194em",
+    fontWeight: "600",
+  },
+  caption1Sb: {
+    fontSize: "12px",
+    lineHeight: "16px",
+    letterSpacing: "0.0252em",
+    fontWeight: "600",
+  },
+  caption1Md: {
+    fontSize: "12px",
+    lineHeight: "16px",
+    letterSpacing: "0.0252em",
+    fontWeight: "500",
   },
-  caption1: {
+  caption1Rg: {
     fontSize: "12px",
     lineHeight: "16px",
     letterSpacing: "0.0252em",
+    fontWeight: "400",
   },
   caption2: {
     fontSize: "11px",
     lineHeight: "14px",
     letterSpacing: "0.0311em",
+    fontWeight: "600",
   },
 });

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import type { Meta, StoryObj } from "@storybook/react";`
	`1`	`+import type { Meta, StoryObj } from "@storybook/nextjs-vite";`
`2`	`2`
`3`	`3`	`import { Bleed } from "./Bleed";`
`4`	`4`