Skip to content

Commit 8b9bcaf

Browse files
wowalswjdwowalswjd
committed
카툰 버섯페이지 레이아웃 수정 1차 및 gaEventsTracker 세팅
1 parent 1ed76c5 commit 8b9bcaf

12 files changed

+181
-17715
lines changed

‎package-lock.json

+46-17,604
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
"react-device-detect": "^2.2.2",
1515
"react-dom": "^18.2.0",
1616
"react-fullpage": "^0.1.19",
17+
"react-ga": "^3.3.1",
1718
"react-router-dom": "^6.4.3",
1819
"react-scripts": "^5.0.1",
1920
"web-vitals": "^2.1.4"
@@ -42,4 +43,4 @@
4243
"last 1 safari version"
4344
]
4445
}
45-
}
46+
}

‎public/img/cartoon/mushroom/page4/mush4Bg.png

-95.7 KB
Loading

‎public/img/cartoon/mushroom/page4/mush4Bg_before.png

1.84 MB
Loading

‎public/img/cartoon/mushroom/page4/mush4balloon.png

31 KB
Loading

‎public/img/cartoon/mushroom/page4/mush4opening.png

13 KB
Loading

‎public/index.html

+11
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,17 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4+
5+
<!-- Google tag (gtag.js) -->
6+
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-161715532-4"></script>
7+
<script>
8+
window.dataLayer = window.dataLayer || [];
9+
function gtag(){dataLayer.push(arguments);}
10+
gtag('js', new Date());
11+
12+
gtag('config', 'UA-161715532-4');
13+
</script>
14+
415
<meta charset="utf-8" />
516
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
617
<meta name="viewport" content="width=device-width, initial-scale=1" />

‎src/useGAEventsTracker.js

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import React from 'react'
2+
import ReactGa from 'react-ga'
3+
4+
const useGAEventsTracker = (category = "Event Category") => {
5+
const trackEvent = (action = "action", label = "label") => {
6+
ReactGa.event({category, action, label});
7+
};
8+
return trackEvent;
9+
}
10+
11+
export default useGAEventsTracker;

‎src/views/cartoon/mushroom/Mushroom_page1.css

+10
Original file line numberDiff line numberDiff line change
@@ -162,3 +162,13 @@
162162
margin-bottom: 64%;
163163
}
164164
}
165+
166+
/* 웹 깨지는 부분 */
167+
@media screen and (min-width: 1500px) and (max-width: 1700px) and (min-height: 600px) and (max-height: 800px) {
168+
#mush1_secondcut {
169+
margin-top: 93%;
170+
}
171+
#mush1_bighoneybubble {
172+
margin-bottom: 32%;
173+
}
174+
}

‎src/views/cartoon/mushroom/Mushroom_page2.css

+1
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,7 @@
101101
bottom: 0;
102102
right: 0;
103103
height: 34%;
104+
z-index: 150;
104105
}
105106

106107
/* /// 애니메이션 키프레임 /// */

‎src/views/cartoon/mushroom/Mushroom_page4.css

+78-89
Original file line numberDiff line numberDiff line change
@@ -23,38 +23,67 @@
2323
}
2424
}
2525

26-
/* 범퍼카부분 */
26+
#mush4_balloon {
27+
content: url(/public/img/cartoon/mushroom/page4/mush4balloon.png);
28+
width: 26%;
29+
top: 0;
30+
margin-top: 5%;
31+
left: 0;
2732

28-
#mush4_playground {
29-
content: url(/public/img/cartoon/mushroom/page4/mush4playground.png);
33+
animation: balloon-up 5s;
34+
animation-fill-mode: forwards;
35+
}
36+
37+
#mush4_opening {
38+
content: url(/public/img/cartoon/mushroom/page4/mush4opening.png);
3039
position: absolute;
31-
width: 86%;
40+
width: 22%;
3241
top: 0;
33-
margin-top: 107%;
42+
margin-top: 50%;
43+
right: 0;
44+
margin-right: 7%;
45+
46+
animation: opening-effect 1s infinite;
47+
48+
}
49+
50+
/* 범퍼카부분 */
51+
52+
#mush4_bumpercarzone {
53+
position: absolute;
54+
bottom: 0;
55+
margin-bottom: 18%;
3456
left: 0;
3557
margin-left: 0.7%;
3658
z-index: 1;
3759
}
3860

