Merge pull request #250 from Feed-B/dev

[배포] 배포

Author: thgus5335

.eslintrc.json

@@ -5,15 +5,19 @@
     "node": true
   },
   "parser": "@typescript-eslint/parser",
-  "extends": ["eslint:recommended", "next/core-web-vitals", "plugin:@typescript-eslint/recommended"],
-
+  "extends": [
+    "eslint:recommended",
+    "next/core-web-vitals",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:storybook/recommended"
+  ],
   "parserOptions": {
     "ecmaVersion": "latest",
     "sourceType": "module",
     "requireConfigFile": false
   },
   "plugins": ["react", "@typescript-eslint", "import"],
-
+  "ignorePatterns": ["!**/.storybook/*"],
   "rules": {
     "import/order": [
       "error",
@@ -31,6 +35,7 @@
     "react-hooks/rules-of-hooks": "error",
     "react-hooks/exhaustive-deps": "warn",
     "array-callback-return": 0,
-    "react/self-closing-comp": "warn"
+    "react/self-closing-comp": "warn",
+    "react/no-unescaped-entities": "off"
   }
 }

.gitignore

@@ -36,4 +36,9 @@ yarn-error.log*
 next-env.d.ts
 
 .env
-.eslintcache
+.eslintcache
+*storybook.log
+
+test.json
+test.json.html
+

.storybook/main.ts

@@ -0,0 +1,19 @@
+import type { StorybookConfig } from "@storybook/nextjs";
+
+const config: StorybookConfig = {
+  stories: ["../stories/**/*.mdx", "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx|mdx)"],
+  addons: [
+    "@storybook/addon-onboarding",
+    "@storybook/addon-links",
+    "@storybook/addon-docs",
+    "@storybook/addon-essentials",
+    "@chromatic-com/storybook",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/nextjs",
+    options: {},
+  },
+  staticDirs: ["../public"],
+};
+export default config;

.storybook/preview.tsx

@@ -0,0 +1,31 @@
+import React, { useEffect } from "react";
+import type { Preview } from "@storybook/react";
+import "../app/_styles/globals.css";
+
+// 전역 decorator 추가
+const WithModalRoot = (Story: React.ComponentType) => {
+  useEffect(() => {
+    // 'modal-root'가 존재하지 않으면 생성
+    if (!document.getElementById("modal")) {
+      const modalRoot = document.createElement("div");
+      modalRoot.setAttribute("id", "modal");
+      document.body.appendChild(modalRoot);
+    }
+  }, []);
+
+  return <Story />;
+};
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+  decorators: [WithModalRoot], // Decorator를 추가하여 모든 스토리에 적용
+};
+
+export default preview;

app/_apis/httpClient.ts

@@ -8,6 +8,7 @@ function httpClient() {
       next: {
         tags: [...tags],
       },
+      cache: "no-store",
     });
     const result: R = await response.json();
     return result;

app/_components/Button/Button.tsx

@@ -3,7 +3,7 @@
 import { ButtonHTMLAttributes, PropsWithChildren } from "react";
 import { twMerge } from "tailwind-merge";
 
-interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, PropsWithChildren {
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, PropsWithChildren {
   buttonSize: ButtonSize;
   bgColor: BgColor;
 }

app/_components/Input/Input.tsx

@@ -2,7 +2,7 @@ import { ChangeEventHandler, InputHTMLAttributes } from "react";
 import { twMerge } from "tailwind-merge";
 import { UseFormRegisterReturn, FieldError } from "react-hook-form";
 
-interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
   title?: string;
   inputSize: InputSize;
   register?: UseFormRegisterReturn;

app/_components/Modal/Modal.tsx

@@ -22,7 +22,7 @@ function Modal({ children, openModal, handleModalClose, className }: ModalProps)
 
   return (
     <ModalPortal>
-      <div className="fixed left-0 top-0 z-50 h-full w-full bg-black-overlay" onClick={handleModalClose}>
+      <div role="dialog" className="fixed left-0 top-0 z-50 h-full w-full bg-black-overlay" onClick={handleModalClose}>
         <div onClick={event => event.stopPropagation()} className={`${modalClass} ${openModal ? open : ""}`}>
           <Image
             src={closeIcon}

app/main/page.tsx

@@ -2,12 +2,10 @@ import React from "react";
 import { cookies } from "next/headers";
 import { dehydrate, HydrationBoundary } from "@tanstack/react-query";
 import getQueryClient from "../_utils/getQueryClient";
-import { revalidateTagAction } from "../_utils/revalidationAction";
 import { usePrefetchProjectList } from "../_hooks/reactQuery/useProjectQuery";
 import SelectStack from "./_components/SelectStack/SelectStack";
 
-async function MainPage() {
-  revalidateTagAction("pojectList");
+function MainPage() {
   const queryClient = getQueryClient();
   const cookieStore = cookies();
   const ACCESS_TOKEN = cookieStore.get("ACCESS_TOKEN");

app/page.tsx

@@ -12,7 +12,7 @@ import AnimationSection from "./_components/LandingPage/AnimationSection";
 import { usePrefetchProjectList } from "./_hooks/reactQuery/useProjectQuery";
 import getQueryClient from "./_utils/getQueryClient";
 
-export default async function Home() {
+export default function Home() {
   const queryClient = getQueryClient();
   usePrefetchProjectList(queryClient, { page: 1, size: 12, sortCondition: "LIKES" });