Skip to content

Commit 176e6a9

Browse files
nidor022nidor022
authored
Merge pull request #126 from nidor022/feature/#107
[#107] api호출 error시 toast띄우기
2 parents a94584b + dd341f1 commit 176e6a9

File tree

4 files changed

+110
-14
lines changed

4 files changed

+110
-14
lines changed

‎src/pages/create-post-page.jsx‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ import BackgroundSelect from "../components/option/background-select";
1111
import TextField from "../components/text-field/text-field";
1212
import TEXT_FIELD_TYPE from "../components/text-field/text-field-type";
1313
import { media } from "../utils/media";
14+
import Toast from "../components/toast/toast";
15+
import { useToast } from "../hooks/use-toast";
1416

1517
const PostContainer = styled.div`
1618
display: flex;
@@ -77,8 +79,15 @@ function CreatePostPage() {
7779
const [selected, setSelected] = useState(0);
7880
const [backgroundUrls, setBackgroundUrls] = useState([]);
7981
const [loading, setLoading] = useState(false);
82+
const [toastMessage, setToastMessage] = useState();
8083
const navigate = useNavigate();
8184

85+
const { showsToast, isOpen, setShowsToast, onDismiss } = useToast({
86+
timeout: 5000,
87+
});
88+
89+
const handleToastCloseClick = () => setShowsToast(false);
90+
8291
const colorOptions = [
8392
{ label: "beige", color: BACKGROUND_COLOR.beige },
8493
{ label: "purple", color: BACKGROUND_COLOR.purple },
@@ -137,7 +146,8 @@ function CreatePostPage() {
137146
navigate(`/post/${newPostId}`);
138147
} catch (error) {
139148
console.error("게시물 생성 실패:", error);
140-
alert("게시물 생성에 실패했습니다. 다시 시도해 주세요");
149+
setToastMessage("게시물 생성에 실패했습니다. 다시 시도해 주세요.")
150+
setShowsToast(true);
141151
} finally {
142152
setLoading(false);
143153
}
@@ -189,6 +199,15 @@ function CreatePostPage() {
189199
onClick={handleCreate}
190200
/>
191201
</ButtonWrapper>
202+
203+
{showsToast&&
204+
<Toast
205+
isOpen={isOpen}
206+
message={`${toastMessage} 🚨`}
207+
onClose={handleToastCloseClick}
208+
onDismiss={onDismiss}
209+
/>
210+
}
192211
</PostContainer>
193212
);
194213
}

‎src/pages/messages-page.jsx‎

Lines changed: 34 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,8 @@ import { useMedia } from "../hooks/use-media";
2525
import { useModalDialog } from "../hooks/use-modal-dialog";
2626
import ContentLayout from "../layouts/content-layout";
2727
import { media } from "../utils/media";
28+
import Toast from "../components/toast/toast";
29+
import { useToast } from "../hooks/use-toast";
2830

2931
const Content = styled.div`
3032
& > div {
@@ -111,6 +113,8 @@ function MessagesPage() {
111113
onPrimaryAction,
112114
onDismissDialog,
113115
} = useModalDialog();
116+
const [toastMessage, setToastMessage] = useState();
117+
const [hasMoreMessages, setHasMoreMessages] = useState(true);
114118

115119
const isEditing = useMemo(
116120
() => location.pathname.includes("edit"),
@@ -121,6 +125,12 @@ function MessagesPage() {
121125
navigate("edit");
122126
};
123127

128+
const { showsToast, isOpen, setShowsToast, onDismiss } = useToast({
129+
timeout: 5000,
130+
});
131+
132+
const handleToastCloseClick = () => setShowsToast(false);
133+
124134
const handleRollingPaperDelete = () => {
125135
openDialog({
126136
title: `${recipient.name} 님의 롤링 페이퍼를 삭제할까요?`,
@@ -130,8 +140,9 @@ function MessagesPage() {
130140
await deleteRecipient({ id: recipient.id });
131141
navigate(`/list`);
132142
} catch (error) {
133-
// TODO: Error 처리
134143
console.log(error);
144+
setToastMessage(error);
145+
setShowsToast(true);
135146
}
136147
},
137148
});
@@ -152,8 +163,9 @@ function MessagesPage() {
152163
prev.filter((prevMessage) => prevMessage.id !== message.id)
153164
);
154165
} catch (error) {
155-
// TODO: Error 처리
156166
console.log(error);
167+
setToastMessage(error);
168+
setShowsToast(true);
157169
}
158170
},
159171
});
@@ -168,8 +180,11 @@ function MessagesPage() {
168180
};
169181

