Skip to content

Commit 05bee1a

Browse files
Geun-OhGeun-Oh
authored
Merge pull request #2 from T1F5/feat/swiper
test swiper & default layout config
2 parents fccb901 + 3ace900 commit 05bee1a

File tree

9 files changed

+125
-34
lines changed

9 files changed

+125
-34
lines changed

‎package.json

+3-2
Original file line numberDiff line numberDiff line change
@@ -10,18 +10,19 @@
1010
"preview": "vite preview"
1111
},
1212
"dependencies": {
13-
"@emotion/react": "^11.11.4",
1413
"@emotion/styled": "^11.11.5",
1514
"@tanstack/react-query": "^5.28.14",
1615
"@types/react-router-dom": "^5.3.3",
1716
"axios": "^1.6.8",
1817
"jotai": "^2.7.2",
1918
"react": "^18.2.0",
2019
"react-dom": "^18.2.0",
21-
"react-router-dom": "^6.22.3"
20+
"react-router-dom": "^6.22.3",
21+
"swiper": "^11.1.0"
2222
},
2323
"devDependencies": {
2424
"@emotion/babel-plugin": "^11.11.0",
25+
"@emotion/react": "^11.11.4",
2526
"@types/react": "^18.2.66",
2627
"@types/react-dom": "^18.2.22",
2728
"@typescript-eslint/eslint-plugin": "^7.2.0",

‎pnpm-lock.yaml

+11-12
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/App.tsx

+14-11
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,21 @@
1-
import { css } from "@emotion/react";
1+
import Router from "./Router";
2+
import styled from '@emotion/styled';
23

34
function App() {
45
return (
5-
<div
6-
css={css`
7-
padding: 32px;
8-
background-color: hotpink;
9-
font-size: 24px;
10-
border-radius: 4px;
11-
`}
12-
>
13-
emotion test
14-
</div>
6+
<>
7+
<Layout>
8+
<Router />
9+
</Layout>
10+
</>
1511
);
1612
}
1713

1814
export default App;
15+
16+
const Layout = styled.div`
17+
max-width: 768px;
18+
width: 100vw;
19+
border-left: 1px solid lightgray;
20+
border-right: 1px solid lightgray;
21+
`

‎src/Router.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@ const Router = () => {
88
<BrowserRouter>
99
<Routes>
1010
<Route path="/" element={<Home />} />
11-
<Route path="/A" element={<A />} />
1211
<Route path="/image-download" element={<ImageDownloadPage />} />
12+
<Route path="/a" element={<A />} />
1313
</Routes>
1414
</BrowserRouter>
1515
);

‎src/components/TestSwiper.tsx

+70
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import { Swiper, SwiperSlide } from 'swiper/react';
2+
import styled from '@emotion/styled';
3+
import { css } from '@emotion/react'
4+
import 'swiper/css';
5+
import 'swiper/css/effect-coverflow';
6+
import 'swiper/css/pagination';
7+
8+
import { EffectCards, Pagination } from 'swiper/modules';
9+
10+
11+
const TestSwiper = () => {
12+
return (
13+
<Swiper
14+
css={css`
15+
width: 100%;
16+
`}
17+
effect={'cards'}
18+
grabCursor={true}
19+
centeredSlides={true}
20+
slidesPerView={1.2}
21+
coverflowEffect={{
22+
rotate: 10,
23+
stretch: 0,
24+
depth: 500,
25+
modifier: 2,
26+
slideShadows: true,
27+
}}
28+
pagination={false}
29+
modules={[EffectCards, Pagination]}
30+
className="mySwiper"
31+
>
32+
<StyledSlide>
33+
<img src="https://swiperjs.com/demos/images/nature-2.jpg" />
34+
</StyledSlide>
35+
<StyledSlide>
36+
<img src="https://swiperjs.com/demos/images/nature-3.jpg" />
37+
</StyledSlide>
38+
<StyledSlide>
39+
<img src="https://swiperjs.com/demos/images/nature-4.jpg" />
40+
</StyledSlide>
41+
<StyledSlide>
42+
<img src="https://swiperjs.com/demos/images/nature-5.jpg" />
43+
</StyledSlide>
44+
<StyledSlide>
45+
<img src="https://swiperjs.com/demos/images/nature-6.jpg" />
46+
</StyledSlide>
47+
<StyledSlide>
48+
<img src="https://swiperjs.com/demos/images/nature-7.jpg" />
49+
</StyledSlide>
50+
<StyledSlide>
51+
<img src="https://swiperjs.com/demos/images/nature-8.jpg" />
52+
</StyledSlide>
53+
<StyledSlide>
54+
<img src="https://swiperjs.com/demos/images/nature-9.jpg" />
55+
</StyledSlide>
56+
</Swiper>
57+
)
58+
}
59+
60+
export default TestSwiper;
61+
62+
const StyledSlide = styled(SwiperSlide)`
63+
background-position: center;
64+
background-size: cover;
65+
width: auto;
66+
img {
67+
display: block;
68+
width: 100%;
69+
}
70+
`

‎src/index.css

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
html, body {
2+
width: 100%;
3+
margin: 0;
4+
display: flex;
5+
justify-content: center;
6+
align-items: center;
7+
}

‎src/main.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from "react";
22
import ReactDOM from "react-dom/client";
3+
import "./index.css";
34

45
import Router from "./Router";
56

‎src/pages/A.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
1+
import TestSwiper from "../components/TestSwiper";
2+
13
const A = () => {
24
return (
35
<div>
4-
A
6+
<TestSwiper />
57
</div>
68
)
79
}

‎tsconfig.json

+15-7
Original file line numberDiff line numberDiff line change
@@ -2,25 +2,33 @@
22
"compilerOptions": {
33
"target": "ES2020",
44
"useDefineForClassFields": true,
5-
"lib": ["ES2020", "DOM", "DOM.Iterable"],
5+
"lib": [
6+
"ES2020",
7+
"DOM",
8+
"DOM.Iterable"
9+
],
610
"module": "ESNext",
711
"skipLibCheck": true,
8-
912
/* Bundler mode */
10-
"moduleResolution": "bundler",
13+
"moduleResolution": "node",
1114
"allowImportingTsExtensions": true,
1215
"resolveJsonModule": true,
1316
"isolatedModules": true,
1417
"noEmit": true,
1518
"jsx": "react-jsx",
1619
"jsxImportSource": "@emotion/react",
17-
1820
/* Linting */
1921
"strict": true,
2022
"noUnusedLocals": true,
2123
"noUnusedParameters": true,
2224
"noFallthroughCasesInSwitch": true
2325
},
24-
"include": ["src"],
25-
"references": [{ "path": "./tsconfig.node.json" }]
26-
}
26+
"include": [
27+
"src"
28+
],
29+
"references": [
30+
{
31+
"path": "./tsconfig.node.json"
32+
}
33+
]
34+
}

0 commit comments

Comments
 (0)