Skip to content

Commit 3cf6a05

Browse files
BeanMouseBeanMouse
authored
[Feat] 디자인 수정 및 api 수정 (#72)
* feat:api 수정 * feat:디자인 수정 * feat:디자인 수정 * feat:api 연결
1 parent 3cdd85b commit 3cf6a05

19 files changed

Lines changed: 148 additions & 101 deletions

File tree

‎src/assets/images/map/map1.png‎

333 KB
Loading

‎src/assets/images/map/map2.png‎

333 KB
Loading

‎src/assets/images/map/map3.png‎

332 KB
Loading

‎src/assets/images/map/map4.png‎

331 KB
Loading

‎src/components/bottom-sheet/BottomSheet.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -308,7 +308,7 @@ const BottomSheet: React.FC<{ setIsModalOpen: (isOpen: boolean) => void }> = ({
308308
</div>
309309
<div className="flex flex-col mt-4 h-2 w-full rounded-lg gap-1 text-body-sb bg-gray-200 text-black relative">
310310
<div
311-
className="absolute top-0 left-0 h-full bg-primary-font rounded-l-lg"
311+
className="absolute top-0 left-0 h-full bg-primary-font rounded-lg"
312312
style={{ width: `${percent}%` }}
313313
/>
314314
</div>

‎src/components/common/Toast.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export default function Toast({
2424

2525
return (
2626
<div
27-
className={`z-60 flex justify-between items-center fixed top-10 left-1/2 max-w-[90vw] w-full -translate-x-1/2 rounded-sm text-black px-4 py-2 bg-white transition-all duration-300 ${
27+
className={`z-60 flex justify-between items-center fixed bottom-[10vh] left-1/2 max-w-[90vw] w-full -translate-x-1/2 rounded-sm text-black px-4 py-2 bg-white transition-all duration-300 ${
2828
visible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-3"
2929
}`}
3030
>

‎src/components/home/Avatar.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ const Avatar = ({
8686
<div className="balloon-wrapper text-body-sb z-45">
8787
<>
8888
<div
89-
className={`balloon balloon-center text-body-sb gap-4 flex flex-col py-5 px-6 min-w-50 ${
89+
className={`balloon balloon-center text-body-sb gap-4 flex flex-col py-5 px-6 min-w-50 ${
9090
isAnswered
9191
? "bg-transparent after:border-transparent text-transparent"
9292
: "text-black bg-white after:border-l-transparent after:border-b-transparent after:border-r-transparent after:border-t-white"
@@ -105,9 +105,9 @@ const Avatar = ({
105105
<div
106106
className={`${
107107
isChecked > 0 ? "hidden" : "block"
108-
} text-black`}
108+
} text-black `}
109109
>
110-
<div>
110+
<div className="pb-4">
111111
오늘도 만나서 정말 반가워요!
112112
<br />
113113
괜찮으시다면 오늘 하루는 어떠셨는지
@@ -159,7 +159,7 @@ const Avatar = ({
159159
)}
160160
{isToastOpen2 && (
161161
<Toast
162-
message="물 주기(오전 12시) 햇빛 주기(오전 6시)에 초기화 됩니다."
162+
message="물(오전 12시) 햇빛(오전 6시)에 초기화 됩니다."
163163
onClose={isClose => setIsToastOpen2(isClose)}
164164
/>
165165
)}

‎src/components/home/BirdModal.tsx‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const BirdModal = ({ setIsOpen }: Props) => {
1414
return (
1515
<Modal setIsOpen={setIsOpen}>
1616
<img
17-
className="w-12 h-auto absolute bottom-32 left-0"
17+
className="w-16 h-auto absolute bottom-45 left-0"
1818
src={Bird}
1919
alt="bird"
2020
/>
@@ -37,6 +37,16 @@ const BirdModal = ({ setIsOpen }: Props) => {
3737
기록
3838
</div>
3939
</div>
40+
{isRecord && (
41+
<div className="text-body2 text-gray-400 text-center">
42+
아직 방문한 친구들이 없어요!
43+
</div>
44+
)}
45+
{!isRecord && (
46+
<div className="text-body2 text-gray-400 text-center">
47+
아직 기록이 없어요!
48+
</div>
49+
)}
4050
</Modal>
4151
);
4252
};

‎src/components/home/FirstPlant.tsx‎

Lines changed: 49 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -36,36 +36,42 @@ const FirstPlant = ({
3636

3737
const [isToastOpen, setIsToastOpen] = useState(false);
3838
const [isToastOpen2, setIsToastOpen2] = useState(false);
39+
const [isToastOpen3, setIsToastOpen3] = useState(false);
3940

4041
const [message, setMessage] = useState("");
4142

4243
const handleSunLight = async () => {
4344
// 이미 애니메이션 중이면 무시
4445
if (isSunLight) return;
4546
if (!isAbleSunLight) {
46-
setIsToastOpen2(true);
47+
setIsToastOpen3(true);
4748
return;
4849
}
4950
try {
5051
const res = await axios.post(
5152
`/api/v1/gardens/${garden?.gardenId}/sunlight`
5253
);
54+
if (res.status === 202) {
55+
setIsToastOpen3(true);
56+
return;
57+
} else {
58+
setIsSunLight(true);
59+
// 기존 타이머 클리어
60+
if (timerRef.current) {
61+
clearTimeout(timerRef.current);
62+
timerRef.current = null;
63+
}
64+
65+
// 1초 후 꺼지게
66+
timerRef.current = window.setTimeout(() => {
67+
setIsSunLight(false);
68+
timerRef.current = null;
69+
}, 1000);
70+
}
5371
console.log(res);
54-
setIsSunLight(true);
72+
5573
setIsAbleSunLight(false);
5674
setIsWater(false);
57-
58-
// 기존 타이머 클리어
59-
if (timerRef.current) {
60-
clearTimeout(timerRef.current);
61-
timerRef.current = null;
62-
}
63-
64-
// 1초 후 꺼지게
65-
timerRef.current = window.setTimeout(() => {
66-
setIsSunLight(false);
67-
timerRef.current = null;
68-
}, 1000);
6975
} catch (error) {
7076
if (error instanceof AxiosError) {
7177
setMessage(error.response?.data.message);
@@ -92,20 +98,28 @@ const FirstPlant = ({
9298
`/api/v1/gardens/${garden?.gardenId}/mywater`
9399
);
94100
console.log(res);
95-
setIsAbleWater(false);
96-
setIsWater(true);
97101
setIsSunLight(false);
98-
// 기존 타이머 클리어
99-
if (timerRef.current) {
100-
clearTimeout(timerRef.current);
101-
timerRef.current = null;
102-
}
102+
setIsAbleWater(false);
103103

104-
// 1초 후 꺼지게
105-
timerRef.current = window.setTimeout(() => {
106-
setIsWater(false);
107-
timerRef.current = null;
108-
}, 1000);
104+
if (res.status === 202) {
105+
setIsToastOpen2(true);
106+
return;
107+
} else {
108+
setIsAbleWater(false);
109+
setIsWater(true);
110+
111+
// 기존 타이머 클리어
112+
if (timerRef.current) {
113+
clearTimeout(timerRef.current);
114+
timerRef.current = null;
115+
}
116+
117+
// 1초 후 꺼지게
118+
timerRef.current = window.setTimeout(() => {
119+
setIsWater(false);
120+
timerRef.current = null;
121+
}, 1000);
122+
}
109123
} catch (error) {
110124
if (error instanceof AxiosError) {
111125
setMessage(error.response?.data.message);
@@ -127,9 +141,9 @@ const FirstPlant = ({
127141
}}
128142
/>
129143

130-
<div className="relative z-20 flex h-full w-full flex-col items-center justify-center">
144+
<div className="relative z-20 flex h-full w-full flex-col items-center justify-center ">
131145
<header className="relative flex w-full items-center justify-between p-4 text-heading1 text-white">
132-
<Map isNumber={3} />
146+
<Map isNumber={1} />
133147
{garden?.avatar.avatarName}
134148
<div className="h-12 w-12" />
135149
</header>
@@ -169,10 +183,16 @@ const FirstPlant = ({
169183
)}
170184
{isToastOpen2 && (
171185
<Toast
172-
message="물 주기(오전 12시) 햇빛 주기(오전 6시)에 초기화 됩니다."
186+
message="물 주기는 오전 12시에 초기화 됩니다"
173187
onClose={() => setIsToastOpen2(false)}
174188
/>
175189
)}
190+
{isToastOpen3 && (
191+
<Toast
192+
message="햇빛 주기는 오전 6시에 초기화 됩니다"
193+
onClose={() => setIsToastOpen3(false)}
194+
/>
195+
)}
176196
{message && <Toast message={message} onClose={() => setMessage("")} />}
177197
</div>
178198
);

‎src/components/home/FourthPlant.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,9 @@ const FourthPlant = ({
1919
isOpen: boolean;
2020
garden: GardenSummary | null;
2121
}) => {
22-
const [isUnlocked, setIsUnlocked] = useState<BottomSheetType>("lock");
22+
const [isUnlocked, setIsUnlocked] = useState<BottomSheetType>(
23+
garden?.locked ? "lock" : "unlock"
24+
);
2325
return (
2426
<div
2527
className="w-full h-full flex flex-col relative items-center justify-center bg-cover bg-center bg-no-repeat"
@@ -44,6 +46,7 @@ const FourthPlant = ({
4446
<button
4547
onClick={() => setIsUnlocked("unlock")}
4648
className={`m-4 text-white bg-gray-400 p-3 text-body2 rounded-lg`}
49+
disabled={garden?.locked}
4750
>
4851
충분하지 않아요
4952
</button>

0 commit comments

Comments
 (0)