랜덤 페이지 구현

knu-hackathons-team · Nov 19, 2024 · 744a8f5 · 744a8f5
1 parent 53ff337
commit 744a8f5
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 7 deletions.
diff --git a/index.html b/index.html
@@ -11,7 +11,7 @@
     />
     <meta name="keywords" content="OTT, 영상, 추천, 서비스" />
 
-    <title>OTT Recommender</title>
+    <title>Netflix Recommender</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/Main/components/RandomContents.tsx b/src/Main/components/RandomContents.tsx
@@ -1,5 +1,78 @@
+import { useEffect, useState } from "react";
+import { Box, Grid, Text, Spinner, useBreakpointValue } from "@chakra-ui/react";
+import api from "../../api/interceptor";
+
+interface Content {
+  title: string;
+}
+
 function RandomContents(): JSX.Element {
-  return <div>랜덤 콘텐츠 컴포넌트 내용</div>;
+  const [randomContents, setRandomContents] = useState<Content[]>([]);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+
+  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);
+      }
+    };
+
+    fetchRandomContents();
+  }, []);
+
+  const cardColumns = useBreakpointValue({ base: "1fr", md: "repeat(5, 1fr)" });
+
+  return (
+    <Box padding="2rem">
+      {isLoading ? (
+        <Box
+          display="flex"
+          justifyContent="center"
+          alignItems="center"
+          height="200px"
+        >
+          <Spinner size="lg" color="teal.500" />
+        </Box>
+      ) : (
+        <Grid templateColumns={cardColumns} gap="1rem">
+          {randomContents.map((content, index) => (
+            <Box
+              key={index}
+              padding="1rem"
+              border="1px solid #e2e8f0"
+              borderRadius="8px"
+              boxShadow="sm"
+              bg="white"
+              textAlign="center"
+              overflow="hidden"
+              whiteSpace="nowrap"
+              textOverflow="ellipsis"
+            >
+              <Text
+                fontSize="md"
+                fontWeight="bold"
+                color="teal.600"
+                overflow="hidden"
+                whiteSpace="nowrap"
+                textOverflow="ellipsis"
+              >
+                {content.title}
+              </Text>
+            </Box>
+          ))}
+        </Grid>
+      )}
+    </Box>
+  );
 }
 
 export default RandomContents;
diff --git a/src/Start/StartPage.tsx b/src/Start/StartPage.tsx
@@ -11,11 +11,11 @@ const StartPage: React.FC = () => {
     <Center height="100vh" bg="gray.100">
       <VStack spacing={8} position="relative">
         {/* 메인 텍스트 */}
-        <Text fontSize={{ base: "2xl", md: "3xl" }} fontWeight="bold">
-          Welcome to OTT Recommender
+        <Text fontSize={{ base: "xl", md: "3xl" }} fontWeight="bold">
+          Welcome to Netflix Recommender
         </Text>
-        <Text fontSize={{ base: "md", md: "lg" }} color="gray.600" mt={-5}>
-          Discover the best OTT content tailored for you
+        <Text fontSize={{ base: "sm", md: "lg" }} color="gray.600" mt={-5}>
+          Discover the best Netflix content tailored for you
         </Text>
 
         {/* 카카오 로그인 버튼 */}
@@ -42,7 +42,7 @@ const StartPage: React.FC = () => {
           color="gray.500"
           px={4}
           py={2}
-          fontSize="sm"
+          fontSize="12px"
           fontWeight="light"
           textAlign={"center"}
         >