간단한 버그들 수정 및 스토리북 설정 추가 (#38)

* 🚚 chore(config): storybook에 pretandard와 theme bg 추가 * 💄 style(css): button lg px 수정 및 outlined에 border 색상 일치하도록 수정 * 🐛 fix(css): 글씨 및 border 색상 적용 안되는 문제 수정 * 💄 style(css): barChart 끝이 잘리는 문제 수정 * 💄 style(css): className이 undefined일 경우 빈 문자열이 들어가도록 수정 * 💄 style(css): pretandard에 맞게 label 위치 조절 * 💄 style(css): focus 시 outline과 여백을 두도록 설정 * 📝 docs(story): href 링크 수정 * 🚚 chore(config): story folder 순서 설정 * 🚚 chore(config): storybook에 a11y 추가 * 🚚 chore(config): storybook에 a11y 설정
bh2980 · May 27, 2024 · 74b9346 · 74b9346
1 parent 3679b4f
commit 74b9346
Show file tree

Hide file tree

Showing 14 changed files with 61 additions and 13 deletions.
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -10,6 +10,7 @@ const config: StorybookConfig = {
     "@chromatic-com/storybook",
     "@storybook/addon-interactions",
     "@storybook/addon-themes",
+    "@storybook/addon-a11y",
     "storybook-addon-pseudo-states",
   ],
   framework: {

diff --git a/.storybook/preview.ts b/.storybook/preview.ts
@@ -1,6 +1,7 @@
 import { withThemeByClassName } from "@storybook/addon-themes";
 import { Preview } from "@storybook/react";
 import "../index.css";
+import "./storybook.css";
 
 const preview: Preview = {
   parameters: {
@@ -10,6 +11,11 @@ const preview: Preview = {
         date: /Date$/i,
       },
     },
+    options: {
+      storySort: {
+        order: ["atoms", "Molecules", "charts"],
+      },
+    },
   },
   decorators: [
     withThemeByClassName({

diff --git a/.storybook/storybook.css b/.storybook/storybook.css
@@ -0,0 +1,20 @@
+@font-face {
+  font-family: "Pretandard";
+  src: url("./woff2/PretendardVariable.woff2") format("woff2");
+  font-weight: normal;
+  font-style: normal;
+}
+
+body {
+  font-family: "Pretandard", sans-serif; /* 기본 폰트 적용 */
+}
+
+html[class="light"] {
+  background-color: #e7ecf4;
+  color: #0a0e15;
+}
+
+html[class="dark"] {
+  background-color: #010a1e;
+  color: #f9f9fb;
+}
diff --git a/.storybook/woff2/PretendardVariable.woff2 b/.storybook/woff2/PretendardVariable.woff2
diff --git a/package.json b/package.json
@@ -57,6 +57,7 @@
   "devDependencies": {
     "@chromatic-com/storybook": "1.4.0",
     "@rollup/plugin-terser": "^0.4.4",
+    "@storybook/addon-a11y": "^8.1.3",
     "@storybook/addon-essentials": "^8.1.1",
     "@storybook/addon-interactions": "^8.1.1",
     "@storybook/addon-links": "^8.1.1",

diff --git a/src/components/atoms/Button/Button.styles.ts b/src/components/atoms/Button/Button.styles.ts
@@ -30,7 +30,7 @@ export const buttonVariants = tv({
     size: {
       sm: "h-[32rem] px-sm text-sm gap-xs",
       md: "h-[40rem] px-md text-md gap-sm",
-      lg: "h-[48rem] px-md text-lg gap-sm",
+      lg: "h-[48rem] px-lg text-lg gap-sm",
     },
     rounded: {
       rounded: "rounded-md",
@@ -63,7 +63,7 @@ export const buttonVariants = tv({
     {
       color: "primary",
       variant: "outlined",
-      className: "text-primary",
+      className: "text-primary border-primary",
     },
     {
       color: "primary",
@@ -79,7 +79,7 @@ export const buttonVariants = tv({
     {
       color: "secondary",
       variant: "outlined",
-      className: "text-secondary",
+      className: "text-secondary border-secondary",
     },
     {
       color: "secondary",
@@ -95,7 +95,7 @@ export const buttonVariants = tv({
     {
       color: "danger",
       variant: "outlined",
-      className: "text-error",
+      className: "text-error border-error",
     },
     {
       color: "danger",

diff --git a/src/components/atoms/TextField/TextField.styles.ts b/src/components/atoms/TextField/TextField.styles.ts
@@ -62,7 +62,7 @@ export const labelVariants = tv({
     "text-xs",
     "transition-['font-size']",
     "peer-placeholder-shown:text-md",
-    "peer-placeholder-shown:top-[11rem]",
+    "peer-placeholder-shown:top-sm",
   ],
   variants: {
     error: {

diff --git a/src/components/charts/BandAxis/BandAxis.styles.ts b/src/components/charts/BandAxis/BandAxis.styles.ts
@@ -3,8 +3,8 @@ import { tv } from "@utils/customTV";
 export const BandAxisVariants = tv({
   slots: {
     root: "stroke-surface-on",
-    axisLine: "fill-none",
-    labelText: "stroke-none",
+    axisLine: "fill-none stroke-surface-on",
+    labelText: "stroke-none fill-surface-on",
   },
   variants: {
     lineHide: {

diff --git a/src/components/charts/BarChart/BarChart.tsx b/src/components/charts/BarChart/BarChart.tsx
@@ -42,8 +42,8 @@ const BarChart = ({
       {data.map((data, i) => {
         const rectWidth = isVertical ? labelScale.bandwidth() : valueScale(data.value || nullBarHeight);
         const rectHeight = isVertical ? valueScale(data.value || nullBarHeight) : labelScale.bandwidth();
-        const rectX = isVertical ? labelScale(data.label.toString())! : orient === "LEFT" ? 0 : width - rectWidth;
-        const rectY = isVertical ? (orient === "UP" ? height - rectHeight : 0) : labelScale(data.label.toString())!;
+        const rectX = isVertical ? labelScale(data.label.toString())! : orient === "LEFT" ? 1 : width - rectWidth - 1;
+        const rectY = isVertical ? (orient === "UP" ? height - rectHeight - 1 : 1) : labelScale(data.label.toString())!;
 
         const labelAlign = {
           UP: [rectX + rectWidth / 2, rectY - 16],

diff --git a/src/components/molecules/ImageNewsItems/ImageNewsItem.stories.tsx b/src/components/molecules/ImageNewsItems/ImageNewsItem.stories.tsx
@@ -32,7 +32,7 @@ export const Default: Story = {
     <ImageNewsItem
       {...args}
       image={<ImageNewsItem.Image src={IMAGE_URL} alt={args.title} />}
-      href="https://www.naver.com"
+      href="/?path=/docs/molecules-news-newsitem"
       className="w-[240rem] h-[400rem]"
     />
   ),

diff --git a/src/components/molecules/ImageNewsItems/ImageNewsItem.tsx b/src/components/molecules/ImageNewsItems/ImageNewsItem.tsx
@@ -20,7 +20,7 @@ const ImageNewsItem = ({
     imageNewsItemVariants();
 
   return (
-    <a className={root({ className: interactionStateVariants({ className }) })} {...props}>
+    <a className={root({ className: interactionStateVariants({ focusOutlineOffset: true, className }) })} {...props}>
       {image}
       <div className={newsItemWrapper()}>
         <div className={newsInfoWrapper()}>

diff --git a/src/components/molecules/NewsItem/NewsItem.stories.tsx b/src/components/molecules/NewsItem/NewsItem.stories.tsx
@@ -25,5 +25,5 @@ const dummyData = {
 
 export const Default: Story = {
   args: dummyData,
-  render: (args) => <NewsItem href="https://www.naver.com" {...args} />,
+  render: (args) => <NewsItem href="/?path=/docs/molecules-news-imagenewsitem" {...args} />,
 };
diff --git a/src/components/molecules/StockPrice/StockPrice.tsx b/src/components/molecules/StockPrice/StockPrice.tsx
@@ -15,7 +15,7 @@ const StockPrice = ({
   const isNumber = (char: string) => Boolean(char.match(/[0-9]/));
 
   return (
-    <div className={`flex whitespace-pre ${className}`} {...props}>
+    <div className={`flex whitespace-pre ${className ? className : ""}`} {...props}>
       {Array.from(getFormatNumber({ number: price, decimalPoint, prefix, postfix })).map((str, i) => (
         <If condition={animated && isNumber(str)} key={`sp-${i}`}>
           <Then>

diff --git a/yarn.lock b/yarn.lock
@@ -1810,6 +1810,14 @@
   resolved "https://registry.yarnpkg.com/@sindresorhus/merge-streams/-/merge-streams-2.3.0.tgz#719df7fb41766bc143369eaa0dd56d8dc87c9958"
   integrity sha512-LtoMMhxAlorcGhmFYI+LhPgbPZCkgP6ra1YL604EeF6U98pLlQ3iWIGMdWSC+vWmPBWBNgmDBAhnAobLROJmwg==
 
+"@storybook/addon-a11y@^8.1.3":
+  version "8.1.3"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-a11y/-/addon-a11y-8.1.3.tgz#3bb2930b0bfaf72d3a1ca3fcc41c620490341a61"
+  integrity sha512-CJCfXD9cB5jyPlQFo9WZSTeT7l9UPrI0Bte8ytkMU8EquB7PI701OT+CHLsSSjb75tZzGSM7f1+TjUgI9QIhYw==
+  dependencies:
+    "@storybook/addon-highlight" "8.1.3"
+    axe-core "^4.2.0"
+
 "@storybook/[email protected]":
   version "8.1.1"
   resolved "https://registry.yarnpkg.com/@storybook/addon-actions/-/addon-actions-8.1.1.tgz#77d268fcf041aea768ae6c69610823be34761fd5"
@@ -1894,6 +1902,13 @@
   dependencies:
     "@storybook/global" "^5.0.0"
 
+"@storybook/[email protected]":
+  version "8.1.3"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-highlight/-/addon-highlight-8.1.3.tgz#aa05025d20d8ec9f82a21021e746ec1caaaff3f6"
+  integrity sha512-X+sTpav2GDOY5M9M+n4nFrPMAtnZYxjh4gULl1IAWDcDt2zgiu5wqB6tWtz+qmLla8jdwkdpb5GmuEYuayngDQ==
+  dependencies:
+    "@storybook/global" "^5.0.0"
+
 "@storybook/addon-interactions@^8.1.1":
   version "8.1.1"
   resolved "https://registry.yarnpkg.com/@storybook/addon-interactions/-/addon-interactions-8.1.1.tgz#9972edffbe39a4ebcb811119bea86f8ba965f577"
@@ -3752,6 +3767,11 @@ available-typed-arrays@^1.0.7:
   dependencies:
     possible-typed-array-names "^1.0.0"
 
+axe-core@^4.2.0:
+  version "4.9.1"
+  resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.9.1.tgz#fcd0f4496dad09e0c899b44f6c4bb7848da912ae"
+  integrity sha512-QbUdXJVTpvUTHU7871ppZkdOLBeGUKBQWHkHrvN2V9IQWGMt61zf3B45BtzjxEJzYuj0JBjBZP/hmYS/R9pmAw==
+
 babel-core@^7.0.0-bridge.0:
   version "7.0.0-bridge.0"
   resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-7.0.0-bridge.0.tgz#95a492ddd90f9b4e9a4a1da14eb335b87b634ece"