Skip to content

Commit a04ec15

Browse files
EunbinJungEunbinJung
authored
Merge pull request #52 from prgrms-web-devcourse-final-project/feat/spinner#5
Feat/spinner#5
2 parents 2665891 + fa7ba34 commit a04ec15

File tree

7 files changed

+56
-3
lines changed

7 files changed

+56
-3
lines changed

‎package-lock.json‎

Lines changed: 20 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
"build": "next build",
1111
"start": "next start",
1212
"lint": "eslint . --ext .ts,.tsx,.js,.jsx"
13-
},
13+
},
1414
"lint-staged": {
1515
"*.{js,jsx,ts,tsx}": [
1616
"prettier --write",
@@ -20,6 +20,7 @@
2020
"dependencies": {
2121
"class-variance-authority": "^0.7.1",
2222
"gsap": "^3.13.0",
23+
"lottie-react": "^2.4.1",
2324
"next": "15.5.3",
2425
"react": "19.1.0",
2526
"react-dom": "19.1.0",

‎src/app/community/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
function Page() {
2-
return <div>community</div>;
2+
return <div></div>;
33
}
44
export default Page;

‎src/app/design-system/page.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ import SelectBox from '@/shared/components/InputBox/SelectBox';
1212
import LikeBtn from '@/shared/components/like/LikeBtn';
1313
import Share from '@/shared/components/share/Share';
1414
import Keep from '@/shared/components/keep/Keep';
15+
import Spinner from '@/shared/components/spinner/Spinner';
16+
1517

1618
function Page() {
1719
const [isModalOpen, setModalOpen] = useState(false);
@@ -154,6 +156,11 @@ function Page() {
154156
<Keep />
155157
</div>
156158
</div>
159+
160+
<div className="space-y-3">
161+
<h2 className="text-2xl font-semibold pb-1">Spinner</h2>
162+
<Spinner />
163+
</div>
157164
</div>
158165
);
159166
}

‎src/shared/assets/lottie/loading.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{"v":"5.7.8","fr":30,"ip":0,"op":121,"w":1080,"h":1080,"nm":"3GWS5M 22","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Shape Layer 2","td":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[540,540,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-122,333],[78,333]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.925490255917,0.117647066303,0.141176470588,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":28,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":5,"s":[0]},{"t":20,"s":[100]}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":86,"s":[0]},{"t":101,"s":[100]}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":5,"op":185,"st":5,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"Layer 3","tt":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[517.547,873.309,0],"ix":2,"l":2},"a":{"a":0,"k":[-22.453,333.309,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[-119.516,325.931],[74.609,325.931],[74.609,340.686],[-119.516,340.686],[-119.516,325.931]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.960784316063,0.674509823322,0.800000011921,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":5,"op":185,"st":5,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"Shape Layer 1","td":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[540,540,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[-10,4.5],[-5.5,27.5],[0,21],[0,0],[6,46],[-4.5,40.5],[0,0],[0,0],[0,0],[0,-30],[14,-27],[0,0],[-6,-17],[-39,-7],[0,0]],"o":[[0,0],[10,-4.5],[3.661,-18.306],[0,-22.522],[0,0],[-2.407,-18.452],[4.5,-40.5],[0,0],[0,0],[0,0],[0,30],[-18.717,36.096],[0,0],[13,14],[20.67,3.71],[0,0]],"v":[[-122.5,329],[-62.5,322.5],[-39.5,293.5],[-39.5,239.5],[-41.5,173],[-110.5,112.5],[-107.5,-16.5],[-96,-181],[-14,-180.5],[52,-180],[64,1],[59.5,126],[-3.5,173.5],[-1.5,308.5],[47,330],[78,328]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.925490255917,0.117647066303,0.141176470588,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":28,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":0,"s":[0]},{"t":20,"s":[100]}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":81,"s":[0]},{"t":101,"s":[100]}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":0,"op":180,"st":0,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"Layer 2","tt":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[517.539,612.7,0],"ix":2,"l":2},"a":{"a":0,"k":[-22.461,72.7,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[13.044,22.155],[-1.092,18.064],[0,0],[0,0],[-46.383,0],[0,0],[0,0],[9.179,-15.586],[24.603,-7.157],[0,0],[-18.75,0.229],[0,0],[0,0],[0,0],[9.863,12.032],[0,0],[0,0],[0,0],[-12.227,20.771],[0.846,14.215],[0,0],[43.187,0],[0,0],[-7.207,-12.259],[-23.705,-3.88],[0,0],[0,0],[0,0],[14.347,-4.451],[0,0],[0,0],[0,0],[-13.875,13.386]],"o":[[0,0],[-24.586,-7.157],[-9.162,-15.586],[0,0],[0,0],[46.366,0],[0,0],[0,0],[1.093,18.064],[-13.025,22.155],[0,0],[13.892,13.386],[0,0],[0,0],[0,0],[-14.364,-4.451],[0,0],[0,0],[0,0],[23.721,-3.88],[7.222,-12.259],[0,0],[-43.204,0],[0,0],[-0.863,14.215],[12.227,20.771],[0,0],[0,0],[0,0],[-9.88,12.032],[0,0],[0,0],[0,0],[18.733,0.229],[0,0]],"v":[[-50.682,302.911],[-50.682,182.234],[-109.961,136.666],[-122.4,85.36],[-105.494,-190.591],[-92.011,-190.591],[47.105,-190.591],[60.588,-190.591],[77.478,85.36],[65.038,136.666],[5.759,182.234],[5.759,302.911],[60.083,321.432],[74.609,321.252],[74.609,335.991],[24.868,335.991],[-12.483,311.731],[-13.625,310.313],[-13.625,166.501],[-9.403,165.8],[48.312,126.835],[58.127,86.534],[42.329,-171.189],[-87.25,-171.189],[-103.033,86.534],[-93.233,126.835],[-35.537,165.8],[-31.281,166.501],[-31.281,310.313],[-32.423,311.731],[-69.774,335.991],[-119.516,335.991],[-119.516,321.252],[-105.005,321.432],[-50.682,302.911]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.960784316063,0.674509823322,0.800000011921,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":180,"st":0,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"Layer 5","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":35,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.158],"y":[0]},"t":40,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":75,"s":[100]},{"t":85,"s":[0]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.92,"y":0.997},"o":{"x":0.553,"y":0},"t":35,"s":[435.215,214.417,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.391,"y":0.951},"o":{"x":0.079,"y":0.008},"t":45,"s":[435.215,369.417,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.847,"y":1},"o":{"x":0.573,"y":0.122},"t":50,"s":[435.215,337.417,0],"to":[0,0,0],"ti":[0,0,0]},{"t":55,"s":[435.215,349.417,0]}],"ix":2,"l":2},"a":{"a":0,"k":[-104.785,-190.583,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[-7.973,45.274],[0,0],[35.509,-4.648],[0,0]],"o":[[46.269,-4.907],[0,0],[-7.531,34.513],[0,0],[0,0]],"v":[[-93.691,-87.049],[-2.244,-172.428],[-22.054,-172.428],[-93.691,-106.628],[-93.691,-87.049]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.92549020052,0.109803922474,0.141176477075,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[46.757,0],[0,46.774],[-46.775,0],[0,-46.775]],"o":[[-46.775,0],[0,-46.775],[46.757,0],[0,46.774]],"v":[[-104.776,-105.895],[-189.473,-190.591],[-104.776,-275.27],[-20.098,-190.591]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ind":1,"ty":"sh","ix":2,"ks":{"a":0,"k":{"i":[[57.501,0],[0,-57.503],[-57.52,0],[0,57.502]],"o":[[-57.52,0],[0,57.502],[57.501,0],[0,-57.503]],"v":[[-104.776,-294.705],[-208.907,-190.591],[-104.776,-86.461],[-0.663,-190.591]],"c":true},"ix":2},"nm":"Path 2","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.956862747669,0.505882382393,0.1254902035,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 2","np":3,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":180,"st":0,"bm":0},{"ddd":0,"ind":6,"ty":4,"nm":"Layer 4","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":22,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.159],"y":[0]},"t":27,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":75,"s":[100]},{"t":85,"s":[0]}],"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.837],"y":[0.989]},"o":{"x":[0.544],"y":[0]},"t":22,"s":[33]},{"t":37,"s":[0]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.837,"y":0.984},"o":{"x":0.544,"y":0},"t":22,"s":[874.764,60.517,0],"to":[-36.333,16,0],"ti":[38.167,-12.333,0]},{"i":{"x":0.208,"y":0.811},"o":{"x":0.07,"y":0.017},"t":37,"s":[656.764,156.517,0],"to":[-38.167,12.333,0],"ti":[0,0,0]},{"i":{"x":0.893,"y":1},"o":{"x":0.78,"y":0.344},"t":44,"s":[645.764,134.517,0],"to":[0,0,0],"ti":[-1.833,-3.667,0]},{"t":51,"s":[656.764,156.517,0]}],"ix":2,"l":2},"a":{"a":0,"k":[116.764,-383.483,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[9.897,-39.895],[0,0],[-6.586,-1.287],[0,0],[-27.847,-0.831],[0,0],[0,0]],"o":[[0,0],[-37.79,-1.125],[0,0],[6.032,3.506],[0,0],[7.499,-30.161],[0,0],[0,0],[0,0]],"v":[[208.198,-398.328],[153.451,-399.943],[66.831,-345.864],[-58.67,158.414],[-39.597,165.033],[86.282,-341.104],[152.767,-379.922],[207.514,-378.325],[208.198,-398.328]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.776470601559,0.494117647409,0.705882370472,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":180,"st":0,"bm":0}],"markers":[]}

