feat: 마이 페이지 구현

knu-hackathons-team · Nov 27, 2024 · 1baed1a · 1baed1a
1 parent fb2b6a9
commit 1baed1a
Show file tree

Hide file tree

Showing 6 changed files with 465 additions and 12 deletions.
diff --git a/src/Friends/Friends.tsx b/src/Friends/Friends.tsx
@@ -0,0 +1,31 @@
+import React from "react";
+import { Box, Heading, ChakraProvider } from "@chakra-ui/react";
+
+const Friends: React.FC = () => {
+  return (
+    <ChakraProvider>
+      <Box
+        display="flex"
+        alignItems="center"
+        justifyContent="center"
+        height="100vh"
+        bg="gray.100"
+      >
+        <Box
+          p={8}
+          maxWidth="500px"
+          borderWidth={1}
+          borderRadius={8}
+          boxShadow="lg"
+          bg="white"
+        >
+          <Heading as="h1" size="xl" mb={4} textAlign="center">
+            친구 관리 페이지입니다.
+          </Heading>
+        </Box>
+      </Box>
+    </ChakraProvider>
+  );
+};
+
+export default Friends;
diff --git a/src/Main/components/NavBar.tsx b/src/Main/components/NavBar.tsx
@@ -9,6 +9,7 @@ import {
   IconButton,
 } from "@chakra-ui/react";
 import { HamburgerIcon } from "@chakra-ui/icons";
+import { useNavigate } from "react-router-dom"; // React Router의 useNavigate 가져오기
 import api from "../../api/interceptor";
 
 interface NavBarProps {
@@ -23,6 +24,7 @@ const NavBar = ({
   handleLogout,
 }: NavBarProps): JSX.Element => {
   const [userName, setUserName] = useState<string>("");
+  const navigate = useNavigate(); // useNavigate 훅 초기화
 
   useEffect(() => {
     const fetchUserName = async () => {
@@ -91,9 +93,13 @@ const NavBar = ({
           icon={<HamburgerIcon />}
           variant="outline"
         />
-        <MenuList>
+        <MenuList
+          minW="fit-content" // 글자 크기에 맞게 메뉴 너비를 조정
+        >
           {/* 사용자 이름 표시 */}
           <MenuItem>{userName ? `${userName} 님` : "사용자 님"}</MenuItem>
+          <MenuItem onClick={() => navigate("/mypage")}>나의 콘텐츠</MenuItem>
+          <MenuItem onClick={() => navigate("/friends")}>친구 관리</MenuItem>
           <MenuItem onClick={handleLogout}>로그아웃</MenuItem>
         </MenuList>
       </Menu>

diff --git a/src/Main/components/RecommendedContents.tsx b/src/Main/components/RecommendedContents.tsx
@@ -55,15 +55,12 @@ function RecommendedContents(): JSX.Element {
     const fetchAllContents = async () => {
       setIsLoading(true);
       try {
-        // 많이 시청한 콘텐츠 TOP 10 가져오기
         const watchResponse = await api.get("/api/watch/top");
         setWatchTop(watchResponse.data || []);
 
-        // 좋아요한 콘텐츠 TOP 10 가져오기
         const likeResponse = await api.get("/api/like/top");
         setLikeTop(likeResponse.data || []);
 
-        // 추천 콘텐츠 가져오기
         const recommendResponse = await api.get("/api/recommend/10");
         const fetchedCategories = Object.keys(categoryLabels).map(
           (category) => ({
@@ -98,11 +95,11 @@ function RecommendedContents(): JSX.Element {
   const renderContentGrid = (
     items: { content: Content; count?: number }[],
     label: string,
-    countLabel?: string
+    countLabel?: "likeCount" | "watchCount"
   ) => (
     <Box marginBottom="2rem">
       <Text
-        fontSize={{ base: "lg", md: "lg", lg: "xl" }}
+        fontSize={{ base: "sm", md: "lg" }}
         fontWeight="bold"
         color="teal.500"
         marginBottom="1rem"
@@ -174,7 +171,11 @@ function RecommendedContents(): JSX.Element {
                     marginBottom="0.5rem"
                     mx="auto"
                   >
-                    <Text fontSize="sm" color="gray.500" textAlign="center">
+                    <Text
+                      fontSize={{ base: "sm", md: "md" }}
+                      color="gray.500"
+                      textAlign="center"
+                    >
                       포스터가 없습니다.
                     </Text>
                   </Box>
@@ -190,17 +191,23 @@ function RecommendedContents(): JSX.Element {
                 >
                   {content.title}
                 </Text>
-                {countLabel && (
+                {countLabel && count !== undefined && (
                   <Text fontSize="sm" color="gray.500">
-                    {`${countLabel}: ${count}`}
+                    {countLabel === "likeCount"
+                      ? `${count}명이 좋아해요💕`
+                      : `${count}명이 시청했어요✨`}
                   </Text>
                 )}
               </Box>
             ))}
           </Grid>
         </Flex>
       ) : (
-        <Text fontSize="md" color="gray.500" textAlign="center">
+        <Text
+          fontSize={{ base: "sm", md: "md" }}
+          color="gray.500"
+          textAlign="center"
+        >
           충분한 데이터가 쌓이지 않았습니다.
         </Text>
       )}
@@ -237,7 +244,7 @@ function RecommendedContents(): JSX.Element {
           count: item.watchCount,
         })),
         "🔥 서비스 이용자들이 많이 시청한 콘텐츠 TOP 10",
-        "시청 횟수"
+        "watchCount"
       )}
 
       {/* 좋아요한 콘텐츠 TOP 10 */}
@@ -247,7 +254,7 @@ function RecommendedContents(): JSX.Element {
           count: item.likeCount,
         })),
         "❤️ 서비스 이용자들이 좋아한 콘텐츠 TOP 10",
-        "좋아요 수"
+        "likeCount"
       )}
 
       {/* 기존 추천 콘텐츠 */}