From d807a010ec313c1f060e7230d73c0fa3d0d0a35d Mon Sep 17 00:00:00 2001 From: Jungu Lee <1zzangjun@gmail.com> Date: Sun, 5 Nov 2023 03:41:04 +0900 Subject: [PATCH 1/4] =?UTF-8?q?Refactor=20:=20=EB=94=94=EC=9E=90=EC=9D=B8?= =?UTF-8?q?=20=EC=8B=9C=EC=8A=A4=ED=85=9C=EC=97=90=20=EC=A0=95=EC=9D=98?= =?UTF-8?q?=EB=90=9C=20=ED=83=80=EC=9D=B4=ED=8F=AC=EA=B7=B8=EB=9E=98?= =?UTF-8?q?=ED=94=BC=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/const/theme.ts | 67 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 67 insertions(+) diff --git a/client/src/const/theme.ts b/client/src/const/theme.ts index 9ccc152..96a3fd9 100644 --- a/client/src/const/theme.ts +++ b/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; From cf89c2dda3865f949083e9bd1b19ae250645556c Mon Sep 17 00:00:00 2001 From: Jungu Lee <1zzangjun@gmail.com> Date: Sun, 5 Nov 2023 03:41:43 +0900 Subject: [PATCH 2/4] =?UTF-8?q?Refactor:=20=EB=94=94=EC=9E=90=EC=9D=B8=20?= =?UTF-8?q?=EC=8B=9C=EC=8A=A4=ED=85=9C=EB=82=B4=20=EC=A0=95=EC=9D=98?= =?UTF-8?q?=EB=90=9C=20variant=20=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/app/auth/login/page.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/client/src/app/auth/login/page.tsx b/client/src/app/auth/login/page.tsx index 0cd2b73..9a07d15 100644 --- a/client/src/app/auth/login/page.tsx +++ b/client/src/app/auth/login/page.tsx @@ -39,7 +39,7 @@ const LoginPage = () => { - + Sign in {/* form */} @@ -47,11 +47,11 @@ const LoginPage = () => { - Forgot password? + Forgot password? - + 계정이 없으신가요? 회원가입 From c659625743b587f0543fcf4f74bbf53cfe0eacef Mon Sep 17 00:00:00 2001 From: Jungu Lee <1zzangjun@gmail.com> Date: Sun, 5 Nov 2023 03:42:17 +0900 Subject: [PATCH 3/4] =?UTF-8?q?New=20:=20Typography=20=EB=AC=B8=EC=84=9C?= =?UTF-8?q?=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Input}/Button.stories.tsx | 2 +- .../Design_system/Typography.stories.tsx | 89 +++++++++++++++++++ 2 files changed, 90 insertions(+), 1 deletion(-) rename client/src/stories/{ => Design_system/Input}/Button.stories.tsx (95%) create mode 100644 client/src/stories/Design_system/Typography.stories.tsx diff --git a/client/src/stories/Button.stories.tsx b/client/src/stories/Design_system/Input/Button.stories.tsx similarity index 95% rename from client/src/stories/Button.stories.tsx rename to client/src/stories/Design_system/Input/Button.stories.tsx index 5c212fe..991b28f 100644 --- a/client/src/stories/Button.stories.tsx +++ b/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: { diff --git a/client/src/stories/Design_system/Typography.stories.tsx b/client/src/stories/Design_system/Typography.stories.tsx new file mode 100644 index 0000000..b9f3593 --- /dev/null +++ b/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 ( +
+ + {ctx.args.children} + + +
+ ); + }, + ], +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +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", + }, +}; From 24ca1e0d2879eb4682f8300a709b70f4af6b3327 Mon Sep 17 00:00:00 2001 From: Jungu Lee <1zzangjun@gmail.com> Date: Sun, 5 Nov 2023 03:42:58 +0900 Subject: [PATCH 4/4] =?UTF-8?q?Refactor=20:=20Storybook=20CD=20=EA=B0=9C?= =?UTF-8?q?=EC=84=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/.dockerignore | 2 ++ 1 file changed, 2 insertions(+) diff --git a/client/.dockerignore b/client/.dockerignore index 72e9aa4..2d2dc83 100644 --- a/client/.dockerignore +++ b/client/.dockerignore @@ -1,5 +1,7 @@ Dockerfile .dockerignore +storybook.Dockerfile +storybook-static node_modules npm-debug.log README.md