61+
#mush4_playground {
62+
content: url(/public/img/cartoon/mushroom/page4/mush4playground.png);
63+
width: 86%;
64+
}
65+
3966
#mush4_bumpercar1 {
4067
content: url(/public/img/cartoon/mushroom/page4/mush4bumpercar1.png);
4168
position: absolute;
4269
width: 28%;
43-
top: 0;
44-
margin-top: 87%;
4570
left: 0;
4671
margin-left: 1%;
72+
bottom: 0;
73+
margin-bottom: 40%;
4774
z-index: 2;
4875
}
4976

5077
#mush4_bumpercar2 {
5178
content: url(/public/img/cartoon/mushroom/page4/mush4bumpercar2.png);
5279
position: absolute;
5380
width: 28%;
54-
top: 0;
55-
margin-top: 96%;
81+
/* top: 0;
82+
margin-top: 96%; */
5683
left: 0;
5784
margin-left: 35%;
85+
bottom: 0;
86+
margin-bottom: 32%;
5887
z-index: 11;
5988
cursor: pointer;
6089
}
@@ -63,32 +92,36 @@
6392
content: url(/public/img/cartoon/gardener/page1/garden1cursor.png);
6493
position: absolute;
6594
width: 12%;
66-
top: 0;
67-
margin-top: 124%;
95+
/* top: 0;
96+
margin-top: 124%; */
6897
right: 0;
6998
margin-right: 30%;
7099
z-index: 100;
100+
bottom: 0;
101+
margin-bottom: 20%;
71102
}
72103

73104
#mush4_bumpercar3 {
74105
content: url(/public/img/cartoon/mushroom/page4/mush4bumpercar3.png);
75106
position: absolute;
76107
width: 28%;
77-
top: 0;
78-
margin-top: 113%;
108+
/* top: 0;
109+
margin-top: 113%; */
79110
left: 0;
80111
margin-left: 10%;
112+
bottom: 0;
113+
margin-bottom: 15%;
81114
z-index: 10;
82115
}
83116

84117
#mush4_effect {
85118
content: url(/public/img/cartoon/mushroom/page4/mush4effect.png);
86119
position: absolute;
87120
width: 10%;
88-
top: 0;
89-
margin-top: 116%;
90121
left: 0;
91122
margin-left: 35%;
123+
bottom: 0;
124+
margin-bottom: 30%;
92125
z-index: 30;
93126
visibility: hidden;
94127
}
@@ -97,86 +130,13 @@
97130
content: url(/public/img/cartoon/mushroom/page4/mush4bumpercar4.png);
98131
position: absolute;
99132
width: 40%;
100-
top: 0;
101-
margin-top: 124%;
102133
left: 0;
103134
margin-left: 50%;
104135
z-index: 15;
105-
}
106-
107-
/* 포장마차 부분 */
108-
109-
#mush4_hotdog {
110-
content: url(/public/img/cartoon/mushroom/page4/mush4hotdog.png);
111-
position: absolute;
112-
width: 23%;
113136
bottom: 0;
114-
margin-bottom: 26%;
115-
right: 0;
116-
margin-right: -3.5%;
117-
z-index: 20;
137+
margin-bottom: -3%;
118138
}
119139

120-
#mush4_redcart {
121-
position: absolute;
122-
bottom: 0;
123-
margin-bottom: 26%;
124-
transform: translateX(41%);
125-
}
126-
127-
#redcart {
128-
content: url(/public/img/cartoon/mushroom/page4/mush4redcart.png);
129-
width: 36%;
130-
left: 0;
131-
}
132-
133-
#redcartwheel {
134-
content: url(/public/img/cartoon/mushroom/page4/mush4redcartwheel.png);
135-
position: absolute;
136-
width: 13%;
137-
left: 0;
138-
margin-left: 4%;
139-
bottom: 0;
140-
}
141-
142-
#mush4_icecream {
143-
/* display: flex;
144-
align-items: flex-end; */
145-
position: absolute;
146-
bottom: 0;
147-
margin-bottom: 26%;
148-
z-index: 5;
149-
transform: translateX(-30%);
150-
animation: icecream-move 1.5s ease-in;
151-
animation-fill-mode: forwards;
152-
}
153-
154-
#icecream {
155-
content: url(/public/img/cartoon/mushroom/page4/mush4icecream.png);
156-
width: 40%;
157-
left: 0;
158-
}
159-
160-
#icecreamwheel {
161-
content: url(/public/img/cartoon/mushroom/page4/mush4icecreamwheel.png);
162-
position: absolute;
163-
width: 13%;
164-
left: 0;
165-
margin-left: 18%;
166-
animation: wheel-rotate 1.5s linear;
167-
bottom: 0;
168-
}
169-
170-
#mush4_watchingcart {
171-
content: url(/public/img/cartoon/mushroom/page4/mush4watchingcart.png);
172-
position: absolute;
173-
width: 30%;
174-
bottom: 0;
175-
margin-bottom: 5%;
176-
left: 0;
177-
margin-left: 25%;
178-
z-index: 30;
179-
}
180140

