From ded99c82167d66f3c759c963079f697efba2847f Mon Sep 17 00:00:00 2001 From: ghdtjgus76 Date: Sat, 14 Sep 2024 16:57:18 +0900 Subject: [PATCH 01/15] =?UTF-8?q?rename:=20=EB=A1=9C=EB=9D=A0=20=ED=8F=B4?= =?UTF-8?q?=EB=8D=94=EB=AA=85=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/wow-ui/src/assets/{lottie => lotties}/blueSpinner.json | 0 .../wow-ui/src/assets/{lottie => lotties}/rainbowSpinner.json | 0 packages/wow-ui/src/components/Spinner/BlueSpinner.tsx | 2 +- packages/wow-ui/src/components/Spinner/RainbowSpinner.tsx | 2 +- 4 files changed, 2 insertions(+), 2 deletions(-) rename packages/wow-ui/src/assets/{lottie => lotties}/blueSpinner.json (100%) rename packages/wow-ui/src/assets/{lottie => lotties}/rainbowSpinner.json (100%) diff --git a/packages/wow-ui/src/assets/lottie/blueSpinner.json b/packages/wow-ui/src/assets/lotties/blueSpinner.json similarity index 100% rename from packages/wow-ui/src/assets/lottie/blueSpinner.json rename to packages/wow-ui/src/assets/lotties/blueSpinner.json diff --git a/packages/wow-ui/src/assets/lottie/rainbowSpinner.json b/packages/wow-ui/src/assets/lotties/rainbowSpinner.json similarity index 100% rename from packages/wow-ui/src/assets/lottie/rainbowSpinner.json rename to packages/wow-ui/src/assets/lotties/rainbowSpinner.json diff --git a/packages/wow-ui/src/components/Spinner/BlueSpinner.tsx b/packages/wow-ui/src/components/Spinner/BlueSpinner.tsx index 354d26b6..c2be21f5 100644 --- a/packages/wow-ui/src/components/Spinner/BlueSpinner.tsx +++ b/packages/wow-ui/src/components/Spinner/BlueSpinner.tsx @@ -2,7 +2,7 @@ import type { LottieComponentProps } from "lottie-react"; import Lottie from "lottie-react"; import type { CSSProperties } from "react"; -import blueSpinner from "@/assets/lottie/blueSpinner.json"; +import blueSpinner from "@/assets/lotties/blueSpinner.json"; /** * @description 블루 스피너 컴포넌트입니다. diff --git a/packages/wow-ui/src/components/Spinner/RainbowSpinner.tsx b/packages/wow-ui/src/components/Spinner/RainbowSpinner.tsx index 5020d788..e1731fca 100644 --- a/packages/wow-ui/src/components/Spinner/RainbowSpinner.tsx +++ b/packages/wow-ui/src/components/Spinner/RainbowSpinner.tsx @@ -2,7 +2,7 @@ import type { LottieComponentProps } from "lottie-react"; import Lottie from "lottie-react"; import type { CSSProperties } from "react"; -import rainbowSpinner from "@/assets/lottie/rainbowSpinner.json"; +import rainbowSpinner from "@/assets/lotties/rainbowSpinner.json"; /** * @description 레인보우 스피너 컴포넌트입니다. Lottie 애니메이션을 사용하여 스피너를 표시합니다. From fd9b955dbb04f9b159bc7d1e165914a971b0fc8a Mon Sep 17 00:00:00 2001 From: ghdtjgus76 Date: Sat, 21 Sep 2024 20:09:40 +0900 Subject: [PATCH 02/15] =?UTF-8?q?feat:=20gdsc=20logo=20=EC=95=84=EC=9D=B4?= =?UTF-8?q?=EC=BD=98=20wowds-icons=20=ED=8C=A8=ED=82=A4=EC=A7=80=EC=97=90?= =?UTF-8?q?=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/wow-icons/src/component/GdscLogo.tsx | 59 +++++++++++++++++++ packages/wow-icons/src/component/index.ts | 1 + packages/wow-icons/src/svg/gdsc-logo.svg | 13 ++++ 3 files changed, 73 insertions(+) create mode 100644 packages/wow-icons/src/component/GdscLogo.tsx create mode 100644 packages/wow-icons/src/svg/gdsc-logo.svg diff --git a/packages/wow-icons/src/component/GdscLogo.tsx b/packages/wow-icons/src/component/GdscLogo.tsx new file mode 100644 index 00000000..41c53b33 --- /dev/null +++ b/packages/wow-icons/src/component/GdscLogo.tsx @@ -0,0 +1,59 @@ +import { forwardRef } from "react"; +import { color } from "wowds-tokens"; + +import type { IconProps } from "@/types/Icon.ts"; + +const GdscLogo = forwardRef( + ( + { + className, + width = "49", + height = "24", + viewBox = "0 0 49 24", + fill = "white", + ...rest + }, + ref + ) => { + return ( + + + + + + + + + + + + + + ); + } +); + +GdscLogo.displayName = "GdscLogo"; +export default GdscLogo; diff --git a/packages/wow-icons/src/component/index.ts b/packages/wow-icons/src/component/index.ts index 11ab8e7f..b6c27bd1 100644 --- a/packages/wow-icons/src/component/index.ts +++ b/packages/wow-icons/src/component/index.ts @@ -3,6 +3,7 @@ export { default as Check } from "./Check.tsx"; export { default as Close } from "./Close.tsx"; export { default as DownArrow } from "./DownArrow.tsx"; export { default as Edit } from "./Edit.tsx"; +export { default as GdscLogo } from "./GdscLogo.tsx"; export { default as Help } from "./Help.tsx"; export { default as LeftArrow } from "./LeftArrow.tsx"; export { default as Link } from "./Link.tsx"; diff --git a/packages/wow-icons/src/svg/gdsc-logo.svg b/packages/wow-icons/src/svg/gdsc-logo.svg new file mode 100644 index 00000000..6cc817bb --- /dev/null +++ b/packages/wow-icons/src/svg/gdsc-logo.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + \ No newline at end of file From 02b4fa3ef01b1d55da1f0b8603e3ea46c9a6ccb3 Mon Sep 17 00:00:00 2001 From: ghdtjgus76 Date: Sat, 21 Sep 2024 21:21:20 +0900 Subject: [PATCH 03/15] =?UTF-8?q?chore:=20gdsc=20logo=20=EC=95=84=EC=9D=B4?= =?UTF-8?q?=EC=BD=98=20=EC=83=89=EC=83=81=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/wow-icons/src/component/GdscLogo.tsx | 20 ++++++------------- 1 file changed, 6 insertions(+), 14 deletions(-) diff --git a/packages/wow-icons/src/component/GdscLogo.tsx b/packages/wow-icons/src/component/GdscLogo.tsx index 41c53b33..cba980ef 100644 --- a/packages/wow-icons/src/component/GdscLogo.tsx +++ b/packages/wow-icons/src/component/GdscLogo.tsx @@ -1,18 +1,10 @@ import { forwardRef } from "react"; -import { color } from "wowds-tokens"; import type { IconProps } from "@/types/Icon.ts"; const GdscLogo = forwardRef( ( - { - className, - width = "49", - height = "24", - viewBox = "0 0 49 24", - fill = "white", - ...rest - }, + { className, width = "49", height = "24", viewBox = "0 0 49 24", ...rest }, ref ) => { return ( @@ -30,24 +22,24 @@ const GdscLogo = forwardRef( - + From 7d768c533e2f3e62771ebcb5af6478622344ddb5 Mon Sep 17 00:00:00 2001 From: ghdtjgus76 Date: Sat, 21 Sep 2024 21:21:28 +0900 Subject: [PATCH 04/15] =?UTF-8?q?feat:=20Header=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../wow-ui/src/components/Header/index.tsx | 123 ++++++++++++++++++ 1 file changed, 123 insertions(+) create mode 100644 packages/wow-ui/src/components/Header/index.tsx diff --git a/packages/wow-ui/src/components/Header/index.tsx b/packages/wow-ui/src/components/Header/index.tsx new file mode 100644 index 00000000..6195d57f --- /dev/null +++ b/packages/wow-ui/src/components/Header/index.tsx @@ -0,0 +1,123 @@ +/** + * @description 헤더 컴포넌트입니다. + * 사이트 로고와 로그인 또는 사용자 이름 표시 기능을 포함합니다. + * + * @template T + * @param {"username" | "login" | "none"} [variant] - Header 종류. + * - "username": 사용자 이름을 표시. + * - "login": 로그인 버튼을 표시. + * - "none": 아무것도 표시하지 않음. + * @param {T extends "username" ? string : never} [username] - variant가 "username"인 경우 표시되는 오른쪽 요소. 사용자가 로그인한 경우 사용자 이름을 표시함. + * @param {T extends "login" ? () => void : never} [onClick] - 로그인 버튼 클릭 시 호출되는 함수. + */ + +import { css } from "@styled-system/css"; +import { Flex } from "@styled-system/jsx"; +import { GdscLogo } from "wowds-icons"; + +import Button from "@/components/Button"; + +type RightElementType = "username" | "login" | "none"; + +export interface HeaderProps { + variant?: T; + username?: T extends "username" ? string : never; + onClick?: T extends "login" ? () => void : never; +} + +const Header = ({ + variant = "none", + username, + onClick, +}: HeaderProps) => { + return ( +
+
+
+ + +
+ GDSC +
+
+ Hongik Univ. +
+ +
+
+ {variant === "login" && ( + + )} + {variant === "username" && ( +
+ {username} 님 +
+ )} +
+
+
+ ); +}; + +export default Header; + +const headerStyle = css({ + borderBottomStyle: "solid", + borderBottomWidth: 1, + borderBottomColor: "outline", + height: "54px", + width: "100%", + display: "flex", + alignItems: "center", + xsToLg: { + paddingX: "16px", + height: "66px", + }, +}); + +const headerContentStyle = css({ + width: "988px", + display: "flex", + justifyContent: "space-between", + alignItems: "center", + margin: "auto", +}); + +const leftElementContainerStyle = css({ + display: "flex", + gap: "xs", + alignItems: "center", +}); + +const titleStyle = css({ + fontFamily: "Product Sans", + fontWeight: 700, + fontSize: "20px", + lineHeight: "130%", +}); + +const subTitleStyle = css({ + fontFamily: "Product Sans", + fontWeight: 400, + fontSize: "14px", + lineHeight: "130%", + color: "primary", +}); + +const usernameTextStyle = css({ + textStyle: "label1", +}); + +const logoTextContainerStyle = css({ + lg: { + gap: "xs", + alignItems: "center", + }, + xsToLg: { + flexDirection: "column", + justifyContent: "flex-start", + alignItems: "space-between", + }, +}); From ae12ef866b20db04911985db615fdf9ef1f217ea Mon Sep 17 00:00:00 2001 From: ghdtjgus76 Date: Sat, 21 Sep 2024 21:21:36 +0900 Subject: [PATCH 05/15] =?UTF-8?q?docs:=20Header=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=8A=A4=ED=86=A0=EB=A6=AC=20=EC=9E=91?= =?UTF-8?q?=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/Header/Header.stories.ts | 63 +++++++++++++++++++ 1 file changed, 63 insertions(+) create mode 100644 packages/wow-ui/src/components/Header/Header.stories.ts diff --git a/packages/wow-ui/src/components/Header/Header.stories.ts b/packages/wow-ui/src/components/Header/Header.stories.ts new file mode 100644 index 00000000..3073b20a --- /dev/null +++ b/packages/wow-ui/src/components/Header/Header.stories.ts @@ -0,0 +1,63 @@ +import type { Meta, StoryObj } from "@storybook/react"; + +import Header from "@/components/Header"; + +const meta = { + title: "UI/Header", + component: Header, + tags: ["autodocs"], + parameters: { + componentSubtitle: "헤더 컴포넌트", + }, + argTypes: { + variant: { + control: { + type: "select", + options: ["username", "login", "none"], + }, + table: { + type: { summary: "username | login | none" }, + }, + description: + '헤더 종류를 나타냅니다. variant가 "username"인 경우 오른쪽에 사용자 이름을, "login"인 경우 로그인 버튼을, "none"인 경우 아무것도 표시하지 않습니다.', + }, + username: { + control: { + type: "text", + }, + table: { + type: { summary: "string" }, + }, + description: + 'variant가 "username"인 경우 표시되는 오른쪽 요소입니다. 사용자가 로그인한 경우 사용자 이름을 표시합니다.', + }, + onClick: { + action: "clicked", + control: false, + table: { + type: { summary: "function" }, + }, + description: + 'variant가 "login"인 경우 전달할 수 있습니다. 로그인 버튼 클릭 시 호출되는 함수입니다.', + }, + }, +} satisfies Meta; + +export default meta; + +export const Default: StoryObj = { + args: {}, +}; + +export const Login: StoryObj = { + args: { + variant: "login", + }, +}; + +export const Username: StoryObj = { + args: { + variant: "username", + username: "김홍익", + }, +}; From e4945a999e3acf8a28bd30e4f69d1291b55e9ffd Mon Sep 17 00:00:00 2001 From: ghdtjgus76 Date: Sat, 21 Sep 2024 21:21:50 +0900 Subject: [PATCH 06/15] =?UTF-8?q?feat:=20=ED=97=A4=EB=8D=94=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=B9=8C=EB=93=9C=20=EC=84=A4?= =?UTF-8?q?=EC=A0=95=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/wow-ui/package.json | 5 +++++ packages/wow-ui/rollup.config.js | 1 + 2 files changed, 6 insertions(+) diff --git a/packages/wow-ui/package.json b/packages/wow-ui/package.json index 488d13fc..d5220154 100644 --- a/packages/wow-ui/package.json +++ b/packages/wow-ui/package.json @@ -100,6 +100,11 @@ "require": "./dist/MultiGroup.cjs", "import": "./dist/MultiGroup.js" }, + "./Header": { + "types": "./dist/components/Header/index.d.ts", + "require": "./dist/Header.cjs", + "import": "./dist/Header.js" + }, "./DropDownOption": { "types": "./dist/components/DropDown/DropDownOption.d.ts", "require": "./dist/DropDownOption.cjs", diff --git a/packages/wow-ui/rollup.config.js b/packages/wow-ui/rollup.config.js index 2113035a..e9546fd2 100644 --- a/packages/wow-ui/rollup.config.js +++ b/packages/wow-ui/rollup.config.js @@ -36,6 +36,7 @@ export default { SingleDatePicker: "./src/components/Picker/SingleDatePicker", TimePicker: "./src/components/Picker/TimePicker", MultiGroup: "./src/components/MultiGroup", + Header: "./src/components/Header", DropDownOption: "./src/components/DropDown/DropDownOption", DropDown: "./src/components/DropDown", Divider: "./src/components/Divider", From 52c1ed333c6ef64713dde774e2320eac4d610182 Mon Sep 17 00:00:00 2001 From: ghdtjgus76 Date: Sat, 21 Sep 2024 21:22:02 +0900 Subject: [PATCH 07/15] =?UTF-8?q?feat:=20wow-ui=20=EC=8A=A4=ED=83=80?= =?UTF-8?q?=EC=9D=BC=20=EB=B3=80=EA=B2=BD=EC=82=AC=ED=95=AD=20=EB=B0=98?= =?UTF-8?q?=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/wow-ui/styled-system/styles.css | 463 ++++++++++++++++++++--- 1 file changed, 401 insertions(+), 62 deletions(-) diff --git a/packages/wow-ui/styled-system/styles.css b/packages/wow-ui/styled-system/styles.css index 49dc1210..d23efc49 100644 --- a/packages/wow-ui/styled-system/styles.css +++ b/packages/wow-ui/styled-system/styles.css @@ -169,104 +169,443 @@ progress { :-moz-focusring { outline: auto; } -[hidden]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +[hidden]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { display: none !important; } +body:not(#\#) { + div: border-box; + button: border-box; +} :where(:root, :host):not(#\#):not(#\#) { + --colors-red-50: #fdeceb; + --colors-red-100: #fbd9d7; + --colors-red-150: #f9c7c2; + --colors-red-200: #f7b4ae; + --colors-red-300: #f28e86; --colors-red-400: #ee695d; --colors-red-500: #ea4335; + --colors-red-600: #bb362a; + --colors-red-700: #8c2820; + --colors-red-800: #5e1b15; + --colors-red-850: #461410; + --colors-red-900: #2f0d0b; + --colors-red-950: #170705; + --colors-blue-50: #ebf4fe; --colors-blue-100: #d7e9fd; + --colors-blue-150: #c3ddfd; + --colors-blue-200: #afd2fc; + --colors-blue-300: #86bcfa; --colors-blue-400: #5ea5f9; + --colors-blue-500: #368ff7; + --colors-blue-600: #2b72c6; + --colors-blue-700: #205694; + --colors-blue-800: #163963; + --colors-blue-850: #102b4a; + --colors-blue-900: #0b1d31; + --colors-blue-950: #050e19; + --colors-yellow-50: #fef7e6; + --colors-yellow-100: #feeecc; + --colors-yellow-150: #fde6b3; + --colors-yellow-200: #fddd99; + --colors-yellow-300: #fbcd66; + --colors-yellow-400: #fabc33; + --colors-yellow-500: #f9ab00; + --colors-yellow-600: #c78900; + --colors-yellow-700: #956700; + --colors-yellow-800: #644400; + --colors-yellow-850: #4b3300; + --colors-yellow-900: #322200; + --colors-yellow-950: #191100; + --colors-green-50: #ebf6ee; + --colors-green-100: #d6eedd; + --colors-green-150: #c2e5cb; + --colors-green-200: #aedcba; + --colors-green-300: #85cb98; + --colors-green-400: #5db975; + --colors-green-500: #34a853; + --colors-green-600: #2a8642; + --colors-green-700: #1f6532; + --colors-green-800: #154321; + --colors-green-850: #103219; + --colors-green-900: #0a2211; + --colors-green-950: #051108; + --colors-mono-50: #f7f7f7; + --colors-mono-100: #f0f0f0; + --colors-mono-150: #e8e8e8; + --colors-mono-200: #e1e1e1; + --colors-mono-300: #d1d1d1; + --colors-mono-400: #c2c2c2; + --colors-mono-500: #b3b3b3; + --colors-mono-600: #8f8f8f; + --colors-mono-700: #6b6b6b; + --colors-mono-800: #484848; + --colors-mono-900: #242424; + --colors-mono-950: #121212; + --colors-white: #ffffff; + --colors-black: #000000; --colors-primary: #368ff7; + --colors-success: #2a8642; + --colors-error: #bb362a; + --colors-background-normal: #ffffff; + --colors-background-alternative: #f7f7f7; + --colors-background-dimmer: rgba(0, 0, 0, 0.8); + --colors-sub: #6b6b6b; + --colors-outline: #c2c2c2; + --colors-text-black: #121212; + --colors-text-white: #ffffff; --colors-dark-disabled: #c2c2c2; + --colors-light-disabled: #e1e1e1; + --colors-blue-hover: #2b72c6; + --colors-mono-hover: #121212; + --colors-elevated-hover: rgba(16, 43, 74, 0.2); --colors-blue-pressed: #5ea5f9; --colors-blue-background-pressed: #ebf4fe; + --colors-mono-background-pressed: #f7f7f7; + --colors-shadow-small: rgba(0, 0, 0, 0.1); + --colors-shadow-medium: rgba(0, 0, 0, 0.2); + --colors-blue-shadow: rgba(16, 43, 74, 0.2); + --colors-discord: #5566fb; + --colors-github: #000000; + --colors-secondary-yellow: #f9ab00; + --colors-secondary-green: #34a853; + --colors-secondary-red: #ea4335; + --colors-error-background: #fbd9d7; + --colors-blue-disabled: #d7e9fd; + --colors-text-blue-disabled: #afd2fc; +} +.text_blue\.50:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-blue-50); +} +.text_blue\.100:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-blue-100); +} +.text_blue\.150:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-blue-150); +} +.text_blue\.200:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-blue-200); +} +.text_blue\.300:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-blue-300); +} +.text_blue\.400:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-blue-400); +} +.text_blue\.500:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-blue-500); +} +.text_blue\.600:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-blue-600); +} +.text_blue\.700:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-blue-700); +} +.text_blue\.800:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-blue-800); +} +.text_blue\.850:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-blue-850); +} +.text_blue\.900:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-blue-900); +} +.text_blue\.950:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-blue-950); +} +.text_yellow\.50:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-yellow-50); +} +.text_yellow\.100:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-yellow-100); +} +.text_yellow\.150:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-yellow-150); +} +.text_yellow\.200:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-yellow-200); +} +.text_yellow\.300:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-yellow-300); +} +.text_yellow\.400:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-yellow-400); +} +.text_yellow\.500:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-yellow-500); +} +.text_yellow\.600:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-yellow-600); +} +.text_yellow\.700:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-yellow-700); +} +.text_yellow\.800:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-yellow-800); +} +.text_yellow\.850:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-yellow-850); +} +.text_yellow\.900:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-yellow-900); +} +.text_yellow\.950:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-yellow-950); +} +.text_green\.50:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-green-50); +} +.text_green\.100:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-green-100); +} +.text_green\.150:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-green-150); +} +.text_green\.200:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-green-200); +} +.text_green\.300:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-green-300); +} +.text_green\.400:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-green-400); +} +.text_green\.500:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-green-500); +} +.text_green\.600:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-green-600); +} +.text_green\.700:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-green-700); +} +.text_green\.800:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-green-800); +} +.text_green\.850:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-green-850); +} +.text_green\.900:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-green-900); +} +.text_green\.950:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-green-950); +} +.text_red\.50:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-red-50); +} +.text_red\.100:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-red-100); +} +.text_red\.150:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-red-150); +} +.text_red\.200:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-red-200); +} +.text_red\.300:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-red-300); +} +.text_red\.400:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-red-400); +} +.text_red\.500:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-red-500); +} +.text_red\.600:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-red-600); +} +.text_red\.700:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-red-700); +} +.text_red\.800:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-red-800); +} +.text_red\.850:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-red-850); +} +.text_red\.900:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-red-900); +} +.text_red\.950:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-red-950); +} +.text_mono\.50:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-mono-50); +} +.text_mono\.100:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-mono-100); +} +.text_mono\.150:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-mono-150); +} +.text_mono\.200:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-mono-200); +} +.text_mono\.300:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-mono-300); +} +.text_mono\.400:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-mono-400); +} +.text_mono\.500:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-mono-500); +} +.text_mono\.600:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-mono-600); +} +.text_mono\.700:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-mono-700); +} +.text_mono\.800:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-mono-800); +} +.text_mono\.850:not(#\#):not(#\#):not(#\#):not(#\#) { + color: mono.850; +} +.text_mono\.900:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-mono-900); +} +.text_mono\.950:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-mono-950); +} +.text_white:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-white); +} +.text_black:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-black); +} +.text_whiteOpacity\.20:not(#\#):not(#\#):not(#\#):not(#\#) { + color: whiteOpacity.20; +} +.text_whiteOpacity\.40:not(#\#):not(#\#):not(#\#):not(#\#) { + color: whiteOpacity.40; +} +.text_whiteOpacity\.60:not(#\#):not(#\#):not(#\#):not(#\#) { + color: whiteOpacity.60; +} +.text_whiteOpacity\.80:not(#\#):not(#\#):not(#\#):not(#\#) { + color: whiteOpacity.80; +} +.text_blackOpacity\.20:not(#\#):not(#\#):not(#\#):not(#\#) { + color: blackOpacity.20; +} +.text_blackOpacity\.40:not(#\#):not(#\#):not(#\#):not(#\#) { + color: blackOpacity.40; +} +.text_blackOpacity\.60:not(#\#):not(#\#):not(#\#):not(#\#) { + color: blackOpacity.60; +} +.text_blackOpacity\.80:not(#\#):not(#\#):not(#\#):not(#\#) { + color: blackOpacity.80; +} +.text_primary:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-primary); +} +.text_success:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-success); +} +.text_error:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-error); +} +.text_backgroundNormal:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-background-normal); +} +.text_backgroundAlternative:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-background-alternative); +} +.text_backgroundDimmer:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-background-dimmer); +} +.text_errorBackground:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-error-background); +} +.text_sub:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-sub); +} +.text_outline:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-outline); +} +.text_textBlack:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-text-black); } -.textStyle_body2:not(#\#):not(#\#):not(#\#):not(#\#) { - letter-spacing: -0.00875rem; - font-size: 0.875rem; - line-height: 160%; - font-weight: 500; +.text_textWhite:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-text-white); } -.bg_blue\.100:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { - background: var(--colors-blue-100); +.text_darkDisabled:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-dark-disabled); } -.px_4:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { - padding-inline: 4px; +.text_lightDisabled:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-light-disabled); } -.py_3:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { - padding-block: 3px; +.text_blueDisabled:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-blue-disabled); } -.rounded_md:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { - border-radius: md; +.text_textBlueDisabled:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-text-blue-disabled); } -.bg_red\.400:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { - background: var(--colors-red-400); +.text_blueHover:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-blue-hover); } -.w_20:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { - width: 20px; +.text_monoHover:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-mono-hover); } -.h_20:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { - height: 20px; +.text_elevatedHover:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-elevated-hover); } -.rounded_9999:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { - border-radius: 9999px; +.text_bluePressed:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-blue-pressed); } -.d_flex:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { - display: flex; +.text_blueBackgroundPressed:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-blue-background-pressed); } -.bg_blueBackgroundPressed:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { - background: var(--colors-blue-background-pressed); +.text_monoBackgroundPressed:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-mono-background-pressed); } -.w_10:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { - width: 10px; +.text_shadowSmall:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-shadow-small); } -.h_10:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { - height: 10px; +.text_shadowMedium:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-shadow-medium); } -.bg_primary:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { - background: var(--colors-primary); +.text_blueShadow:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-blue-shadow); } -.gap_8:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { - gap: 8px; +.text_discord:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-discord); } -.d_none:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { - display: none; +.text_github:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-github); } -.gap_0\.5rem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { - gap: 0.5rem; +.text_secondaryYellow:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-secondary-yellow); } -.font_Inter:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { - font-family: Inter; +.text_secondaryGreen:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-secondary-green); } -.border-w_1:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { - border-width: 1px; +.text_secondaryRed:not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-secondary-red); } -.items_center:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { - align-items: center; +.text_blueGradientDark:not(#\#):not(#\#):not(#\#):not(#\#) { + color: blueGradientDark; } -.justify_center:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { - justify-content: center; +.text_blueGradientLight:not(#\#):not(#\#):not(#\#):not(#\#) { + color: blueGradientLight; } -.border_primary:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { - border-color: var(--colors-primary); +.text_redGradientDark:not(#\#):not(#\#):not(#\#):not(#\#) { + color: redGradientDark; } -.border_darkDisabled:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { - border-color: var(--colors-dark-disabled); +.text_redGradientLight:not(#\#):not(#\#):not(#\#):not(#\#) { + color: redGradientLight; } -.border_bluePressed:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { - border-color: var(--colors-blue-pressed); +.text_greenGradientDark:not(#\#):not(#\#):not(#\#):not(#\#) { + color: greenGradientDark; } -.flex_column:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { - flex-direction: column; +.text_greenGradientLight:not(#\#):not(#\#):not(#\#):not(#\#) { + color: greenGradientLight; } -.hover\:bg_blue\.400:is(:hover, [data-hover]):not(#\#):not(#\#):not(#\#):not( - #\# - ):not(#\#) { - background: var(--colors-blue-400); +.text_yellowGradientDark:not(#\#):not(#\#):not(#\#):not(#\#) { + color: yellowGradientDark; } -.hover\:bg_red\.500:is(:hover, [data-hover]):not(#\#):not(#\#):not(#\#):not( - #\# - ):not(#\#) { - background: var(--colors-red-500); +.text_yellowGradientLight:not(#\#):not(#\#):not(#\#):not(#\#) { + color: yellowGradientLight; } From 0c978922bac6b09b3f43e5285dace7efdf87896e Mon Sep 17 00:00:00 2001 From: ghdtjgus76 Date: Sat, 21 Sep 2024 21:29:20 +0900 Subject: [PATCH 08/15] =?UTF-8?q?fix:=20Header=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20a11y=20color=20contrast=20=ED=85=8C?= =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=EB=B9=84=ED=99=9C=EC=84=B1=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/wow-ui/src/components/Header/Header.stories.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/wow-ui/src/components/Header/Header.stories.ts b/packages/wow-ui/src/components/Header/Header.stories.ts index 3073b20a..f2c7836b 100644 --- a/packages/wow-ui/src/components/Header/Header.stories.ts +++ b/packages/wow-ui/src/components/Header/Header.stories.ts @@ -8,6 +8,11 @@ const meta = { tags: ["autodocs"], parameters: { componentSubtitle: "헤더 컴포넌트", + a11y: { + config: { + rules: [{ id: "color-contrast", enabled: false }], + }, + }, }, argTypes: { variant: { From 58140620f6aa5cb7ddc56099229576dfdb7ec4fd Mon Sep 17 00:00:00 2001 From: ghdtjgus76 Date: Thu, 10 Oct 2024 14:53:28 +0900 Subject: [PATCH 09/15] =?UTF-8?q?chore:=20=EC=8A=A4=ED=86=A0=EB=A6=AC?= =?UTF-8?q?=EB=B6=81=20variant=20prop=20options=20=EC=A7=80=EC=A0=95=20?= =?UTF-8?q?=EC=9C=84=EC=B9=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/wow-ui/src/components/Header/Header.stories.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/wow-ui/src/components/Header/Header.stories.ts b/packages/wow-ui/src/components/Header/Header.stories.ts index f2c7836b..c6eec1ce 100644 --- a/packages/wow-ui/src/components/Header/Header.stories.ts +++ b/packages/wow-ui/src/components/Header/Header.stories.ts @@ -18,8 +18,8 @@ const meta = { variant: { control: { type: "select", - options: ["username", "login", "none"], }, + options: ["username", "login", "none"], table: { type: { summary: "username | login | none" }, }, From 917820639864d1291d230b6931f6e6d8c180f20a Mon Sep 17 00:00:00 2001 From: ghdtjgus76 Date: Thu, 10 Oct 2024 14:55:45 +0900 Subject: [PATCH 10/15] =?UTF-8?q?chore:=20role=3D"heading",=20aria-level?= =?UTF-8?q?=20=EB=8C=80=EC=8B=A0=20=EC=8B=9C=EB=A7=A8=ED=8B=B1=20=ED=83=9C?= =?UTF-8?q?=EA=B7=B8=EB=A1=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/wow-ui/src/components/Header/index.tsx | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/packages/wow-ui/src/components/Header/index.tsx b/packages/wow-ui/src/components/Header/index.tsx index 6195d57f..d68ac32c 100644 --- a/packages/wow-ui/src/components/Header/index.tsx +++ b/packages/wow-ui/src/components/Header/index.tsx @@ -36,12 +36,8 @@ const Header = ({
-
- GDSC -
-
- Hongik Univ. -
+

GDSC

+

Hongik Univ.
From c4ce7b57be2cdbe1e09f8324b823a17180d49c79 Mon Sep 17 00:00:00 2001 From: ghdtjgus76 Date: Thu, 10 Oct 2024 14:58:34 +0900 Subject: [PATCH 11/15] =?UTF-8?q?feat:=20wow-tokens=20=EC=B6=94=EA=B0=80?= =?UTF-8?q?=EB=90=9C=20=ED=97=A4=EB=8D=94=20=ED=83=80=EC=9D=B4=ED=8F=AC=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/wow-tokens/src/typography.ts | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/packages/wow-tokens/src/typography.ts b/packages/wow-tokens/src/typography.ts index a643c400..fc8d9703 100644 --- a/packages/wow-tokens/src/typography.ts +++ b/packages/wow-tokens/src/typography.ts @@ -79,3 +79,15 @@ export const label3 = { lineHeight: "100%", fontWeight: 600, }; + +export const header1 = { + fontSize: "1.3rem", + lineHeight: "130%", + fontWeight: 700, +}; + +export const header2 = { + fontSize: "0.9rem", + lineHeight: "130%", + fontWeight: 400, +}; From bc00f72f0aec5c3352f38b073615d38bb0b12f9e Mon Sep 17 00:00:00 2001 From: ghdtjgus76 Date: Thu, 10 Oct 2024 15:03:38 +0900 Subject: [PATCH 12/15] =?UTF-8?q?feat:=20wow-theme=20textStyles=EC=97=90?= =?UTF-8?q?=20=EC=B6=94=EA=B0=80=EB=90=9C=20=ED=97=A4=EB=8D=94=20=ED=83=80?= =?UTF-8?q?=EC=9D=B4=ED=8F=AC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/wow-theme/src/tokens/typography.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/wow-theme/src/tokens/typography.ts b/packages/wow-theme/src/tokens/typography.ts index 55b7fb30..7a952cdc 100644 --- a/packages/wow-theme/src/tokens/typography.ts +++ b/packages/wow-theme/src/tokens/typography.ts @@ -38,4 +38,10 @@ export const textStyles = defineTextStyles({ label3: { value: typography.label3, }, + header1: { + value: typography.header1, + }, + header2: { + value: typography.header2, + }, }); From eeed2df3214ab27c16b5eb0692d65ee31c7de1fa Mon Sep 17 00:00:00 2001 From: ghdtjgus76 Date: Thu, 10 Oct 2024 15:03:53 +0900 Subject: [PATCH 13/15] =?UTF-8?q?chore:=20=EC=B6=94=EA=B0=80=EB=90=9C=20?= =?UTF-8?q?=ED=83=80=EC=9D=B4=ED=8F=AC=20=ED=97=A4=EB=8D=94=EC=97=90=20?= =?UTF-8?q?=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/wow-ui/src/components/Header/index.tsx | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/packages/wow-ui/src/components/Header/index.tsx b/packages/wow-ui/src/components/Header/index.tsx index d68ac32c..f505748e 100644 --- a/packages/wow-ui/src/components/Header/index.tsx +++ b/packages/wow-ui/src/components/Header/index.tsx @@ -89,17 +89,13 @@ const leftElementContainerStyle = css({ const titleStyle = css({ fontFamily: "Product Sans", - fontWeight: 700, - fontSize: "20px", - lineHeight: "130%", + textStyle: "header1", }); const subTitleStyle = css({ fontFamily: "Product Sans", - fontWeight: 400, - fontSize: "14px", - lineHeight: "130%", color: "primary", + textStyle: "header2", }); const usernameTextStyle = css({ From 2e15e18d8e94a4eb904c354d1c81e5e10b9ff14d Mon Sep 17 00:00:00 2001 From: ghdtjgus76 Date: Thu, 10 Oct 2024 15:04:29 +0900 Subject: [PATCH 14/15] =?UTF-8?q?chore:=20panda=20codegen=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD=EC=82=AC=ED=95=AD=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/wow-docs/styled-system/types/prop-type.d.ts | 4 +++- packages/wow-ui/styled-system/types/prop-type.d.ts | 4 +++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/apps/wow-docs/styled-system/types/prop-type.d.ts b/apps/wow-docs/styled-system/types/prop-type.d.ts index 195159ce..bfcf5a77 100644 --- a/apps/wow-docs/styled-system/types/prop-type.d.ts +++ b/apps/wow-docs/styled-system/types/prop-type.d.ts @@ -679,7 +679,9 @@ export interface UtilityValues { | "body3" | "label1" | "label2" - | "label3"; + | "label3" + | "header1" + | "header2"; } type WithColorOpacityModifier = T extends string ? `${T}/${string}` : T; diff --git a/packages/wow-ui/styled-system/types/prop-type.d.ts b/packages/wow-ui/styled-system/types/prop-type.d.ts index 195159ce..bfcf5a77 100644 --- a/packages/wow-ui/styled-system/types/prop-type.d.ts +++ b/packages/wow-ui/styled-system/types/prop-type.d.ts @@ -679,7 +679,9 @@ export interface UtilityValues { | "body3" | "label1" | "label2" - | "label3"; + | "label3" + | "header1" + | "header2"; } type WithColorOpacityModifier = T extends string ? `${T}/${string}` : T; From be8208956e37e0774a22e1d5a5f9dbfcd0689180 Mon Sep 17 00:00:00 2001 From: ghdtjgus76 Date: Sun, 13 Oct 2024 16:21:27 +0900 Subject: [PATCH 15/15] =?UTF-8?q?docs:=20Header=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20changeset=20=EC=9E=91=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .changeset/slimy-mice-tap.md | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 .changeset/slimy-mice-tap.md diff --git a/.changeset/slimy-mice-tap.md b/.changeset/slimy-mice-tap.md new file mode 100644 index 00000000..48b2d0be --- /dev/null +++ b/.changeset/slimy-mice-tap.md @@ -0,0 +1,8 @@ +--- +"wowds-tokens": patch +"wowds-icons": patch +"wowds-theme": patch +"wowds-ui": patch +--- + +Header 컴포넌트를 추가합니다.