공유 컴포넌트 제작 완료했습니다. (#19)

* feat: Calendar 완성

shared폴더는 따로 패키지화 할 것이므로,
내부에 public을 만들고 svg파일 모아둠.

* feat: Calendar 컴포넌트 prop 수정 및 타입 정리 스토리에 상호작용 가능하게 처리

정리하려면, 컴포넌트 로직 분리하고, 스토리에 interaction test도 넣어야 하나, 시간상 미루겠습니다.

* feat: GoalInfo 컴포넌트 제작 완료

* feat: Calendar 화살표 기능 수정

현재 달 이전으로는 disable처리

* feat: TodoItem  제출 시의 표정 정리 제외 완성

* feat: 커스텀 체크박스 완성

* feat: GoalMenu 수정 및 완성

제어형으로 만들어서 외부에서 선택 처리하도록 함.

* feat: GoalMenu 스토리북 설명 추가

앞으로의 페이지 개발과 관련해서 목표 추가

* feat: TodoItem 비동기 고려 수정

컴포넌트 내부는 deferred가 아니라 낙관적 업뎃을 사용해야 하므로 useDeferredValue제거.
스토리북에선 onChecked를 비동기 동작 적용

* feat: ToolTip 완성

* feat: Tooltip 스토리북 사이드바 경로 변경

* feat: Moti svg 크기 변하도록 수정

외부에서 width, height주입으로 크기 변경가능하게 함.
이에 따른 ToolTip컴포넌트에서의 사용 수정

* feat: Banner 컴포넌트 완성

* feat: Banner 스토리북 사이드바 경로 수정

* feat: svg 크기 변경 가능하도록 수정 및 기존 TodoItem에서 크기 적용

FloatingButton컴폰너트에서도 사용되는 svg이라서.

* feat: FloatingButton 컴포넌트 완성

* feat: FloatingButton 스토리 사이드바 경로 수정

* Trigger CI/CD for redeploy

* Trigger CI/CD for storybook redeploy

ci과정 트리거 위해 무의미한 스토리북 수정

* feat: Toggle 컴포넌트 완성

* feat: Checkbox 컴포넌트 호버링 케이스 추가

* feat: 스토리북 배포 ci 관련 캐싱 삭제 및 cleanup 동작 추가

빌드 시 html생성이 될 때도 있고 안될 때도 있어서.
CI에서는 캐싱 문제일 수 있다기에 수정

* feat: ProgressBar 완성

* feat: ProgressBar 스토리 사이드바 경로 변경

* feat: TextField 컴포넌트 완성

* feat: TextField 스토리북 불필요 부분 삭제

* fix: shared components 빌드 에러 수정

* feat: PR 관련 안정성 수정

* feat: 공통 컴포넌트들 중 일부 RCC로 수정 및 lint관련 빌드 에러 수정

상호작용이나 hooks사용하는데, use client적는 것 깜빡했었습니다..

* feat: TodoItem 라벨 클릭 이벤트 수정

라벨 클릭 시 스크롤 초기화 문제로 인해.

* feat: TodoItem 스토리 '오늘날짜' 고정 값으로 변경

실제 오늘 날짜로 하면 크로마틱에서 계속 변화 감지해서 수정함.

* feat: TodoItem 스토리 날짜 고정

날짜를 바꿔 넣어도 컴포넌트 내 비교를 위한 new Date()값은 날마다 바뀔 것이므로, 기준 날짜를 고정시켰습니다

Author: Hys-Lee

.github/workflows/deploy-storybook.yml

@@ -29,8 +29,14 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: "20"
-          cache: "npm"
-          cache-dependency-path: "**/package-lock.json"
+          # cache: "npm"
+          # cache-dependency-path: "**/package-lock.json"
+
+      - name: Clean up node_modules and npm cache and storybook-static-shared
+        run: |
+          rm -rf node_modules
+          rm -rf storybook-static-shared
+          npm cache clean --force
 
       - name: Install dependencies
         run: npm install

.storybook/main.ts

@@ -34,5 +34,28 @@ const config: StorybookConfig = {
   typescript: {
     reactDocgen: "react-docgen-typescript",
   },
+  webpackFinal: async (config) => {
+    if (!config.module || !config.module.rules) {
+      return config;
+    }
+
+    config.module.rules = [
+      ...config.module.rules.map((rule) => {
+        if (!rule || rule === "...") {
+          return rule;
+        }
+        if (rule.test && /svg/.test(String(rule.test))) {
+          return { ...rule, exclude: /\.svg$/i };
+        }
+        return rule;
+      }),
+      {
+        test: /\.svg$/,
+        use: ["@svgr/webpack"],
+      },
+    ];
+
+    return config;
+  },
 };
 export default config;

app/layout.tsx

@@ -3,17 +3,7 @@ import type { Metadata } from "next";
 import localFont from "next/font/local";
 import "./globals.css";
 
-// const geistSans = Geist({
-//   variable: "--font-geist-sans",
-//   subsets: ["latin"],
-// });
-
-// const geistMono = Geist_Mono({
-//   variable: "--font-geist-mono",
-//   subsets: ["latin"],
-// });
-
-export const customFont = localFont({
+const customFont = localFont({
   src: "../public/fonts/SUIT-Variable.woff2",
   display: "swap",
   variable: "--font-suit-variable",

components/shared/Banner/Banner.stories.tsx

@@ -0,0 +1,64 @@
+// plop-templates/story.tsx.hbs
+import type { Meta, StoryObj } from "@storybook/react";
+import Banner from "./Banner"; // 실제 컴포넌트 파일 임포트
+
+const meta = {
+  title: "Shared/Banner", // Storybook 사이드바 경로 (프로젝트 규칙에 맞게 수정)
+  component: Banner,
+  parameters: {
+    // Canvas 레이아웃을 중앙으로 정렬하거나 패딩을 추가할 수 있습니다.
+    layout: "centered",
+    docs: {
+      description: {
+        component: "케이스가 2개 뿐인건지? 아니면 걍 아무 말이나 쓸 수 있는지.",
+      },
+    },
+  },
+  // Docs 탭 자동 생성을 위해 필요합니다.
+  tags: ["autodocs"],
+  // Controls Addon에서 Props를 어떻게 제어할지, 설명을 추가합니다.
+  // 모든 스토리에 적용될 기본 Props (선택 사항)
+  args: {
+    // 예시: label: 'Banner',
+  },
+} satisfies Meta<typeof Banner>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+// 가장 기본적인 Primary 스토리
+// argTypes를 Primary는 기본으로 가집니다.
+export const Primary: Story = {
+  argTypes: {
+    title: {
+      control: "text",
+      description: "적당히 길이 넘치면 hidden",
+    },
+    tag: {
+      control: "text",
+      description: "적당히 길이 넘치면 hidden",
+    },
+    // 예시: backgroundColor: { control: 'color', description: '컴포넌트 배경색' },
+  },
+  args: {
+    title: "아무말이나 쓸 수 있음?",
+    tag: "모티모티모티모",
+  },
+};
+
+// UI variatns들을 스토리로 생성합니다.
+// 추가적인 스토리 예시:
+export const Default: Story = {
+  args: {
+    title: "목표는 멀어도 나는 계속 가는 중",
+    tag: "모티모와 함께 한 지 1일차",
+  },
+};
+
+export const Group: Story = {
+  args: {
+    ...Default.args,
+    title: "[그룹]에서 피드백을 남겼어요!",
+  },
+};

components/shared/Banner/Banner.tsx

@@ -0,0 +1,27 @@
+import MotiSvg from "../public/Moti_shared.svg";
+interface BannerProps {
+  title: string;
+  tag: string;
+}
+const Banner = ({ title, tag }: BannerProps) => {
+  return (
+    <>
+      <div className="w-96 px-6 py-4 bg-indigo-500 inline-flex justify-start items-center gap-3">
+        <div className="min-w-0 flex-1 inline-flex flex-col justify-center items-start gap-2">
+          <p className="overflow-x-hidden self-stretch justify-center text-Color-white text-base font-bold font-['SUIT_Variable'] leading-tight">
+            {title}
+          </p>
+          <div className="min-w-0  p-2 bg-white/10 rounded-[999px] inline-flex justify-center items-center gap-2">
+            <p className="max-w-60 overflow-hidden justify-center text-white text-xs font-medium font-['SUIT_Variable'] leading-none">
+              {tag}
+            </p>
+          </div>
+        </div>
+        <div className="w-14 h-10">
+          <MotiSvg width={56} height={40} />
+        </div>
+      </div>
+    </>
+  );
+};
+export default Banner;

components/shared/Calendar/Calendar.stories.tsx

@@ -0,0 +1,57 @@
+import { useState } from "react";
+import Calendar from "./Calendar";
+import { Meta, StoryObj } from "@storybook/react";
+
+// meta는 공통 옵션.
+const meta = {
+  title: "Shared/Calendar",
+  component: Calendar,
+  args: {},
+  decorators: [
+    (Story) => (
+      <div onClick={(e) => e.preventDefault()}>
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component: `컴포넌트 설명입니다. 일단 개발 요구사항 여기에 기록함.
+         크기는 변동.
+         onChange와 selected를 사용해서 상호작용하는 테스트를 추가해야 함.
+        `,
+      },
+    },
+  },
+} satisfies Meta<typeof Calendar>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const Wrapper = () => {
+  const [date, setDate] = useState(new Date());
+  return <Calendar onChange={(newDate) => setDate(newDate)} selected={date} />;
+};
+
+export const Primary: Story = {
+  render: Wrapper,
+  argTypes: {
+    selected: {
+      description: `선택 값 주입. 제어 방식의 사용법과 같음.
+        관련 상호작용 테스트를 추가해야 함.
+        `,
+    },
+    onChange: {
+      description: `유저의 상호작용으로 인한 클릭한 date확인 가능.
+      관련 상호작용 테스트를 추가해야 함.
+      `,
+    },
+  },
+  args: {
+    onChange: (date) => {
+      console.log("date: ", date);
+    },
+    selected: new Date(),
+  },
+};