181141
/* /// 애니메이션 키프레임 /// */
182142
/* 범퍼카 애니메이션
@@ -242,6 +202,25 @@
242202
}
243203
}
244204

205+
/* 풍선 올라가는 효과 */
206+
@keyframes balloon-up {
207+
from {
208+
opacity: 1;
209+
transform: translate3d(0, 0, 0);
210+
}
211+
212+
to {
213+
opacity: 0;
214+
transform: translate3d(0, -100%, 0);
215+
}
216+
}
217+
218+
/* 문 여는 사람 애니메이션 */
219+
@keyframes opening-effect {
220+
from {}
221+
to {transform: translateX(5%);}
222+
}
223+
245224
/* /// 애니메이션 클래스 /// */
246225
.bumpercar2_animation {
247226
animation: bumpercar2-effect 3s;
@@ -293,3 +272,13 @@
293272
margin-top: 104%;
294273
}
295274
}
275+
276+
/* 웹 깨지는 부분 */
277+
@media screen and (min-width: 1500px) and (max-width: 1700px) and (min-height: 600px) and (max-height: 800px) {
278+
#mush4_bumpercarzone {
279+
margin-bottom: 5%;
280+
}
281+
#mush4_opening {
282+
margin-top: 35%;
283+
}
284+
}

‎src/views/cartoon/mushroom/Mushroom_page4.js

+22-21
Original file line numberDiff line numberDiff line change
@@ -36,26 +36,10 @@ function Mushroom_page4() {
3636
<div className="phoneFrameInside">
3737
<div className="bee_background_wrap">
3838
<div id="mushroom_page4">
39-
{/* 범퍼카 부분 */}
40-
<div id="mush4_playground" />
41-
<div id="mush4_bumpercar1" />
42-
{/* 범퍼카 상호작용 넣을 경우 - animation 부분 따로 클래스 분리한다음 swipe 이벤트 발생 시 클래스 추가되도록 */}
43-
{/* http://labs.rampinteractive.co.uk/touchSwipe/demos/Page_scrolling.html
44-
[자바스크립트] 스와이프 방향 알아내기 - Marshall K
45-
*/}
46-
<div
47-
id="mush4_bumpercar2"
48-
onClick={() => {
49-
mush4_animation();
50-
}}
51-
/>
52-
<div id="mush4_cursor" className="gardenermushroom_mouse" />
53-
<div id="mush4_bumpercar3" />
54-
<div id="mush4_effect" />
55-
<div id="mush4_bumpercar4" />
56-
57-
{/* 포장마차 */}
58-
<div id="mush4_icecream">
39+
<div id="mush4_balloon" />
40+
<div id="mush4_opening" />
41+
{/* 포장마차 -> 그냥 이미지로 박아둠 */}
42+
{/* <div id="mush4_icecream">
5943
<div id="icecream" />
6044
<div id="icecreamwheel" />
6145
</div>
@@ -65,7 +49,24 @@ function Mushroom_page4() {
6549
</div>
6650
<div id="mush4_hotdog" />
6751
68-
<div id="mush4_watchingcart" />
52+
<div id="mush4_watchingcart" /> */}
53+
54+
{/* 범퍼카 존 */}
55+
<div id="mush4_bumpercarzone">
56+
<div id="mush4_playground" />
57+
<div id="mush4_bumpercar1" />
58+
59+
<div
60+
id="mush4_bumpercar2"
61+
onClick={() => {
62+
mush4_animation();
63+
}}
64+
/>
65+
<div id="mush4_cursor" className="gardenermushroom_mouse" />
66+
<div id="mush4_bumpercar3" />
67+
<div id="mush4_effect" />
68+
<div id="mush4_bumpercar4" />
69+
</div>
6970
</div>
7071
</div>
7172
<div className="cartoon_btns inlineBlock">

0 commit comments

Comments
 (0)