Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add and refactor homeRecommendation Section #217

Merged
merged 1 commit into from
Aug 29, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 43 additions & 0 deletions components/organisms/cards/RecommendationBannerCard.tsx
Original file line number Diff line number Diff line change
@@ -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;
24 changes: 24 additions & 0 deletions constants/contents/HomeRecommendationTab.ts
Original file line number Diff line number Diff line change
@@ -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: "디스코드 서버로 이동하기",
},
},
];
29 changes: 5 additions & 24 deletions pageTemplates/home/HomeRankingSection.tsx
Original file line number Diff line number Diff line change
@@ -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} />
))}
</>
);
}
Expand Down
10 changes: 5 additions & 5 deletions pageTemplates/home/HomeTab.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -34,7 +34,7 @@ function HomeTab({ tab: category, setTab: setCategory }: HomeTabProps) {
study: "스터디",
gather: "번개",
club: "캘린더",
temp: "랭킹",
temp: "추천",
};

useEffect(() => {
Expand Down Expand Up @@ -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 === "캘린더") {
Expand Down Expand Up @@ -95,8 +95,8 @@ function HomeTab({ tab: category, setTab: setCategory }: HomeTabProps) {
flex: 1,
},
{
text: "랭킹",
func: () => handleTabMove("랭킹"),
text: "추천",
func: () => handleTabMove("추천"),
flex: 1,
},
];
Expand Down
4 changes: 2 additions & 2 deletions pages/home/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand Down
Loading