diff --git a/src/Main/components/DetailModal.tsx b/src/Main/components/DetailModal.tsx
index 851a03d..b63a44a 100644
--- a/src/Main/components/DetailModal.tsx
+++ b/src/Main/components/DetailModal.tsx
@@ -11,6 +11,7 @@ import {
Box,
Flex,
useBreakpointValue,
+ useToast,
} from "@chakra-ui/react";
import api from "../../api/interceptor";
@@ -35,12 +36,41 @@ interface DetailModalProps {
}
const DetailModal = ({ isOpen, onClose, content }: DetailModalProps) => {
+ const toast = useToast();
+
+ // 훅을 최상단에 배치
+ const textFontSize = useBreakpointValue({ base: "sm", md: "md" });
+ const headerFontSize = useBreakpointValue({ base: "lg", md: "xl" });
+ const buttonSize = useBreakpointValue({ base: "sm", md: "md" });
+ const modalWidth = useBreakpointValue({ base: "90%", md: "500px" });
+
if (!content) return null;
const handleLikeDislike = async (isLike: boolean) => {
try {
await api.post(`/api/like/${content.id}/${isLike}`);
- console.log(isLike ? "좋아요 요청 성공" : "싫어요 요청 성공");
+ toast({
+ title: isLike ? "좋아요를 눌렀어요!" : "싫어요를 눌렀어요!",
+ description: "이제 추천 콘텐츠 결과에 반영됩니다.",
+ duration: 3000,
+ isClosable: true,
+ position: "top",
+ render: () => (
+
+
+ {isLike ? "좋아요를 눌렀어요!" : "싫어요를 눌렀어요!"}
+
+ 이제 추천 콘텐츠 결과에 반영됩니다.
+
+ ),
+ });
} catch (error) {
console.error("좋아요/싫어요 요청 중 오류 발생:", error);
}
@@ -48,13 +78,28 @@ const DetailModal = ({ isOpen, onClose, content }: DetailModalProps) => {
const handleWatchAndNavigate = async () => {
try {
- // 시청 기록 저장 API 호출
await api.post(`/api/watch/${content.id}`);
- console.log("시청 기록 저장 요청 성공");
+ toast({
+ duration: 3000,
+ isClosable: true,
+ position: "top",
+ render: () => (
+
+ 시청기록에 등록되었어요!
+ 이제 추천 콘텐츠 결과에 반영됩니다.
+
+ ),
+ });
} catch (error) {
console.error("시청 기록 저장 요청 중 오류 발생:", error);
} finally {
- // 넷플릭스로 이동
window.open(
"https://www.netflix.com/kr/",
"_blank",
@@ -63,12 +108,6 @@ const DetailModal = ({ isOpen, onClose, content }: DetailModalProps) => {
}
};
- // 반응형 스타일 설정
- const textFontSize = useBreakpointValue({ base: "sm", md: "md" });
- const headerFontSize = useBreakpointValue({ base: "lg", md: "xl" });
- const buttonSize = useBreakpointValue({ base: "sm", md: "md" });
- const modalWidth = useBreakpointValue({ base: "90%", md: "500px" });
-
return (