Merge pull request #21 from Duri-Salon/feat/storybook-ci/cd(DURI-315)

[feat] storybook ci/cd

.storybook/main.js → .storybook/main.ts

@@ -27,5 +27,8 @@ const config = {
     name: '@storybook/react-vite',
     options: {},
   },
+  previewHead: (head) => `
+    ${head}
+  `,
 };
 export default config;

.storybook/manager.ts

@@ -1,24 +1,7 @@
-import { addons } from '@storybook/manager-api';
+import { addons } from '@storybook/addons';
+
+import theme from './theme';
 
 addons.setConfig({
-  navSize: 300,
-  bottomPanelHeight: 300,
-  rightPanelWidth: 300,
-  panelPosition: 'bottom',
-  enableShortcuts: true,
-  showToolbar: true,
-  theme: undefined,
-  selectedPanel: undefined,
-  initialActive: 'sidebar',
-  sidebar: {
-    showRoots: false,
-    collapsedRoots: ['other'],
-  },
-  toolbar: {
-    title: { hidden: false },
-    zoom: { hidden: false },
-    eject: { hidden: false },
-    copy: { hidden: false },
-    fullscreen: { hidden: false },
-  },
+  theme,
 });

.storybook/preview-head.html

@@ -1,6 +1,12 @@
 <link
-      rel="stylesheet"
-      as="style"
-      crossorigin="anonymous"
-      href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard-dynamic-subset.css"
-    />
+  rel="stylesheet"
+  as="style"
+  crossorigin="anonymous"
+  href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard-dynamic-subset.css"
+/>
+
+<link
+  rel="shortcut icon"
+  type="image/svg+xml"
+  href="../packages/ui/src/assets/svgs/Doori.svg"
+/>

.storybook/theme.ts

@@ -0,0 +1,37 @@
+import { create } from '@storybook/theming/create';
+import logo from '../packages/ui/src/assets/svgs/Doori.svg';
+
+export default create({
+  base: 'light',
+  colorPrimary: '#BBD029',
+  colorSecondary: '#BBD029',
+
+  // UI
+  appBg: 'white',
+  appContentBg: 'white',
+  appBorderColor: '#CAC9CF',
+  appBorderRadius: 4,
+
+  // Typography
+  fontBase: 'Pretendard, sans-serif',
+  fontCode: 'monospace',
+
+  // Text colors
+  textColor: 'black',
+  textInverseColor: 'white',
+
+  // Toolbar default and active colors
+  barTextColor: '#343434',
+  barSelectedColor: '#BBD029',
+  barBg: 'white',
+
+  // Form colors
+  inputBg: 'white',
+  inputBorder: '#F4F4F6',
+  inputTextColor: 'black',
+  inputBorderRadius: 4,
+
+  brandTitle: '두리묭실',
+  brandUrl: "here's the brandurl",
+  brandImage: logo,
+});

apps/salon/src/pages/Home.tsx

@@ -1,4 +1,4 @@
-import { MobileLayout, Navbar } from "@duri-fe/ui";
+import { DuriNavbar, MobileLayout } from '@duri-fe/ui';
 
 const Home = () => {
   return (
@@ -7,10 +7,10 @@ const Home = () => {
         <h1>Home</h1>
         <h1>Home</h1>
         <h1>Home</h1>
-        <Navbar />
+        <DuriNavbar />
       </MobileLayout>
     </>
-  )
+  );
 };
 
 export default Home;

package.json

@@ -14,7 +14,7 @@
     "postinstall": "husky",
     "prepack": "pinst --disable",
     "postpack": "pinst --enable",
-    "chromatic": "npx chromatic --project-token=chpt_8d5085145dd83d6"
+    "chromatic": "npx chromatic"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "3.2.2",
@@ -63,6 +63,7 @@
     "@emotion/react": "^11.13.5",
     "@emotion/styled": "^11.13.5",
     "@storybook/addon-docs": "^8.4.5",
+    "@storybook/addons": "7.6.17",
     "@storybook/manager-api": "^8.4.5",
     "@tanstack/react-query": "^5.61.0",
     "@tanstack/react-query-devtools": "^5.61.0",

packages/ui/src/components/Navbar/Navbar.tsx → packages/ui/src/components/Navbar/DuriNavbar.tsx

@@ -14,7 +14,7 @@ import { Flex } from '../FlexBox';
 
 import NavItem from './NavItem';
 
