Skip to content

Commit eea7a2e

Browse files
haruharugandaharuharuganda
authored
Merge pull request #211 from gnims-project/dev
Dev->Main #100 animation effect
2 parents 574935a + 53e8c7a commit eea7a2e

18 files changed

+184
-189
lines changed

‎README.md

+5
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,11 @@
7272
</tr>
7373
</table>
7474

75+
## 시연 영상 📺
76+
77+
https://www.youtube.com/watch?v=qLN5soxDF5E
78+
79+
7580
## 프로젝트 기술 스택 ⚙️
7681

7782
### 🛠 백앤드

‎.github/workflows/main.yml ‎main.yml

File renamed without changes.

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
"@testing-library/user-event": "^13.5.0",
1010
"axios": "^1.3.2",
1111
"event-source-polyfill": "^1.0.31",
12+
"framer-motion": "^10.3.2",
1213
"html-webpack-plugin": "^5.5.0",
1314
"json-server": "^0.17.1",
1415
"picker": "^0.1.4",

‎src/components/Schedule/ScheduleDetail.jsx

+5-19
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,7 @@ import kebab from "../../img/kebab.png";
44
import BottomNavi from "../layout/BottomNavi";
55
import KebabModal from "../modal/KebabButtonModal";
66
import { useDispatch, useSelector } from "react-redux";
7-
import {
8-
__getScheduleDetail,
9-
scheduleReset,
10-
} from "../../redux/modules/ScheduleSlice";
7+
import { __getScheduleDetail, scheduleReset } from "../../redux/modules/ScheduleSlice";
118
import schedulealoneIcon from "../../img/schedulealone.png";
129

