Skip to content

Commit 390abea

Browse files
jjangminiijjangminii
authored
Feature(landing): UI 구현과 로띠 적용 (#98)
* Feature(landing): 홈 페이지 섹션 구성 요소 추가 * feat: landing 로띠 추가 * feat: 스크롤 효과 적용 * feat: 로띠 루프 설정 * feat: 로띠 추가 * feat: 버튼 컴포넌트 추가 * chore: 스타일 수정 * feat: 코드리뷰 반영 * feat: 텍스트 추가 * feat: 최종 수정 반영 * fix: 이름 자동 생성 오류 변경 * chore: 프리티어 수정
1 parent 39684bb commit 390abea

20 files changed

Lines changed: 21268 additions & 3972 deletions

‎apps/client/src/assets/react.svg‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎apps/landing/package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,10 @@
1515
"@tanstack/react-query": "^5.81.5",
1616
"@tanstack/react-query-devtools": "^5.81.5",
1717
"axios": "^1.10.0",
18+
"class-variance-authority": "^0.7.1",
1819
"eslint": "^8.44.0",
1920
"eslint-plugin-tailwindcss": "^3.18.0",
21+
"lottie-react": "^2.4.1",
2022
"prettier-plugin-tailwindcss": "^0.6.13",
2123
"react": "^19.1.0",
2224
"react-dom": "^19.1.0",
@@ -27,10 +29,10 @@
2729
"@eslint/js": "^9.29.0",
2830
"@pinback/eslint": "workspace:*",
2931
"@pinback/typescript": "workspace:*",
32+
"@pivanov/vite-plugin-svg-sprite": "^3.0.0",
3033
"@types/react": "^19.1.8",
3134
"@types/react-dom": "^19.1.6",
3235
"@vitejs/plugin-react-swc": "^3.10.2",
33-
"@pivanov/vite-plugin-svg-sprite": "^3.0.0",
3436
"eslint-plugin-react-hooks": "^5.2.0",
3537
"eslint-plugin-react-refresh": "^0.4.20",
3638
"globals": "^16.2.0",

‎apps/landing/src/assets/brand/logo.svg‎

Lines changed: 19 additions & 0 deletions
Loading

‎apps/landing/src/assets/lottie/dotorifalling.json‎

Lines changed: 339 additions & 0 deletions
Large diffs are not rendered by default.

‎apps/landing/src/assets/lottie/dotorifalling_top.json‎

Lines changed: 293 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,293 @@
1+
{
2+
"nm": "컴포지션 2",
3+
"ddd": 0,
4+
"h": 834,
5+
"w": 1728,
6+
"meta": { "g": "@lottiefiles/toolkit-js 0.64.0", "tc": "#a7a7a7" },
7+
"layers": [
8+
{
9+
"ty": 0,
10+
"nm": "dotori",
11+
"sr": 1,
12+
"st": 0,
13+
"op": 90,
14+
"ip": 0,
15+
"ln": "424",
16+
"hasMask": false,
17+
"ao": 0,
18+
"ks": {
19+
"a": { "a": 0, "k": [45, 45] },
20+
"s": { "a": 0, "k": [100, 100] },
21+
"p": {
22+
"a": 1,
23+
"k": [
24+
{
25+
"o": { "x": 0.167, "y": 0.167 },
26+
"i": { "x": 0.833, "y": 0.833 },
27+
"s": [1146, -51.797, 0],
28+
"t": 26
29+
},
30+
{
31+
"o": { "x": 0.167, "y": 0.167 },
32+
"i": { "x": 0.833, "y": 0.833 },
33+
"s": [1146, 828.203, 0],
34+
"t": 38
35+
},
36+
{
37+
"o": { "x": 0.167, "y": 0.167 },
38+
"i": { "x": 0.833, "y": 0.833 },
39+
"s": [1196, 684.29, 0],
40+
"t": 45
41+
},
42+
{
43+
"o": { "x": 0.167, "y": 0.167 },
44+
"i": { "x": 0.833, "y": 0.833 },
45+
"s": [1236, 815.159, 0],
46+
"t": 54
47+
},
48+
{
49+
"o": { "x": 0.167, "y": 0.167 },
50+
"i": { "x": 0.833, "y": 0.833 },
51+
"s": [1258.946, 701.079, 0],
52+
"t": 61
53+
},
54+
{
55+
"o": { "x": 0.167, "y": 0.167 },
56+
"i": { "x": 0.833, "y": 0.833 },
57+
"s": [1320, 817.001, 0],
58+
"t": 68.999
59+
},
60+
{
61+
"o": { "x": 0.167, "y": 0.167 },
62+
"i": { "x": 0.833, "y": 0.833 },
63+
"s": [1351, 765.572, 0],
64+
"t": 84.999
65+
},
66+
{
67+
"o": { "x": 0.167, "y": 0.167 },
68+
"i": { "x": 0.833, "y": 0.833 },
69+
"s": [1361, 817, 0],
70+
"t": 88.999
71+
},
72+
{ "s": [1146, 78.203, 0], "t": 95.999 }
73+
]
74+
},
75+
"r": {
76+
"a": 1,
77+
"k": [
78+
{
79+
"o": { "x": 0.167, "y": 0.167 },
80+
"i": { "x": 0.833, "y": 0.833 },
81+
"s": [0],
82+
"t": 26
83+
},
84+
{ "s": [270], "t": 88.999 }
85+
]
86+
},
87+
"sa": { "a": 0, "k": 0 },
88+
"o": { "a": 0, "k": 100 }
89+
},
90+
"w": 90,
91+
"h": 90,
92+
"refId": "1",
93+
"ind": 1
94+
},
95+
{
96+
"ty": 0,
97+
"nm": "dotori",
98+
"sr": 1,
99+
"st": 0,
100+
"op": 90,
101+
"ip": 0,
102+
"ln": "428",
103+
"hasMask": false,
104+
"ao": 0,
105+
"ks": {
106+
"a": { "a": 0, "k": [45, 45] },
107+
"s": { "a": 0, "k": [100, 100] },
108+
"p": {
109+
"a": 1,
110+
"k": [
111+
{
112+
"o": { "x": 0.167, "y": 0.167 },
113+
"i": { "x": 0.833, "y": 0.833 },
114+
"s": [646.874, -45.177, 0],
115+
"t": 12
116+
},
117+
{
118+
"o": { "x": 0.167, "y": 0.167 },
119+
"i": { "x": 0.833, "y": 0.833 },
120+
"s": [594, 443.022, 0],
121+
"t": 22
122+
},
123+
{
124+
"o": { "x": 0.167, "y": 0.167 },
125+
"i": { "x": 0.833, "y": 0.833 },
126+
"s": [594, 818.203, 0],
127+
"t": 30
128+
},
129+
{
130+
"o": { "x": 0.167, "y": 0.167 },
131+
"i": { "x": 0.833, "y": 0.833 },
132+
"s": [544, 618.203, 0],
133+
"t": 37
134+
},
135+
{
136+
"o": { "x": 0.167, "y": 0.167 },
137+
"i": { "x": 0.833, "y": 0.833 },
138+
"s": [494, 808.203, 0],
139+
"t": 44
140+
},
141+
{
142+
"o": { "x": 0.167, "y": 0.167 },
143+
"i": { "x": 0.833, "y": 0.833 },
144+
"s": [444, 678.203, 0],
145+
"t": 50
146+
},
147+
{
148+
"o": { "x": 0.167, "y": 0.167 },
149+
"i": { "x": 0.833, "y": 0.833 },
150+
"s": [354, 818.203, 0],
151+
"t": 59
152+
},
153+
{ "s": [354, 808.203, 0], "t": 60 }
154+
]
155+
},
156+
"r": {
157+
"a": 1,
158+
"k": [
159+
{
160+
"o": { "x": 0.167, "y": 0.167 },
161+
"i": { "x": 0.833, "y": 0.833 },
162+
"s": [0],
163+
"t": 0
164+
},
165+
{ "s": [540], "t": 57 }
166+
]
167+
},
168+
"sa": { "a": 0, "k": 0 },
169+
"o": { "a": 0, "k": 100 }
170+
},
171+
"w": 90,
172+
"h": 90,
173+
"refId": "1",
174+
"ind": 2
175+
},
176+
{
177+
"ty": 0,
178+
"nm": "dotori",
179+
"sr": 1,
180+
"st": 0,
181+
"op": 90,
182+
"ip": 0,
183+
"ln": "418",
184+
"hasMask": false,
185+
"ao": 0,
186+
"ks": {
187+
"a": { "a": 0, "k": [45, 45] },
188+
"s": { "a": 0, "k": [100, 100] },
189+
"p": {
190+
"a": 1,
191+
"k": [
192+
{
193+
"o": { "x": 0.167, "y": 0.167 },
194+
"i": { "x": 0.833, "y": 0.833 },
195+
"s": [891.158, -46.074, 0],
196+
"t": 35
197+
},
198+
{
199+
"o": { "x": 0.167, "y": 0.167 },
200+
"i": { "x": 0.833, "y": 0.833 },
201+
"s": [891, 813.346, 0],
202+
"t": 49
203+
},
204+
{
205+
"o": { "x": 0.167, "y": 0.167 },
206+
"i": { "x": 0.833, "y": 0.833 },
207+
"s": [968.684, 689.734, 0],
208+
"t": 59
209+
},
210+
{
211+
"o": { "x": 0.167, "y": 0.167 },
212+
"i": { "x": 0.833, "y": 0.833 },
213+
"s": [1038.114, 823.458, 0],
214+
"t": 66.999
215+
},
216+
{
217+
"o": { "x": 0.167, "y": 0.167 },
218+
"i": { "x": 0.833, "y": 0.833 },
219+
"s": [1084, 738.203, 0],
220+
"t": 70.999
221+
},
222+
{
223+
"o": { "x": 0.167, "y": 0.167 },
224+
"i": { "x": 0.833, "y": 0.833 },
225+
"s": [1124, 728.203, 0],
226+
"t": 74.999
227+
},
228+
{ "s": [1164, 808.203, 0], "t": 85.999 }
229+
]
230+
},
231+
"r": {
232+
"a": 1,
233+
"k": [
234+
{
235+
"o": { "x": 0.167, "y": 0.167 },
236+
"i": { "x": 0.833, "y": 0.833 },
237+
"s": [0],
238+
"t": 35
239+
},
240+
{ "s": [750], "t": 75.999 }
241+
]
242+
},
243+
"sa": { "a": 0, "k": 0 },
244+
"o": { "a": 0, "k": 100 }
245+
},
246+
"w": 90,
247+
"h": 90,
248+
"refId": "1",
249+
"ind": 3
250+
}
251+
],
252+
"v": "5.7.0",
253+
"fr": 30,
254+
"op": 90,
255+
"ip": 0,
256+
"assets": [
257+
{
258+
"nm": "dotori",
259+
"id": "1",
260+
"layers": [
261+
{
262+
"ty": 2,
263+
"nm": "레이어 1",
264+
"sr": 1,
265+
"st": 0,
266+
"op": 90,
267+
"ip": 0,
268+
"ln": "415",
269+
"hasMask": false,
270+
"ao": 0,
271+
"ks": {
272+
"a": { "a": 0, "k": [35.784, 44.144] },
273+
"s": { "a": 0, "k": [100, 100] },
274+
"p": { "a": 0, "k": [45.428, 44.833, 0] },
275+
"r": { "a": 0, "k": 0 },
276+
"sa": { "a": 0, "k": 0 },
277+
"o": { "a": 0, "k": 100 }
278+
},
279+
"refId": "2",
280+
"ind": 1
281+
}
282+
]
283+
},
284+
{
285+
"id": "2",
286+
"e": 1,
287+
"w": 72,
288+
"h": 89,
289+
"p": "data:image/png;base64,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",
290+
"u": ""
291+
}
292+
]
293+
}

0 commit comments

Comments
 (0)