Feat/storybook (#4)

* init: storybook 세팅

* feat: storybook chromatic 배포 자동화

* refactor: CDD방식 컴포넌트 수정

.github/workflows/chromatic.yml

@@ -0,0 +1,24 @@
+# Workflow name
+name: "Chromatic Deployment"
+
+# Event for the workflow
+on: push
+
+# List of jobs
+jobs:
+  chromatic:
+    name: "Run Chromatic"
+    runs-on: ubuntu-latest
+    # Job steps
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - run: npm install
+        #👇 Adds Chromatic as a step in the workflow
+      - uses: chromaui/action@latest
+        # Options required for Chromatic's GitHub Action
+        with:
+          #👇 Chromatic projectToken, see https://storybook.js.org/tutorials/intro-to-storybook/react/ko/deploy/ to obtain it
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          token: ${{ secrets.GITHUB_TOKEN }}

.storybook/preview.tsx

@@ -2,6 +2,7 @@ import type { Preview } from "@storybook/react";
 import "../src/app/globals.css";
 import { ThemeProvider } from "../src/app/_components/provider/theme-provider";
 import React from "react";
+import { INITIAL_VIEWPORTS } from "@storybook/addon-viewport";
 
 const withThemeProvider = (Story: React.ComponentType, context: any) => {
   return (
@@ -18,6 +19,10 @@ const withThemeProvider = (Story: React.ComponentType, context: any) => {
 
 const preview: Preview = {
   parameters: {
+    viewport: {
+      viewports: INITIAL_VIEWPORTS,
+      defaultViewport: "responsive",
+    },
     controls: {
       matchers: {
         color: /(background|color)$/i,

package.json

@@ -8,6 +8,8 @@
     "start": "next start",
     "lint": "next lint",
     "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "chromatic": "npx chromatic --project-token=chpt_c1457a99ca9b43f"
     "build-storybook": "storybook build"
   },
   "dependencies": {
@@ -53,6 +55,7 @@
     "@types/react-syntax-highlighter": "^15.5.11",
     "@types/rss": "^0.0.32",
     "autoprefixer": "^10.0.1",
+    "chromatic": "^11.20.2",
     "eslint": "^8",
     "eslint-config-next": "14.1.0",
     "eslint-plugin-storybook": "^0.11.1",

src/app/_components/layout/header/header.stories.tsx

@@ -0,0 +1,39 @@
+import { Meta, StoryObj } from "@storybook/react";
+import Header from "./header";
+
+const meta: Meta<typeof Header> = {
+  title: "Components/Layout/Header",
+  component: Header,
+  tags: ["autodocs"],
+  parameters: {
+    componentSubtitle: "Header",
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Header>;
+
+export const Desktop: Story = {
+  parameters: {
+    viewport: {
+      defaultViewport: "desktop",
+    },
+  },
+};
+
+export const Ipad11Pro: Story = {
+  parameters: {
+    viewport: {
+      defaultViewport: "ipad11p",
+    },
+  },
+};
+
+export const Mobile: Story = {
+  parameters: {
+    viewport: {
+      defaultViewport: "iphone6",
+    },
+  },
+};

src/app/_components/layout/header.tsx → src/app/_components/layout/header/header.tsx

@@ -1,21 +1,21 @@
 "use client";
 import React from "react";
-import { DarkModeToggle } from "./dark-mode-toggle";
+import { DarkModeToggle } from "../dark-mode-toggle";
 import Link from "next/link";
 import Image from "next/image";
 import { Button } from "@/components/ui/button";
-import RssFeedButton from "./rss-feed-button";
+import RssFeedButton from "../rss-feed-button/rss-feed-button";
 import Lottie from "react-lottie-player";
 // import euro from "../../../../public/assets/lottie/euro.json";
 import euro from "@public/assets/lottie/euro.json";
-import CustomLottie from "../lottie/CustomLottie";
+import CustomLottie from "../../lottie/CustomLottie";
 
-import { lottieData } from "../lottie/lottieData";
+import { lottieData } from "../../lottie/lottieData";
 
 const Header = () => {
   return (
-    <header className="sticky pt-[20px] top-[-20px] z-10 w-full bg-background transform animate-fade-down">
-      <div className="flex lg:w-[1150px] h-[55px] mx-auto justify-between p-2">
+    <header className="sticky pt-[20px] top-[-20px] z-10 w-full lg:w-[1150px] mx-auto justify-between p-2 bg-background transform animate-fade-down">
+      <div className="flex w-full h-[55px] mx-auto justify-between p-2">
         <Link href="/">
           <div className="relative w-[200px] h-[50px]">
             <Image

src/app/_components/layout/rss-feed-button/rss-feed-button.stories.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
+import RssFeedButton from "./rss-feed-button";
+
+const meta: Meta<typeof RssFeedButton> = {
+  title: "Components/Layout/RssFeedButton",
+  component: RssFeedButton,
+  argTypes: {
+    // 필요한 경우 props의 타입을 명시적으로 지정
+  },
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof RssFeedButton>;
+
+export const Default: Story = {
+  render: () => <RssFeedButton />,
+};

src/app/_components/layout/rss-feed-button.tsx → src/app/_components/layout/rss-feed-button/rss-feed-button.tsx

@@ -1,13 +1,13 @@
-import { Button } from "../../../components/ui/button";
-import RssFeedIcon from "../../../../public/assets/svg/rssFeedIcon.svg";
+import { Button } from "../../../../components/ui/button";
+import RssFeedIcon from "../../../../../public/assets/svg/rssFeedIcon.svg";
 
 const RssFeedButton = () => {
   return (
     <a href="/feed.xml" target="_blank" rel="noopener noreferrer">
       <Button
         variant="link"
         size="icon"
-        className="border-yellow border-2 mr-2"
+        className="border-yellow border-2 mr-2 bg-background"
       >
         <RssFeedIcon width={20} height={20} />
       </Button>

src/app/_components/post/post-body/post-body.stories.tsx

@@ -0,0 +1,93 @@
+import { Meta, StoryObj } from "@storybook/react";
+import PostBody from "./post-body";
+
+const meta: Meta<typeof PostBody> = {
+  title: "Components/Post/PostBody",
+  component: PostBody,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof PostBody>;
+
+export const H2: Story = {
+  args: {
+    content: `## 🤔2단계 제목
+    `,
+  },
+};
+
+export const H3: Story = {
+  args: {
+    content: `### 🤔3단계 제목`,
+  },
+};
+
+export const Ul: Story = {
+  args: {
+    content: `- 순서가 없는 목록
+- 순서가 없는 목록
+- 순서가 없는 목록`,
+  },
+};
+
+export const Ol: Story = {
+  args: {
+    content: `1. 순서가 있는 목록
+2. 순서가 있는 목록
+3. 순서가 있는 목록`,
+  },
+};
+
+export const Strong: Story = {
+  args: {
+    content: `**굵은 텍스트**`,
+  },
+};
+
+export const FullContent: Story = {
+  args: {
+    content: `
+> 인용문
+
+  **굵은 텍스트**
+
+  *기울임 텍스트*
+
+  ## 🤔2단계 제목
+  - 순서가 없는 목록
+  - 순서가 없는 목록
+  - 순서가 없는 목록
+  ### 🤔3단계 제목
+  1. 순서가 있는 목록
+  2. 순서가 있는 목록
+  3. 순서가 있는 목록
+
+
+
+  
+  ### 🤔코드
+  \`\`\`typescript
+  const example = "TypeScript";
+  interface Example {
+    name: string;
+  }
+  \`\`\`
+
+  ### 🤔테이블
+  | 헤더1 | 헤더2 | 헤더3 |
+  |-------|-------|-------|
+  | 데이터1 | 데이터2 | 데이터3 |
+  | 데이터1 | 데이터2 | 데이터3 |
+  | 데이터1 | 데이터2 | 데이터3 |
+  
+  ### 🤔링크
+  [출처: ](https://www.google.com) 구글
+  `,
+  },
+  parameters: {
+    viewport: {
+      defaultViewport: "ipad11p",
+    },
+  },
+};

src/app/_components/post/post-body.tsx → src/app/_components/post/post-body/post-body.tsx

@@ -5,7 +5,7 @@ import remarkGfm from "remark-gfm";
 import rehypeRaw from "rehype-raw";
 import rehypeSlug from "rehype-slug";
 import remarkBreaks from "remark-breaks";
-import * as styled from "./styled-markdown";
+import * as styled from "../styled-markdown";
 
 type MarkdownPostProps = {
   content: string;

src/app/_components/post/post-card/post-card.stories.tsx

@@ -0,0 +1,23 @@
+import PostCard from "./post-card";
+import { Meta, StoryObj } from "@storybook/react";
+export default {
+  title: "Components/Post/PostCard",
+  component: PostCard,
+  tags: ["autodocs"],
+  parameters: {
+    componentSubtitle: "PostCard",
+  },
+};
+
+type Story = StoryObj<typeof PostCard>;
+
+export const Default: Story = {
+  args: {
+    title: "Post Title",
+    slug: "post-slug",
+    coverImage: "https://via.placeholder.com/150",
+    date: "2024-01-01",
+    excerpt: "Post Excerpt",
+    category: "Category",
+  },
+};

src/app/_components/post/post-card.tsx → src/app/_components/post/post-card/post-card.tsx

@@ -19,7 +19,7 @@ const PostCard: React.FC<IPostCard> = ({
   category,
 }) => {
   return (
-    <div className="w-[296px] h-[350px] m-3 p-4 border-2 font-[KCC] box-border rounded-lg relative group transform  duration-500 animate-fade-up pcHover:hover:scale-105">
+    <div className="w-[296px] h-[350px] m-3 p-4 border-2 font-[KCC] box-border bg-background rounded-lg relative group transform  duration-500 animate-fade-up pcHover:hover:scale-105">
       <a href={`/posts/${slug}`}>
         <div className="relative rounded-lg w-[260px] h-[180px] ">
           <Image
@@ -31,8 +31,8 @@ const PostCard: React.FC<IPostCard> = ({
             className="object-cover rounded-lg"
           />
         </div>
-        <div className=" my-3">
-          <span className="text-sm font-bold mr-2 capitalize text-yellow">
+        <div className="my-3">
+          <span className="text-sm font-bold mr-2 capitalize text-yellow whitespace-normal break-normal">
             # {category}
           </span>
           <p className="text-[10px] font-normal text-gray-400">
@@ -42,7 +42,7 @@ const PostCard: React.FC<IPostCard> = ({
         <p className="font-display max-w-sm text-xl font-bold leading-tight">
           <span className="text-dd dark:text-gray-200 ">{title}</span>
         </p>
-        <div className="absolute opacity-0 translate-x-[-50%] translate-y-[-50%] box-border invisible group-hover:opacity-70 group-hover:visible  p-4 top-[50%] left-[50%] w-[296px] h-[350px] bg-black rounded-lg text-white">
+        <div className="absolute opacity-0 translate-x-[-50%] translate-y-[-50%] box-border invisible pcHover:group-hover:opacity-70 pcHover:group-hover:visible  p-4 top-[50%] left-[50%] w-[296px] h-[350px] bg-black rounded-lg text-white">
           <p>{excerpt}</p>
         </div>
       </a>