1310
const ScheduleDetail = () => {
@@ -53,20 +50,11 @@ const ScheduleDetail = () => {
5350
>
5451
<div className="flex space-x-3 text-[18px] font-extralight ">
5552
<div>{schedule.date}</div> <div> {time}</div>
56-
<div
57-
className="w-[160px] flex pl-[155px]"
58-
onClick={showModalHandler}
59-
>
60-
<img
61-
className={`h-[20px] ${isHidden} row cursor-pointer `}
62-
src={kebab}
63-
alt="케밥메뉴"
64-
/>
53+
<div className="w-[160px] flex pl-[155px]" onClick={showModalHandler}>
54+
<img className={`h-[20px] ${isHidden} row cursor-pointer `} src={kebab} alt="케밥메뉴" />
6555
</div>
6656
</div>
67-
<div className="mt-[28px] font-semibold text-[24px]">
68-
{schedule.subject}
69-
</div>
57+
<div className="mt-[28px] font-semibold text-[24px]">{schedule.subject}</div>
7058
<div className="place-content-end font-extralight flex text-[18px] mt-[66px]">
7159
D-
7260
{schedule.dday === 0 ? <div>DAY</div> : <div>{schedule.dday}</div>}
@@ -81,9 +69,7 @@ const ScheduleDetail = () => {
8169
<div className="bg-white h-[50px] border-solid border-[1px] border-[#E2E2E2] w-[335px] mt-[20px] p-[15px] lg flex rounded-lg">
8270
{joiner &&
8371
joiner.map((a) => {
84-
return (
85-
<span className="text-sm ml-[5px]">{a.username}</span>
86-
);
72+
return <span className="text-sm ml-[5px]">{a.username}</span>;
8773
})}
8874
</div>
8975
</div>

‎src/components/login/KakaoLogin.jsx

+2-9
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,8 @@ import React from "react";
22

33
const LoginButton = ({ onEvent, img }) => {
44
return (
5-
<div
6-
className="h-[60px] w-[60px] justify-center rounded-full"
7-
onClick={onEvent}
8-
>
9-
<img
10-
className="w-full h-full rounded-full"
11-
src={img}
12-
alt="로그인버튼들"
13-
/>
5+
<div className="h-[60px] w-[60px] justify-center rounded-full" onClick={onEvent}>
6+
<img className="w-full h-full rounded-full" src={img} alt="로그인버튼들" />
147
</div>
158
);
169
};

‎src/components/main/FriednsScheduleCard.jsx

+16-15
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React, { useState } from "react";
22
import { useEffect } from "react";
33
import { useNavigate } from "react-router-dom";
4+
import { motion } from "framer-motion";
45

56
const FriednsScheduleCard = ({ schedules }) => {
67
const navigate = useNavigate();
@@ -26,9 +27,7 @@ const FriednsScheduleCard = ({ schedules }) => {
2627
if (invitees.length > 1) {
2728
setInviteesList(() => ({
2829
hidden: false,
29-
inviteesList: `${schedules.invitees[0].username} 외 ${
30-
invitees.length - 1
31-
} 명`,
30+
inviteesList: `${schedules.invitees[0].username} 외 ${invitees.length - 1} 명`,
3231
}));
3332
}
3433
}, [invitees, schedules.invitees]);
@@ -38,13 +37,20 @@ const FriednsScheduleCard = ({ schedules }) => {
3837
};
3938

4039
return (
41-
<div
40+
<motion.div
41+
initial={{ opacity: 0, scale: 0.2 }}
42+
animate={{ opacity: 1, scale: 1 }}
43+
transition={{
44+
duration: 0.8,
45+
delay: 0.5,
46+
ease: [0, 0.71, 0.2, 1.01],
47+
}}
48+
whileHover={{ scale: 1.1, transition: { type: "spring", stiffness: 400, damping: 10 } }}
49+
whileTap={{ scale: 1.1 }}
4250
onClick={onDetail}
4351
className={`w-[335px] h-[180px] bg-white rounded-[10px] border border-solid border-[#E8E8E8] shadow-md`}
4452
>
45-
<div
46-
className={`flex items-center h-[14px] ${bgColor} rounded-t-[10px] `}
47-
>
53+
<div className={`flex items-center h-[14px] ${bgColor} rounded-t-[10px] `}>
4854
<ul className="ml-[9px] flex flex-row gap-[4px]">
4955
{[0, 1, 2].map((list) => (
5056
<li key={list} className="bg-white h-[4px] w-[4px] rounded-full" />
@@ -79,10 +85,7 @@ const FriednsScheduleCard = ({ schedules }) => {
7985
<div className="flex -space-x-5 overflow-hidden ">
8086
{invitees.map((list, index) => {
8187
return (
82-
<div
83-
key={index}
84-
className="flex rounded-full border-white border-2"
85-
>
88+
<div key={index} className="flex rounded-full border-white border-2">
8689
<img
8790
className="inline-block h-[40px] w-[40px] rounded-full"
8891
src={list.profile}
@@ -92,16 +95,14 @@ const FriednsScheduleCard = ({ schedules }) => {
9295
);
9396
})}
9497
</div>
95-
<div className="flex items-center text-[#6F6F6F]">
96-
{inviteesList.inviteesList}
97-
</div>
98+
<div className="flex items-center text-[#6F6F6F]">{inviteesList.inviteesList}</div>
9899
</div>
99100
</div>
100101
</div>
101102
</div>
102103
</div>
103104
</div>
104-
</div>
105+
</motion.div>
105106
);
106107
};
107108

‎src/components/main/FriendsMain.jsx

+8-32
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useEffect, useLayoutEffect, useState } from "react";
1+
import React, { useLayoutEffect, useState } from "react";
22
import { useDispatch } from "react-redux";
33
import { useParams } from "react-router-dom";
44
import { instance } from "../../shared/AxiosInstance";
@@ -50,26 +50,15 @@ const FriendsMain = () => {
5050
<div className="mt-[30px] w-full h-[80px] bg-[#FFFFFF] rounded-[10px] drop-shadow-lg">
5151
<div className="flex flex-row gap-[10px]">
5252
<div className="p-[10px]">
53-
<img
54-
className="h-[60px] w-[60px] rounded-full"
55-
src={friendImg}
56-
alt="프로필이미지"
57-
/>
53+
<img className="h-[60px] w-[60px] rounded-full" src={friendImg} alt="프로필이미지" />
5854
</div>
5955
<div className="flex items-center">
60-
<p className="p-[10px] font-[700] text-[20px] text-textNavy">
61-
{friendName}님의 스케쥴입니다!
62-
</p>
56+
<p className="p-[10px] font-[700] text-[20px] text-textNavy">{friendName}님의 스케쥴입니다!</p>
6357
</div>
6458
</div>
6559
<div className="flex flex-col gap-[30px] mt-[28px] rounded-[10px]">
6660
{schedule?.map((list) => {
67-
return (
68-
<FriednsScheduleCard
69-
key={list.eventId}
70-
schedules={list}
71-
/>
72-
);
61+
return <FriednsScheduleCard key={list.eventId} schedules={list} />;
7362
})}
7463
</div>
7564
</div>
@@ -78,27 +67,17 @@ const FriendsMain = () => {
7867
<div className="mt-[30px] w-full h-[80px] bg-[#FFFFFF] rounded-[10px] drop-shadow-lg">
7968
<div className="flex flex-row gap-[10px] ">
8069
<div className="p-[10px]">
81-
<img
82-
className="h-[60px] w-[60px] rounded-full"
83-
src={friendImg}
84-
alt="프로필이미지"
85-
/>
70+
<img className="h-[60px] w-[60px] rounded-full" src={friendImg} alt="프로필이미지" />
8671
</div>
8772
<div className="flex items-center">
88-
<p className="p-[10px] font-bold text-[20px]">
89-
{friendName}님
90-
</p>
73+
<p className="p-[10px] font-bold text-[20px]">{friendName}님</p>
9174
<div className="ml-[55px] mb-[20px]">
9275
{button ? (
9376
<div
9477
onClick={refresh}
9578
className="flex items-center w-[90px] mx-auto h-[39px] justify-center mt-[20px] rounded-[4px] text-white bg-[#FFFFFF] cursor-pointer"
9679
>
97-
<img
98-
src={refreshIcon}
99-
alt="새로고침"
100-
className="h-[26px]"
101-
/>
80+
<img src={refreshIcon} alt="새로고침" className="h-[26px]" />
10281
</div>
10382
) : (
10483
<div
@@ -118,10 +97,7 @@ const FriendsMain = () => {
11897
/>
11998
<div className="text-[22px] mt-[40px] font-extralight text-center">
12099
현재
121-
<span className="font-black ml-[3px]">
122-
팔로우 하고있지 않은
123-
</span>{" "}
124-
유저예요.
100+
<span className="font-black ml-[3px]">팔로우 하고있지 않은</span> 유저예요.
125101
<br />
126102
<div className="text-[22px] mt-[5px] text-center">
127103
{friendName}님의 스케쥴을 확인하시려면 <br />

‎src/components/main/Main.jsx

+5-15
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
11
import React, { useState, useEffect } from "react";
22
import { useDispatch, useSelector } from "react-redux";
3-
import {
4-
mainScheduleReset,
5-
__getSchedule,
6-
} from "../../redux/modules/ScheduleSlice";
3+
import { mainScheduleReset, __getSchedule } from "../../redux/modules/ScheduleSlice";
74
import MainScheduleCards from "./MainScheduleCards";
85
import BottomNavi from "../layout/BottomNavi";
96
import desc from "../../img/desc.png";
107
import SelectorSort from "../modal/SelectorSort";
8+
import { motion } from "framer-motion";
119

1210
const Main = () => {
1311
const dispatch = useDispatch();
@@ -49,11 +47,7 @@ const Main = () => {
4947
className="bg-white flex gap-[6px] p-[10px] text-center items-center h-[40px] border border-solid border-[#E8E8E8] rounded-[39px] shadow-md"
5048
>
5149
<div className="shadow-sm">
52-
<img
53-
src={desc}
54-
className="h-[15.5px] w-[13.54px]"
55-
alt="화살표모양, 오름차순정렬"
56-
/>
50+
<img src={desc} className="h-[15.5px] w-[13.54px]" alt="화살표모양, 오름차순정렬" />
5751
</div>
5852
<div>{sortList} 순</div>
5953
</div>
@@ -62,9 +56,7 @@ const Main = () => {
6256
{/* <InfiniteScroll /> */}
6357
<div className="flex flex-col gap-[30px] rounded-[10px] ">
6458
{schedules?.map((list) => {
65-
return (
66-
<MainScheduleCards key={list.eventId} schedules={list} />
67-
);
59+
return <MainScheduleCards key={list.eventId} schedules={list}></MainScheduleCards>;
6860
})}
6961
</div>
7062
</div>
@@ -73,9 +65,7 @@ const Main = () => {
7365
<div className="fixed bottom-0">
7466
{modalOpen ? false : <BottomNavi />}
7567
{/* <BottomNavi /> */}
76-
{modalOpen && (
77-
<SelectorSort setModalOpen={setModalOpen} sortList={sortList} />
78-
)}
68+
{modalOpen && <SelectorSort setModalOpen={setModalOpen} sortList={sortList} />}
7969
</div>
8070
</>
8171
);

‎src/components/main/MainScheduleCards.jsx

+16-15
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React, { useState } from "react";
22
import { useEffect } from "react";
33
import { useLocation, useNavigate } from "react-router-dom";
4+
import { motion } from "framer-motion";
45

56
const MainScheduleCards = ({ schedules }) => {
67
const navigate = useNavigate();
@@ -28,9 +29,7 @@ const MainScheduleCards = ({ schedules }) => {
2829
if (invitees.length > 1) {
2930
setInviteesList(() => ({
3031
hidden: false,
31-
inviteesList: `${schedules.invitees[0].username}외 ${
32-
invitees.length - 1
33-
}명`,
32+
inviteesList: `${schedules.invitees[0].username}외 ${invitees.length - 1}명`,
3433
}));
3534
}
3635
}, [invitees, schedules.invitees]);
@@ -40,13 +39,20 @@ const MainScheduleCards = ({ schedules }) => {
4039
};
4140

4241
return (
43-
<div
42+
<motion.div
43+
initial={{ opacity: 0, scale: 0.2 }}
44+
animate={{ opacity: 1, scale: 1 }}
45+
transition={{
46+
duration: 0.8,
47+
delay: 0.5,
48+
ease: [0, 0.71, 0.2, 1.01],
49+
}}
50+
whileHover={{ scale: 1.1, transition: { type: "spring", stiffness: 400, damping: 10 } }}
51+
whileTap={{ scale: 1.1 }}
4452
onClick={onDetail}
4553
className={`w-[335px] h-[180px] bg-white rounded-[10px] border border-solid border-[#E8E8E8] shadow-md cursor-pointer`}
4654
>
47-
<div
48-
className={`flex items-center h-[14px] ${bgColor} rounded-t-[10px] `}
49-
>
55+
<div className={`flex items-center h-[14px] ${bgColor} rounded-t-[10px] `}>
5056
<ul className="ml-[9px] flex flex-row gap-[4px]">
5157
{[0, 1, 2].map((list) => (
5258
<li key={list} className="bg-white h-[4px] w-[4px] rounded-full" />
@@ -85,10 +91,7 @@ const MainScheduleCards = ({ schedules }) => {
8591
<div className="flex -space-x-8 overflow-hidden ">
8692
{invitees?.map((list, index) => {
8793
return (
88-
<div
89-
key={index}
90-
className="flex border-2 border-white rounded-full"
91-
>
94+
<div key={index} className="flex border-2 border-white rounded-full">
9295
<img
9396
className="inline-block h-[40px] w-[40px] rounded-full"
9497
src={list.profile}
@@ -98,16 +101,14 @@ const MainScheduleCards = ({ schedules }) => {
98101
);
99102
})}
100103
</div>
101-
<div className="flex items-center text-[#6F6F6F]">
102-
{inviteesList.inviteesList}
103-
</div>
104+
<div className="flex items-center text-[#6F6F6F]">{inviteesList.inviteesList}</div>
104105
</div>
105106
</div>
106107
</div>
107108
</div>
108109
</div>
109110
</div>
110-
</div>
111+
</motion.div>
111112
);
112113
};
113114

0 commit comments

Comments
 (0)