-export const Navbar = () => {
+export const DuriNavbar = () => {
   const navigate = useNavigate();
   const location = useLocation();
   const pathname = location.pathname; // 현재 경로
@@ -25,7 +25,7 @@ export const Navbar = () => {
 
   return (
     <Wrapper>
-      <TabContainer>
+      <TabContainer backgroundColor={theme.palette.White} height={65}>
         <Flex direction="row" justify="center">
           <NavItem
             isActive={pathname === '/'}
@@ -79,18 +79,12 @@ const Wrapper = styled(Flex)`
   height: fit-content;
 `;
 
-const TabContainer = styled.div`
-  display: flex;
+const TabContainer = styled(Flex)`
   max-width: 480px;
   min-width: 360px;
   position: fixed;
-  width: 100%;
-  height: 65px;
-  display: fixed;
   bottom: 0;
   z-index: 20;
   border-top: 0.5px solid
     hsla(224.99999999999997, 5.084745762711864%, 46.27450980392157%, 0.16);
-  background-color: ${theme.palette.White};
-  justify-content: center;
 `;

packages/ui/src/components/Navbar/index.tsx

@@ -1 +1 @@
-export { Navbar } from './Navbar';
+export { DuriNavbar } from './DuriNavbar';

packages/ui/src/components/index.tsx

@@ -4,4 +4,4 @@ export * from './Typo';
 export * from './TextField';
 export * from './MobileLayout';
 export * from './Navbar';
-export * from './StatusBar';
+export * from './StatusBar';

packages/ui/src/stories/components/Button.stories.tsx

@@ -3,14 +3,96 @@ import type { Meta, StoryFn } from '@storybook/react';
 
 import { Button, Flex } from '../../components';
 
-// type Story = StoryObj<typeof Button>;
-
 /**
  * `Button` 컴포넌트의 스토리북 정의입니다.
  */
 const meta: Meta<typeof Button> = {
   title: 'components/Button',
   component: Button,
+  tags: ['autodocs'],
+  argTypes: {
+    width: {
+      type: 'string',
+      description: '버튼의 너비',
+      defaultValue: '100%',
+      control: {
+        type: 'text',
+      },
+    },
+    height: {
+      type: 'string',
+      description: '버튼의 높이',
+      defaultValue: '100%',
+      control: {
+        type: 'text',
+      },
+    },
+    bg: {
+      type: 'string',
+      description: '배경색',
+      defaultValue: '#f0f0f0',
+      control: {
+        type: 'color',
+      },
+    },
+    hoverBg: {
+      type: 'string',
+      description: '호버 상태의 배경색',
+      defaultValue: '#ffffff',
+      control: {
+        type: 'color',
+      },
+    },
+    fontColor: {
+      type: 'string',
+      description: '폰트 색상',
+      defaultValue: '#000000',
+      control: {
+        type: 'color',
+      },
+    },
+    typo: {
+      type: 'string',
+      description: '타이포그래피 스타일',
+      defaultValue: 'Label1',
+      control: {
+        type: 'select',
+        options: ['Heading1', 'Heading2', 'Body1', 'Body2', 'Label1', 'Label2'],
+      },
+    },
+    hoverFontColor: {
+      type: 'string',
+      description: '호버 상태의 폰트 색상',
+      defaultValue: '#ffffff',
+      control: {
+        type: 'color',
+      },
+    },
+    borderRadius: {
+      type: 'string',
+      description: '테두리의 둥근 정도',
+      defaultValue: '99px',
+      control: {
+        type: 'text',
+      },
+    },
+    border: {
+      type: 'string',
+      description: '테두리 스타일',
+      defaultValue: 'none',
+      control: {
+        type: 'text',
+      },
+    },
+    disabled: {
+      type: 'boolean',
+      description: '비활성화 여부',
+      defaultValue: false,
+      control: {
+        type: 'boolean',
+      },
+    },
+  },
 };
 
 export default meta;
@@ -24,7 +106,7 @@ const Template: StoryFn<typeof Button> = (args) => (
 );
 
 /**
- * `DefaultButton`는 'Button' 컴포넌트의 기본 스토리입니다.
+ * `DefaultButton`는 'Button' 컴포넌트의 기본 버전입니다.
  */
 export const DefaultButton = Template;
 DefaultButton.args = {};
@@ -37,6 +119,9 @@ const BlackTemplate: StoryFn<typeof Button> = (args) => (
   </Flex>
 );
 
+/**
+ * `BlackButton`는 'Button' 컴포넌트의 검정 배경 버전입니다.
+ */
 export const BlackButton = BlackTemplate;
 BlackButton.args = {
   bg: theme.palette.Black,
@@ -51,6 +136,9 @@ const GrayTemplate: StoryFn<typeof Button> = (args) => (
   </Flex>
 );
 
+/**
+ * `GrayButton`는 'Button' 컴포넌트의 회색 배경 버전입니다.
+ */
 export const GrayButton = GrayTemplate;
 GrayButton.args = {
   bg: theme.palette.Gray50,
@@ -81,5 +169,8 @@ const ShortTemplate: StoryFn<typeof Button> = (args) => (
   </Flex>
 );
 
+/**
+ * `ShortButton`는 'Button' 컴포넌트의 짧고 둥근 버전입니다.
+ */
 export const ShortButton = ShortTemplate;
 ShortButton.args = {};

packages/ui/src/stories/components/Navbar.stories.tsx

@@ -2,7 +2,7 @@ import { BrowserRouter } from 'react-router-dom';
 
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { Navbar } from '../../components/Navbar';
+import { DuriNavbar } from '../../components';
 
 type Story = StoryObj<typeof Navbar>;
 
@@ -11,18 +11,19 @@ type Story = StoryObj<typeof Navbar>;
  */
 const meta: Meta<typeof Navbar> = {
   title: 'components/Navbar',
-  component: Navbar,
+  component: DuriNavbar,
+  tags: ['autodocs'],
 };
 
 export default meta;
 
 /**
- * `DefaultNavbar`는 `Navbar` 컴포넌트의 기본 스토리입니다.
+ * `DuriNavbar`는 `Duri`서비스의 `Navbar`스토리입니다.
  */
-export const DefaultNavbar: Story = {
+export const DefaultDuriNavbar: Story = {
   render: () => (
     <BrowserRouter>
-      <Navbar />
+      <DuriNavbar />
     </BrowserRouter>
   ),
 };