170182
const handleInfiniteScroll = async () => {
171-
const messages = await getNextPageMessages();
172-
if (!messages) return;
183+
if (!hasMoreMessages) return;
184+
185+
try {
186+
const messages = await getNextPageMessages();
187+
if (!messages) return;
173188

174189
setMessages((prev) => {
175190
const newMessages = [...prev];
@@ -181,6 +196,12 @@ function MessagesPage() {
181196

182197
return newMessages;
183198
});
199+
} catch(error) {
200+
console.error(error);
201+
setToastMessage(error);
202+
setShowsToast(true);
203+
setHasMoreMessages(false);
204+
}
184205
};
185206

186207
useEffect(() => {
@@ -271,6 +292,15 @@ function MessagesPage() {
271292
}
272293
/>
273294
</Modal>
295+
296+
{showsToast&&
297+
<Toast
298+
isOpen={isOpen}
299+
message={`${toastMessage} 🚨`}
300+
onClose={handleToastCloseClick}
301+
onDismiss={onDismiss}
302+
/>
303+
}
274304
</ContentLayout>
275305
);
276306
}

‎src/pages/rolling-paper-list-page.jsx‎

Lines changed: 36 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ import BUTTON_SIZE from "../components/button/button-size";
77
import RollingPaperList from "../features/rolling-paper/components/rolling-paper-list";
88
import { useMedia } from "../hooks/use-media";
99
import { media } from "../utils/media";
10+
import Toast from "../components/toast/toast";
11+
import { useToast } from "../hooks/use-toast";
1012

1113
const TopContainer = styled.div`
1214
text-align: center;
@@ -71,16 +73,24 @@ function getCachedImage(url) {
7173
return cache[url].src;
7274
}
7375

74-
function RollingPaperListPage() {
75-
const navigate = useNavigate();
7676

77+
function RollingPaperListPage() {
7778
const [recipientsData, setRecipientsData] = useState([]);
7879
const [popularDataList, setPopularDataList] = useState([]);
7980
const [recentDataList, setRecentDataList] = useState([]);
8081
const [popularCurrentPage, setPopularCurrentPage] = useState(0);
8182
const [recentCurrentPage, setRecentCurrentPage] = useState(0);
8283
const [cardCount, setCardCount] = useState(4);
8384
const { isDesktop } = useMedia();
85+
const [isCalledApi, setIsCalledApi] = useState(true);
86+
const [toastMessage, setToastMessage] = useState();
87+
const navigate = useNavigate();
88+
89+
const { showsToast, isOpen, setShowsToast, onDismiss } = useToast({
90+
timeout: 5000,
91+
});
92+
93+
const handleToastCloseClick = () => setShowsToast(false);
8494

8595
useEffect(() => {
8696
isDesktop ? setCardCount(4) : setCardCount(null);
@@ -90,16 +100,24 @@ function RollingPaperListPage() {
90100
navigate("/post");
91101
};
92102

103+
93104
useEffect(() => {
94-
apiClient
95-
.get("/recipients/")
96-
.then((res) => {
105+
if (!isCalledApi) return;
106+
107+
const fetchData = async () => {
108+
try {
109+
const res = await apiClient.get("/recipients/");
97110
setRecipientsData(res.data.results);
98-
})
99-
.catch((err) => {
111+
} catch (err) {
100112
console.error("오류:", err);
101-
});
102-
}, []);
113+
setToastMessage("메시지를 가져오는 중 오류가 발생했어요.")
114+
setShowsToast(true);
115+
} finally {
116+
setIsCalledApi(false);
117+
}
118+
};
119+
fetchData();
120+
}, [isCalledApi, setShowsToast]);
103121

104122
useEffect(() => {
105123
recipientsData.forEach((data) => {
@@ -183,6 +201,15 @@ function RollingPaperListPage() {
183201
onClick={handleMakingButton}
184202
/>
185203
</ButtonFooter>
204+
205+
{showsToast&&
206+
<Toast
207+
isOpen={isOpen}
208+
message={`${toastMessage} 🚨`}
209+
onClose={handleToastCloseClick}
210+
onDismiss={onDismiss}
211+
/>
212+
}
186213
</TopContainer>
187214
);
188215
}

‎src/pages/send-message-page.jsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ import TextEditor from "../components/text-editor/text-editor";
1212
import TextField from "../components/text-field/text-field";
1313
import TEXT_FIELD_TYPE from "../components/text-field/text-field-type";
1414
import { media } from "../utils/media";
15+
import Toast from "../components/toast/toast";
16+
import { useToast } from "../hooks/use-toast";
1517

1618
const SendContainer = styled.div`
1719
display: flex;
@@ -110,8 +112,15 @@ function SendMessagePage() {
110112
title: "Noto Sans",
111113
fontFamily: "Noto Sans",
112114
});
115+
const [toastMessage, setToastMessage] = useState();
113116
const navigate = useNavigate();
114117

118+
const { showsToast, isOpen, setShowsToast, onDismiss } = useToast({
119+
timeout: 5000,
120+
});
121+
122+
const handleToastCloseClick = () => setShowsToast(false);
123+
115124
const handleChange = (e) => {
116125
const value = e.target.value;
117126
setName(value);
@@ -169,6 +178,8 @@ function SendMessagePage() {
169178
navigate(`/post/${recipientId}`);
170179
} catch (error) {
171180
console.error("메시지 저장 실패:", error);
181+
setToastMessage("메시지를 저장하는 중 오류가 발생했어요.")
182+
setShowsToast(true);
172183
}
173184
};
174185

@@ -264,6 +275,15 @@ function SendMessagePage() {
264275
onClick={handleCreate}
265276
/>
266277
</ButtonWrapper>
278+
279+
{showsToast&&
280+
<Toast
281+
isOpen={isOpen}
282+
message={`${toastMessage} 🚨`}
283+
onClose={handleToastCloseClick}
284+
onDismiss={onDismiss}
285+
/>
286+
}
267287
</SendContainer>
268288
);
269289
}

0 commit comments

Comments
 (0)