Merge pull request #2 from T1F5/feat/swiper

test swiper & default layout config

package.json

@@ -10,18 +10,19 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "@tanstack/react-query": "^5.28.14",
     "@types/react-router-dom": "^5.3.3",
     "axios": "^1.6.8",
     "jotai": "^2.7.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.22.3"
+    "react-router-dom": "^6.22.3",
+    "swiper": "^11.1.0"
   },
   "devDependencies": {
     "@emotion/babel-plugin": "^11.11.0",
+    "@emotion/react": "^11.11.4",
     "@types/react": "^18.2.66",
     "@types/react-dom": "^18.2.22",
     "@typescript-eslint/eslint-plugin": "^7.2.0",

src/App.tsx

@@ -1,18 +1,21 @@
-import { css } from "@emotion/react";
+import Router from "./Router";
+import styled from '@emotion/styled';
 
 function App() {
   return (
-    <div
-      css={css`
-        padding: 32px;
-        background-color: hotpink;
-        font-size: 24px;
-        border-radius: 4px;
-      `}
-    >
-      emotion test
-    </div>
+    <>
+      <Layout>
+        <Router />
+      </Layout>
+    </>
   );
 }
 
 export default App;
+
+const Layout = styled.div`
+    max-width: 768px;
+    width: 100vw;
+    border-left: 1px solid lightgray;
+    border-right: 1px solid lightgray;
+`

src/Router.tsx

@@ -8,8 +8,8 @@ const Router = () => {
     <BrowserRouter>
       <Routes>
         <Route path="/" element={<Home />} />
-        <Route path="/A" element={<A />} />
         <Route path="/image-download" element={<ImageDownloadPage />} />
+        <Route path="/a" element={<A />} />
       </Routes>
     </BrowserRouter>
   );

src/components/TestSwiper.tsx

@@ -0,0 +1,70 @@
+import { Swiper, SwiperSlide } from 'swiper/react';
+import styled from '@emotion/styled';
+import { css } from '@emotion/react'
+import 'swiper/css';
+import 'swiper/css/effect-coverflow';
+import 'swiper/css/pagination';
+
+import { EffectCards, Pagination } from 'swiper/modules';
+
+
+const TestSwiper = () => {
+  return (
+    <Swiper
+      css={css`
+      width: 100%;
+    `}
+      effect={'cards'}
+      grabCursor={true}
+      centeredSlides={true}
+      slidesPerView={1.2}
+      coverflowEffect={{
+        rotate: 10,
+        stretch: 0,
+        depth: 500,
+        modifier: 2,
+        slideShadows: true,
+      }}
+      pagination={false}
+      modules={[EffectCards, Pagination]}
+      className="mySwiper"
+    >
+      <StyledSlide>
+        <img src="https://swiperjs.com/demos/images/nature-2.jpg" />
+      </StyledSlide>
+      <StyledSlide>
+        <img src="https://swiperjs.com/demos/images/nature-3.jpg" />
+      </StyledSlide>
+      <StyledSlide>
+        <img src="https://swiperjs.com/demos/images/nature-4.jpg" />
+      </StyledSlide>
+      <StyledSlide>
+        <img src="https://swiperjs.com/demos/images/nature-5.jpg" />
+      </StyledSlide>
+      <StyledSlide>
+        <img src="https://swiperjs.com/demos/images/nature-6.jpg" />
+      </StyledSlide>
+      <StyledSlide>
+        <img src="https://swiperjs.com/demos/images/nature-7.jpg" />
+      </StyledSlide>
+      <StyledSlide>
+        <img src="https://swiperjs.com/demos/images/nature-8.jpg" />
+      </StyledSlide>
+      <StyledSlide>
+        <img src="https://swiperjs.com/demos/images/nature-9.jpg" />
+      </StyledSlide>
+    </Swiper>
+  )
+}
+
+export default TestSwiper;
+
+const StyledSlide = styled(SwiperSlide)`
+    background-position: center;
+    background-size: cover;
+    width: auto;
+    img {
+      display: block;
+      width: 100%;
+    } 
+`

src/index.css

@@ -0,0 +1,7 @@
+html, body {
+    width: 100%;
+    margin: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}

src/main.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
+import "./index.css";
 
 import Router from "./Router";
 

src/pages/A.tsx

@@ -1,7 +1,9 @@
+import TestSwiper from "../components/TestSwiper";
+
 const A = () => {
     return (
         <div>
-            A
+           <TestSwiper /> 
         </div>
     )
 }

tsconfig.json

@@ -2,25 +2,33 @@
   "compilerOptions": {
     "target": "ES2020",
     "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "lib": [
+      "ES2020",
+      "DOM",
+      "DOM.Iterable"
+    ],
     "module": "ESNext",
     "skipLibCheck": true,
-
     /* Bundler mode */
-    "moduleResolution": "bundler",
+    "moduleResolution": "node",
     "allowImportingTsExtensions": true,
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "react-jsx",
     "jsxImportSource": "@emotion/react",
-
     /* Linting */
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true
   },
-  "include": ["src"],
-  "references": [{ "path": "./tsconfig.node.json" }]
-}
+  "include": [
+    "src"
+  ],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
+}