From 09c0d9acc2f459064e4b02cd629b569166b3bfa3 Mon Sep 17 00:00:00 2001 From: Lee jin <83453646+j-nary@users.noreply.github.com> Date: Sat, 11 Jan 2025 14:52:39 +0900 Subject: [PATCH] =?UTF-8?q?=ED=99=88=ED=83=AD=20=EB=B2=88=EC=A9=8D=20?= =?UTF-8?q?=EC=BA=90=EB=9F=AC=EC=85=80=20=EB=B0=8F=20=EB=AA=A8=EC=9E=84=20?= =?UTF-8?q?=EC=B9=B4=EB=93=9C=20MO=20(#974)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: 번쩍 캐러셀 Desktop 구현 * feat: Gradation 설정 * feat: 모임카드 tablet, mobile 구현 * style: 간격 조정 * feat: Quick Menu 링크 연결 * refactor: undefined 배열요소 접근 방지 --- pages/index.tsx | 98 +---- public/assets/svg/location.svg | 3 + .../groupBrowsing/Carousel/Carousel.tsx | 17 +- .../GroupBrowsingCard/GroupBrowsingCard.tsx | 353 ++++++++---------- .../page/home/HomeCardList/CardList.tsx | 77 +++- .../{Card.tsx => DesktopCard.tsx} | 49 +-- .../page/home/HomeCardList/MobileCard.tsx | 123 ++++++ .../page/home/HomeCardList/index.tsx | 35 +- src/components/page/home/QuickMenu/index.tsx | 21 +- 9 files changed, 451 insertions(+), 325 deletions(-) create mode 100644 public/assets/svg/location.svg rename src/components/page/home/HomeCardList/{Card.tsx => DesktopCard.tsx} (58%) create mode 100644 src/components/page/home/HomeCardList/MobileCard.tsx diff --git a/pages/index.tsx b/pages/index.tsx index 10eba5bd..a7f8d186 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -10,7 +10,6 @@ import { Flex } from '@components/util/layout/Flex'; import { TAKE_COUNT } from '@constants/feed'; import { useDisplay } from '@hooks/useDisplay'; import type { NextPage } from 'next'; -import Link from 'next/link'; import { useEffect } from 'react'; import { useInView } from 'react-intersection-observer'; import { styled } from 'stitches.config'; @@ -34,50 +33,36 @@ const Home: NextPage = () => { }, [inView, hasNextPage, fetchNextPage]); return ( -
+ <> {isLoading && (isTablet ? : )} {isTablet ? ( <> - - ⚡ ️솝트만의 일회성 모임, 번쩍 - - 더보기 {'>'} - - + ⚡ ️솝트만의 일회성 모임, 번쩍 {groupBrowsingCardData && } ) : ( <> - - ⚡ ️솝트만의 일회성 모임, 번쩍 - - 더보기 {'>'} - - + ⚡ ️솝트만의 일회성 모임, 번쩍 - - - {groupBrowsingCardData && } - + {groupBrowsingCardData && } )} {isLaptop ? ( - <> - + + - + {groupBrowsingCardData && ( )} - + ) : ( <> - - + {groupBrowsingCardData && ( )} @@ -96,7 +81,7 @@ const Home: NextPage = () => { )} -
+ ); }; @@ -110,14 +95,11 @@ const SContentTitle = styled('div', { justifyContent: 'space-between', alignItems: 'center', width: '1200px', + '@laptop': { width: '790px', }, - '@media (max-width: 850px)': { - display: 'none', - }, - '@tablet': { display: 'flex', width: '100%', @@ -125,66 +107,22 @@ const SContentTitle = styled('div', { }, }); -const SMoreButton = styled('button', { - color: '$gray200', - /* TODO: mds font 로 변환 */ - fontSize: '$14', - fontWeight: '600', - lineHeight: '$18', - '@tablet': { - fontSize: '$12', - }, - - '&:hover': { - transition: 'background 0.1s ease-in-out', - color: '$gray100', - }, - - '&:not(:hover)': { - transition: 'background 0.1s ease-in-out', - fill: '$gray100', - }, -}); - const GroupBrowsingCarouselContainer = styled('div', { - width: '100vw', - position: 'absolute', - left: '0', display: 'flex', justifyContent: 'center', '@laptop': { - left: '-30px', - }, -}); - -const SCarouselBlank = styled('div', { - paddingBottom: '252px', - '@media (max-width: 850px)': { - display: 'none', + left: '-20px', }, }); -const SGradationContainer = styled('div', { - position: 'relative', -}); - -const SCarouselGradationRight = styled('div', { - width: '122px', - height: '180px', - background: 'linear-gradient(270deg, #0F0F12 0%, rgba(15, 15, 18, 0.00) 100%)', - - position: 'absolute', - zIndex: 1, - right: '0', - pointerEvents: 'none', - marginRight: '55px', +const QuickMenuWrapper = styled('div', { + display: 'flex', + justifyContent: 'center', - '@media (max-width: 850px)': { - display: 'none', - }, + margin: '$60 0 $72', - '@media (min-width: 1259px)': { - display: 'none', + '@mobile': { + margin: '0 0 $40', }, }); diff --git a/public/assets/svg/location.svg b/public/assets/svg/location.svg new file mode 100644 index 00000000..8063bb61 --- /dev/null +++ b/public/assets/svg/location.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/groupBrowsing/Carousel/Carousel.tsx b/src/components/groupBrowsing/Carousel/Carousel.tsx index fe79ad84..d22c0ac0 100644 --- a/src/components/groupBrowsing/Carousel/Carousel.tsx +++ b/src/components/groupBrowsing/Carousel/Carousel.tsx @@ -82,6 +82,8 @@ const Carousel = ({ cardList }: CarouselProps) => { export default Carousel; const SCarousel = styled('div', { + position: 'relative', + '.slick-slider': { flexType: 'center', position: 'relative', @@ -91,10 +93,8 @@ const SCarousel = styled('div', { '@laptop': { width: '848px', minWidth: '848px', - }, - '@media (max-width: 850px)': { - display: 'none', + left: '-27px', }, }, @@ -109,6 +109,17 @@ const SCarousel = styled('div', { '@laptop': { width: '732px', minWidth: '732px', + + '&:after': { + content: '""', + position: 'absolute', + top: '0', + right: '-1px', + width: '100px', + height: '100%', + background: 'linear-gradient(270deg, #0F0F12 0%, rgba(15, 15, 18, 0.00) 100%)', + pointerEvents: 'none', + }, }, }, diff --git a/src/components/groupBrowsing/GroupBrowsingCard/GroupBrowsingCard.tsx b/src/components/groupBrowsing/GroupBrowsingCard/GroupBrowsingCard.tsx index 62aa7c40..514aefc0 100644 --- a/src/components/groupBrowsing/GroupBrowsingCard/GroupBrowsingCard.tsx +++ b/src/components/groupBrowsing/GroupBrowsingCard/GroupBrowsingCard.tsx @@ -1,105 +1,63 @@ import React, { FC } from 'react'; -import { styled } from 'stitches.config'; -import UserIcon from '@assets/svg/user.svg'; +import { keyframes, styled } from 'stitches.config'; import CalendarIcon from '@assets/svg/calendar.svg'; +import LocationIcon from '@assets/svg/location.svg'; import Avatar from '@components/@common/avatar/Avatar'; import { Flex } from '@components/util/layout/Flex'; -import { - GroupBrowsingCardItem, - parsePartValueToLabel, - returnIsGroupActive, - returnNewStatus, -} from '@api/API_LEGACY/meeting'; +import { GroupBrowsingCardItem } from '@api/API_LEGACY/meeting'; import dayjs from 'dayjs'; import isBetween from 'dayjs/plugin/isBetween'; dayjs.extend(isBetween); -import { PART_NAME, ACTION_STATUS, EActionStatus, CATEGORY_NAME, CategoryType } from '@constants/option'; import Link from 'next/link'; import { getResizedImage } from '@utils/image'; -import Separator from '@assets/svg/GroupBrowsingCardSeparator.svg'; import { fontsObject } from '@sopt-makers/fonts'; +import { Tag } from '@sopt-makers/ui'; -const GroupBrowsingCard: FC = ({ - id, - title, - category, - // startDate, - mStartDate, - mEndDate, - // recentActivityDate, - targetActiveGeneration, - joinableParts, - capacity, - appliedCount, - approvedCount, - user, - status, - imageURL, -}) => { - const isAllParts = joinableParts?.length === Object.keys(PART_NAME).length || joinableParts === null; - const isGroupActive = returnIsGroupActive(mStartDate, mEndDate); - - const newStatus = returnNewStatus(status, mStartDate, isGroupActive); - - type statusTextsType = { - [key: number]: string; - }; - - const statusTexts: statusTextsType = { - // [EActionStatus.BEFORE]: `${-dayjs().diff(startDate, 'day')}일 남음`, - [EActionStatus.RECRUITING]: `${appliedCount}명 신청 중`, - // [EActionStatus.ACTING]: - // dayjs().diff(recentActivityDate, 'day') === 0 - // ? '오늘 새 글' - // : recentActivityDate === null - // ? '' - // : `${dayjs().diff(recentActivityDate, 'day')}일 전 활동`, - }; - +const GroupBrowsingCard: FC = ({ id, title, mStartDate, mEndDate, user, imageURL }) => { + const imgSrc = imageURL[0]?.url && getResizedImage(imageURL[0].url, 285); return ( - - - {user.name} - | {CATEGORY_NAME(category as CategoryType)} - - {title} - - - + + + {user.name} + + {title} + + 김솝트님 외 8명 신청중이에요 + 모집 2일 남음 + + + + + + {dayjs(mStartDate).format('YYYY.MM.DD')} - {dayjs(mEndDate).format('YYYY.MM.DD')} - - -
- - {approvedCount}/{capacity}명 -
- -
- {targetActiveGeneration ? '활동 기수' : '전체 기수'} /{' '} - {isAllParts - ? '전체' - : joinableParts - .map(part => parsePartValueToLabel(part)) - .filter(item => item !== null) - .join(',')}{' '} - 파트 -
- - - - + + - - {ACTION_STATUS[newStatus]} + + 건대입구역 - {statusTexts[newStatus]} - + + + YB 환영 + + + 입문자 환영 + + + 초면 환영 + + + ); @@ -107,138 +65,151 @@ const GroupBrowsingCard: FC = ({ export default GroupBrowsingCard; -const SGroupBrowsingCard = styled('div', { +const STitle = styled('h3', { + ...fontsObject.HEADING_7_16_B, + mb: '$2', + transition: 'transform 0.3s ease-in-out', +}); + +const SBottom = styled('div', { display: 'flex', - flexDirection: 'column', justifyContent: 'space-between', - backgroundBlendMode: 'multiply', - backgroundColor: '#17181C', - backgroundSize: 'cover', - borderRadius: '12px', - color: '$gray10', - width: '285px', - height: '180px', - cursor: 'pointer', - '&:hover': { - backgroundColor: '$gray200', - transition: 'background 0.3s ease-in-out', - }, - '&:not(:hover)': { - transition: 'background 0.3s ease-in-out', - }, + opacity: 1, + visibility: 'visible', + transform: 'translateY(0)', + transition: 'opacity 0.3s ease-in-out, visibility 0.3s ease-in-out', }); -const STop = styled('div', { +const SUser = styled('div', { + position: 'absolute', + display: 'flex', alignItems: 'center', - mb: '$4', - ...fontsObject.LABEL_5_11_SB, - '& > div:first-child': { - mr: '$6', - }, -}); + gap: '$6', -const STopDivisor = styled('span', { - color: '$gray400', - ml: '$3', - mr: '$3', -}); + left: '16px', + top: '16px', -const STitle = styled('div', { - ...fontsObject.HEADING_7_16_B, - mb: '$12', + opacity: 0, + visibility: 'hidden', + transition: 'opacity 0.3s ease-in-out, visibility 0.3s ease-in-out', }); -const SContents = styled('div', { - ...fontsObject.LABEL_5_11_SB, +const SOverlayContent = styled('div', { + position: 'absolute', + top: '156px', + left: '$16', + + display: 'flex', + flexDirection: 'column', + gap: '$6', + + opacity: 0, + visibility: 'hidden', + transition: 'opacity 0.3s ease-in-out, visibility 0.3s ease-in-out', }); -const SContent = styled('div', { +const SChipWrapper = styled('div', { display: 'flex', - alignItems: 'center', - '& > svg:first-child': { - marginRight: '6px', + gap: '$4', + + mt: '$2', +}); + +const moveUpFadeOut = keyframes({ + '0%': { + transform: 'translateY(0)', + opacity: 1, + }, + '100%': { + transform: 'translateY(-50px)', + opacity: 0, + visibility: 'hidden', }, - mb: '$6', }); -const SInfo = styled('div', { - padding: '$16 $16 $0 $16', +const moveUpFadeIn = keyframes({ + '0%': { + transform: 'translateY(0)', + opacity: 0, + visibility: 'hidden', + }, + '100%': { + transform: 'translateY(-50px)', + opacity: 1, + visibility: 'visible', + }, }); -const SBottom = styled('div', { - display: 'flex', - justifyContent: 'space-between', - ...fontsObject.LABEL_4_12_SB, - width: '100%', - padding: '$0 $16 $12 $16', - borderBottomLeftRadius: '$12', - borderBottomRightRadius: '$12', - variants: { - status: { - 0: { - background: 'linear-gradient(180deg, rgba(23, 24, 28, 0.00) 0%, rgba(255, 194, 52, 0.20) 100%);', - }, - 1: { - background: 'linear-gradient(180deg, rgba(23, 24, 28, 0.00) 0%, rgba(247, 114, 52, 0.20) 100%)', - }, - 2: { - background: 'linear-gradient(180deg, rgba(23, 24, 28, 0.00) 0%, rgba(157, 157, 164, 0.20) 100%)', - }, - 3: { - background: 'linear-gradient(180deg, rgba(23, 24, 28, 0.00) 0%, rgba(52, 111, 250, 0.20) 100%)', - }, - 4: { - background: 'linear-gradient(180deg, rgba(23, 24, 28, 0.00) 0%, rgba(157, 157, 164, 0.20) 100%)', - }, - }, +const moveDownFadeIn = keyframes({ + '0%': { + transform: 'translateY(-50px)', + opacity: 0, + visibility: 'hidden', + }, + '100%': { + transform: 'translateY(0)', + opacity: 1, + visibility: 'visible', }, }); -const SRecruitStatusIcon = styled('div', { - width: '$9', - height: '$9', - mr: '$6', - borderRadius: '$round', - variants: { - status: { - 0: { - background: '$attention', - }, - 1: { - background: '$secondary', - }, - 2: { - background: '$gray200', - }, - 3: { - background: '$success', - }, - 4: { - background: '$gray200', - }, - }, +const moveDownFadeOut = keyframes({ + '0%': { + transform: 'translateY(-50px)', + opacity: 1, + visibility: 'hidden', + }, + '100%': { + transform: 'translateY(0)', + opacity: 0, + visibility: 'visible', }, }); -const SStatusText = styled('div', { - variants: { - status: { - 0: { - color: '$attention', - }, - 1: { - color: '$secondary', - }, - 2: { - color: '$gray200', - }, - 3: { - color: '$success', - }, - 4: { - color: '$gray200', - }, - }, +const SGroupBrowsingCard = styled('section', { + position: 'relative', + + display: 'flex', + flexDirection: 'column', + justifyContent: 'flex-end', + + width: '285px', + height: '180px', + padding: '$16', + + backgroundSize: 'cover', + + borderRadius: '12px', + cursor: 'pointer', + + [`&:hover ${STitle}`]: { + transform: 'translateY(-45px)', + transition: 'transform 0.3s ease-in-out', + }, + + [`&:hover ${SBottom}`]: { + animation: `${moveUpFadeOut} 0.3s ease-in-out forwards`, + }, + [`&:not(:hover) ${SBottom}`]: { + animation: `${moveDownFadeIn} 0.3s ease-in-out forwards`, }, + + [`&:hover ${SUser}`]: { + opacity: 1, + visibility: 'visible', + transition: 'opacity 0.3s ease-in-out, visibility 0.3s ease-in-out', + }, + + [`&:hover ${SOverlayContent}`]: { + animation: `${moveUpFadeIn} 0.3s ease-in-out forwards`, + }, + [`&:not(:hover) ${SOverlayContent}`]: { + animation: `${moveDownFadeOut} 0.3s ease-in-out forwards`, + }, +}); + +const SDesc = styled('p', { + ...fontsObject.LABEL_5_11_SB, + color: '$white', }); diff --git a/src/components/page/home/HomeCardList/CardList.tsx b/src/components/page/home/HomeCardList/CardList.tsx index 844f851c..94848826 100644 --- a/src/components/page/home/HomeCardList/CardList.tsx +++ b/src/components/page/home/HomeCardList/CardList.tsx @@ -1,5 +1,8 @@ import { GroupBrowsingCardResponse } from '@api/API_LEGACY/meeting'; -import HomeCard from '@components/page/home/HomeCardList/Card'; +import DesktopCard from '@components/page/home/HomeCardList/DesktopCard'; +import MobileCard from '@components/page/home/HomeCardList/MobileCard'; +import { useDisplay } from '@hooks/useDisplay'; +import { fontsObject } from '@sopt-makers/fonts'; import { styled } from 'stitches.config'; type HomeCardProps = { @@ -10,6 +13,8 @@ type HomeCardProps = { }; const CardList = ({ label, isMore = false, onMoreClick = () => {}, data }: HomeCardProps) => { + const { isTablet } = useDisplay(); + return ( @@ -17,21 +22,43 @@ const CardList = ({ label, isMore = false, onMoreClick = () => {}, data }: HomeC {isMore && {'더보기 >'}} - {data.map(d => ( - - ))} + {isTablet ? ( + <> + {data.map(d => ( + + ))} + + ) : ( + <> + {data.map(d => ( + + ))} + + )} ); @@ -45,6 +72,15 @@ const SCardListWrapper = styled('section', { width: '894px', paddingBottom: '$80', + + '@laptop': { + width: '790px', + overflow: 'hidden', + }, + '@tablet': { + width: '100%', + paddingBottom: '$40', + }, }); const STitleWrapper = styled('div', { @@ -61,6 +97,10 @@ const STitleStyle = styled('p', { fontStyle: 'H1', color: '$white', + + '@tablet': { + ...fontsObject.TITLE_6_16_SB, + }, }); const SMoreBtn = styled('button', { @@ -71,4 +111,9 @@ const SMoreBtn = styled('button', { const SCardWrapper = styled('div', { display: 'flex', gap: '20px', + + '@tablet': { + flexDirection: 'column', + width: '100%', + }, }); diff --git a/src/components/page/home/HomeCardList/Card.tsx b/src/components/page/home/HomeCardList/DesktopCard.tsx similarity index 58% rename from src/components/page/home/HomeCardList/Card.tsx rename to src/components/page/home/HomeCardList/DesktopCard.tsx index bd9744ef..e8d818fa 100644 --- a/src/components/page/home/HomeCardList/Card.tsx +++ b/src/components/page/home/HomeCardList/DesktopCard.tsx @@ -2,8 +2,9 @@ import Avatar from '@components/@common/avatar/Avatar'; import { styled } from 'stitches.config'; import UserIcon from '@assets/svg/user.svg?rect'; import { CATEGORY_NAME, CategoryType, PART_NAME } from '@constants/option'; +import Link from 'next/link'; -type HomeCardProps = { +type DesktopCardProps = { id: number; imageURL?: string; title: string; @@ -15,7 +16,7 @@ type HomeCardProps = { canJoinOnlyActiveGeneration: boolean; joinableParts: string[]; }; -const HomeCard = ({ +const DesktopCard = ({ id, imageURL, title, @@ -26,31 +27,33 @@ const HomeCard = ({ category, canJoinOnlyActiveGeneration, joinableParts, -}: HomeCardProps) => { +}: DesktopCardProps) => { return ( - - - - - - {ownerName} - | - {CATEGORY_NAME(category as CategoryType)} - - - {title} - - - {`${approvedCount}/${capacity}명`} - {`${canJoinOnlyActiveGeneration ? '활동 기수' : '전체 기수'} / ${joinableParts.map( - part => PART_NAME[part] - )}`} - - + + + + + + + {ownerName} + | + {CATEGORY_NAME(category as CategoryType)} + + + {title} + + + {`${approvedCount}/${capacity}명`} + {`${canJoinOnlyActiveGeneration ? '활동 기수' : '전체 기수'} / ${joinableParts.map( + part => PART_NAME[part] + )}`} + + + ); }; -export default HomeCard; +export default DesktopCard; const SCardWrapper = styled('article', { display: 'flex', diff --git a/src/components/page/home/HomeCardList/MobileCard.tsx b/src/components/page/home/HomeCardList/MobileCard.tsx new file mode 100644 index 00000000..f83f16ef --- /dev/null +++ b/src/components/page/home/HomeCardList/MobileCard.tsx @@ -0,0 +1,123 @@ +import Avatar from '@components/@common/avatar/Avatar'; +import { styled } from 'stitches.config'; +import UserIcon from '@assets/svg/user.svg?rect'; +import { CATEGORY_NAME, CategoryType, PART_NAME } from '@constants/option'; +import Link from 'next/link'; +import { Flex } from '@components/util/layout/Flex'; +import { fontsObject } from '@sopt-makers/fonts'; + +type MobileCardProps = { + id: number; + imageURL?: string; + title: string; + ownerName: string; + ownerImage?: string; + approvedCount: number; + capacity: number; + category: string; + canJoinOnlyActiveGeneration: boolean; + joinableParts: string[]; +}; +const MobileCard = ({ + id, + imageURL, + title, + ownerName, + ownerImage, + approvedCount, + capacity, + category, + canJoinOnlyActiveGeneration, + joinableParts, +}: MobileCardProps) => { + return ( + + + + + {title} + + + + {`${approvedCount}/${capacity}명`} + · + {`${canJoinOnlyActiveGeneration ? '활동 기수' : '전체 기수'} / ${joinableParts.map( + part => PART_NAME[part] + )}`} + + + + {ownerName} + | + {CATEGORY_NAME(category as CategoryType)} + + + + + ); +}; + +export default MobileCard; + +const SCardWrapper = styled('article', { + display: 'flex', + gap: '$12', + + width: '100%', +}); + +const SThumbnailImage = styled('img', { + width: '120px', + height: '82px', + + borderRadius: '$12', + + backgroundColor: '$gray800', + backgroundSize: 'cover', + backgroundPosition: 'center center', + backgroundRepeat: 'no-repeat', +}); + +const STitleStyle = styled('h3', { + width: '100%', + + overflow: 'hidden', + textOverflow: 'ellipsis', + whiteSpace: 'nowrap', + + fontSize: '14px', + fontWeight: '700', + lineHeight: '14px', +}); + +const SMetaWrapper = styled('div', { + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + + gap: '$8', + width: 'calc(100% - 120px)', + + overflow: 'hidden', +}); + +const SMetaStyle = styled('p', { + fontStyle: 'L2', + color: '$white', +}); + +const SMetaSubStyle = styled('span', { + padding: '0 $3', + + fontStyle: 'L2', + color: '$gray500', +}); + +const SInfoStyle = styled('p', { + fontStyle: 'L1', + color: '$gray300', +}); diff --git a/src/components/page/home/HomeCardList/index.tsx b/src/components/page/home/HomeCardList/index.tsx index dc49e067..226fb793 100644 --- a/src/components/page/home/HomeCardList/index.tsx +++ b/src/components/page/home/HomeCardList/index.tsx @@ -1,14 +1,43 @@ import { GroupBrowsingCardResponse } from '@api/API_LEGACY/meeting'; import CardList from '@components/page/home/HomeCardList/CardList'; +import { styled } from 'stitches.config'; const HomeCardList = ({ groupBrowsingCardData }: { groupBrowsingCardData: GroupBrowsingCardResponse }) => { return ( -
- + + + -
+ ); }; export default HomeCardList; + +const SWrapper = styled('div', { + position: 'relative', + width: '894px', + + '@laptop': { + width: '100%', + }, +}); + +const SGradationRight = styled('div', { + width: '122px', + height: '100%', + background: 'linear-gradient(270deg, #0F0F12 0%, rgba(15, 15, 18, 0.00) 100%)', + + position: 'absolute', + zIndex: 1, + right: '-1px', + pointerEvents: 'none', + + '@media (min-width: 1259px)': { + display: 'none', + }, + '@tablet': { + display: 'none', + }, +}); diff --git a/src/components/page/home/QuickMenu/index.tsx b/src/components/page/home/QuickMenu/index.tsx index 8f649996..be8f8b7b 100644 --- a/src/components/page/home/QuickMenu/index.tsx +++ b/src/components/page/home/QuickMenu/index.tsx @@ -3,23 +3,26 @@ import BoltIcon from '@assets/svg/button_bolt.svg?rect'; import StudyIcon from '@assets/svg/button_study.svg?rect'; import SeminarIcon from '@assets/svg/button_seminar.svg?rect'; import EventIcon from '@assets/svg/button_event.svg?rect'; +import Link from 'next/link'; const QuickMenu = () => { const menu = [ - { Icon: SBoltIcon, label: '번쩍 모임' }, - { Icon: SStudyIcon, label: '스터디' }, - { Icon: SSeminarIcon, label: '세미나' }, - { Icon: SEventIcon, label: '행사' }, + { Icon: SBoltIcon, label: '번쩍 모임', link: '/list?category=번쩍' }, + { Icon: SStudyIcon, label: '스터디', link: '/list?category=스터디' }, + { Icon: SSeminarIcon, label: '세미나', link: '/list?category=세미나' }, + { Icon: SEventIcon, label: '행사', link: '/list?category=행사' }, ]; return ( 모임 신청 가이드 - {menu.map((item, idx) => ( - - - {item.label} - + {menu.map(item => ( + + + + {item.label} + + ))} );