Skip to content

Commit cfc0e92

Browse files
mkwwdmkwwd
authored
Merge pull request #38 from Fintechtefin/refactor/#35
Refactor/#35
2 parents ebb41c4 + 0090942 commit cfc0e92

9 files changed

Lines changed: 181 additions & 51 deletions

File tree

‎README.MD‎

Lines changed: 10 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -64,28 +64,25 @@
6464
<br>
6565

6666
## 3장. 주요 기능
67-
### 1. 지금 인기 있는 펀딩은?
67+
### 5초만에 쉽고 빠른 로그인!
68+
- 소셜로그인을 이용한 간편로그인
69+
<img src="https://github.com/user-attachments/assets/afe6260d-fa69-435b-b482-5dbdd7a9a138" width="300"/>
70+
71+
### 지금 인기 있는 펀딩은?
6872
- ***ElasticSearch***를 이용한 실시간 영화 검색 순위
69-
<p align="center">
70-
<img src="https://github.com/Fintechtefin/moding/assets/46569105/c8bb8675-e33a-4ea3-9578-ad64199beeb6" width="500" height="1000"/>
71-
</p>
73+
<img src="https://github.com/Fintechtefin/moding/assets/46569105/c8bb8675-e33a-4ea3-9578-ad64199beeb6" width="300"/>
7274

7375
<br>
7476

75-
### 2. 터치 한 번에 결제 끝!
77+
### 터치 한 번에 결제 끝!
7678
- 토스페이먼츠 `API`를 이용한 쉽고 빠른 결제
77-
<p align="center">
78-
<img src="https://github.com/Fintechtefin/moding/assets/46569105/3f7efeab-946c-4662-b502-7c967577fb3c" width="500" height="1000"/>
79-
</p>
79+
<img src="https://github.com/Fintechtefin/moding/assets/46569105/3f7efeab-946c-4662-b502-7c967577fb3c" width="300"/>
8080

8181
<br>
8282

83-
### 3. N명이 보고 있어요
83+
### N명이 보고 있어요
8484
- 동시 접속자 수를 볼 수 있는 좌석 예매
85-
<p align="center">
86-
<img src="https://github.com/Fintechtefin/moding/assets/46569105/b2442613-55b5-4007-b10f-9b54d62bff1e" width="500" height="1000"/>
87-
</p>
88-
85+
<img src="https://github.com/Fintechtefin/moding/assets/46569105/b2442613-55b5-4007-b10f-9b54d62bff1e" width="300"/>
8986
<br>
9087

9188
## 4장. 주요 기술

‎frontEnd/src/assets/images/background.png‎

1.33 MB
Loading

‎frontEnd/src/assets/styles/Base.scss‎

Lines changed: 37 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -44,16 +44,49 @@ a {
4444

4545
@font-face {
4646
font-family: "Dovemayo-Medium";
47-
src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_four@1.0/Dovemayo-Medium.woff")
48-
format("woff");
47+
src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_four@1.0/Dovemayo-Medium.woff") format("woff");
4948
font-weight: normal;
5049
font-style: normal;
5150
}
5251

5352
@font-face {
5453
font-family: "BagelFatOne-Regular";
55-
src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_JAMO@1.0/BagelFatOne-Regular.woff2")
56-
format("woff2");
54+
src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_JAMO@1.0/BagelFatOne-Regular.woff2") format("woff2");
55+
font-weight: normal;
56+
font-style: normal;
57+
}
58+
59+
@font-face {
60+
font-family: "PyeongChangPeace-Bold";
61+
src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2206-02@1.0/PyeongChangPeace-Bold.woff2") format("woff2");
62+
font-weight: 700;
63+
font-style: normal;
64+
}
65+
66+
@font-face {
67+
font-family: "HSSanTokki20-Regular";
68+
src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/2405@1.0/HSSanTokki20-Regular.woff2") format("woff2");
69+
font-weight: normal;
70+
font-style: normal;
71+
}
72+
73+
@font-face {
74+
font-family: "HakgyoansimByeolbichhaneulTTF-B";
75+
src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/2408-5@1.0/HakgyoansimByeolbichhaneulTTF-B.woff2") format("woff2");
76+
font-weight: 700;
77+
font-style: normal;
78+
}
79+
80+
@font-face {
81+
font-family: "Yeongdo-Rg";
82+
src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/2410-1@1.2/Yeongdo-Rg.woff2") format("woff2");
83+
font-weight: 400;
84+
font-style: normal;
85+
}
86+
87+
@font-face {
88+
font-family: "HakgyoansimPuzzleTTF-Outline";
89+
src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/2408-5@1.0/HakgyoansimPuzzleTTF-Outline.woff2") format("woff2");
5790
font-weight: normal;
5891
font-style: normal;
5992
}

‎frontEnd/src/assets/styles/LoginPage.scss‎

Lines changed: 68 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
.back {
22
overflow: hidden;
3-
background: #373939 no-repeat center center fixed;
4-
background-size: cover;
3+
// background: #373939 no-repeat center center fixed;
4+
background: url("../images/background.png") no-repeat center center/cover;
55
position: fixed;
66
padding: 2px;
77
margin: 0px;
@@ -24,8 +24,7 @@
2424
border-radius: 50%;
2525
-webkit-transform: translate(-50%, -50%);
2626
transform: translate(-50%, -50%);
27-
animation: puff 0.5s 1.8s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards,
28-
borderRadius 1s 2.3s linear forwards;
27+
animation: puff 0.5s 1.8s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards, borderRadius 1s 2.3s linear forwards;
2928
}
3029
}
3130