‎src/shared/components/header/DropdownMenu.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,10 @@ function DropdownMenu({ isClicked, setIsClicked }: Props) {
7878
<div className="my-5">
7979
<ul className="flex flex-col gap-[12px] text-black px-2">
8080
{navItem.map(({ label, href }, idx) => (
81-
<li className={`font-normal ${pathname === href ? '' : 'px-3 py-[12px]'}`} key={href}>
81+
<li
82+
className={`font-normal ${pathname === href ? 'pl-1' : 'px-3 py-[12px]'}`}
83+
key={href}
84+
>
8285
<Link
8386
href={href}
8487
onNavigate={() => setIsClicked(false)}

‎src/shared/components/spinner/Spinner.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import Lottie from 'lottie-react';
2+
import spinner from '@/shared/assets/lottie/loading.json';
3+
4+
function Spinner() {
5+
const style = {
6+
width: 130,
7+
height: 130,
8+
};
9+
10+
return (
11+
<div
12+
className="page-layout max-w-full flex justify-center items-center"
13+
role="status"
14+
aria-label="페이지를 불러오는 중입니다"
15+
>
16+
<Lottie animationData={spinner} style={style} aria-hidden />
17+
</div>
18+
);
19+
}
20+
21+
export default Spinner;

0 commit comments

Comments
 (0)