From 781a983780041819b154da2ed3fe2e97683624ac Mon Sep 17 00:00:00 2001
From: kiyeong <kjr07145@gmail.com>
Date: Tue, 3 Dec 2024 01:14:34 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=B6=94=EC=B2=9C=20=EC=8B=9C=20?=
 =?UTF-8?q?=EB=A1=9C=EB=94=A9=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Main/components/DetailModal.tsx | 264 ++++++++++++++++------------
 1 file changed, 149 insertions(+), 115 deletions(-)

diff --git a/src/Main/components/DetailModal.tsx b/src/Main/components/DetailModal.tsx
index ff9aee9..2950c1d 100644
--- a/src/Main/components/DetailModal.tsx
+++ b/src/Main/components/DetailModal.tsx
@@ -14,6 +14,8 @@ import {
   Divider,
   Select,
   Textarea,
+  Center,
+  Spinner,
   Flex,
 } from "@chakra-ui/react";
 import { useState, useEffect } from "react";
@@ -51,6 +53,7 @@ const DetailModal = ({ isOpen, onClose, content }: DetailModalProps) => {
   const [friends, setFriends] = useState<any[]>([]); // 친구 목록
   const [selectedFriend, setSelectedFriend] = useState<string>(""); // 선택된 친구 이메일
   const [recommendReason, setRecommendReason] = useState<string>(""); // 추천 이유
+  const [isLoading, setIsLoading] = useState<boolean>(false); // 로딩 상태 관리
 
   useEffect(() => {
     if (isOpen) {
@@ -83,6 +86,8 @@ const DetailModal = ({ isOpen, onClose, content }: DetailModalProps) => {
     }
 
     try {
+      setIsLoading(true); // 로딩 상태 시작
+
       const selectedFriendObj = friends.find(
         (friend) => friend.friendEmail === selectedFriend
       );
@@ -97,12 +102,22 @@ const DetailModal = ({ isOpen, onClose, content }: DetailModalProps) => {
       );
 
       toast({
-        title: "추천 성공",
-        description: `${selectedFriendObj.friendName}님에게 콘텐츠를 추천했습니다!`,
-        status: "success",
+        position: "top",
         duration: 1500,
         isClosable: true,
-        position: "top",
+        render: () => (
+          <Box
+            color="black"
+            bg="yellow.400"
+            borderRadius="8px"
+            p="10px"
+            textAlign="left"
+            fontWeight="bold"
+          >
+            추천 성공🎉<br />
+            {`${selectedFriendObj.friendName}님에게 추천 카톡메세지를 보냈어요!`}
+          </Box>
+        ),
       });
 
       // 초기화
@@ -119,6 +134,8 @@ const DetailModal = ({ isOpen, onClose, content }: DetailModalProps) => {
         isClosable: true,
         position: "top",
       });
+    } finally {
+      setIsLoading(false); // 로딩 상태 종료
     }
   };
 
@@ -157,126 +174,143 @@ const DetailModal = ({ isOpen, onClose, content }: DetailModalProps) => {
     }
   };
 
+  // 로딩 상태의 모달
+  const LoadingModal = () => (
+    <Modal isOpen={isLoading} onClose={() => {}} isCentered>
+      <ModalOverlay />
+      <ModalContent bg="transparent" boxShadow="none">
+        <Center>
+          <Spinner size="xl" thickness="4px" color="blue.500" />
+        </Center>
+      </ModalContent>
+    </Modal>
+  );
+
   if (!content) return null;
 
   return (
-    <Modal isOpen={isOpen} onClose={onClose} isCentered>
-      <ModalOverlay />
-      <ModalContent
-        width={modalWidth}
-        maxHeight="80vh" // 최대 높이 80% 설정
-        overflowY="auto" // 스크롤 활성화
-        sx={{
-          "&::-webkit-scrollbar": {
-            width: "6px", // 스크롤바 폭
-          },
-          "&::-webkit-scrollbar-thumb": {
-            background: "gray.400",
-            borderRadius: "10px",
-          },
-        }}
-      >
-        <ModalCloseButton />
-        <ModalHeader pr="40px" fontSize={headerFontSize}>
-          {content.title}
-        </ModalHeader>
-        <ModalBody>
-          <Box>
-            <Text fontSize={textFontSize}>
-              <strong>Type:</strong> {content.type}
-            </Text>
-            <Text fontSize={textFontSize}>
-              <strong>Director:</strong> {content.director}
-            </Text>
-            <Text fontSize={textFontSize}>
-              <strong>Cast:</strong> {content.cast}
-            </Text>
-            <Text fontSize={textFontSize}>
-              <strong>Country:</strong> {content.country}
-            </Text>
-            <Text fontSize={textFontSize}>
-              <strong>Date Added:</strong> {content.dateAdded}
-            </Text>
-            <Text fontSize={textFontSize}>
-              <strong>Release Year:</strong> {content.releaseYear}
-            </Text>
-            <Text fontSize={textFontSize}>
-              <strong>Rating:</strong> {content.rating}
-            </Text>
-            <Text fontSize={textFontSize}>
-              <strong>Duration:</strong> {content.duration}
-            </Text>
-            <Text fontSize={textFontSize}>
-              <strong>Genres:</strong> {content.listedIn}
-            </Text>
-            <Text fontSize={textFontSize}>
-              <strong>Description:</strong> {content.description}
+    <>
+      {/* 로딩 모달 */}
+      {isLoading && <LoadingModal />}
+
+      <Modal isOpen={isOpen} onClose={onClose} isCentered>
+        <ModalOverlay />
+        <ModalContent
+          width={modalWidth}
+          maxHeight="80vh" // 최대 높이 80% 설정
+          overflowY="auto" // 스크롤 활성화
+          sx={{
+            "&::-webkit-scrollbar": {
+              width: "6px", // 스크롤바 폭
+            },
+            "&::-webkit-scrollbar-thumb": {
+              background: "gray.400",
+              borderRadius: "10px",
+            },
+          }}
+        >
+          <ModalCloseButton />
+          <ModalHeader pr="40px" fontSize={headerFontSize}>
+            {content.title}
+          </ModalHeader>
+          <ModalBody>
+            <Box>
+              <Text fontSize={textFontSize}>
+                <strong>Type:</strong> {content.type}
+              </Text>
+              <Text fontSize={textFontSize}>
+                <strong>Director:</strong> {content.director}
+              </Text>
+              <Text fontSize={textFontSize}>
+                <strong>Cast:</strong> {content.cast}
+              </Text>
+              <Text fontSize={textFontSize}>
+                <strong>Country:</strong> {content.country}
+              </Text>
+              <Text fontSize={textFontSize}>
+                <strong>Date Added:</strong> {content.dateAdded}
+              </Text>
+              <Text fontSize={textFontSize}>
+                <strong>Release Year:</strong> {content.releaseYear}
+              </Text>
+              <Text fontSize={textFontSize}>
+                <strong>Rating:</strong> {content.rating}
+              </Text>
+              <Text fontSize={textFontSize}>
+                <strong>Duration:</strong> {content.duration}
+              </Text>
+              <Text fontSize={textFontSize}>
+                <strong>Genres:</strong> {content.listedIn}
+              </Text>
+              <Text fontSize={textFontSize}>
+                <strong>Description:</strong> {content.description}
+              </Text>
+            </Box>
+            <Flex gap={3} mt={4}>
+              <Button
+                colorScheme="teal"
+                size={buttonSize}
+                onClick={() => handleLikeDislike(true)}
+              >
+                좋아요
+              </Button>
+              <Button
+                colorScheme="red"
+                size={buttonSize}
+                onClick={() => handleLikeDislike(false)}
+              >
+                싫어요
+              </Button>
+              <Button
+                colorScheme="gray"
+                size={buttonSize}
+                onClick={handleWatchAndNavigate}
+              >
+                넷플릭스로 이동
+              </Button>
+            </Flex>
+          </ModalBody>
+          <Divider my={4} />
+          <ModalFooter flexDirection="column" alignItems="flex-start">
+            <Text fontSize={textFontSize} mt={-5} mb={3} fontWeight="bold">
+              🔗 친구에게 추천하기
             </Text>
-          </Box>
-          <Flex gap={3} mt={4}>
-            <Button
-              colorScheme="teal"
-              size={buttonSize}
-              onClick={() => handleLikeDislike(true)}
+            <Select
+              placeholder={
+                friends.length > 0
+                  ? "친구를 선택하세요"
+                  : "--- 친구를 추가해 콘텐츠를 공유해봐요 ---"
+              }
+              mb={3}
+              onChange={(e) => setSelectedFriend(e.target.value)}
+              value={selectedFriend}
             >
-              좋아요
-            </Button>
+              {friends.map((friend) => (
+                <option key={friend.friendRequestId} value={friend.friendEmail}>
+                  {friend.friendName}
+                </option>
+              ))}
+            </Select>
+            <Textarea
+              placeholder="추천하는 이유를 적어주세요!"
+              value={recommendReason}
+              onChange={(e) => setRecommendReason(e.target.value)}
+              mb={3}
+              resize="none"
+              height="100px" // 고정 높이
+            />
             <Button
-              colorScheme="red"
+              colorScheme="blue"
               size={buttonSize}
-              onClick={() => handleLikeDislike(false)}
+              alignSelf="flex-end"
+              onClick={handleRecommend}
             >
-              싫어요
+              추천
             </Button>
-            <Button
-              colorScheme="gray"
-              size={buttonSize}
-              onClick={handleWatchAndNavigate}
-            >
-              넷플릭스로 이동
-            </Button>
-          </Flex>
-        </ModalBody>
-        <Divider my={4} />
-        <ModalFooter flexDirection="column" alignItems="flex-start">
-          <Text fontSize={textFontSize} mt={-5} mb={3} fontWeight="bold">
-            🔗 친구에게 추천하기
-          </Text>
-          <Select
-            placeholder={
-              friends.length > 0
-                ? "친구를 선택하세요"
-                : "--- 친구를 추가해 콘텐츠를 공유해봐요 ---"
-            }
-            mb={3}
-            onChange={(e) => setSelectedFriend(e.target.value)}
-            value={selectedFriend}
-          >
-            {friends.map((friend) => (
-              <option key={friend.friendRequestId} value={friend.friendEmail}>
-                {friend.friendName}
-              </option>
-            ))}
-          </Select>
-          <Textarea
-            placeholder="추천하는 이유를 적어주세요!"
-            value={recommendReason}
-            onChange={(e) => setRecommendReason(e.target.value)}
-            mb={3}
-            resize="none"
-            height="100px" // 고정 높이
-          />
-          <Button
-            colorScheme="blue"
-            size={buttonSize}
-            alignSelf="flex-end"
-            onClick={handleRecommend}
-          >
-            추천
-          </Button>
-        </ModalFooter>
-      </ModalContent>
-    </Modal>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </>
   );
 };