add and refactor homeRecommendation Section (#217)

AboutClan · Aug 29, 2024 · 129fb06 · 129fb06
1 parent 31cccc4
commit 129fb06
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 31 deletions.
diff --git a/components/organisms/cards/RecommendationBannerCard.tsx b/components/organisms/cards/RecommendationBannerCard.tsx
@@ -0,0 +1,43 @@
+import { AspectRatio, Box, Button, Flex } from "@chakra-ui/react";
+import Image from "next/image";
+import Link from "next/link";
+
+export interface RecommendationBannerCardProps {
+  title: string;
+  text: string;
+  bannerImage: string;
+  buttonProps: {
+    link: string;
+    text: string;
+  };
+}
+
+function RecommendationBannerCard({
+  title,
+  text,
+  bannerImage,
+  buttonProps,
+}: RecommendationBannerCardProps) {
+  return (
+    <Box>
+      <AspectRatio w="100%" ratio={1.25} position="relative">
+        <Image fill src={bannerImage} alt={title} />
+      </AspectRatio>
+      <Flex p="16px" direction="column">
+        <Box fontSize="20px" fontWeight={600}>
+          {title}
+        </Box>
+        <Box as="p" py="16px">
+          {text}
+        </Box>
+        <Box>
+          <Link href={buttonProps.link}>
+            <Button colorScheme="mintTheme">{buttonProps.text}</Button>
+          </Link>
+        </Box>
+      </Flex>
+    </Box>
+  );
+}
+
+export default RecommendationBannerCard;
diff --git a/constants/contents/HomeRecommendationTab.ts b/constants/contents/HomeRecommendationTab.ts
@@ -0,0 +1,24 @@
+import { RecommendationBannerCardProps } from "../../components/organisms/cards/RecommendationBannerCard";
+
+export const HOME_RECOMMENDATION_TAB_CONTENTS: RecommendationBannerCardProps[] = [
+  {
+    title: "동아리 점수 랭킹 페이지",
+    text: "동아리 활동을 통해 얻은 점수를 확인하고 자신의 랭킹과 활동 기록을 한눈에 볼 수 있는 공간입니다. 다양한 활동을 통해 점수를 획득하고, 본인의 순위를 확인해 보세요!",
+    bannerImage:
+      "https://studyabout.s3.ap-northeast-2.amazonaws.com/%EB%B0%B0%EB%84%88/%EB%9E%AD%ED%82%B9+%EB%B0%B0%EB%84%88.png",
+    buttonProps: {
+      link: "/statistics",
+      text: "랭킹 페이지로 이동하기",
+    },
+  },
+  {
+    title: "ABOUT 디스코드 채널",
+    text: "온라인에서도 활발하게 스터디를 진행하고 있습니다! 다양한 컨셉의 스터디 채널이 있으니, 디스코드 서버에 방문하고 같이 공부해요!",
+    bannerImage:
+      "https://studyabout.s3.ap-northeast-2.amazonaws.com/%EB%B0%B0%EB%84%88/%EB%94%94%EC%8A%A4%EC%BD%94%EB%93%9C+%EB%B0%B0%EB%84%88.jpg",
+    buttonProps: {
+      link: "https://discord.gg/dDu2kg2uez",
+      text: "디스코드 서버로 이동하기",
+    },
+  },
+];
diff --git a/pageTemplates/home/HomeRankingSection.tsx b/pageTemplates/home/HomeRankingSection.tsx
@@ -1,31 +1,12 @@
-import { AspectRatio, Box, Button, Flex } from "@chakra-ui/react";
-import Image from "next/image";
-import Link from "next/link";
+import RecommendationBannerCard from "../../components/organisms/cards/RecommendationBannerCard";
+import { HOME_RECOMMENDATION_TAB_CONTENTS } from "../../constants/contents/HomeRecommendationTab";
 
 function HomeRankingSection() {
   return (
     <>
-      <AspectRatio w="100%" ratio={1.25} position="relative">
-        <Image
-          fill
-          src="https://studyabout.s3.ap-northeast-2.amazonaws.com/%EB%8F%99%EC%95%84%EB%A6%AC/%EB%9E%AD%ED%82%B9.png"
-          alt="rankingBanner"
-        />
-      </AspectRatio>
-      <Flex p="16px" direction="column">
-        <Box fontSize="20px" fontWeight={600}>
-          동아리 점수 랭킹 페이지
-        </Box>
-        <Box as="p" py="16px">
-          동아리 활동을 통해 얻은 점수를 확인하고 자신의 랭킹과 활동 기록을 한눈에 볼 수 있는
-          공간입니다. 다양한 활동을 통해 점수를 획득하고, 본인의 순위를 확인해 보세요!
-        </Box>
-        <Box>
-          <Link href="/statistics">
-            <Button colorScheme="mintTheme">랭킹 페이지로 이동하기</Button>
-          </Link>
-        </Box>
-      </Flex>
+      {HOME_RECOMMENDATION_TAB_CONTENTS.map((content) => (
+        <RecommendationBannerCard key={content.title} {...content} />
+      ))}
     </>
   );
 }

diff --git a/pageTemplates/home/HomeTab.tsx b/pageTemplates/home/HomeTab.tsx
@@ -12,7 +12,7 @@ import { LocationEn } from "../../types/services/locationTypes";
 import { convertLocationLangTo } from "../../utils/convertUtils/convertDatas";
 import { getUrlWithLocationAndDate } from "../../utils/convertUtils/convertTypes";
 
-export type HomeTab = "스터디" | "번개" | "캘린더" | "랭킹";
+export type HomeTab = "스터디" | "번개" | "캘린더" | "추천";
 
 interface HomeTabProps {
   tab: HomeTab;
@@ -34,7 +34,7 @@ function HomeTab({ tab: category, setTab: setCategory }: HomeTabProps) {
     study: "스터디",
     gather: "번개",
     club: "캘린더",
-    temp: "랭킹",
+    temp: "추천",
   };
 
   useEffect(() => {
@@ -63,7 +63,7 @@ function HomeTab({ tab: category, setTab: setCategory }: HomeTabProps) {
         `/home?tab=gather&location=${locationParam || convertLocationLangTo(session?.user.location || "suw", "en")}`,
       );
     }
-    if (tab === "랭킹") {
+    if (tab === "추천") {
       router.replace(`/home?tab=temp`);
     }
     if (tab === "캘린더") {
@@ -95,8 +95,8 @@ function HomeTab({ tab: category, setTab: setCategory }: HomeTabProps) {
       flex: 1,
     },
     {
-      text: "랭킹",
-      func: () => handleTabMove("랭킹"),
+      text: "추천",
+      func: () => handleTabMove("추천"),
       flex: 1,
     },
   ];

diff --git a/pages/home/index.tsx b/pages/home/index.tsx
@@ -20,14 +20,14 @@ function Home() {
       <Slide>
         <HomeCategoryNav tab={tab} setTab={setTab} />
         <>
-          {tab !== "랭킹" && <EventBanner tab={tab} />}
+          {tab !== "추천" && <EventBanner tab={tab} />}
           {tab === "스터디" ? (
             <HomeStudySection />
           ) : tab === "번개" ? (
             <HomeGatherSection />
           ) : tab === "캘린더" ? (
             <HomeClubSection />
-          ) : tab === "랭킹" ? (
+          ) : tab === "추천" ? (
             <HomeRankingSection />
           ) : null}
           <Box w="100%" h="40px" />