Feat: overlay-kit 패키지 적용 및 모든 Popup 컴포넌트 구현 (#79)

* feat: overlay-kit 패키지 설치 및 provider 생성

* feat: popup 컴포넌트 구현

* feat: 작업 테스트코드

* chore: 네이밍 수정

* feat: popup-warning-letter 컴포넌트 구현

* feat: popup-exit 컴포넌트 구현

* chore: 네이밍 수정

* feat: popup-exit-lettie 컴포넌트 구현

* feat: popup-confirm-letter 컴포넌트 구현

* feat: popup-intro 컴포넌트 구현

* chore: storybook alias 설정

* feat: popup-report 컴포넌트 구현

* feat: 팝업창 최상단에 위치하도록 수정

* style: 누락된 스타일 추가 및 스토리 작성

* chore: 불필요한 코드 삭제

* refactor: 필요없는 코드 삭제

* refactor: 코드리뷰 반영

* fix: 빌드에러 해결

* refactor: 불필요한 코드 삭제

* feat: 복사 기능 추가

* feat: 이미지 추가

* chore: 타입 파일 추가

* refactor: 코드래빗 리뷰 반영

* fix: 에러 해결

* style: 호버 스타일 추가

* feat: popup button 추가

* chore: 스토리북 수정

* refactor: 불필요한 코드 삭제

* feat: esc로 팝업창 닫을 수 있도록 추가

* chore: 스토리 내용 추가

* Feat: 좋아요 버튼 구현 (#82)

* Feat: add capsule button 구현, useInView 훅 추가 (#83)

* chore: 코드리뷰 반영

* Feat: view-type-tabs 구현 및 스토리 작성 (#86)

* feat: view-type-tabs 구현 및 스토리 작성

* refactor: 코드래빗 리뷰 반영

* chore: 폴더 구조 수정

Author: seueooo

.storybook/fonts.css

@@ -3,4 +3,4 @@
   src: url("/fonts/PretendardVariable.woff2") format("woff2-variations");
   font-weight: 45 920;
   font-display: swap;
-}
+}

.storybook/main.ts

@@ -1,3 +1,4 @@
+import path from "node:path";
 import type { StorybookConfig } from "@storybook/nextjs";
 
 const config: StorybookConfig = {
@@ -41,6 +42,12 @@ const config: StorybookConfig = {
       use: ["@svgr/webpack"],
     });
 
+    config.resolve = config.resolve || {};
+    config.resolve.alias = {
+      ...(config.resolve.alias || {}),
+      "@shared": path.resolve(__dirname, "../shared"),
+    };
+
     return config;
   },
 };

.storybook/preview.tsx

@@ -1,4 +1,5 @@
 import type { Preview } from "@storybook/nextjs";
+import { OverlayProvider } from "overlay-kit";
 import "../.storybook/fonts.css";
 import { themeClass, themeVars } from "../shared/styles/base/theme.css";
 
@@ -17,15 +18,17 @@ const preview: Preview = {
   },
   decorators: [
     (Story) => (
-      <div
-        className={themeClass}
-        style={{
-          fontFamily: "Pretendard",
-          backgroundColor: themeVars.color.black["90_bg"],
-        }}
-      >
-        <Story />
-      </div>
+      <OverlayProvider>
+        <div
+          className={themeClass}
+          style={{
+            fontFamily: "Pretendard",
+            backgroundColor: themeVars.color.black["90_bg"],
+          }}
+        >
+          <Story />
+        </div>
+      </OverlayProvider>
     ),
   ],
 };

app/page.tsx

@@ -1,10 +1,9 @@
 import NavbarMain from "@/shared/ui/navbar/navbar-main";
-
 const Home = () => {
   return (
     <div>
       <NavbarMain />
-      <main>
+      <main style={{ height: "20rem" }}>
         <h1>Home</h1>
       </main>
     </div>

app/providers.tsx

@@ -1,12 +1,25 @@
+"use client";
 import QueryProvider from "@/shared/providers/query-provider";
+import { OverlayProvider } from "overlay-kit";
+import { useEffect, useState } from "react";
 import type { ReactNode } from "react";
 
 interface ProvidersProps {
   children: ReactNode;
 }
 
 const Providers = ({ children }: ProvidersProps) => {
-  return <QueryProvider>{children}</QueryProvider>;
+  const [isClient, setIsClient] = useState(false);
+
+  useEffect(() => setIsClient(true), []);
+
+  if (!isClient) return <>{children}</>;
+
+  return (
+    <QueryProvider>
+      <OverlayProvider>{children}</OverlayProvider>
+    </QueryProvider>
+  );
 };
 
 export default Providers;

biome.json

@@ -68,7 +68,8 @@
         "useExhaustiveDependencies": "off",
         "noUnusedImports": "warn",
         "noNodejsModules": "off",
-        "useImportExtensions": "off"
+        "useImportExtensions": "off",
+        "noUndeclaredDependencies": "off"
       },
       "performance": {
         "noAccumulatingSpread": "off",

package.json

@@ -25,6 +25,7 @@
     "ky": "^1.8.1",
     "motion": "^12.23.3",
     "next": "15.4.2",
+    "overlay-kit": "^1.8.4",
     "pretendard": "^1.3.9",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"