Skip to content

Commit

Permalink
feat: 추천 시 로딩 추가
Browse files Browse the repository at this point in the history
  • Loading branch information
@gogumalatte
gogumalatte committed Dec 2, 2024
1 parent 676e7cd commit 781a983
Showing 1 changed file with 149 additions and 115 deletions.
264 changes: 149 additions & 115 deletions src/Main/components/DetailModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@ import {
Divider,
Select,
Textarea,
Center,
Spinner,
Flex,
} from "@chakra-ui/react";
import { useState, useEffect } from "react";
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -83,6 +86,8 @@ const DetailModal = ({ isOpen, onClose, content }: DetailModalProps) => {
}

try {
setIsLoading(true); // 로딩 상태 시작

const selectedFriendObj = friends.find(
(friend) => friend.friendEmail === selectedFriend
);
Expand All @@ -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>
),
});

// 초기화
Expand All @@ -119,6 +134,8 @@ const DetailModal = ({ isOpen, onClose, content }: DetailModalProps) => {
isClosable: true,
position: "top",
});
} finally {
setIsLoading(false); // 로딩 상태 종료
}
};

Expand Down Expand Up @@ -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>
</>
);
};

Expand Down

0 comments on commit 781a983

Please sign in to comment.