From 4b55280dff5f81a9e28eaf040d9f41247bcc47d3 Mon Sep 17 00:00:00 2001 From: wkdtnqls0506 Date: Tue, 24 Jun 2025 15:19:32 +0900 Subject: [PATCH 01/14] =?UTF-8?q?chore(#49):=20Storybook=20=EA=B4=80?= =?UTF-8?q?=EB=A0=A8=20=ED=8C=A8=ED=82=A4=EC=A7=80=20=EC=84=A4=EC=B9=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 3 + pnpm-lock.yaml | 160 +++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 163 insertions(+) diff --git a/package.json b/package.json index 82254184..ce673070 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "@tanstack/react-query": "^5.77.0", "@tanstack/react-query-devtools": "^5.77.0", "@vanilla-extract/css": "^1.17.2", + "@vanilla-extract/recipes": "^0.5.7", "next": "15.3.2", "react": "^19.0.0", "react-dom": "^19.0.0" @@ -42,10 +43,12 @@ "@types/react": "^19", "@types/react-dom": "^19", "@vanilla-extract/next-plugin": "^2.4.11", + "@vanilla-extract/vite-plugin": "^5.0.7", "@vitejs/plugin-react": "^4.5.0", "@vitest/browser": "^3.1.4", "@vitest/coverage-v8": "^3.1.4", "@vitest/eslint-plugin": "^1.2.1", + "chromatic": "^13.0.1", "commitizen": "^4.3.1", "eslint": "^9", "eslint-config-next": "15.3.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0e569509..e7a453a5 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -17,6 +17,9 @@ importers: '@vanilla-extract/css': specifier: ^1.17.2 version: 1.17.2 + '@vanilla-extract/recipes': + specifier: ^0.5.7 + version: 0.5.7(@vanilla-extract/css@1.17.2) next: specifier: 15.3.2 version: 15.3.2(@babel/core@7.27.1)(@playwright/test@1.52.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0) @@ -81,6 +84,9 @@ importers: '@vanilla-extract/next-plugin': specifier: ^2.4.11 version: 2.4.11(next@15.3.2(@babel/core@7.27.1)(@playwright/test@1.52.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(webpack@5.99.9(esbuild@0.25.4)) + '@vanilla-extract/vite-plugin': + specifier: ^5.0.7 + version: 5.0.7(@types/node@20.17.50)(jiti@2.4.2)(terser@5.39.2)(vite@6.3.5(@types/node@20.17.50)(jiti@2.4.2)(terser@5.39.2)(yaml@2.8.0))(yaml@2.8.0) '@vitejs/plugin-react': specifier: ^4.5.0 version: 4.5.0(vite@6.3.5(@types/node@20.17.50)(jiti@2.4.2)(terser@5.39.2)(yaml@2.8.0)) @@ -93,6 +99,9 @@ importers: '@vitest/eslint-plugin': specifier: ^1.2.1 version: 1.2.1(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)(vitest@3.1.4(@types/node@20.17.50)(@vitest/browser@3.1.4)(jiti@2.4.2)(jsdom@26.1.0)(msw@2.8.4(@types/node@20.17.50)(typescript@5.8.3))(terser@5.39.2)(yaml@2.8.0)) + chromatic: + specifier: ^13.0.1 + version: 13.0.1 commitizen: specifier: ^4.3.1 version: 4.3.1(@types/node@20.17.50)(typescript@5.8.3) @@ -1645,12 +1654,24 @@ packages: '@vanilla-extract/babel-plugin-debug-ids@1.2.0': resolution: {integrity: sha512-z5nx2QBnOhvmlmBKeRX5sPVLz437wV30u+GJL+Hzj1rGiJYVNvgIIlzUpRNjVQ0MgAgiQIqIUbqPnmMc6HmDlQ==} + '@vanilla-extract/babel-plugin-debug-ids@1.2.2': + resolution: {integrity: sha512-MeDWGICAF9zA/OZLOKwhoRlsUW+fiMwnfuOAqFVohL31Agj7Q/RBWAYweqjHLgFBCsdnr6XIfwjJnmb2znEWxw==} + + '@vanilla-extract/compiler@0.2.3': + resolution: {integrity: sha512-SFEDLbvd5rhpjhrLp9BtvvVNHNxWupiUht/yrsHQ7xfkpEn4xg45gbfma7aX9fsOpi82ebqFmowHd/g6jHDQnA==} + '@vanilla-extract/css@1.17.2': resolution: {integrity: sha512-gowpfR1zJSplDO7NkGf2Vnw9v9eG1P3aUlQpxa1pOjcknbgWw7UPzIboB6vGJZmoUvDZRFmipss3/Q+RRfhloQ==} + '@vanilla-extract/css@1.17.4': + resolution: {integrity: sha512-m3g9nQDWPtL+sTFdtCGRMI1Vrp86Ay4PBYq1Bo7Bnchj5ElNtAJpOqD+zg+apthVA4fB7oVpMWNjwpa6ElDWFQ==} + '@vanilla-extract/integration@8.0.2': resolution: {integrity: sha512-w9OvWwsYkqyuyHf9NLnOJ8ap0FGTy2pAeWftgxAEkKE3tF1aYeyEtYRHKxfVH6JRgi8JIeQqELHGMSwz+BxwiA==} + '@vanilla-extract/integration@8.0.4': + resolution: {integrity: sha512-cmOb7tR+g3ulKvFtSbmdw3YUyIS1d7MQqN+FcbwNhdieyno5xzUyfDCMjeWJhmCSMvZ6WlinkrOkgs6SHB+FRg==} + '@vanilla-extract/next-plugin@2.4.11': resolution: {integrity: sha512-xfrwHTZKujMPGvo8SK8jKdQCkZtGo05mLhVnY4nPy0BnSiBnY0FoCQ4gSwvgukN7FUqtLlNd4A3lzWEitZIOtw==} peerDependencies: @@ -1659,6 +1680,19 @@ packages: '@vanilla-extract/private@1.0.7': resolution: {integrity: sha512-v9Yb0bZ5H5Kr8ciwPXyEToOFD7J/fKKH93BYP7NCSZg02VYsA/pNFrLeVDJM2OO/vsygduPKuiEI6ORGQ4IcBw==} + '@vanilla-extract/private@1.0.9': + resolution: {integrity: sha512-gT2jbfZuaaCLrAxwXbRgIhGhcXbRZCG3v4TTUnjw0EJ7ArdBRxkq4msNJkbuRkCgfIK5ATmprB5t9ljvLeFDEA==} + + '@vanilla-extract/recipes@0.5.7': + resolution: {integrity: sha512-Fvr+htdyb6LVUu+PhH61UFPhwkjgDEk8L4Zq9oIdte42sntpKrgFy90MyTRtGwjVALmrJ0pwRUVr8UoByYeW8A==} + peerDependencies: + '@vanilla-extract/css': ^1.0.0 + + '@vanilla-extract/vite-plugin@5.0.7': + resolution: {integrity: sha512-UyUma9HEl2qHl0CFlTwPKU7SkyuOwNQOgLT1yMShjqiQqg8k+9oma2Z5GigGtEUhUDizCAxeR4b4bP9KAviDdQ==} + peerDependencies: + vite: ^5.0.0 || ^6.0.0 + '@vanilla-extract/webpack-plugin@2.3.19': resolution: {integrity: sha512-GDphiVib3EMeNkMNyzc7zOs35lBs1GzlALi93dawl/V4e6CsCsGKBNrPzGpDSFvzf4Vq51MNuUkyzwAdfbayPQ==} peerDependencies: @@ -2047,6 +2081,18 @@ packages: resolution: {integrity: sha512-OAlb+T7V4Op9OwdkjmguYRqncdlx5JiofwOAUkmTF+jNdHwzTaTs4sRAGpzLF3oOz5xAyDGrPgeIDFQmDOTiJw==} engines: {node: '>= 16'} + chromatic@13.0.1: + resolution: {integrity: sha512-vX0Rs/pAeFAnGuQiVrA4h0XD36MYbTUp9Mlm1jFqXo3Cejd2BdBY1CA+vd6CkeO5CRSc6TRWmCz0zQAsE1q3Hw==} + hasBin: true + peerDependencies: + '@chromatic-com/cypress': ^0.*.* || ^1.0.0 + '@chromatic-com/playwright': ^0.*.* || ^1.0.0 + peerDependenciesMeta: + '@chromatic-com/cypress': + optional: true + '@chromatic-com/playwright': + optional: true + chrome-trace-event@1.0.4: resolution: {integrity: sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ==} engines: {node: '>=6.0'} @@ -4328,6 +4374,11 @@ packages: engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0} hasBin: true + vite-node@3.2.4: + resolution: {integrity: sha512-EbKSKh+bh1E1IFxeO0pg1n4dvoOTt0UDiXMd/qn++r98+jPO1xtJilvXldeuQ8giIB5IkpjCgMleHMNEsGH6pg==} + engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0} + hasBin: true + vite-plugin-storybook-nextjs@1.1.5: resolution: {integrity: sha512-doFAXLvfEtIgMbDA+0VzyanoWoAUAwMLMfTpFnv3rxaN/tGHtWAwyhK73OA3UJzyXrp6rDPTqbjWUYJ6noxNww==} peerDependencies: @@ -6001,6 +6052,33 @@ snapshots: transitivePeerDependencies: - supports-color + '@vanilla-extract/babel-plugin-debug-ids@1.2.2': + dependencies: + '@babel/core': 7.27.1 + transitivePeerDependencies: + - supports-color + + '@vanilla-extract/compiler@0.2.3(@types/node@20.17.50)(jiti@2.4.2)(terser@5.39.2)(yaml@2.8.0)': + dependencies: + '@vanilla-extract/css': 1.17.4 + '@vanilla-extract/integration': 8.0.4 + vite: 6.3.5(@types/node@20.17.50)(jiti@2.4.2)(terser@5.39.2)(yaml@2.8.0) + vite-node: 3.2.4(@types/node@20.17.50)(jiti@2.4.2)(terser@5.39.2)(yaml@2.8.0) + transitivePeerDependencies: + - '@types/node' + - babel-plugin-macros + - jiti + - less + - lightningcss + - sass + - sass-embedded + - stylus + - sugarss + - supports-color + - terser + - tsx + - yaml + '@vanilla-extract/css@1.17.2': dependencies: '@emotion/hash': 0.9.2 @@ -6018,6 +6096,23 @@ snapshots: transitivePeerDependencies: - babel-plugin-macros + '@vanilla-extract/css@1.17.4': + dependencies: + '@emotion/hash': 0.9.2 + '@vanilla-extract/private': 1.0.9 + css-what: 6.1.0 + cssesc: 3.0.0 + csstype: 3.1.3 + dedent: 1.6.0 + deep-object-diff: 1.1.9 + deepmerge: 4.3.1 + lru-cache: 10.4.3 + media-query-parser: 2.0.2 + modern-ahocorasick: 1.1.0 + picocolors: 1.1.1 + transitivePeerDependencies: + - babel-plugin-macros + '@vanilla-extract/integration@8.0.2': dependencies: '@babel/core': 7.27.1 @@ -6034,6 +6129,22 @@ snapshots: - babel-plugin-macros - supports-color + '@vanilla-extract/integration@8.0.4': + dependencies: + '@babel/core': 7.27.1 + '@babel/plugin-syntax-typescript': 7.27.1(@babel/core@7.27.1) + '@vanilla-extract/babel-plugin-debug-ids': 1.2.2 + '@vanilla-extract/css': 1.17.4 + dedent: 1.6.0 + esbuild: 0.25.4 + eval: 0.1.8 + find-up: 5.0.0 + javascript-stringify: 2.1.0 + mlly: 1.7.4 + transitivePeerDependencies: + - babel-plugin-macros + - supports-color + '@vanilla-extract/next-plugin@2.4.11(next@15.3.2(@babel/core@7.27.1)(@playwright/test@1.52.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(webpack@5.99.9(esbuild@0.25.4))': dependencies: '@vanilla-extract/webpack-plugin': 2.3.19(webpack@5.99.9(esbuild@0.25.4)) @@ -6045,6 +6156,32 @@ snapshots: '@vanilla-extract/private@1.0.7': {} + '@vanilla-extract/private@1.0.9': {} + + '@vanilla-extract/recipes@0.5.7(@vanilla-extract/css@1.17.2)': + dependencies: + '@vanilla-extract/css': 1.17.2 + + '@vanilla-extract/vite-plugin@5.0.7(@types/node@20.17.50)(jiti@2.4.2)(terser@5.39.2)(vite@6.3.5(@types/node@20.17.50)(jiti@2.4.2)(terser@5.39.2)(yaml@2.8.0))(yaml@2.8.0)': + dependencies: + '@vanilla-extract/compiler': 0.2.3(@types/node@20.17.50)(jiti@2.4.2)(terser@5.39.2)(yaml@2.8.0) + '@vanilla-extract/integration': 8.0.4 + vite: 6.3.5(@types/node@20.17.50)(jiti@2.4.2)(terser@5.39.2)(yaml@2.8.0) + transitivePeerDependencies: + - '@types/node' + - babel-plugin-macros + - jiti + - less + - lightningcss + - sass + - sass-embedded + - stylus + - sugarss + - supports-color + - terser + - tsx + - yaml + '@vanilla-extract/webpack-plugin@2.3.19(webpack@5.99.9(esbuild@0.25.4))': dependencies: '@vanilla-extract/integration': 8.0.2 @@ -6529,6 +6666,8 @@ snapshots: check-error@2.1.1: {} + chromatic@13.0.1: {} + chrome-trace-event@1.0.4: {} cli-cursor@3.1.0: @@ -9095,6 +9234,27 @@ snapshots: - tsx - yaml + vite-node@3.2.4(@types/node@20.17.50)(jiti@2.4.2)(terser@5.39.2)(yaml@2.8.0): + dependencies: + cac: 6.7.14 + debug: 4.4.1 + es-module-lexer: 1.7.0 + pathe: 2.0.3 + vite: 6.3.5(@types/node@20.17.50)(jiti@2.4.2)(terser@5.39.2)(yaml@2.8.0) + transitivePeerDependencies: + - '@types/node' + - jiti + - less + - lightningcss + - sass + - sass-embedded + - stylus + - sugarss + - supports-color + - terser + - tsx + - yaml + vite-plugin-storybook-nextjs@1.1.5(@storybook/test@8.6.14(storybook@8.6.14(prettier@3.5.3)))(next@15.3.2(@babel/core@7.27.1)(@playwright/test@1.52.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(storybook@8.6.14(prettier@3.5.3))(vite@6.3.5(@types/node@20.17.50)(jiti@2.4.2)(terser@5.39.2)(yaml@2.8.0)): dependencies: '@next/env': 15.3.2 From 65b79ae1f247fa373f6f7f4dde6fd4c69b8e7325 Mon Sep 17 00:00:00 2001 From: wkdtnqls0506 Date: Tue, 24 Jun 2025 15:20:25 +0900 Subject: [PATCH 02/14] =?UTF-8?q?feat(#49):=20Storybook=20=EB=B0=B0?= =?UTF-8?q?=ED=8F=AC=EB=A5=BC=20=EC=9C=84=ED=95=9C=20Chromatic=20=EC=9B=8C?= =?UTF-8?q?=ED=81=AC=ED=94=8C=EB=A1=9C=EC=9A=B0=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .github/workflows/chromatic.yml | 43 +++++++++++++++++++++++++++++++++ 1 file changed, 43 insertions(+) create mode 100644 .github/workflows/chromatic.yml diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml new file mode 100644 index 00000000..f09a3091 --- /dev/null +++ b/.github/workflows/chromatic.yml @@ -0,0 +1,43 @@ +name: Storybook Chromatic Deployment + +on: + pull_request: + branches: [main] + +jobs: + storybook-preview: + runs-on: ubuntu-latest + + steps: + - name: Checkout repository + uses: actions/checkout@v4 + + - name: Setup pnpm + uses: pnpm/action-setup@v4 + + - name: Set up Node.js + uses: actions/setup-node@v4 + with: + node-version: "22" + cache: "pnpm" + + - name: Install dependencies + run: pnpm install + + - name: Publish to Chromatic + id: chromatic + uses: chromaui/action@latest + with: + projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} + token: ${{ secrets.GITHUB_TOKEN }} + onlyChanged: true + autoAcceptChanges: true + + - name: Comment PR + if: always() + uses: thollander/actions-comment-pull-request@v3 + with: + comment-tag: chromatic-preview-${{ github.event.number }} + message: | + 🎨 **Storybook Preview**: ${{ steps.chromatic.outputs.storybookUrl }} + 🔗 **Chromatic Build**: ${{ steps.chromatic.outputs.buildUrl }} From 07a52098937c6fffd01ef04838249e5213ef6526 Mon Sep 17 00:00:00 2001 From: wkdtnqls0506 Date: Tue, 24 Jun 2025 15:24:00 +0900 Subject: [PATCH 03/14] =?UTF-8?q?feat(#49):=20=EA=B8=80=EB=A1=9C=EB=B2=8C?= =?UTF-8?q?=20reset=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=A0=95=EC=9D=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/styles/layers.css.ts | 3 + src/styles/reset.css.ts | 126 +++++++++++++++++++++++++++++++++++++++ 2 files changed, 129 insertions(+) create mode 100644 src/styles/layers.css.ts create mode 100644 src/styles/reset.css.ts diff --git a/src/styles/layers.css.ts b/src/styles/layers.css.ts new file mode 100644 index 00000000..1dd54fb4 --- /dev/null +++ b/src/styles/layers.css.ts @@ -0,0 +1,3 @@ +import { globalLayer } from "@vanilla-extract/css"; + +export const reset = globalLayer("reset"); diff --git a/src/styles/reset.css.ts b/src/styles/reset.css.ts new file mode 100644 index 00000000..899f309d --- /dev/null +++ b/src/styles/reset.css.ts @@ -0,0 +1,126 @@ +import { globalStyle } from "@vanilla-extract/css"; + +import { reset } from "./layers.css"; + +globalStyle( + "html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video", + { + "@layer": { + [reset]: { + margin: 0, + padding: 0, + border: 0, + font: "inherit", + verticalAlign: "baseline", + }, + }, + } +); + +globalStyle( + "article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section", + { + "@layer": { + [reset]: { + display: "block", + }, + }, + } +); + +globalStyle("body", { + "@layer": { + [reset]: { + lineHeight: 1, + }, + }, +}); + +globalStyle("ol, ul", { + "@layer": { + [reset]: { + listStyle: "none", + }, + }, +}); + +globalStyle("button", { + "@layer": { + [reset]: { + padding: 0, + border: "none", + background: "none", + outline: "none", + boxShadow: "none", + cursor: "pointer", + }, + }, +}); + +globalStyle("a", { + "@layer": { + [reset]: { + textDecoration: "none", + color: "inherit", + }, + }, +}); + +globalStyle("textarea", { + "@layer": { + [reset]: { + padding: 0, + border: "none", + height: "auto", + resize: "none", + }, + }, +}); + +globalStyle("html", { + "@layer": { + [reset]: { + MozTextSizeAdjust: "none", + WebkitTextSizeAdjust: "none", + textSizeAdjust: "none", + }, + }, +}); + +globalStyle("img", { + "@layer": { + [reset]: { + maxInlineSize: "100%", + maxBlockSize: "100%", + }, + }, +}); + +globalStyle("*", { + "@layer": { + [reset]: { + boxSizing: "border-box", + fontFamily: "var(--font-family)", + fontWeight: 500, + WebkitFontSmoothing: "antialiased", + MozOsxFontSmoothing: "grayscale", + }, + }, +}); + +globalStyle("main", { + "@layer": { + [reset]: { + position: "relative", + width: "100%", + }, + }, +}); + +globalStyle("input:disabled", { + "@layer": { + [reset]: { + cursor: "not-allowed", + }, + }, +}); From 5b4372d7db7eb4c7088be8fc50268bcb10b71339 Mon Sep 17 00:00:00 2001 From: wkdtnqls0506 Date: Tue, 24 Jun 2025 15:27:48 +0900 Subject: [PATCH 04/14] =?UTF-8?q?feat(#49):=20color,=20radius=20=EB=94=94?= =?UTF-8?q?=EC=9E=90=EC=9D=B8=20=ED=86=A0=ED=81=B0=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/styles/colors.css.ts | 88 ++++++++++++++++++++++++++++++++++++++++ src/styles/index.ts | 2 + src/styles/radius.css.ts | 12 ++++++ 3 files changed, 102 insertions(+) create mode 100644 src/styles/colors.css.ts create mode 100644 src/styles/index.ts create mode 100644 src/styles/radius.css.ts diff --git a/src/styles/colors.css.ts b/src/styles/colors.css.ts new file mode 100644 index 00000000..1416b894 --- /dev/null +++ b/src/styles/colors.css.ts @@ -0,0 +1,88 @@ +import { createGlobalTheme } from "@vanilla-extract/css"; + +export const colors = createGlobalTheme(":root", { + common: { + 100: "#FFFFFF", + 0: "#000000", + }, + neutral: { + 99: "#F7F7F7", + 95: "#DCDCDC", + 90: "#C4C4C4", + 80: "#B0B0B0", + 70: "#9B9B9B", + 60: "#8A8A8A", + 50: "#737373", + 40: "#5C5C5C", + 30: "#474747", + 20: "#2A2A2A", + 10: "#171717", + 5: "#0F0F0F", + }, + coolNeutral: { + 99: "#F7F7F8", + 98: "#F4F4F5", + 97: "#EAEBEC", + 96: "#E1E2E4", + 95: "#DBDCDF", + 90: "#C2C4C8", + 80: "#AEB0B6", + 70: "#989BA2", + 60: "#878A93", + 50: "#70737C", + 40: "#5A5C63", + 30: "#46474C", + 20: "#292A2D", + 10: "#171719", + 5: "#0F0F10", + }, + red: { + 95: "#FEECEC", + 90: "#FED5D5", + 80: "#FFB5B5", + 70: "#FF8C8C", + 60: "#FF6363", + 50: "#FF4242", + 40: "#E52222", + 30: "#B00C0C", + 20: "#730303", + 10: "#3B0101", + }, + green: { + 95: "#D9FFE6", + 90: "#ACFCC7", + 80: "#7DF5A5", + 70: "#49E57D", + 60: "#1ED45A", + 50: "#00BF40", + 40: "#009632", + 30: "#006E25", + 20: "#004517", + 10: "#00240C", + }, + orange: { + 95: "#FEF4E6", + 90: "#FEE6C6", + 80: "#FFD49C", + 70: "#FFC06E", + 60: "#FFA938", + 50: "#FF9200", + 40: "#D47800", + 30: "#9C5800", + 20: "#663A00", + 10: "#361E00", + }, + redOrange: { + 95: "#FFF9F4", + 90: "#FFF4EA", + 80: "#FEDEC1", + 70: "#FFBD84", + 60: "#FE9F4C", + 50: "#FF6F0F", + 45: "#F47200", + 40: "#E56B00", + 30: "#B35809", + 20: "#89480F", + 10: "#633711", + }, +}); diff --git a/src/styles/index.ts b/src/styles/index.ts new file mode 100644 index 00000000..cb02efe5 --- /dev/null +++ b/src/styles/index.ts @@ -0,0 +1,2 @@ +export { colors } from "./colors.css"; +export { radius } from "./radius.css"; diff --git a/src/styles/radius.css.ts b/src/styles/radius.css.ts new file mode 100644 index 00000000..022e0638 --- /dev/null +++ b/src/styles/radius.css.ts @@ -0,0 +1,12 @@ +import { createGlobalTheme } from "@vanilla-extract/css"; + +export const radius = createGlobalTheme(":root", { + 20: "2px", + 40: "4px", + 60: "6px", + 80: "8px", + 100: "10px", + 120: "12px", + 160: "16px", + circle: "999px", +}); From 1feb5d6caf7f3915a08b9afe8a66775c8048b2db Mon Sep 17 00:00:00 2001 From: wkdtnqls0506 Date: Tue, 24 Jun 2025 15:30:40 +0900 Subject: [PATCH 05/14] =?UTF-8?q?feat(#49):=20Storybook=20=EA=B8=80?= =?UTF-8?q?=EB=A1=9C=EB=B2=8C=20reset=20=EC=8A=A4=ED=83=80=EC=9D=BC=20?= =?UTF-8?q?=EC=A0=81=EC=9A=A9=20=EB=B0=8F=20vanilla-extract=20vite=20?= =?UTF-8?q?=ED=94=8C=EB=9F=AC=EA=B7=B8=EC=9D=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .storybook/main.ts | 10 ++++++++++ .storybook/preview.ts | 10 ++++++---- 2 files changed, 16 insertions(+), 4 deletions(-) diff --git a/.storybook/main.ts b/.storybook/main.ts index 3cd1d793..1375e6c5 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -1,4 +1,6 @@ import type { StorybookConfig } from "@storybook/experimental-nextjs-vite"; +import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin"; +import tsconfigPaths from "vite-tsconfig-paths"; const config: StorybookConfig = { stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"], @@ -8,5 +10,13 @@ const config: StorybookConfig = { options: {}, }, staticDirs: ["../public"], + viteFinal: async config => { + config.plugins = [ + ...(config.plugins || []), + tsconfigPaths(), + vanillaExtractPlugin(), + ]; + return config; + }, }; export default config; diff --git a/.storybook/preview.ts b/.storybook/preview.ts index cfa30243..1aa6532f 100644 --- a/.storybook/preview.ts +++ b/.storybook/preview.ts @@ -1,14 +1,16 @@ -import type { Preview } from '@storybook/react' +import "@/styles/reset.css.ts"; + +import type { Preview } from "@storybook/react"; const preview: Preview = { parameters: { controls: { matchers: { - color: /(background|color)$/i, - date: /Date$/i, + color: /(background|color)$/i, + date: /Date$/i, }, }, }, }; -export default preview; \ No newline at end of file +export default preview; From 91420c1bc2a9daa119d9865927e8da4c1b767149 Mon Sep 17 00:00:00 2001 From: wkdtnqls0506 Date: Tue, 24 Jun 2025 15:32:32 +0900 Subject: [PATCH 06/14] =?UTF-8?q?feat(#49):=20Button=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EB=B0=8F=20=EC=8A=A4=ED=83=80=EC=9D=BC=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ui/Button/Button.css.ts | 72 ++++++++++++++++++++++++++ src/components/ui/Button/Button.tsx | 27 ++++++++++ src/components/ui/Button/index.ts | 2 + 3 files changed, 101 insertions(+) create mode 100644 src/components/ui/Button/Button.css.ts create mode 100644 src/components/ui/Button/Button.tsx create mode 100644 src/components/ui/Button/index.ts diff --git a/src/components/ui/Button/Button.css.ts b/src/components/ui/Button/Button.css.ts new file mode 100644 index 00000000..ea89f099 --- /dev/null +++ b/src/components/ui/Button/Button.css.ts @@ -0,0 +1,72 @@ +import { recipe } from "@vanilla-extract/recipes"; + +import { colors, radius } from "@/styles"; + +export const button = recipe({ + base: { + display: "flex", + alignItems: "center", + justifyContent: "center", + fontWeight: 600, + transition: "background-color 0.2s ease", + whiteSpace: "nowrap", + }, + variants: { + variant: { + primary: { + color: colors.common[100], + backgroundColor: colors.redOrange[50], + ":hover": { backgroundColor: colors.redOrange[40] }, + }, + dark: { + color: colors.common[100], + backgroundColor: colors.neutral[10], + ":hover": { backgroundColor: colors.neutral[30] }, + }, + assistive: { + color: colors.neutral[10], + backgroundColor: colors.coolNeutral[99], + ":hover": { backgroundColor: colors.coolNeutral[97] }, + }, + disabled: { + backgroundColor: colors.coolNeutral[96], + color: colors.neutral[70], + cursor: "not-allowed", + }, + }, + size: { + small: { + width: "63px", + height: "32px", + padding: "9px 20px", + fontSize: "13px", + borderRadius: radius[80], + }, + medium: { + width: "80px", + height: "40px", + padding: "9px 20px", + fontSize: "15px", + borderRadius: radius[100], + }, + large: { + width: "98px", + height: "48px", + padding: "12px 28px", + fontSize: "16px", + borderRadius: radius[120], + }, + fullWidth: { + width: "100%", + height: "52px", + padding: "12px 28px", + fontSize: "16px", + borderRadius: radius[160], + }, + }, + }, + defaultVariants: { + variant: "primary", + size: "medium", + }, +}); diff --git a/src/components/ui/Button/Button.tsx b/src/components/ui/Button/Button.tsx new file mode 100644 index 00000000..d8c3bd2d --- /dev/null +++ b/src/components/ui/Button/Button.tsx @@ -0,0 +1,27 @@ +import type { ComponentPropsWithoutRef } from "react"; + +import { button } from "./Button.css"; + +type ButtonVariant = "primary" | "dark" | "assistive" | "disabled"; +type ButtonSize = "small" | "medium" | "large" | "fullWidth"; + +type ButtonProps = { + children: React.ReactNode; + variant?: ButtonVariant; + size?: ButtonSize; +} & ComponentPropsWithoutRef<"button">; + +export const Button = ({ + children, + variant = "primary", + size = "medium", + ...props +}: ButtonProps) => { + const variantClass = button({ variant, size }); + + return ( + + ); +}; diff --git a/src/components/ui/Button/index.ts b/src/components/ui/Button/index.ts new file mode 100644 index 00000000..62669b70 --- /dev/null +++ b/src/components/ui/Button/index.ts @@ -0,0 +1,2 @@ +export { Button } from "./Button"; +export { button } from "./Button.css"; From f672dfa9d5d93b5dceaab3bd323f4157d71ea257 Mon Sep 17 00:00:00 2001 From: wkdtnqls0506 Date: Tue, 24 Jun 2025 15:33:04 +0900 Subject: [PATCH 07/14] =?UTF-8?q?feat(#49):=20Button=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=EC=9D=98=20Storybook=20=EC=8A=A4=ED=86=A0?= =?UTF-8?q?=EB=A6=AC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ui/Button/Button.stories.tsx | 70 +++++++++++++++++++++ 1 file changed, 70 insertions(+) create mode 100644 src/components/ui/Button/Button.stories.tsx diff --git a/src/components/ui/Button/Button.stories.tsx b/src/components/ui/Button/Button.stories.tsx new file mode 100644 index 00000000..c5035abd --- /dev/null +++ b/src/components/ui/Button/Button.stories.tsx @@ -0,0 +1,70 @@ +import type { Meta, StoryObj } from "@storybook/react"; + +import { Button } from "./Button"; + +const meta: Meta = { + title: "Components/Button", + component: Button, + tags: ["autodocs"], + args: { + children: "텍스트", + }, + argTypes: { + children: { + control: "text", + }, + variant: { + control: "select", + options: ["primary", "dark", "assistive", "disabled"], + }, + size: { + control: "select", + options: ["small", "medium", "large", "fullWidth"], + }, + onClick: { action: "clicked" }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Primary: Story = { + args: { + variant: "primary", + size: "medium", + }, +}; + +export const Dark: Story = { + args: { + variant: "dark", + size: "medium", + }, +}; + +export const Assistive: Story = { + args: { + variant: "assistive", + size: "medium", + }, +}; + +export const Disabled: Story = { + args: { + variant: "disabled", + size: "medium", + disabled: true, + }, +}; + +export const Sizes: Story = { + render: args => ( +
+
+ ), +}; From 04dfacd8c88222216f7313b94b396eb011fece3d Mon Sep 17 00:00:00 2001 From: wkdtnqls0506 Date: Tue, 24 Jun 2025 15:34:13 +0900 Subject: [PATCH 08/14] =?UTF-8?q?chore(#49):=20=EA=B8=80=EB=A1=9C=EB=B2=8C?= =?UTF-8?q?=20reset=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=A0=81=EC=9A=A9=20?= =?UTF-8?q?=EB=B0=8F=20=EA=B8=B0=EB=B3=B8=20=EB=A9=94=ED=83=80=EB=8D=B0?= =?UTF-8?q?=EC=9D=B4=ED=84=B0=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/layout.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 5bdd0b76..f0ac02ed 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,10 +1,12 @@ +import "@/styles/reset.css"; + import type { Metadata } from "next"; import { RegisterServiceWorkerClient } from "@/lib/pwa"; import { MSWProvider, QueryProvider } from "@/providers"; export const metadata: Metadata = { - title: "Timeat", + title: "Eat-da", description: "Generated by create next app", }; From 5dde93326f7d36c0bf957a1d6c0a6404bfbab18c Mon Sep 17 00:00:00 2001 From: wkdtnqls0506 Date: Tue, 24 Jun 2025 16:18:22 +0900 Subject: [PATCH 09/14] =?UTF-8?q?fix(#49):=20actions/checkout=EC=97=90=20f?= =?UTF-8?q?etch-depth:=200=20=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .github/workflows/chromatic.yml | 2 ++ 1 file changed, 2 insertions(+) diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml index f09a3091..cf6965d0 100644 --- a/.github/workflows/chromatic.yml +++ b/.github/workflows/chromatic.yml @@ -11,6 +11,8 @@ jobs: steps: - name: Checkout repository uses: actions/checkout@v4 + with: + fetch-depth: 0 - name: Setup pnpm uses: pnpm/action-setup@v4 From 86bb30544b0c46634a3c2b9d274ec5860fec6ca4 Mon Sep 17 00:00:00 2001 From: wkdtnqls0506 Date: Wed, 25 Jun 2025 17:19:20 +0900 Subject: [PATCH 10/14] =?UTF-8?q?refactor(#49):=20disabled=20=EC=83=81?= =?UTF-8?q?=ED=83=9C=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=A0=95=EC=9D=98?= =?UTF-8?q?=EB=A5=BC=20variant=EC=97=90=EC=84=9C=20base=EC=9D=98=20selecto?= =?UTF-8?q?rs=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 --- src/components/ui/Button/Button.css.ts | 16 +++++++++++----- src/components/ui/Button/Button.stories.tsx | 11 +++-------- src/components/ui/Button/Button.tsx | 2 +- 3 files changed, 15 insertions(+), 14 deletions(-) diff --git a/src/components/ui/Button/Button.css.ts b/src/components/ui/Button/Button.css.ts index ea89f099..3f716935 100644 --- a/src/components/ui/Button/Button.css.ts +++ b/src/components/ui/Button/Button.css.ts @@ -10,6 +10,17 @@ export const button = recipe({ fontWeight: 600, transition: "background-color 0.2s ease", whiteSpace: "nowrap", + + selectors: { + "&:disabled": { + backgroundColor: colors.coolNeutral[96], + color: colors.neutral[70], + cursor: "not-allowed", + }, + "&:disabled:hover": { + backgroundColor: colors.coolNeutral[96], + }, + }, }, variants: { variant: { @@ -28,11 +39,6 @@ export const button = recipe({ backgroundColor: colors.coolNeutral[99], ":hover": { backgroundColor: colors.coolNeutral[97] }, }, - disabled: { - backgroundColor: colors.coolNeutral[96], - color: colors.neutral[70], - cursor: "not-allowed", - }, }, size: { small: { diff --git a/src/components/ui/Button/Button.stories.tsx b/src/components/ui/Button/Button.stories.tsx index c5035abd..2a772e76 100644 --- a/src/components/ui/Button/Button.stories.tsx +++ b/src/components/ui/Button/Button.stories.tsx @@ -21,6 +21,9 @@ const meta: Meta = { control: "select", options: ["small", "medium", "large", "fullWidth"], }, + disabled: { + control: "boolean", + }, onClick: { action: "clicked" }, }, }; @@ -50,14 +53,6 @@ export const Assistive: Story = { }, }; -export const Disabled: Story = { - args: { - variant: "disabled", - size: "medium", - disabled: true, - }, -}; - export const Sizes: Story = { render: args => (
diff --git a/src/components/ui/Button/Button.tsx b/src/components/ui/Button/Button.tsx index d8c3bd2d..0e929c5b 100644 --- a/src/components/ui/Button/Button.tsx +++ b/src/components/ui/Button/Button.tsx @@ -2,7 +2,7 @@ import type { ComponentPropsWithoutRef } from "react"; import { button } from "./Button.css"; -type ButtonVariant = "primary" | "dark" | "assistive" | "disabled"; +type ButtonVariant = "primary" | "dark" | "assistive"; type ButtonSize = "small" | "medium" | "large" | "fullWidth"; type ButtonProps = { From ff8ba68a923c869dcf88aa46dba102482259431d Mon Sep 17 00:00:00 2001 From: wkdtnqls0506 Date: Wed, 25 Jun 2025 21:45:10 +0900 Subject: [PATCH 11/14] =?UTF-8?q?refactor(#49):=20=EB=B6=88=ED=95=84?= =?UTF-8?q?=EC=9A=94=ED=95=9C=20children=20=EB=AA=85=EC=8B=9C=20=EC=A0=9C?= =?UTF-8?q?=EA=B1=B0=20=EB=B0=8F=20ButtonProps=20export=20=EC=B2=98?= =?UTF-8?q?=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ui/Button/Button.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/ui/Button/Button.tsx b/src/components/ui/Button/Button.tsx index 0e929c5b..89a1750b 100644 --- a/src/components/ui/Button/Button.tsx +++ b/src/components/ui/Button/Button.tsx @@ -5,8 +5,7 @@ import { button } from "./Button.css"; type ButtonVariant = "primary" | "dark" | "assistive"; type ButtonSize = "small" | "medium" | "large" | "fullWidth"; -type ButtonProps = { - children: React.ReactNode; +export type ButtonProps = { variant?: ButtonVariant; size?: ButtonSize; } & ComponentPropsWithoutRef<"button">; From cce0a57b67242a1c674d8fb7f384fa8f925993dd Mon Sep 17 00:00:00 2001 From: wkdtnqls0506 Date: Wed, 25 Jun 2025 21:46:26 +0900 Subject: [PATCH 12/14] =?UTF-8?q?refactor(#49):=20=EC=99=B8=EB=B6=80?= =?UTF-8?q?=EC=97=90=EC=84=9C=20=EC=82=AC=EC=9A=A9=EB=90=98=EC=A7=80=20?= =?UTF-8?q?=EC=95=8A=EB=8A=94=20button=20=EC=8A=A4=ED=83=80=EC=9D=BC=20exp?= =?UTF-8?q?ort=20=EC=A0=95=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ui/Button/index.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/ui/Button/index.ts b/src/components/ui/Button/index.ts index 62669b70..0064dee8 100644 --- a/src/components/ui/Button/index.ts +++ b/src/components/ui/Button/index.ts @@ -1,2 +1 @@ export { Button } from "./Button"; -export { button } from "./Button.css"; From fdb5480288b8f4223b7c49994fbee801c3e75bed Mon Sep 17 00:00:00 2001 From: wkdtnqls0506 Date: Thu, 26 Jun 2025 00:15:29 +0900 Subject: [PATCH 13/14] =?UTF-8?q?refactor(#49):=20ComponentPropsWithoutRef?= =?UTF-8?q?=20=EB=B3=80=EA=B2=BD=20=EB=B0=8F=20className=20=ED=99=95?= =?UTF-8?q?=EC=9E=A5=EC=84=B1=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ui/Button/Button.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/components/ui/Button/Button.tsx b/src/components/ui/Button/Button.tsx index 89a1750b..be633a42 100644 --- a/src/components/ui/Button/Button.tsx +++ b/src/components/ui/Button/Button.tsx @@ -1,4 +1,4 @@ -import type { ComponentPropsWithoutRef } from "react"; +import type { ComponentProps } from "react"; import { button } from "./Button.css"; @@ -8,18 +8,20 @@ type ButtonSize = "small" | "medium" | "large" | "fullWidth"; export type ButtonProps = { variant?: ButtonVariant; size?: ButtonSize; -} & ComponentPropsWithoutRef<"button">; + className?: string; +} & ComponentProps<"button">; export const Button = ({ children, variant = "primary", size = "medium", + className, ...props }: ButtonProps) => { const variantClass = button({ variant, size }); return ( - ); From cfc75378efbceb757b7f05391d9b0c77f3fed549 Mon Sep 17 00:00:00 2001 From: wkdtnqls0506 Date: Thu, 26 Jun 2025 00:23:53 +0900 Subject: [PATCH 14/14] =?UTF-8?q?refactor(#49):=20=ED=94=BC=EA=B7=B8?= =?UTF-8?q?=EB=A7=88=20hug=20=EA=B8=B0=EC=A4=80=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ui/Button/Button.css.ts | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/components/ui/Button/Button.css.ts b/src/components/ui/Button/Button.css.ts index 3f716935..7e5ffdc5 100644 --- a/src/components/ui/Button/Button.css.ts +++ b/src/components/ui/Button/Button.css.ts @@ -49,15 +49,11 @@ export const button = recipe({ borderRadius: radius[80], }, medium: { - width: "80px", - height: "40px", padding: "9px 20px", fontSize: "15px", borderRadius: radius[100], }, large: { - width: "98px", - height: "48px", padding: "12px 28px", fontSize: "16px", borderRadius: radius[120],