fix : swiper css 빌드 오류 해결 (#63)

* chore : swiper 타입 설정

* fix : lint 에러 해결

.yarnrc.yml

@@ -1,10 +1,2 @@
-yarnPath: .yarn/releases/yarn-4.5.1.cjs
 nodeLinker: pnp
-# packageExtensions:
-#     swiper@*:
-#         peerDependencies:
-#             react: '*'
-#             react-dom: '*'
-#         dependencies:
-#             dom7: '*'
-#             ssr-window: '*'
+yarnPath: .yarn/releases/yarn-4.5.1.cjs

eslint.config.js

@@ -18,7 +18,8 @@ export default [
             'src/stories/**',
             '.storybook',
             '.yarn',
-            'vite.config.ts'
+            'vite.config.ts',
+            'vite_cache'
         ]
     },
     {

src/components/Common/ItemSlider/ItemSlider.tsx

@@ -44,15 +44,15 @@ export const ItemSlider = ({
         switch (itemType) {
             case 'text':
                 return (
-                    <div className="p-2 h-full flex justify-center items-center">
+                    <div className="flex items-center justify-center h-full p-2">
                         {item.name}
                     </div>
                 );
             case 'image':
                 return (
-                    <div className="h-full flex justify-center items-center">
+                    <div className="flex items-center justify-center h-full">
                         <img
-                            className="w-full h-full object-cover rounded"
+                            className="object-cover w-full h-full rounded"
                             src={getImagePath(item.id)}
                             alt={item.name}
                         />
@@ -76,7 +76,7 @@ export const ItemSlider = ({
                     <SwiperSlide
                         style={slideStyle}
                         key={item.id}
-                        className="rounded-md bg-slate-200 flex justify-center align-middle"
+                        className="flex justify-center align-middle rounded-md bg-slate-200"
                     >
                         {getSliderContent(item)}
                     </SwiperSlide>

src/components/Common/ItemSlider/swiper.d.ts

@@ -0,0 +1,6 @@
+declare module 'swiper/css' {}
+declare module 'swiper/css/pagination' {}
+declare module 'swiper/css/autoplay' {}
+declare module 'swiper/css/effect-fade' {}
+declare module 'swiper/css/navigation' {}
+declare module 'swiper/css/free-mode' {}

vite.config.ts

@@ -5,6 +5,7 @@ import { VitePWA } from 'vite-plugin-pwa';
 
 // https://vite.dev/config/
 export default defineConfig({
+    cacheDir: 'vite_cache',
     plugins: [
         react(),
         VitePWA({

vite_cache/deps/_metadata.json

@@ -0,0 +1,73 @@
+{
+    "hash": "3dfa590b",
+    "configHash": "93a27a47",
+    "lockfileHash": "1744fb3b",
+    "browserHash": "54e9d589",
+    "optimized": {
+        "react": {
+            "src": "../../../../../../AppData/Local/Yarn/Berry/cache/react-npm-18.3.1-af38f3c1ae-10c0.zip/node_modules/react/index.js",
+            "file": "react.js",
+            "fileHash": "5bbe83bf",
+            "needsInterop": true
+        },
+        "react-dom": {
+            "src": "../../.yarn/__virtual__/react-dom-virtual-ab853769b2/5/AppData/Local/Yarn/Berry/cache/react-dom-npm-18.3.1-a805663f38-10c0.zip/node_modules/react-dom/index.js",
+            "file": "react-dom.js",
+            "fileHash": "6fedb612",
+            "needsInterop": true
+        },
+        "react/jsx-dev-runtime": {
+            "src": "../../../../../../AppData/Local/Yarn/Berry/cache/react-npm-18.3.1-af38f3c1ae-10c0.zip/node_modules/react/jsx-dev-runtime.js",
+            "file": "react_jsx-dev-runtime.js",
+            "fileHash": "eccf7044",
+            "needsInterop": true
+        },
+        "react/jsx-runtime": {
+            "src": "../../../../../../AppData/Local/Yarn/Berry/cache/react-npm-18.3.1-af38f3c1ae-10c0.zip/node_modules/react/jsx-runtime.js",
+            "file": "react_jsx-runtime.js",
+            "fileHash": "e90e89e6",
+            "needsInterop": true
+        },
+        "react-dom/client": {
+            "src": "../../.yarn/__virtual__/react-dom-virtual-ab853769b2/5/AppData/Local/Yarn/Berry/cache/react-dom-npm-18.3.1-a805663f38-10c0.zip/node_modules/react-dom/client.js",
+            "file": "react-dom_client.js",
+            "fileHash": "88f77ddc",
+            "needsInterop": true
+        },
+        "react-icons/fa6": {
+            "src": "../../.yarn/__virtual__/react-icons-virtual-e9cd50b133/5/AppData/Local/Yarn/Berry/cache/react-icons-npm-5.3.0-3814684035-10c0.zip/node_modules/react-icons/fa6/index.mjs",
+            "file": "react-icons_fa6.js",
+            "fileHash": "21858270",
+            "needsInterop": false
+        },
+        "react-icons/io": {
+            "src": "../../.yarn/__virtual__/react-icons-virtual-e9cd50b133/5/AppData/Local/Yarn/Berry/cache/react-icons-npm-5.3.0-3814684035-10c0.zip/node_modules/react-icons/io/index.mjs",
+            "file": "react-icons_io.js",
+            "fileHash": "6f83133c",
+            "needsInterop": false
+        },
+        "react-icons/md": {
+            "src": "../../.yarn/__virtual__/react-icons-virtual-e9cd50b133/5/AppData/Local/Yarn/Berry/cache/react-icons-npm-5.3.0-3814684035-10c0.zip/node_modules/react-icons/md/index.mjs",
+            "file": "react-icons_md.js",
+            "fileHash": "f662bb1e",
+            "needsInterop": false
+        },
+        "zustand": {
+            "src": "../../.yarn/__virtual__/zustand-virtual-549787d6e3/5/AppData/Local/Yarn/Berry/cache/zustand-npm-5.0.1-bbf1cd61e6-10c0.zip/node_modules/zustand/esm/index.mjs",
+            "file": "zustand.js",
+            "fileHash": "e3ef1ab4",
+            "needsInterop": false
+        }
+    },
+    "chunks": {
+        "chunk-LZMXAC7M": {
+            "file": "chunk-LZMXAC7M.js"
+        },
+        "chunk-CEL6VW5Y": {
+            "file": "chunk-CEL6VW5Y.js"
+        },
+        "chunk-HECIDTG4": {
+            "file": "chunk-HECIDTG4.js"
+        }
+    }
+}