merge: merge develop

.github/workflows/chromatic.yml

@@ -1,17 +1,25 @@
-name: Chromatic Deployment
+name: 'Chromatic Deployment'
+
+on: push
 
-on:
-  push:
-    branches:
-      - develop
 jobs:
   test:
     name: Storybook Chromatic Deployment
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v1
-      - run: pnpm chromatic
-      - uses: chromaui/action@v1
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 21
+      - name: Install dependencies
+        run: pnpm install
+      - name: Run Chromatic
+        uses: chromaui/action@v1
         with:
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
           token: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -23,4 +23,5 @@ dist-ssr
 *.sln
 *.sw?
 .env
-*storybook.log
+*storybook.log
+storybook-static/*

src/common/component/Header/Header.style.ts

@@ -2,11 +2,10 @@ import { css } from '@emotion/react';
 
 export const headerStyle = css({
   display: 'flex',
-
-  height: '8.8rem',
-
-  padding: '0 16rem',
-
   alignItems: 'center',
   justifyContent: 'space-between',
+
+  width: '100%',
+
+  padding: '2.4rem 16rem',
 });

src/common/component/Header/Header.tsx

@@ -1,4 +1,4 @@
-import { SmallLogo } from '@/common/asset/svg';
+import SmallLogo from '@/common/asset/svg/logo_tiki_md.svg?react';
 
 import Button from '../Button/Button';
 import { headerStyle } from './Header.style';
@@ -18,16 +18,18 @@ export const DefaultHeader = () => {
 export const UserHeader = ({ isLogin = false }: HeaderProps) => {
   return (
     <header css={headerStyle}>
-      <SmallLogo />
-      {isLogin ? (
-        <Button variant="secondary" size="small">
-          로그아웃
-        </Button>
-      ) : (
-        <Button variant="secondary" size="small">
-          로그인
-        </Button>
-      )}
+      <SmallLogo width={100} height={40} />
+      <div>
+        {isLogin ? (
+          <Button variant="secondary" size="small">
+            로그아웃
+          </Button>
+        ) : (
+          <Button variant="secondary" size="small">
+            로그인
+          </Button>
+        )}
+      </div>
     </header>
   );
 };

src/story/common/Header.stories.tsx

@@ -8,6 +8,13 @@ const meta = {
   parameters: {
     layout: 'centered',
   },
+  decorators: [
+    (Story) => (
+      <div css={{ width: '100vw' }}>
+        <Story />
+      </div>
+    ),
+  ],
   tags: ['autodocs'],
 } satisfies Meta<typeof UserHeader>;