🎨 공용 컴포넌트 추가 (드롭다운, 헤더, 페이지 컨테이너) (#9)

* feat: svgr 설치 및 세팅

* feat: shared 폴더 내에서 tailwind가 작동되도록 세팅

* feat: public 폴더내 assets을 import 가능하도록 세팅

* feat: storybook에서 svgr이 동작되도록 세팅

* feat: header 공통 컴포넌트 구현

* feat: PageContainer 컴포넌트 구현

* feat: Dropdown 컴포넌트 구현 및 storise 파일 생성

* feat: page.tsx에 pagecontainer 적용

* feat: dropdown, header export 파일 추가

* chore: lint 적용

* chore: shared 내 .gitkeep 제거

* feat: dropdown 내 use-client 추가

* feat: PageContainer export 구조 수정

* setting: next.config.mjs내 turbopack 대응 svg 설정 제거

* feat: pageContainer 내 import 수정

* feat: dropdown 컴포넌트 수정

* chore: dropdown stories 파일 내 네이밍 수정

* style: dropdown 컴포넌트 button 내 radius 추가

* feat: Dropdown.stories.tsx 타입 명시 줄임 및 props 내 함수 선언하여 적용

* feat: Header.tsx 내 prop type 수정

.storybook/main.ts

@@ -23,5 +23,28 @@ const config: StorybookConfig = {
     name: '@storybook/nextjs',
     options: {},
   },
+  webpackFinal: async (config) => {
+    const imageRule = config.module?.rules?.find((rule) => {
+      const test = (rule as { test: RegExp }).test;
+
+      if (!test) {
+        return false;
+      }
+      if (Array.isArray(test)) {
+        return test.some((t) => t instanceof RegExp && t.test('.svg'));
+      }
+
+      return test instanceof RegExp && test.test('.svg');
+    }) as { [key: string]: any };
+
+    imageRule.exclude = /\.svg$/;
+
+    config.module?.rules?.push({
+      test: /\.svg$/,
+      use: ['@svgr/webpack'],
+    });
+
+    return config;
+  },
 };
 export default config;

app/page.tsx

@@ -1,39 +1,50 @@
+import IconArrowFront from '/public/assets/icon/arrow-front.svg';
+
+import { PageContainer } from '@/widgets/pageContainer/ui/PageContainer';
 export default function Home() {
   return (
-    <div className="flex flex-row justify-center gap-12 bg-[#666666]">
-      <div className="w-72">
-        <p className="bg-white text-black">White</p>
-        <p className="bg-gray01 text-black">Gray 01</p>
-        <p className="bg-gray02 text-black">Gray 02</p>
-        <p className="bg-gray03 text-black">Gray 03</p>
-        <p className="bg-gray04 text-black">Gray 04</p>
-        <p className="bg-gray05 text-black">Gray 05</p>
-        <p className="bg-gray06 text-black">Gray 06</p>
-        <p className="bg-gray07 text-white">Gray 07</p>
-      </div>
+    <PageContainer
+      headerProps={{
+        left: <IconArrowFront width="44" height="44" />,
+        center: <div className="text-black">메인페이지</div>,
+        right: <button className="w-[44px] h-[44px] pr-2 text-black">게시</button>,
+      }}
+    >
+      <div className="mt-[44px] flex flex-col justify-center gap-12 bg-[#666666]">
+        <div className="w-72">
+          <p className="bg-white text-black">White</p>
+          <p className="bg-gray01 text-black">Gray 01</p>
+          <p className="bg-gray02 text-black">Gray 02</p>
+          <p className="bg-gray03 text-black">Gray 03</p>
+          <p className="bg-gray04 text-black">Gray 04</p>
+          <p className="bg-gray05 text-black">Gray 05</p>
+          <p className="bg-gray06 text-black">Gray 06</p>
+          <p className="bg-gray07 text-white">Gray 07</p>
+        </div>
 
-      <div className="w-72">
-        <p className="bg-red01 text-black">Red 01</p>
-        <p className="bg-red02 text-black">Red 02</p>
-        <p className="bg-red03 text-black">Red 03</p>
+        <div className="w-72">
+          <p className="bg-red01 text-black">Red 01</p>
+          <p className="bg-red02 text-black">Red 02</p>
+          <p className="bg-red03 text-black">Red 03</p>
 
-        <div className="h-6" />
+          <div className="h-6" />
 
-        <p className="bg-yellow01 text-black">Yellow 01</p>
-        <p className="bg-yellow02 text-black">Yellow 02</p>
-      </div>
+          <p className="bg-yellow01 text-black">Yellow 01</p>
+          <p className="bg-yellow02 text-black">Yellow 02</p>
+        </div>
 
-      <div className="w-72">
-        <p className="bg-ashblue01 text-black">Ashblue 01</p>
-        <p className="bg-ashblue02 text-black">Ashblue 02</p>
-        <p className="bg-overlay text-white">Overlay</p>
+        <div className="w-72">
+          <p className="bg-ashblue01 text-black">Ashblue 01</p>
+          <p className="bg-ashblue02 text-black">Ashblue 02</p>
+          <p className="bg-overlay text-white">Overlay</p>
 
-        <div className="h-6" />
+          <div className="h-6" />
 
-        <p className="bg-mint01 text-black">Mint 01</p>
-        <p className="bg-mint02 text-black">Mint 02</p>
-        <p className="bg-mint03 text-black">Mint 03</p>
+          <p className="bg-mint01 text-black">Mint 01</p>
+          <p className="bg-mint02 text-black">Mint 02</p>
+          <p className="bg-mint03 text-black">Mint 03</p>
+        </div>
       </div>
-    </div>
+    </PageContainer>
   );
 }

global.d.ts

@@ -0,0 +1,4 @@
+declare module '*.svg' {
+  const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
+  export default content;
+}

next.config.mjs

@@ -1,4 +1,12 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+    webpack: (config) => {
+        config.module.rules.push({
+          test: /\.svg$/,
+          use: ["@svgr/webpack"],
+        });
+        return config;
+      },
+};
 
 export default nextConfig;

package.json

@@ -23,9 +23,7 @@
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.9.0",
-    "@eslint/js": "^9.12.0",    
-    "@tanstack/eslint-plugin-query": "^5.59.7",
-    "@tanstack/react-query-devtools": "^5.59.4",
+    "@eslint/js": "^9.12.0",
     "@storybook/addon-a11y": "^8.3.5",
     "@storybook/addon-designs": "^8.0.3",
     "@storybook/addon-essentials": "^8.3.5",
@@ -38,6 +36,9 @@
     "@storybook/nextjs": "^8.3.5",
     "@storybook/react": "^8.3.5",
     "@storybook/test": "^8.3.5",
+    "@svgr/webpack": "^8.1.0",
+    "@tanstack/eslint-plugin-query": "^5.59.7",
+    "@tanstack/react-query-devtools": "^5.59.4",
     "@testing-library/react": "^16.0.1",
     "@types/node": "^20",
     "@types/react": "^18",