디자인시스템-타이포그래피-적용

client/.dockerignore

@@ -1,5 +1,7 @@
 Dockerfile
 .dockerignore
+storybook.Dockerfile
+storybook-static
 node_modules
 npm-debug.log
 README.md

client/src/app/auth/login/page.tsx

@@ -39,19 +39,19 @@ const LoginPage = () => {
           <Avatar sx={{ m: 1, bgcolor: "secondary.main" }}>
             <LockOutlinedIcon />
           </Avatar>
-          <Typography component="h1" variant="h5">
+          <Typography component="h1" variant="h1">
             Sign in
           </Typography>
           {/* form */}
           <SigninForm />
           <Grid container>
             <Grid item xs>
               <Link href={FORGOTPASSWORD}>
-                <Typography variant="body2">Forgot password?</Typography>
+                <Typography variant="label">Forgot password?</Typography>
               </Link>
             </Grid>
             <Grid item>
-              <Typography variant="body2">
+              <Typography variant="label">
                 계정이 없으신가요? <Link href={SIGNUP}>회원가입</Link>
               </Typography>
             </Grid>

client/src/const/theme.ts

@@ -4,6 +4,50 @@ import Pretendard from "~/assets/font/Pretendard";
 const theme = createTheme({
   typography: {
     fontFamily: Pretendard.style.fontFamily,
+    allVariants: { letterSpacing: "-0.01em", fontWeight: 400 },
+    h1: {
+      fontSize: "24px",
+      lineHeight: "40px",
+      letterSpacing: "0em",
+    },
+    h2: {
+      fontSize: "22px",
+      lineHeight: "32px",
+    },
+    subtitle1: {
+      fontSize: "20px",
+      lineHeight: "32px",
+    },
+    subtitle2: {
+      fontSize: "18px",
+      lineHeight: "24px",
+    },
+    body1: {
+      fontSize: "16px",
+      lineHeight: "18px",
+    },
+    button: {
+      fontSize: "16px",
+      lineHeight: "16px",
+    },
+    label: {
+      fontSize: "14px",
+      lineHeight: "16px",
+      letterSpacing: "0em",
+    },
+    caption: {
+      fontSize: "12px",
+      lineHeight: "16px",
+    },
+
+    fontWeightRegular: 400,
+    fontWeightBold: 700,
+
+    h4: undefined,
+    h3: undefined,
+    h5: undefined,
+    h6: undefined,
+    body2: undefined,
   },
   palette: {
     mode: "light",
@@ -35,4 +79,27 @@ const theme = createTheme({
   },
 });
 
+declare module "@mui/material/styles" {
+  interface TypographyVariants {
+    label: React.CSSProperties;
+  }
+
+  // allow configuration using `createTheme`
+  interface TypographyVariantsOptions {
+    label?: React.CSSProperties;
+  }
+}
+
+// Update the Typography's variant prop options
+declare module "@mui/material/Typography" {
+  interface TypographyPropsVariantOverrides {
+    label: true;
+    h3: false;
+    h4: false;
+    h5: false;
+    h6: false;
+    body2: false;
+  }
+}
+
 export default theme;

client/src/stories/Button.stories.tsx → client/src/stories/Design_system/Input/Button.stories.tsx

@@ -2,7 +2,7 @@ import { Button, ButtonProps as MuiButtonProps } from "@mui/material";
 import { Meta, StoryObj } from "@storybook/react";
 
 const meta = {
-  title: "Design system/Button",
+  title: "Design system/Input/Button",
   component: Button,
   tags: ["autodocs"],
   argTypes: {

client/src/stories/Design_system/Typography.stories.tsx

@@ -0,0 +1,89 @@
+import { Typography } from "@mui/material";
+import { Meta, StoryObj } from "@storybook/react";
+const meta = {
+  title: "Design system/Typography",
+  component: Typography,
+  tags: ["autodocs"],
+  argTypes: {
+    variant: {
+      options: [
+        "h1",
+        "h2",
+        "subtitle1",
+        "subtitle2",
+        "body",
+        "button",
+        "label",
+        "caption",
+      ],
+      default: "body",
+      control: { type: "select" },
+    },
+  },
+  decorators: [
+    (Story, ctx) => {
+      return (
+        <div style={{ display: "flex", flexDirection: "column" }}>
+          <Typography variant={ctx.args.variant} sx={{ fontWeight: "bold" }}>
+            {ctx.args.children}
+          </Typography>
+          <Story />
+        </div>
+      );
+    },
+  ],
+} satisfies Meta<typeof Typography>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Heading1: Story = {
+  args: {
+    variant: "h1",
+    children: "오늘은 이거다 주酒, D-SHOT, DA(alcohol)ily",
+  },
+};
+
+export const Heading2: Story = {
+  args: {
+    ...Heading1.args,
+    variant: "h2",
+  },
+};
+
+export const Subtitle1: Story = {
+  args: {
+    ...Heading1.args,
+    variant: "subtitle1",
+  },
+};
+export const Subtitle2: Story = {
+  args: {
+    ...Heading1.args,
+    variant: "subtitle1",
+  },
+};
+export const Body1: Story = {
+  args: {
+    ...Heading1.args,
+    variant: "body1",
+  },
+};
+export const Button: Story = {
+  args: {
+    ...Heading1.args,
+    variant: "button",
+  },
+};
+export const Label: Story = {
+  args: {
+    ...Heading1.args,
+    variant: "label",
+  },
+};
+export const Caption: Story = {
+  args: {
+    ...Heading1.args,
+    variant: "caption",
+  },
+};