@@ -42,23 +41,26 @@
4241
margin-top: 70px;
4342
transform: translate(-50%, -50%);
4443
// border-radius: 50%;
45-
animation: init 0.5s 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards,
46-
moveDown 1s 0.8s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards,
47-
moveUp 1s 1.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards,
48-
materia 0.2s 2.7s cubic-bezier(0.86, 0, 0.07, 1) forwards;
44+
animation: init 0.5s 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards, moveDown 1s 0.8s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards,
45+
moveUp 1s 1.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, materia 0.2s 2.7s cubic-bezier(0.86, 0, 0.07, 1) forwards;
4946
}
5047

5148
.profile-card .profile-bio {
5249
width: 100%;
5350
height: 100%;
54-
display: inline-block;
5551
background: #000000;
5652
color: #333333;
5753
text-align: center;
5854
opacity: 0;
5955
animation: moveIn 1s 3.1s ease forwards;
6056
}
6157

58+
.profile-bio {
59+
display: flex;
60+
flex-direction: column;
61+
justify-content: center;
62+
}
63+
6264
@keyframes init {
6365
0% {
6466
width: 0px;
@@ -169,3 +171,60 @@
169171
opacity: 0;
170172
}
171173
}
174+
175+
@mixin glitchCopy {
176+
content: attr(data-text);
177+
position: absolute;
178+
top: 0;
179+
left: 0;
180+
width: 100%;
181+
height: 100%;
182+
}
183+
184+
.glitch {
185+
animation: glitch-skew 1s infinite linear alternate-reverse;
186+
&::before {
187+
@include glitchCopy;
188+
left: 2px;
189+
text-shadow: -2px 0 #ff00c1;
190+
clip: rect(44px, 450px, 56px, 0);
191+
animation: glitch-anim 5s infinite linear alternate-reverse;
192+
}
193+
&::after {
194+
@include glitchCopy;
195+
left: -2px;
196+
text-shadow: -2px 0 #00fff9, 2px 2px #ff00c1;
197+
animation: glitch-anim2 1s infinite linear alternate-reverse;
198+
}
199+
}
200+
201+
@keyframes glitch-anim {
202+
$steps: 20;
203+
@for $i from 0 through $steps {
204+
#{percentage($i*(1/$steps))} {
205+
clip: rect(random(100) + px, 9999px, random(100) + px, 0);
206+
transform: skew((random(100) / 100) + deg);
207+
}
208+
}
209+
}
210+
211+
// Same deal, just duplicated for ultra randomness.
212+
@keyframes glitch-anim2 {
213+
$steps: 20;
214+
@for $i from 0 through $steps {
215+
#{percentage($i*(1/$steps))} {
216+
clip: rect(random(100) + px, 9999px, random(100) + px, 0);
217+
transform: skew((random(100) / 100) + deg);
218+
}
219+
}
220+
}
221+
222+
// Does the same deal as before, but now only skews. Used for main text.
223+
@keyframes glitch-skew {
224+
$steps: 10;
225+
@for $i from 0 through $steps {
226+
#{percentage($i*(1/$steps))} {
227+
transform: skew((random(10) - 5) + deg);
228+
}
229+
}
230+
}

