feat: 랜덤 콘텐츠 페이지 카드 새로고침 기능 추가

knu-hackathons-team · Nov 19, 2024 · eec1492 · eec1492
1 parent c6e7e28
commit eec1492
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 32 deletions.
diff --git a/src/Main/MainPage.tsx b/src/Main/MainPage.tsx
@@ -9,7 +9,7 @@ import UnauthorizedAccess from "./components/UnauthorizedAccess";
 
 function MainPage(): JSX.Element {
   const [isLoggedIn, setIsLoggedIn] = useState<boolean>(false);
-  const [activeTab, setActiveTab] = useState<string>("추천 콘텐츠");
+  const [activeTab, setActiveTab] = useState<string>("랜덤 콘텐츠");
   const navigate = useNavigate();
 
   useEffect(() => {

diff --git a/src/Main/components/NavBar.tsx b/src/Main/components/NavBar.tsx
@@ -56,22 +56,23 @@ const NavBar = ({
           cursor="pointer"
           fontSize={["sm", "md", "lg"]}
           fontWeight="bold"
-          color={activeTab === "추천 콘텐츠" ? "black" : "teal.500"}
-          borderBottom={activeTab === "추천 콘텐츠" ? "2px solid teal" : "none"}
-          onClick={() => setActiveTab("추천 콘텐츠")}
+          color={activeTab === "랜덤 콘텐츠" ? "black" : "teal.500"}
+          borderBottom={activeTab === "랜덤 콘텐츠" ? "2px solid teal" : "none"}
+          onClick={() => setActiveTab("랜덤 콘텐츠")}
         >
-          추천 콘텐츠
+          랜덤 콘텐츠
         </Text>
         <Text
           cursor="pointer"
           fontSize={["sm", "md", "lg"]}
           fontWeight="bold"
-          color={activeTab === "랜덤 콘텐츠" ? "black" : "teal.500"}
-          borderBottom={activeTab === "랜덤 콘텐츠" ? "2px solid teal" : "none"}
-          onClick={() => setActiveTab("랜덤 콘텐츠")}
+          color={activeTab === "추천 콘텐츠" ? "black" : "teal.500"}
+          borderBottom={activeTab === "추천 콘텐츠" ? "2px solid teal" : "none"}
+          onClick={() => setActiveTab("추천 콘텐츠")}
         >
-          랜덤 콘텐츠
+          추천 콘텐츠
         </Text>
+
         <Text
           cursor="pointer"
           fontSize={["sm", "md", "lg"]}

diff --git a/src/Main/components/RandomContents.tsx b/src/Main/components/RandomContents.tsx
@@ -4,8 +4,10 @@ import {
   Grid,
   Text,
   Spinner,
+  Button,
   useBreakpointValue,
   useDisclosure,
+  Flex,
 } from "@chakra-ui/react";
 import api from "../../api/interceptor";
 import DetailModal from "./DetailModal";
@@ -32,23 +34,23 @@ function RandomContents(): JSX.Element {
   const [selectedContent, setSelectedContent] = useState<Content | null>(null);
   const { isOpen, onOpen, onClose } = useDisclosure();
 
-  useEffect(() => {
-    const fetchRandomContents = async () => {
-      setIsLoading(true);
-      try {
-        const response = await api.get("/api/random/10");
-        const contents = response.data.map(
-          (item: { content: Content }) => item.content
-        );
-        setRandomContents(contents);
-      } catch (error) {
-        console.error("랜덤 콘텐츠를 가져오는 중 오류 발생:", error);
-      } finally {
-        setIsLoading(false);
-      }
-    };
+  const fetchRandomContents = async () => {
+    setIsLoading(true);
+    try {
+      const response = await api.get("/api/random/10");
+      const contents = response.data.map(
+        (item: { content: Content }) => item.content
+      );
+      setRandomContents(contents);
+    } catch (error) {
+      console.error("랜덤 콘텐츠를 가져오는 중 오류 발생:", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
 
-    fetchRandomContents();
+  useEffect(() => {
+    fetchRandomContents(); // 컴포넌트 로드 시 첫 호출
   }, []);
 
   const handleCardClick = (content: Content) => {
@@ -60,6 +62,33 @@ function RandomContents(): JSX.Element {
 
   return (
     <Box padding="2rem">
+      {/* 새로고침 버튼 및 안내 문구 */}
+      <Flex
+        justifyContent="space-between"
+        alignItems="center"
+        marginBottom="1rem"
+        flexDirection={["column", "row"]} // 모바일에서 수직 정렬
+        gap="1rem"
+      >
+        <Text
+          fontSize={{ base: "sm", md: "lg", lg: "xl" }}
+          fontWeight="bold"
+          color="teal.500"
+          textAlign={["center", "left"]} // 모바일에서 가운데 정렬
+        >
+          랜덤으로 콘텐츠를 10개 추천해드립니다. 마음에 드는 콘텐츠가 없다면
+          새로고침 해보세요!
+        </Text>
+        <Button
+          colorScheme="teal"
+          size="sm"
+          onClick={fetchRandomContents} // 새로고침 버튼에서 API 호출
+          alignSelf={["center", "flex-end"]}
+        >
+          새로고침
+        </Button>
+      </Flex>
+
       {isLoading ? (
         <Box
           display="flex"

diff --git a/src/Main/components/RecommendedContents.tsx b/src/Main/components/RecommendedContents.tsx
@@ -31,12 +31,15 @@ function RecommendedContents(): JSX.Element {
   const [isModalOpen, setIsModalOpen] = useState<boolean>(false); // 모달 상태
 
   const categoryLabels: { [key: string]: string } = {
-    similarCastFromLikes: "🎭 좋아요한 콘텐츠와 출연진 유사",
-    similarGenreFromLikes: "🎬 좋아요한 콘텐츠와 장르 유사",
-    sameDirectorFromLikes: "🎥 좋아요한 콘텐츠와 감독 동일",
-    similarCastFromWatchHistory: "🌟 시청한 콘텐츠와 출연진 유사",
-    similarGenreFromWatchHistory: "📽️ 시청한 콘텐츠와 장르 유사",
-    sameDirectorFromWatchHistory: "🎞️ 시청한 콘텐츠와 감독 동일",
+    similarCastFromLikes: "🎭 좋아요한 콘텐츠와 출연진 유사한 콘텐츠 TOP 10",
+    similarGenreFromLikes: "🎬 좋아요한 콘텐츠와 장르 유사한 콘텐츠 TOP 10",
+    sameDirectorFromLikes: "🎥 좋아요한 콘텐츠와 감독 동일한 콘텐츠 TOP 10",
+    similarCastFromWatchHistory:
+      "🌟 시청한 콘텐츠와 출연진 유사한 콘텐츠 TOP 10",
+    similarGenreFromWatchHistory:
+      "📽️ 시청한 콘텐츠와 장르 유사한 콘텐츠 TOP 10",
+    sameDirectorFromWatchHistory:
+      "🎞️ 시청한 콘텐츠와 감독 동일한 콘텐츠 TOP 10",
   };
 
   useEffect(() => {
@@ -93,7 +96,7 @@ function RecommendedContents(): JSX.Element {
         <Box key={category} marginBottom="2rem">
           {/* 카테고리 제목 */}
           <Text
-            fontSize="xl"
+            fontSize={{ base: "lg", md: "lg", lg: "xl" }}
             fontWeight="bold"
             color="teal.500"
             marginBottom="1rem"