Merge pull request #27 from Leets-Official/24-feat/Header-컴포넌트-수정-및-리팩토링

[Feat] Header 컴포넌트 수정 및 리팩토링

Author: KyeongJooni

.github/workflows/storybook.yml

@@ -0,0 +1,51 @@
+name: Deploy Storybook to GitHub Pages
+
+on:
+  push:
+    branches:
+      - main
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: 'pages'
+  cancel-in-progress: true
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '22'
+
+      - name: Enable Corepack
+        run: corepack enable
+
+      - name: Install dependencies
+        run: yarn install --immutable
+
+      - name: Build Storybook
+        run: yarn build-storybook
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: storybook-static
+
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.gitignore

@@ -41,4 +41,4 @@ storybook-static
 !.yarn/releases
 
 # Vercel
-.vercel
+.vercel

eslint.config.js

@@ -12,7 +12,15 @@ import storybook from 'eslint-plugin-storybook';
 
 export default [
   {
-    ignores: ['dist', 'node_modules', '.yarn', '.pnp.*', '*.config.js', 'storybook-static'],
+    ignores: [
+      'dist',
+      'build',
+      'node_modules',
+      '.yarn',
+      '.pnp.*',
+      '*.config.js',
+      'storybook-static',
+    ],
   },
   js.configs.recommended,
   ...tseslint.configs.recommended,

src/pages/playground.tsx

@@ -10,25 +10,26 @@ import { TextField } from '@shared/ui/TextField/TextField';
 import { useState } from 'react';
 
 export default function Playground() {
+  const [radioValue, setRadioValue] = useState('option1');
   const [isModalOpen, setIsModalOpen] = useState(false);
 
   return (
     <div className="flex flex-col gap-6 p-8">
       <h1 className="typo-title-2">UI Playground</h1>
-
       {/* Header */}
       <section className="flex flex-col gap-4">
         <h2 className="typo-body-1">Header</h2>
+        <p className="typo-caption-2 text-gray-600">비로그인 상태</p>
         <Header />
+        <p className="typo-caption-2 mt-4 text-gray-600">로그인 상태</p>
+        <Header isLoggedIn user={{ profileImage: '/profile-sample.jpg', nickname: '홍길동' }} />
       </section>
-
       {/* Button */}
       <section className="flex flex-col gap-4">
         <h2 className="typo-body-1">Button</h2>
         <p className="typo-caption-2 text-gray-600">
           Hover와 Focus 상태를 확인하려면 마우스를 올리거나 Tab 키로 포커스를 이동하세요.
         </p>
-
         <div className="flex flex-col gap-4">
           <div className="flex items-center gap-4">
             <span className="typo-caption-1 w-24">Fill</span>
@@ -37,7 +38,6 @@ export default function Playground() {
               Disabled
             </Button>
           </div>
-
           <div className="flex items-center gap-4">
             <span className="typo-caption-1 w-24">Outline</span>
             <Button variant="outline">Default</Button>
@@ -47,7 +47,6 @@ export default function Playground() {
           </div>
         </div>
       </section>
-
       {/* Checkbox */}
       <section className="flex flex-col gap-4">
         <h2 className="typo-body-1">Checkbox</h2>
@@ -58,59 +57,66 @@ export default function Playground() {
           <Checkbox checked disabled label="Checked + Disabled" />
         </div>
       </section>
-
       {/* Radio Button */}
       <section className="flex flex-col gap-4">
         <h2 className="typo-body-1">Radio Button</h2>
         <div className="flex flex-col gap-2">
-          <RadioButton label="Default" />
-          <RadioButton checked label="Selected" />
-          <RadioButton disabled label="Disabled" />
-          <RadioButton checked disabled label="Selected + Disabled" />
+          <RadioButton
+            name="demo"
+            checked={radioValue === 'option1'}
+            onChange={() => setRadioValue('option1')}
+            label="Option 1"
+          />
+          <RadioButton
+            name="demo"
+            checked={radioValue === 'option2'}
+            onChange={() => setRadioValue('option2')}
+            label="Option 2"
+          />
+          <RadioButton
+            name="demo"
+            checked={radioValue === 'option3'}
+            onChange={() => setRadioValue('option3')}
+            label="Option 3"
+          />
+          <RadioButton name="demo-disabled" disabled label="Disabled" />
         </div>
       </section>
-
       {/* Profile */}
       <section className="flex flex-col gap-4">
         <h2 className="typo-body-1">Profile</h2>
         <p className="typo-caption-2 text-gray-600">
           size variant 및 placeholder 상태를 확인합니다.
         </p>
-
         <div className="flex items-center gap-10">
           <div className="flex flex-col items-center gap-2">
-            <Profile size="sm" imageUrl="/profile-sample.jpg" />
+            <Profile size="sm" image="/profile-sample.jpg" />
             <span className="typo-caption-2">Small Image</span>
           </div>
-
           <div className="flex flex-col items-center gap-2">
-            <Profile size="lg" imageUrl="/profile-sample.jpg" />
+            <Profile size="lg" image="/profile-sample.jpg" />
             <span className="typo-caption-2">Large Image</span>
           </div>
-
           <div className="flex flex-col items-center gap-2">
             <Profile size="sm" />
             <span className="typo-caption-2 text-gray-500">Small Placeholder</span>
           </div>
-
           <div className="flex flex-col items-center gap-2">
             <Profile size="lg" />
             <span className="typo-caption-2 text-gray-500">Large Placeholder</span>
           </div>
         </div>
       </section>
-
       {/* Card */}
       <section className="flex flex-col gap-4">
         <h2 className="typo-body-1">Card</h2>
         <Card
-          imageSrc="/iphone11.png"
-          titleText="Title 인데 제목이 정말 길 경우에는 두줄 까지만 보이고, 뒤엔 점 처리"
-          priceText="0,000원"
-          dateText="1일 전"
+          image="/iphone11.png"
+          title="Title 인데 제목이 정말 길 경우에는 두줄 까지만 보이고, 뒤엔 점 처리"
+          price="0,000원"
+          date="1일 전"
         />
       </section>
-
       {/* BannerCard */}
       <section className="flex flex-col gap-4">
         <h2 className="typo-body-1">Banner Card</h2>
@@ -127,13 +133,10 @@ export default function Playground() {
           buttonText="바로가기"
         />
       </section>
-
       {/* Modal */}
       <section className="flex flex-col gap-4">
         <h2 className="typo-body-1">Modal</h2>
-
         <Button onClick={() => setIsModalOpen(true)}>Open Modal</Button>
-
         {isModalOpen && (
           <Modal
             title="해당 게시물을 삭제하시겠어요?"
@@ -145,16 +148,13 @@ export default function Playground() {
           />
         )}
       </section>
-
       {/* TextField 예시 */}
       <section className="flex flex-col gap-4">
         <h2 className="typo-body-1">TextField</h2>
-
         <div className="flex flex-wrap gap-10">
           {/* Char Field */}
           <div className="flex flex-col gap-4">
             <h3 className="typo-caption-1 font-semibold">Char Field</h3>
-
             <div className="w-127.25">
               <TextField
                 type="char"
@@ -164,7 +164,6 @@ export default function Playground() {
                 helperText="Default"
               />
             </div>
-
             <div className="w-127.25">
               <TextField
                 type="char"
@@ -175,7 +174,6 @@ export default function Playground() {
                 helperText="Error"
               />
             </div>
-
             <div className="w-127.25">
               <TextField
                 type="char"
@@ -187,11 +185,9 @@ export default function Playground() {
               />
             </div>
           </div>
-
           {/* TextArea Field */}
           <div className="flex flex-col gap-4">
             <h3 className="typo-caption-1 font-semibold">TextArea Field</h3>
-
             <div className="w-127.25">
               <TextField
                 type="textarea"
@@ -201,7 +197,6 @@ export default function Playground() {
                 helperText="Default"
               />
             </div>
-
             <div className="w-127.25">
               <TextField
                 type="textarea"
@@ -212,7 +207,6 @@ export default function Playground() {
                 helperText="Error"
               />
             </div>
-
             <div className="w-127.25">
               <TextField
                 type="textarea"
@@ -224,11 +218,9 @@ export default function Playground() {
               />
             </div>
           </div>
-
           {/* Price Field */}
           <div className="flex flex-col gap-4">
             <h3 className="typo-caption-1 font-semibold">Price Field</h3>
-
             <div className="w-127.25">
               <TextField
                 type="price"
@@ -238,7 +230,6 @@ export default function Playground() {
                 helperText="Default"
               />
             </div>
-
             <div className="w-127.25">
               <TextField
                 type="price"
@@ -249,7 +240,6 @@ export default function Playground() {
                 helperText="Error"
               />
             </div>
-
             <div className="w-127.25">
               <TextField
                 type="price"

src/shared/assets/icons/common/caret-down-md.svg

@@ -1,4 +1,5 @@
+import CaretDownMdIcon from './common/caret-down-md.svg?react';
 import CheckIcon from './common/check.svg?react';
 import DoneIcon from './common/done.svg?react';
 
-export { CheckIcon, DoneIcon };
+export { CaretDownMdIcon, CheckIcon, DoneIcon };

src/shared/assets/icons/index.ts

@@ -80,7 +80,7 @@ export const AllStates: Story = {
         </div>
       </div>
       <p className="typo-caption-2 max-w-md text-gray-600">
-        Hover와 Focus 상태를 확인하려면 마우스를 올리거나 Tab 키로 포커스를 이동하세요.
+        Hover, Focus 상태 확인: 마우스 오버 또는 Tab 키 이동
       </p>
     </div>
   ),

src/shared/assets/logo/logo4.svg

@@ -59,6 +59,7 @@ export const buttonVariants = tv({
     size: {
       default: ['w-[163px]'],
       auto: ['w-auto'],
+      full: ['w-full'],
     },
   },