‎frontEnd/src/assets/styles/ModingOffice.scss‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
.movielist-bg {
2+
background: #112 url(//images.weserv.nl/?url=i.imgur.com/6QJjYMe.jpg) center no-repeat;
3+
background-size: cover;
4+
}
5+
6+
.neon {
7+
font-family: "HakgyoansimPuzzleTTF-Outline";
8+
font-size: 45px;
9+
padding-top: 35px;
10+
margin-bottom: 20px;
11+
color: #fee;
12+
text-shadow: 0 -40px 100px, 0 0 2px, 0 0 1em #ff4444, 0 0 0.5em #ff4444, 0 0 0.1em #ff4444, 0 10px 3px #000;
13+
}
14+
15+
.neon span {
16+
font-family: "HakgyoansimPuzzleTTF-Outline";
17+
animation: blink linear infinite 2s;
18+
}
19+
20+
@keyframes blink {
21+
78% {
22+
color: inherit;
23+
text-shadow: inherit;
24+
}
25+
79% {
26+
color: #333;
27+
}
28+
80% {
29+
text-shadow: none;
30+
}
31+
81% {
32+
color: inherit;
33+
text-shadow: inherit;
34+
}
35+
82% {
36+
color: #333;
37+
text-shadow: none;
38+
}
39+
83% {
40+
color: inherit;
41+
text-shadow: inherit;
42+
}
43+
92% {
44+
color: #333;
45+
text-shadow: none;
46+
}
47+
92.5% {
48+
color: inherit;
49+
text-shadow: inherit;
50+
}
51+
}

‎frontEnd/src/assets/styles/movieList/MovieCarousel.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ $deg6: $deg1 * 6;
1010
position: relative;
1111
width: 90%;
1212
height: 80vh;
13-
margin: 30px auto;
13+
margin: 10px auto 30px;
1414
perspective: 1500px;
1515

1616
.title {

‎frontEnd/src/components/movieList/MovieCarousel.tsx‎

Lines changed: 5 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -67,9 +67,7 @@ const MovieCarousel = () => {
6767
const deltaX = currentTouchX - startTouchX;
6868

6969
if (deltaX > 50) {
70-
setSelectedIndex(
71-
(prevIndex) => (prevIndex - 1 + images.length) % images.length
72-
);
70+
setSelectedIndex((prevIndex) => (prevIndex - 1 + images.length) % images.length);
7371
setStartTouchX(0);
7472
} else if (deltaX < -50) {
7573
setSelectedIndex((prevIndex) => (prevIndex + 1) % images.length);
@@ -86,33 +84,20 @@ const MovieCarousel = () => {
8684
};
8785

8886
return (
89-
<div
90-
className="wrapper"
91-
onTouchStart={handleTouchStart}
92-
onTouchMove={handleTouchMove}
93-
>
87+
<div className="relative wrapper" onTouchStart={handleTouchStart} onTouchMove={handleTouchMove}>
9488
<div className="object">
9589
<div className="carousel" style={rotateCarousel()}>
9690
{images.map((image, index) => (
97-
<Link
98-
to={"/movie/list"}
99-
state={{ category: image.id }}
100-
key={index}
101-
className="cell"
102-
>
91+
<Link to={"/movie/list"} state={{ category: image.id }} key={index} className="cell">
10392
<div>
10493
<h3 className="text-white title">{image.category}</h3>
105-
<img
106-
className="list-image w-[100%] h-[50vh] rounded-sm opacity-80"
107-
src={image.url}
108-
alt=""
109-
/>
94+
<img className="list-image w-[100%] h-[50vh] rounded-sm" src={image.url} alt="" />
11095
</div>
11196
</Link>
11297
))}
11398
</div>
11499
</div>
115-
<div className="absolute top-[15%] flex justify-between w-[100%] px-4">
100+
<div className="absolute top-[5%] flex justify-between w-[100%] px-4">
116101
<button className="previous-button" onClick={handlePrevious}>
117102
&lt;
118103
</button>

‎frontEnd/src/pages/LoginPage.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,10 @@ const LoginPage = () => {
77
<div className="back h-[100vh]">
88
<div className="profile-card">
99
<div className="profile-bio">
10-
<div className="text-5xl text-white mt-20">LOGIN</div>
11-
<div className="flex justify-center mt-20 gap-10">
10+
<div className="glitch text-5xl text-white mt-10" data-text="LOGIN">
11+
LOGIN
12+
</div>
13+
<div className="flex justify-center mt-10 gap-10">
1214
<SocialNaver />
1315
<SocialKakao />
1416
</div>

‎frontEnd/src/pages/ModingOffice.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
11
import MovieCarousel from "@components/movieList/MovieCarousel";
2+
import "@assets/styles/ModingOffice.scss";
23

34
const ModingOffice = () => {
45
return (
5-
<div className="movielist-container">
6-
<div className="text-center pt-5 text-3xl">ModingOffice</div>
6+
<div className="movielist-bg">
7+
<div className="neon text-center text-3xl">
8+
무<span>딩</span>오피스
9+
</div>
710
<MovieCarousel />
811
</div>
912
);

0 commit comments

Comments
 (0)