diff --git a/pages/_app.tsx b/pages/_app.tsx index c70b223d..853874b7 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,7 +1,7 @@ import { crewToken, playgroundToken } from '@/stores/tokenStore'; import { fetchMyProfile } from '@api/API_LEGACY/user'; import Header from '@components/header/Header'; -import Loader from '@components/loader/Loader'; +import Loader from '@components/@common/loader/Loader'; import SEO from '@components/seo/SEO'; import { setAccessTokens } from '@components/util/auth'; import { OverlayProvider } from '@hooks/useOverlay/OverlayProvider'; diff --git a/pages/detail/index.tsx b/pages/detail/index.tsx index 51c1b02b..0d61bcd0 100644 --- a/pages/detail/index.tsx +++ b/pages/detail/index.tsx @@ -1,4 +1,4 @@ -import Carousel from '@components/page/meetingDetail/Carousel'; +import Carousel from '@components/page/detail/Carousel'; import { styled } from 'stitches.config'; import { useMutationDeleteMeeting, @@ -7,15 +7,15 @@ import { useQueryGetMeeting, } from '@api/API_LEGACY/meeting/hooks'; import { useRouter } from 'next/router'; -import Loader from '@components/loader/Loader'; -import InformationPanel from '@components/page/meetingDetail/Information/InformationPanel'; +import Loader from '@components/@common/loader/Loader'; +import InformationPanel from '@components/page/detail/Information/InformationPanel'; import { Tab } from '@headlessui/react'; -import FeedPanel from '@components/page/meetingDetail/Feed/FeedPanel'; +import FeedPanel from '@components/page/detail/Feed/FeedPanel'; import { Fragment, useEffect, useState } from 'react'; import dayjs from 'dayjs'; import 'dayjs/locale/ko'; import { ERecruitmentStatus } from '@constants/option'; -import MeetingController from '@components/page/meetingDetail/MeetingController'; +import MeetingController from '@components/page/detail/MeetingController'; dayjs.locale('ko'); diff --git a/pages/edit/index.tsx b/pages/edit/index.tsx index cc98324a..b545a5c8 100644 --- a/pages/edit/index.tsx +++ b/pages/edit/index.tsx @@ -9,7 +9,7 @@ import { getMeeting, updateMeeting } from '@api/API_LEGACY/meeting'; import { FormType, schema } from '@type/form'; import { styled } from 'stitches.config'; import dayjs from 'dayjs'; -import Loader from '@components/loader/Loader'; +import Loader from '@components/@common/loader/Loader'; import CheckIcon from '@assets/svg/check.svg'; import dynamic from 'next/dynamic'; import { parts } from '@data/options'; diff --git a/pages/index.tsx b/pages/index.tsx index aad043d9..10eba5bd 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,13 +1,11 @@ -import { ampli } from '@/ampli'; import { useQueryGetGroupBrowsingCard } from '@api/API_LEGACY/meeting/hooks'; import { useInfinitePosts } from '@api/post/hooks'; import Carousel from '@components/groupBrowsing/Carousel/Carousel'; import GroupBrowsingSlider from '@components/groupBrowsingSlider/groupBrowsingSlider'; -import DesktopFeedListSkeleton from '@components/page/meetingDetail/Feed/Skeleton/DesktopFeedListSkeleton'; -import MobileFeedListSkeleton from '@components/page/meetingDetail/Feed/Skeleton/MobileFeedListSkeleton'; -import RenderPostsWithAds from '@components/page/meetingList/Advertisement'; -import FloatingButton from '@components/page/postList/FloatingButton'; -import { TabList } from '@components/tabList/TabList'; +import DesktopFeedListSkeleton from '@components/page/detail/Feed/Skeleton/DesktopFeedListSkeleton'; +import MobileFeedListSkeleton from '@components/page/detail/Feed/Skeleton/MobileFeedListSkeleton'; +import QuickMenu from '@components/page/home/QuickMenu'; +import FloatingButton from '@components/page/home/FloatingButton'; import { Flex } from '@components/util/layout/Flex'; import { TAKE_COUNT } from '@constants/feed'; import { useDisplay } from '@hooks/useDisplay'; @@ -16,9 +14,12 @@ import Link from 'next/link'; import { useEffect } from 'react'; import { useInView } from 'react-intersection-observer'; import { styled } from 'stitches.config'; +import { GroupBrowsingCardResponse } from '@api/API_LEGACY/meeting'; +import CrewTab from '@components/CrewTab'; +import HomeCardList from '@components/page/home/HomeCardList'; const Home: NextPage = () => { - const { isTablet } = useDisplay(); + const { isLaptop, isTablet } = useDisplay(); const { ref, inView } = useInView(); @@ -33,78 +34,76 @@ const Home: NextPage = () => { }, [inView, hasNextPage, fetchNextPage]); return ( - <> -
- - - ampli.clickNavbarGroup({ menu: '피드' })}> - 홈 +
+ + {isLoading && (isTablet ? : )} + {isTablet ? ( + <> + + ⚡ ️솝트만의 일회성 모임, 번쩍 + + 더보기 {'>'} - ampli.clickNavbarGroup({ menu: '전체 모임' })}> - 전체 모임 - - ampli.clickNavbarGroup({ menu: '내 모임' })}> - 내 모임 - - - - - {isLoading && - (isTablet ? : )} - - {isTablet ? ( - <> - - 모임 둘러보기 - + + {groupBrowsingCardData && } + + ) : ( + <> + + + ⚡ ️솝트만의 일회성 모임, 번쩍 + 더보기 {'>'} - {groupBrowsingCardData && } - 최신 피드 - - ) : ( - <> - - - 모임 둘러보기 - - 더보기 {'>'} - - - - - - - {groupBrowsingCardData && } - - - - - 최신 피드 - - - )} - - - - {isFetchingNextPage && isTablet && } - {!isFetchingNextPage && hasNextPage ? ( -
- ) : ( -
- )} - - -
- + + + + + {groupBrowsingCardData && } + + + + )} + {isLaptop ? ( + <> + + + + {groupBrowsingCardData && ( + + )} + + ) : ( + <> + + + {groupBrowsingCardData && ( + + )} +
+ +
+ + + )} + + {isFetchingNextPage && isTablet && } + {!isFetchingNextPage && hasNextPage ? ( +
+ ) : ( +
+ )} + + +
); }; export default Home; const SContentTitle = styled('div', { - fontStyle: 'H2', + fontStyle: 'H1', color: '$white', mb: '$20', display: 'flex', @@ -154,7 +153,7 @@ const GroupBrowsingCarouselContainer = styled('div', { display: 'flex', justifyContent: 'center', - '@media (max-width: 1259px)': { + '@laptop': { left: '-30px', }, }); diff --git a/pages/list/index.tsx b/pages/list/index.tsx index e4e24918..6e1dfbf8 100644 --- a/pages/list/index.tsx +++ b/pages/list/index.tsx @@ -4,22 +4,20 @@ import { useQueryMyProfile } from '@api/API_LEGACY/user/hooks'; import PlusIcon from '@assets/svg/plus.svg'; import WriteIcon from '@assets/svg/write.svg'; import ConfirmModal from '@components/modal/ConfirmModal'; -import CardSkeleton from '@components/page/meetingList/Card/Skeleton'; -import Filter from '@components/page/meetingList/Filter'; -import Search from '@components/page/meetingList/Filter/Search'; -import GridLayout from '@components/page/meetingList/Grid/Layout'; -import { MeetingListOfAll } from '@components/page/meetingList/Grid/List'; -import NoticeSlider from '@components/page/meetingList/Slider/NoticeSlider/NoticeSlider'; -import { TabList } from '@components/tabList/TabList'; +import CardSkeleton from '@components/page/list/Card/Skeleton'; +import Filter from '@components/page/list/Filter'; +import Search from '@components/page/list/Filter/Search'; +import GridLayout from '@components/page/list/Grid/Layout'; +import { MeetingListOfAll } from '@components/page/list/Grid/List'; +import NoticeSlider from '@components/page/list/Slider/NoticeSlider/NoticeSlider'; import { SSRSafeSuspense } from '@components/util/SSRSafeSuspense'; -import { Flex } from '@components/util/layout/Flex'; import useModal from '@hooks/useModal'; import { playgroundLink } from '@sopt-makers/playground-common'; import type { NextPage } from 'next'; -import Link from 'next/link'; import { useRouter } from 'next/router'; import { useEffect } from 'react'; import { styled } from 'stitches.config'; +import CrewTab from '@components/CrewTab'; const Home: NextPage = () => { const router = useRouter(); @@ -51,18 +49,7 @@ const Home: NextPage = () => { return ( <>
- - - ampli.clickNavbarGroup({ menu: '피드' })}> - 홈 - - ampli.clickNavbarGroup({ menu: '전체 모임' })}> - 전체 모임 - - ampli.clickNavbarGroup({ menu: '내 모임' })}> - 내 모임 - - + @@ -71,7 +58,7 @@ const Home: NextPage = () => { 모임 개설하기 - + diff --git a/pages/mine/index.tsx b/pages/mine/index.tsx index b460ab82..ecd77828 100644 --- a/pages/mine/index.tsx +++ b/pages/mine/index.tsx @@ -1,18 +1,16 @@ import type { NextPage } from 'next'; -import { TabList } from '@components/tabList/TabList'; -import { Flex } from '@components/util/layout/Flex'; import { Tab } from '@headlessui/react'; import useSessionStorage from '@hooks/useSessionStorage'; -import Link from 'next/link'; import { Fragment, useEffect } from 'react'; import { styled } from 'stitches.config'; import { ampli } from '@/ampli'; -import CardSkeleton from '@components/page/meetingList/Card/Skeleton'; -import GridLayout from '@components/page/meetingList/Grid/Layout'; -import { MeetingListOfApplied, MeetingListOfMine } from '@components/page/meetingList/Grid/List'; +import CardSkeleton from '@components/page/list/Card/Skeleton'; +import GridLayout from '@components/page/list/Grid/Layout'; +import { MeetingListOfApplied, MeetingListOfMine } from '@components/page/list/Grid/List'; import { SSRSafeSuspense } from '@components/util/SSRSafeSuspense'; +import CrewTab from '@components/CrewTab'; const enum MeetingType { APPLIED, @@ -39,19 +37,7 @@ const MinePage: NextPage = () => { return (
- - - ampli.clickNavbarGroup({ menu: '피드' })}> - 홈 - - ampli.clickNavbarGroup({ menu: '전체 모임' })}> - 전체 모임 - - ampli.clickNavbarGroup({ menu: '내 모임' })}> - 내 모임 - - - + diff --git a/pages/mine/management/index.tsx b/pages/mine/management/index.tsx index c2ef23cb..b765a213 100644 --- a/pages/mine/management/index.tsx +++ b/pages/mine/management/index.tsx @@ -1,22 +1,23 @@ import { useRouter } from 'next/router'; import Link from 'next/link'; import { styled } from 'stitches.config'; -import { TabList } from '@components/tabList/TabList'; -import ManagementListSkeleton from '@components/page/meetingManagement/Skeleton/ManagementListSkeleton'; -import MeetingInformationSkeleton from '@components/page/meetingManagement/Skeleton/MeetingInformationSkeleton'; -import ManagementListItem from '@components/page/meetingManagement/ManagementListItem'; -import MeetingInformation from '@components/page/meetingManagement/MeetingInformation'; +import { TabList } from '@components/@common/tabList/TabList'; +import ManagementListSkeleton from '@components/page/mine/management/Skeleton/ManagementListSkeleton'; +import MeetingInformationSkeleton from '@components/page/mine/management/Skeleton/MeetingInformationSkeleton'; +import ManagementListItem from '@components/page/mine/management/ManagementListItem'; +import MeetingInformation from '@components/page/mine/management/MeetingInformation'; import Select from '@components/form/Select'; import { Option } from '@components/form/Select/OptionItem'; -import ItemDescriptionBox from '@components/page/meetingManagement/ItemDescriptionBox'; -import Pagination from '@components/page/meetingList/Pagination'; +import ItemDescriptionBox from '@components/page/mine/management/ItemDescriptionBox'; +import Pagination from '@components/page/list/Pagination'; import { usePageParams, useSortByDateParams, useStatusParams, useTakeParams } from '@hooks/queryString/custom'; import { numberOptionList, sortOptionList } from '@data/options'; import { useMutationDownloadMeetingMemberCSV, useQueryGetMeeting } from '@api/API_LEGACY/meeting/hooks'; -import Filter from '@components/page/meetingManagement/Filter'; +import Filter from '@components/page/mine/management/Filter'; import DownloadIcon from '@assets/svg/download.svg'; import { ampli } from '@/ampli'; import { useQueryGetMeetingPeopleList } from '@api/meeting/hook'; +import CrewTab from '@components/CrewTab'; const ManagementPage = () => { const router = useRouter(); @@ -62,17 +63,7 @@ const ManagementPage = () => { return ( - - ampli.clickNavbarGroup({ menu: '피드' })}> - 홈 - - ampli.clickNavbarGroup({ menu: '전체 모임' })}> - 전체 모임 - - ampli.clickNavbarGroup({ menu: '내 모임' })}> - 내 모임 - - + {isMeetingDataLoading ? ( ) : ( diff --git a/pages/post/index.tsx b/pages/post/index.tsx index 719924f4..405beafc 100644 --- a/pages/post/index.tsx +++ b/pages/post/index.tsx @@ -6,7 +6,7 @@ import { api, apiV2 } from '@api/index'; import { PostCommentWithMentionRequest } from '@api/mention'; import { useMutationPostCommentWithMention } from '@api/mention/hooks'; import { useInfinitePosts, useMutationPostLike, useMutationUpdateLike, useQueryGetPost } from '@api/post/hooks'; -import LikeButton from '@components/button/LikeButton'; +import LikeButton from '@components/@common/button/LikeButton'; import ContentBlocker from '@components/blocker/ContentBlocker'; import FeedActionButton from '@components/feed/FeedActionButton/FeedActionButton'; import FeedCommentContainer from '@components/feed/FeedCommentContainer/FeedCommentContainer'; @@ -15,10 +15,10 @@ import FeedCommentLikeSection from '@components/feed/FeedCommentLikeSection/Feed import FeedPostViewer from '@components/feed/FeedPostViewer/FeedPostViewer'; import { MentionContext } from '@components/feed/Mention/MentionContext'; import FeedEditModal from '@components/feed/Modal/FeedEditModal'; -import Loader from '@components/loader/Loader'; +import Loader from '@components/@common/loader/Loader'; import ConfirmModal from '@components/modal/ConfirmModal'; -import FeedItem from '@components/page/meetingDetail/Feed/FeedItem'; -import MeetingInfo from '@components/page/meetingDetail/Feed/FeedItem/MeetingInfo'; +import FeedItem from '@components/page/detail/Feed/FeedItem'; +import MeetingInfo from '@components/page/detail/Feed/FeedItem/MeetingInfo'; import { TAKE_COUNT } from '@constants/feed'; import useComment from '@hooks/useComment/useComment'; import useCommentMutation from '@hooks/useComment/useCommentMutation'; diff --git a/public/assets/svg/button_bolt.svg b/public/assets/svg/button_bolt.svg new file mode 100644 index 00000000..865a3fa3 --- /dev/null +++ b/public/assets/svg/button_bolt.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/assets/svg/button_event.svg b/public/assets/svg/button_event.svg new file mode 100644 index 00000000..ce60a901 --- /dev/null +++ b/public/assets/svg/button_event.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/assets/svg/button_seminar.svg b/public/assets/svg/button_seminar.svg new file mode 100644 index 00000000..9ccbdadf --- /dev/null +++ b/public/assets/svg/button_seminar.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/public/assets/svg/button_study.svg b/public/assets/svg/button_study.svg new file mode 100644 index 00000000..c0f80e4d --- /dev/null +++ b/public/assets/svg/button_study.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/api/API_LEGACY/meeting/hooks.ts b/src/api/API_LEGACY/meeting/hooks.ts index 5fbefe17..cdff05a8 100644 --- a/src/api/API_LEGACY/meeting/hooks.ts +++ b/src/api/API_LEGACY/meeting/hooks.ts @@ -31,6 +31,7 @@ import { GroupBrowsingCardDetail, GetMeetingResponse, postEventApplication, + GroupBrowsingCardResponse, } from '.'; interface UseQueryGetMeetingParams { @@ -191,7 +192,7 @@ export const useMutationDownloadMeetingMemberCSV = () => }, }); -export const useQueryGetGroupBrowsingCard = (): UseQueryResult => { +export const useQueryGetGroupBrowsingCard = (): UseQueryResult => { return useQuery({ queryKey: ['getGroupBrowsingCard'], queryFn: () => { diff --git a/src/api/API_LEGACY/meeting/index.ts b/src/api/API_LEGACY/meeting/index.ts index 6cfa4e97..80d68494 100644 --- a/src/api/API_LEGACY/meeting/index.ts +++ b/src/api/API_LEGACY/meeting/index.ts @@ -288,8 +288,11 @@ export const downloadMeetingMemberCSV = async (meetingId: string) => { return await api.get<{ url: string }>(`/meeting/v2/${meetingId}/list/csv?status=1&type=0,1&order=desc`); }; +export type GroupBrowsingCardResponse = + paths['/meeting/v2']['get']['responses']['200']['content']['application/json;charset=UTF-8']['meetings']; +export type GroupBrowsingCardItem = GroupBrowsingCardResponse[0]; export const getGroupBrowsingCard = async () => { - return (await api.get>('/meeting/v2/banner')).data; + return (await api.get('/meeting/v2/banner')).data; }; export const returnNewStatus = (status: number, mstartDate: string, isGroupActive: boolean) => { @@ -305,12 +308,6 @@ export const returnNewStatus = (status: number, mstartDate: string, isGroupActiv return 4; }; -export function categoryType(category: string) { - if (category === 'STUDY') return '스터디'; - if (category == 'EVENT') return '행사'; - if (category == 'SEMINAR') return '세미나'; -} - export function returnIsGroupActive(mstartDate: string, mendDate: string) { return dayjs().isBetween(dayjs(mstartDate), dayjs(mendDate), 'day', '[]'); } diff --git a/src/components/avatar/Avatar.stories.ts b/src/components/@common/avatar/Avatar.stories.ts similarity index 100% rename from src/components/avatar/Avatar.stories.ts rename to src/components/@common/avatar/Avatar.stories.ts diff --git a/src/components/avatar/Avatar.tsx b/src/components/@common/avatar/Avatar.tsx similarity index 100% rename from src/components/avatar/Avatar.tsx rename to src/components/@common/avatar/Avatar.tsx diff --git a/src/components/avatar/AvatarGroup.stories.tsx b/src/components/@common/avatar/AvatarGroup.stories.tsx similarity index 100% rename from src/components/avatar/AvatarGroup.stories.tsx rename to src/components/@common/avatar/AvatarGroup.stories.tsx diff --git a/src/components/avatar/AvatarGroup.tsx b/src/components/@common/avatar/AvatarGroup.tsx similarity index 100% rename from src/components/avatar/AvatarGroup.tsx rename to src/components/@common/avatar/AvatarGroup.tsx diff --git a/src/components/button/Arrow.tsx b/src/components/@common/button/Arrow.tsx similarity index 100% rename from src/components/button/Arrow.tsx rename to src/components/@common/button/Arrow.tsx diff --git a/src/components/button/LikeButton.tsx b/src/components/@common/button/LikeButton.tsx similarity index 100% rename from src/components/button/LikeButton.tsx rename to src/components/@common/button/LikeButton.tsx diff --git a/src/components/button/Switch.tsx b/src/components/@common/button/Switch.tsx similarity index 100% rename from src/components/button/Switch.tsx rename to src/components/@common/button/Switch.tsx diff --git a/src/components/loader/ButtonLoader.tsx b/src/components/@common/loader/ButtonLoader.tsx similarity index 100% rename from src/components/loader/ButtonLoader.tsx rename to src/components/@common/loader/ButtonLoader.tsx diff --git a/src/components/loader/Loader.tsx b/src/components/@common/loader/Loader.tsx similarity index 100% rename from src/components/loader/Loader.tsx rename to src/components/@common/loader/Loader.tsx diff --git a/src/components/tabList/TabList.tsx b/src/components/@common/tabList/TabList.tsx similarity index 100% rename from src/components/tabList/TabList.tsx rename to src/components/@common/tabList/TabList.tsx diff --git a/src/components/tabList/TabListContext.ts b/src/components/@common/tabList/TabListContext.ts similarity index 100% rename from src/components/tabList/TabListContext.ts rename to src/components/@common/tabList/TabListContext.ts diff --git a/src/components/CrewTab/index.tsx b/src/components/CrewTab/index.tsx new file mode 100644 index 00000000..3e500740 --- /dev/null +++ b/src/components/CrewTab/index.tsx @@ -0,0 +1,37 @@ +import { ampli } from '@/ampli'; +import { TabList } from '@components/@common/tabList/TabList'; +import { Flex } from '@components/util/layout/Flex'; +import Link from 'next/link'; +import { useRouter } from 'next/router'; +import { ReactNode } from 'react'; + +const CrewTab = ({ children }: { children?: ReactNode }) => { + const path = useRouter().pathname; + const tabText = { + group: 'feedAll', + list: 'groupAll', + mine: 'mine', + management: 'mine', + }; + + const lastSegment = (path.split('/').at(-1) || 'group') as keyof typeof tabText; + + return ( + + + ampli.clickNavbarGroup({ menu: '피드' })}> + 홈 + + ampli.clickNavbarGroup({ menu: '전체 모임' })}> + 전체 모임 + + ampli.clickNavbarGroup({ menu: '내 모임' })}> + 내 모임 + + + {children} + + ); +}; + +export default CrewTab; diff --git a/src/components/feed/FeedCommentContainer/FeedCommentContainer.tsx b/src/components/feed/FeedCommentContainer/FeedCommentContainer.tsx index 59f5b737..13ad9993 100644 --- a/src/components/feed/FeedCommentContainer/FeedCommentContainer.tsx +++ b/src/components/feed/FeedCommentContainer/FeedCommentContainer.tsx @@ -6,7 +6,7 @@ import { useDeleteComment } from '@api/post/hooks'; import ReCommentHoverIcon from '@assets/svg/Recomment_Hover_Icon.svg'; import MessageIcon from '@assets/svg/message-dots.svg?v2'; import ReplyPointIcon from '@assets/svg/recomment_point_icon.svg'; -import Avatar from '@components/avatar/Avatar'; +import Avatar from '@components/@common/avatar/Avatar'; import ConfirmModal from '@components/modal/ConfirmModal'; import { parseTextToLink } from '@components/util/parseTextToLink'; import { useOverlay } from '@hooks/useOverlay/Index'; diff --git a/src/components/feed/FeedCommentViewer/FeedCommentViewer.tsx b/src/components/feed/FeedCommentViewer/FeedCommentViewer.tsx index 8da30d1c..00ca8348 100644 --- a/src/components/feed/FeedCommentViewer/FeedCommentViewer.tsx +++ b/src/components/feed/FeedCommentViewer/FeedCommentViewer.tsx @@ -2,7 +2,7 @@ import { paths } from '@/__generated__/schema2'; import LikeHoverIcon from '@assets/svg/like_hover_in_comment.svg'; import MessageIcon from '@assets/svg/message-dots.svg'; import ReCommentHoverIcon from '@assets/svg/Recomment_Hover_Icon.svg'; -import Avatar from '@components/avatar/Avatar'; +import Avatar from '@components/@common/avatar/Avatar'; import { playgroundURL } from '@constants/url'; import { Menu } from '@headlessui/react'; import { colors } from '@sopt-makers/colors'; diff --git a/src/components/feed/FeedPostViewer/FeedPostViewer.tsx b/src/components/feed/FeedPostViewer/FeedPostViewer.tsx index 457c8183..2ad748ae 100644 --- a/src/components/feed/FeedPostViewer/FeedPostViewer.tsx +++ b/src/components/feed/FeedPostViewer/FeedPostViewer.tsx @@ -1,5 +1,5 @@ import { Menu } from '@headlessui/react'; -import Avatar from '@components/avatar/Avatar'; +import Avatar from '@components/@common/avatar/Avatar'; import ShareIcon from 'public/assets/svg/share.svg'; import MenuIcon from 'public/assets/svg/ic_menu.svg'; import ArrowIcon from '@assets/svg/arrow_card.svg'; diff --git a/src/components/feed/Modal/SelectMeeting/index.tsx b/src/components/feed/Modal/SelectMeeting/index.tsx index ff8c75f6..14b01cfa 100644 --- a/src/components/feed/Modal/SelectMeeting/index.tsx +++ b/src/components/feed/Modal/SelectMeeting/index.tsx @@ -1,4 +1,4 @@ -import { Arrow } from '@components/button/Arrow'; +import { Arrow } from '@components/@common/button/Arrow'; import ModalBackground from '@components/modal/ModalBackground'; import { getResizedImage } from '@utils/image'; import { useState } from 'react'; diff --git a/src/components/form/FormSwitch/FormSwitch.tsx b/src/components/form/FormSwitch/FormSwitch.tsx index c88fa95c..02ef9647 100644 --- a/src/components/form/FormSwitch/FormSwitch.tsx +++ b/src/components/form/FormSwitch/FormSwitch.tsx @@ -1,5 +1,5 @@ import { Switch as HeadlessSwitch } from '@headlessui/react'; -import Switch, { SwitchProps } from '@components/button/Switch'; +import Switch, { SwitchProps } from '@components/@common/button/Switch'; import { styled } from 'stitches.config'; interface FormSwitchProps extends SwitchProps { diff --git a/src/components/groupBrowsing/Carousel/Carousel.stories.ts b/src/components/groupBrowsing/Carousel/Carousel.stories.ts index a5c2872f..ab21c566 100644 --- a/src/components/groupBrowsing/Carousel/Carousel.stories.ts +++ b/src/components/groupBrowsing/Carousel/Carousel.stories.ts @@ -15,277 +15,277 @@ type Story = StoryObj; // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args export const Default: Story = { args: { - cardList: [ - { - id: 93, - userId: 270, - title: '비밀이야', - category: '스터디', - imageURL: [ - { - id: 0, - url: 'https://makers-web-img.s3.ap-northeast-2.amazonaws.com/meeting/2024/01/08/213a1b06-35fd-4227-9029-3843f66622a3.png', - }, - ], - startDate: '2023-02-13T00:00:00.000Z', - endDate: '2024-09-12T23:59:59.999Z', - capacity: 299, - mstartDate: '2024-02-14T00:00:00.000Z', - mendDate: '2024-05-31T00:00:00.000Z', - recentActivityDate: '2024-02-14T00:00:00.000Z', - targetActiveGeneration: 33, - joinableParts: ['PM', 'DESIGN', 'WEB', 'ANDROID', 'IOS', 'SERVER'], - applicantCount: 0, - approvedUserCount: 0, - user: { - id: 270, - name: '이예서', - orgId: 125, - profileImage: - 'https://s3.ap-northeast-2.amazonaws.com/sopt-makers-internal//dev/image/project/377c054a-1d17-48bd-8906-e36af319eeff-thumb-1889155643_tTsRhUda_df98a7412d411689021274036b55ee934f215b47_640x640.jpg', - }, - status: 1, - }, - { - id: 82, - userId: 253, - title: '고기 좋아요', - category: '스터디', - imageURL: [ - { - id: 0, - url: 'https://makers-web-img.s3.ap-northeast-2.amazonaws.com/meeting/2023/09/28/270911ef-e176-4323-b713-b0352a8363a7.jpeg', - }, - ], - startDate: '2023-01-13T00:00:00.000Z', - endDate: '2099-01-01T23:59:59.999Z', - capacity: 7, - mstartDate: '2100-01-01T00:00:00.000Z', - mendDate: '2100-01-02T00:00:00.000Z', - recentActivityDate: '2024-02-14T00:00:00.000Z', - targetActiveGeneration: 32, - joinableParts: ['PM', 'DESIGN', 'WEB', 'ANDROID', 'IOS', 'SERVER'], - applicantCount: 0, - approvedUserCount: 1, - user: { - id: 253, - name: '강영우', - orgId: 18, - profileImage: - 'https://s3.ap-northeast-2.amazonaws.com/sopt-makers-internal//dev/image/project/377c054a-1d17-48bd-8906-e36af319eeff-thumb-1889155643_tTsRhUda_df98a7412d411689021274036b55ee934f215b47_640x640.jpg', - }, - status: 1, - }, - { - id: 67, - userId: 253, - title: '내가 최고야', - category: '스터디', - imageURL: [ - { - id: 0, - url: 'https://makers-web-img.s3.ap-northeast-2.amazonaws.com/meeting/2023/09/17/bc1d00b7-9770-4cde-ba04-69bbd5a9ae72.png', - }, - ], - startDate: '2023-01-13T00:00:00.000Z', - endDate: '2099-01-01T23:59:59.999Z', - capacity: 10, - mstartDate: '2023-09-17T00:00:00.000Z', - mendDate: '9999-12-30T00:00:00.000Z', - recentActivityDate: '2024-02-14T00:00:00.000Z', - targetActiveGeneration: 33, - joinableParts: ['PM', 'DESIGN', 'WEB', 'ANDROID', 'IOS', 'SERVER'], - applicantCount: 0, - approvedUserCount: 0, - user: { - id: 253, - name: '강영우', - orgId: 18, - profileImage: - 'https://s3.ap-northeast-2.amazonaws.com/sopt-makers-internal//dev/image/project/377c054a-1d17-48bd-8906-e36af319eeff-thumb-1889155643_tTsRhUda_df98a7412d411689021274036b55ee934f215b47_640x640.jpg', - }, - status: 1, - }, - { - id: 65, - userId: 261, - title: '나', - category: '스터디', - imageURL: [ - { - id: 0, - url: 'https://makers-web-img.s3.ap-northeast-2.amazonaws.com/meeting/2023/05/13/e907b6b8-015b-4685-854d-47f633c90c53.jpeg', - }, - ], - startDate: '2023-05-10T00:00:00.000Z', - endDate: '3013-05-10T23:59:59.999Z', - capacity: 1234567890, - mstartDate: '2034-05-15T00:00:00.000Z', - mendDate: '1997-08-14T00:00:00.000Z', - recentActivityDate: '2024-02-14T00:00:00.000Z', - targetActiveGeneration: 31, - joinableParts: ['PM', 'DESIGN', 'WEB', 'ANDROID', 'IOS', 'SERVER'], - applicantCount: 0, - approvedUserCount: 3, - user: { - id: 261, - name: '백지연', - orgId: 28, - profileImage: - 'https://s3.ap-northeast-2.amazonaws.com/sopt-makers-internal//prod/image/project/39f5882c-e322-425c-9f83-1194cf0aa220-톡방.png', - }, - status: 1, - }, - { - id: 99, - userId: 262, - title: '하하', - category: '스터디', - imageURL: [ - { - id: 0, - url: 'https://makers-web-img.s3.ap-northeast-2.amazonaws.com/meeting/2023/05/13/e907b6b8-015b-4685-854d-47f633c90c53.jpeg', - }, - ], - startDate: '2023-05-10T00:00:00.000Z', - endDate: '3013-05-10T23:59:59.999Z', - capacity: 1234567890, - mstartDate: '2034-05-15T00:00:00.000Z', - mendDate: '1997-08-14T00:00:00.000Z', - recentActivityDate: '2024-02-14T00:00:00.000Z', - targetActiveGeneration: 31, - joinableParts: ['PM', 'DESIGN', 'WEB', 'ANDROID', 'IOS', 'SERVER'], - applicantCount: 0, - approvedUserCount: 3, - user: { - id: 299, - name: '김현수', - orgId: 28, - profileImage: - 'https://s3.ap-northeast-2.amazonaws.com/sopt-makers-internal//prod/image/project/39f5882c-e322-425c-9f83-1194cf0aa220-톡방.png', - }, - status: 1, - }, - { - id: 100, - userId: 262, - title: '하하', - category: '스터디', - imageURL: [ - { - id: 0, - url: 'https://makers-web-img.s3.ap-northeast-2.amazonaws.com/meeting/2023/05/13/e907b6b8-015b-4685-854d-47f633c90c53.jpeg', - }, - ], - startDate: '2023-05-10T00:00:00.000Z', - endDate: '3013-05-10T23:59:59.999Z', - capacity: 1234567890, - mstartDate: '2034-05-15T00:00:00.000Z', - mendDate: '1997-08-14T00:00:00.000Z', - recentActivityDate: '2024-02-14T00:00:00.000Z', - targetActiveGeneration: 31, - joinableParts: ['PM', 'DESIGN', 'WEB', 'ANDROID', 'IOS', 'SERVER'], - applicantCount: 0, - approvedUserCount: 3, - user: { - id: 299, - name: '김현수', - orgId: 28, - profileImage: - 'https://s3.ap-northeast-2.amazonaws.com/sopt-makers-internal//prod/image/project/39f5882c-e322-425c-9f83-1194cf0aa220-톡방.png', - }, - status: 1, - }, - { - id: 101, - userId: 262, - title: '하하', - category: '스터디', - imageURL: [ - { - id: 0, - url: 'https://makers-web-img.s3.ap-northeast-2.amazonaws.com/meeting/2023/05/13/e907b6b8-015b-4685-854d-47f633c90c53.jpeg', - }, - ], - startDate: '2023-05-10T00:00:00.000Z', - endDate: '3013-05-10T23:59:59.999Z', - capacity: 1234567890, - mstartDate: '2034-05-15T00:00:00.000Z', - mendDate: '1997-08-14T00:00:00.000Z', - recentActivityDate: '2024-02-14T00:00:00.000Z', - targetActiveGeneration: 31, - joinableParts: ['PM', 'DESIGN', 'WEB', 'ANDROID', 'IOS', 'SERVER'], - applicantCount: 0, - approvedUserCount: 3, - user: { - id: 299, - name: '김현수', - orgId: 28, - profileImage: - 'https://s3.ap-northeast-2.amazonaws.com/sopt-makers-internal//prod/image/project/39f5882c-e322-425c-9f83-1194cf0aa220-톡방.png', - }, - status: 1, - }, - { - id: 102, - userId: 262, - title: '하하', - category: '스터디', - imageURL: [ - { - id: 0, - url: 'https://makers-web-img.s3.ap-northeast-2.amazonaws.com/meeting/2023/05/13/e907b6b8-015b-4685-854d-47f633c90c53.jpeg', - }, - ], - startDate: '2023-05-10T00:00:00.000Z', - endDate: '3013-05-10T23:59:59.999Z', - capacity: 1234567890, - mstartDate: '2034-05-15T00:00:00.000Z', - mendDate: '1997-08-14T00:00:00.000Z', - recentActivityDate: '2024-02-14T00:00:00.000Z', - targetActiveGeneration: 31, - joinableParts: ['PM', 'DESIGN', 'WEB', 'ANDROID', 'IOS', 'SERVER'], - applicantCount: 0, - approvedUserCount: 3, - user: { - id: 299, - name: '김현수', - orgId: 28, - profileImage: - 'https://s3.ap-northeast-2.amazonaws.com/sopt-makers-internal//prod/image/project/39f5882c-e322-425c-9f83-1194cf0aa220-톡방.png', - }, - status: 1, - }, - { - id: 103, - userId: 262, - title: '하하', - category: '스터디', - imageURL: [ - { - id: 0, - url: 'https://makers-web-img.s3.ap-northeast-2.amazonaws.com/meeting/2023/05/13/e907b6b8-015b-4685-854d-47f633c90c53.jpeg', - }, - ], - startDate: '2023-05-10T00:00:00.000Z', - endDate: '3013-05-10T23:59:59.999Z', - capacity: 1234567890, - mstartDate: '2034-05-15T00:00:00.000Z', - mendDate: '1997-08-14T00:00:00.000Z', - recentActivityDate: '2024-02-14T00:00:00.000Z', - targetActiveGeneration: 31, - joinableParts: ['PM', 'DESIGN', 'WEB', 'ANDROID', 'IOS', 'SERVER'], - applicantCount: 0, - approvedUserCount: 3, - user: { - id: 299, - name: '김현수', - orgId: 28, - profileImage: - 'https://s3.ap-northeast-2.amazonaws.com/sopt-makers-internal//prod/image/project/39f5882c-e322-425c-9f83-1194cf0aa220-톡방.png', - }, - status: 1, - }, - ], + // cardList: [ + // { + // id: 93, + // userId: 270, + // title: '비밀이야', + // category: '스터디', + // imageURL: [ + // { + // id: 0, + // url: 'https://makers-web-img.s3.ap-northeast-2.amazonaws.com/meeting/2024/01/08/213a1b06-35fd-4227-9029-3843f66622a3.png', + // }, + // ], + // startDate: '2023-02-13T00:00:00.000Z', + // endDate: '2024-09-12T23:59:59.999Z', + // capacity: 299, + // mstartDate: '2024-02-14T00:00:00.000Z', + // mendDate: '2024-05-31T00:00:00.000Z', + // recentActivityDate: '2024-02-14T00:00:00.000Z', + // targetActiveGeneration: 33, + // joinableParts: ['PM', 'DESIGN', 'WEB', 'ANDROID', 'IOS', 'SERVER'], + // applicantCount: 0, + // approvedUserCount: 0, + // user: { + // id: 270, + // name: '이예서', + // orgId: 125, + // profileImage: + // 'https://s3.ap-northeast-2.amazonaws.com/sopt-makers-internal//dev/image/project/377c054a-1d17-48bd-8906-e36af319eeff-thumb-1889155643_tTsRhUda_df98a7412d411689021274036b55ee934f215b47_640x640.jpg', + // }, + // status: 1, + // }, + // { + // id: 82, + // userId: 253, + // title: '고기 좋아요', + // category: '스터디', + // imageURL: [ + // { + // id: 0, + // url: 'https://makers-web-img.s3.ap-northeast-2.amazonaws.com/meeting/2023/09/28/270911ef-e176-4323-b713-b0352a8363a7.jpeg', + // }, + // ], + // startDate: '2023-01-13T00:00:00.000Z', + // endDate: '2099-01-01T23:59:59.999Z', + // capacity: 7, + // mstartDate: '2100-01-01T00:00:00.000Z', + // mendDate: '2100-01-02T00:00:00.000Z', + // recentActivityDate: '2024-02-14T00:00:00.000Z', + // targetActiveGeneration: 32, + // joinableParts: ['PM', 'DESIGN', 'WEB', 'ANDROID', 'IOS', 'SERVER'], + // applicantCount: 0, + // approvedUserCount: 1, + // user: { + // id: 253, + // name: '강영우', + // orgId: 18, + // profileImage: + // 'https://s3.ap-northeast-2.amazonaws.com/sopt-makers-internal//dev/image/project/377c054a-1d17-48bd-8906-e36af319eeff-thumb-1889155643_tTsRhUda_df98a7412d411689021274036b55ee934f215b47_640x640.jpg', + // }, + // status: 1, + // }, + // { + // id: 67, + // userId: 253, + // title: '내가 최고야', + // category: '스터디', + // imageURL: [ + // { + // id: 0, + // url: 'https://makers-web-img.s3.ap-northeast-2.amazonaws.com/meeting/2023/09/17/bc1d00b7-9770-4cde-ba04-69bbd5a9ae72.png', + // }, + // ], + // startDate: '2023-01-13T00:00:00.000Z', + // endDate: '2099-01-01T23:59:59.999Z', + // capacity: 10, + // mstartDate: '2023-09-17T00:00:00.000Z', + // mendDate: '9999-12-30T00:00:00.000Z', + // recentActivityDate: '2024-02-14T00:00:00.000Z', + // targetActiveGeneration: 33, + // joinableParts: ['PM', 'DESIGN', 'WEB', 'ANDROID', 'IOS', 'SERVER'], + // applicantCount: 0, + // approvedUserCount: 0, + // user: { + // id: 253, + // name: '강영우', + // orgId: 18, + // profileImage: + // 'https://s3.ap-northeast-2.amazonaws.com/sopt-makers-internal//dev/image/project/377c054a-1d17-48bd-8906-e36af319eeff-thumb-1889155643_tTsRhUda_df98a7412d411689021274036b55ee934f215b47_640x640.jpg', + // }, + // status: 1, + // }, + // { + // id: 65, + // userId: 261, + // title: '나', + // category: '스터디', + // imageURL: [ + // { + // id: 0, + // url: 'https://makers-web-img.s3.ap-northeast-2.amazonaws.com/meeting/2023/05/13/e907b6b8-015b-4685-854d-47f633c90c53.jpeg', + // }, + // ], + // startDate: '2023-05-10T00:00:00.000Z', + // endDate: '3013-05-10T23:59:59.999Z', + // capacity: 1234567890, + // mstartDate: '2034-05-15T00:00:00.000Z', + // mendDate: '1997-08-14T00:00:00.000Z', + // recentActivityDate: '2024-02-14T00:00:00.000Z', + // targetActiveGeneration: 31, + // joinableParts: ['PM', 'DESIGN', 'WEB', 'ANDROID', 'IOS', 'SERVER'], + // applicantCount: 0, + // approvedUserCount: 3, + // user: { + // id: 261, + // name: '백지연', + // orgId: 28, + // profileImage: + // 'https://s3.ap-northeast-2.amazonaws.com/sopt-makers-internal//prod/image/project/39f5882c-e322-425c-9f83-1194cf0aa220-톡방.png', + // }, + // status: 1, + // }, + // { + // id: 99, + // userId: 262, + // title: '하하', + // category: '스터디', + // imageURL: [ + // { + // id: 0, + // url: 'https://makers-web-img.s3.ap-northeast-2.amazonaws.com/meeting/2023/05/13/e907b6b8-015b-4685-854d-47f633c90c53.jpeg', + // }, + // ], + // startDate: '2023-05-10T00:00:00.000Z', + // endDate: '3013-05-10T23:59:59.999Z', + // capacity: 1234567890, + // mstartDate: '2034-05-15T00:00:00.000Z', + // mendDate: '1997-08-14T00:00:00.000Z', + // recentActivityDate: '2024-02-14T00:00:00.000Z', + // targetActiveGeneration: 31, + // joinableParts: ['PM', 'DESIGN', 'WEB', 'ANDROID', 'IOS', 'SERVER'], + // applicantCount: 0, + // approvedUserCount: 3, + // user: { + // id: 299, + // name: '김현수', + // orgId: 28, + // profileImage: + // 'https://s3.ap-northeast-2.amazonaws.com/sopt-makers-internal//prod/image/project/39f5882c-e322-425c-9f83-1194cf0aa220-톡방.png', + // }, + // status: 1, + // }, + // { + // id: 100, + // userId: 262, + // title: '하하', + // category: '스터디', + // imageURL: [ + // { + // id: 0, + // url: 'https://makers-web-img.s3.ap-northeast-2.amazonaws.com/meeting/2023/05/13/e907b6b8-015b-4685-854d-47f633c90c53.jpeg', + // }, + // ], + // startDate: '2023-05-10T00:00:00.000Z', + // endDate: '3013-05-10T23:59:59.999Z', + // capacity: 1234567890, + // mstartDate: '2034-05-15T00:00:00.000Z', + // mendDate: '1997-08-14T00:00:00.000Z', + // recentActivityDate: '2024-02-14T00:00:00.000Z', + // targetActiveGeneration: 31, + // joinableParts: ['PM', 'DESIGN', 'WEB', 'ANDROID', 'IOS', 'SERVER'], + // applicantCount: 0, + // approvedUserCount: 3, + // user: { + // id: 299, + // name: '김현수', + // orgId: 28, + // profileImage: + // 'https://s3.ap-northeast-2.amazonaws.com/sopt-makers-internal//prod/image/project/39f5882c-e322-425c-9f83-1194cf0aa220-톡방.png', + // }, + // status: 1, + // }, + // { + // id: 101, + // userId: 262, + // title: '하하', + // category: '스터디', + // imageURL: [ + // { + // id: 0, + // url: 'https://makers-web-img.s3.ap-northeast-2.amazonaws.com/meeting/2023/05/13/e907b6b8-015b-4685-854d-47f633c90c53.jpeg', + // }, + // ], + // startDate: '2023-05-10T00:00:00.000Z', + // endDate: '3013-05-10T23:59:59.999Z', + // capacity: 1234567890, + // mstartDate: '2034-05-15T00:00:00.000Z', + // mendDate: '1997-08-14T00:00:00.000Z', + // recentActivityDate: '2024-02-14T00:00:00.000Z', + // targetActiveGeneration: 31, + // joinableParts: ['PM', 'DESIGN', 'WEB', 'ANDROID', 'IOS', 'SERVER'], + // applicantCount: 0, + // approvedUserCount: 3, + // user: { + // id: 299, + // name: '김현수', + // orgId: 28, + // profileImage: + // 'https://s3.ap-northeast-2.amazonaws.com/sopt-makers-internal//prod/image/project/39f5882c-e322-425c-9f83-1194cf0aa220-톡방.png', + // }, + // status: 1, + // }, + // { + // id: 102, + // userId: 262, + // title: '하하', + // category: '스터디', + // imageURL: [ + // { + // id: 0, + // url: 'https://makers-web-img.s3.ap-northeast-2.amazonaws.com/meeting/2023/05/13/e907b6b8-015b-4685-854d-47f633c90c53.jpeg', + // }, + // ], + // startDate: '2023-05-10T00:00:00.000Z', + // endDate: '3013-05-10T23:59:59.999Z', + // capacity: 1234567890, + // mstartDate: '2034-05-15T00:00:00.000Z', + // mendDate: '1997-08-14T00:00:00.000Z', + // recentActivityDate: '2024-02-14T00:00:00.000Z', + // targetActiveGeneration: 31, + // joinableParts: ['PM', 'DESIGN', 'WEB', 'ANDROID', 'IOS', 'SERVER'], + // applicantCount: 0, + // approvedUserCount: 3, + // user: { + // id: 299, + // name: '김현수', + // orgId: 28, + // profileImage: + // 'https://s3.ap-northeast-2.amazonaws.com/sopt-makers-internal//prod/image/project/39f5882c-e322-425c-9f83-1194cf0aa220-톡방.png', + // }, + // status: 1, + // }, + // { + // id: 103, + // userId: 262, + // title: '하하', + // category: '스터디', + // imageURL: [ + // { + // id: 0, + // url: 'https://makers-web-img.s3.ap-northeast-2.amazonaws.com/meeting/2023/05/13/e907b6b8-015b-4685-854d-47f633c90c53.jpeg', + // }, + // ], + // startDate: '2023-05-10T00:00:00.000Z', + // endDate: '3013-05-10T23:59:59.999Z', + // capacity: 1234567890, + // mstartDate: '2034-05-15T00:00:00.000Z', + // mendDate: '1997-08-14T00:00:00.000Z', + // recentActivityDate: '2024-02-14T00:00:00.000Z', + // targetActiveGeneration: 31, + // joinableParts: ['PM', 'DESIGN', 'WEB', 'ANDROID', 'IOS', 'SERVER'], + // applicantCount: 0, + // approvedUserCount: 3, + // user: { + // id: 299, + // name: '김현수', + // orgId: 28, + // profileImage: + // 'https://s3.ap-northeast-2.amazonaws.com/sopt-makers-internal//prod/image/project/39f5882c-e322-425c-9f83-1194cf0aa220-톡방.png', + // }, + // status: 1, + // }, + // ], }, }; diff --git a/src/components/groupBrowsing/Carousel/Carousel.tsx b/src/components/groupBrowsing/Carousel/Carousel.tsx index f983cc61..fe79ad84 100644 --- a/src/components/groupBrowsing/Carousel/Carousel.tsx +++ b/src/components/groupBrowsing/Carousel/Carousel.tsx @@ -1,18 +1,17 @@ import Slider from 'react-slick'; import { styled } from 'stitches.config'; import NextArrow from './NextArrow'; -import { GroupBrowsingCardDetail } from '@api/API_LEGACY/meeting'; +import { GroupBrowsingCardResponse } from '@api/API_LEGACY/meeting'; import GroupBrowsingCard from '../GroupBrowsingCard/GroupBrowsingCard'; import 'slick-carousel/slick/slick.css'; import { useEffect, useRef, useState } from 'react'; interface CarouselProps { - cardList: GroupBrowsingCardDetail[]; + cardList: GroupBrowsingCardResponse; } const Carousel = ({ cardList }: CarouselProps) => { const cardListLength = cardList.length; - const [oldSlide, setOldSlide] = useState(0); const [activeSlide, setActiveSlide] = useState(0); // 캐러셀 컴포넌트의 현재 width 값을 observe 하는 코드 @@ -38,17 +37,17 @@ const Carousel = ({ cardList }: CarouselProps) => { const settings = { prevArrow: isFirstPage ? ( - + ) : ( - + ), nextArrow: isLastPage ? ( - + ) : ( - + ), speed: 500, @@ -56,7 +55,6 @@ const Carousel = ({ cardList }: CarouselProps) => { slidesToScroll: 4, infinite: false, beforeChange: (current: number, next: number) => { - setOldSlide(current); setActiveSlide(next); }, responsive: [ @@ -90,7 +88,7 @@ const SCarousel = styled('div', { maxWidth: '1328px', width: '100vw', - '@media (max-width: 1259px)': { + '@laptop': { width: '848px', minWidth: '848px', }, @@ -108,7 +106,7 @@ const SCarousel = styled('div', { flexType: 'center', }, - '@media (max-width: 1259px)': { + '@laptop': { width: '732px', minWidth: '732px', }, @@ -121,24 +119,18 @@ const SCarousel = styled('div', { '.slick-next': { transform: 'rotate(180deg)', mr: '17px', - '@media (max-width: 1259px)': { + '@laptop': { mr: '0px', }, }, }); -const SPrevBlankArrow = styled('div', { +const SBlankArrow = styled('div', { width: '$40', position: 'absolute', left: '$0', }); -const SNextBlankArrow = styled('div', { - width: '$40', - position: 'absolute', - right: '$0', -}); - const SPrevArrowContainer = styled('div', { position: 'absolute', left: '$0', @@ -149,5 +141,5 @@ const SNextArrowContainer = styled('div', { position: 'absolute', right: '$0', zIndex: '1', - '@media (max-width: 1259px)': {}, + '@laptop': {}, }); diff --git a/src/components/groupBrowsing/Carousel/NextArrow.tsx b/src/components/groupBrowsing/Carousel/NextArrow.tsx index 5f4d4c16..b9cf73a4 100644 --- a/src/components/groupBrowsing/Carousel/NextArrow.tsx +++ b/src/components/groupBrowsing/Carousel/NextArrow.tsx @@ -7,11 +7,9 @@ interface NextArrowProps { className: string; onClick?: React.MouseEventHandler; total: number; - activeSlide: number; - cardListLength: number; } -const NextArrow = ({ className, onClick, total, activeSlide, cardListLength }: NextArrowProps) => { +const NextArrow = ({ className, onClick, total }: NextArrowProps) => { const handleClick = (e: React.MouseEvent) => { ampli.clickCarouselArrow({ image_total: total }); onClick?.(e); diff --git a/src/components/groupBrowsing/GroupBrowsingCard/GroupBrowsingCard.stories.ts b/src/components/groupBrowsing/GroupBrowsingCard/GroupBrowsingCard.stories.ts index 93ecc7fe..faa1e653 100644 --- a/src/components/groupBrowsing/GroupBrowsingCard/GroupBrowsingCard.stories.ts +++ b/src/components/groupBrowsing/GroupBrowsingCard/GroupBrowsingCard.stories.ts @@ -12,34 +12,34 @@ export default meta; type Story = StoryObj; export const Default: Story = { - args: { - id: 93, - userId: 270, - title: '비밀이야', - category: '스터디', - imageURL: [ - { - id: 0, - url: 'https://makers-web-img.s3.ap-northeast-2.amazonaws.com/meeting/2024/01/08/213a1b06-35fd-4227-9029-3843f66622a3.png', - }, - ], - startDate: '2023-02-13T00:00:00.000Z', - endDate: '2024-09-12T23:59:59.999Z', - capacity: 299, - mstartDate: '2024-02-14T00:00:00.000Z', - mendDate: '2024-05-31T00:00:00.000Z', - recentActivityDate: '2024-02-14T00:00:00.000Z', - targetActiveGeneration: 33, - joinableParts: ['PM', 'DESIGN', 'WEB', 'ANDROID', 'IOS', 'SERVER'], - applicantCount: 0, - approvedUserCount: 0, - user: { - id: 270, - name: '이예서', - orgId: 125, - profileImage: - 'https://s3.ap-northeast-2.amazonaws.com/sopt-makers-internal//dev/image/project/377c054a-1d17-48bd-8906-e36af319eeff-thumb-1889155643_tTsRhUda_df98a7412d411689021274036b55ee934f215b47_640x640.jpg', - }, - status: 2, - }, + // args: { + // id: 93, + // userId: 270, + // title: '비밀이야', + // category: '스터디', + // imageURL: [ + // { + // id: 0, + // url: 'https://makers-web-img.s3.ap-northeast-2.amazonaws.com/meeting/2024/01/08/213a1b06-35fd-4227-9029-3843f66622a3.png', + // }, + // ], + // startDate: '2023-02-13T00:00:00.000Z', + // endDate: '2024-09-12T23:59:59.999Z', + // capacity: 299, + // mstartDate: '2024-02-14T00:00:00.000Z', + // mendDate: '2024-05-31T00:00:00.000Z', + // recentActivityDate: '2024-02-14T00:00:00.000Z', + // targetActiveGeneration: 33, + // joinableParts: ['PM', 'DESIGN', 'WEB', 'ANDROID', 'IOS', 'SERVER'], + // applicantCount: 0, + // approvedUserCount: 0, + // user: { + // id: 270, + // name: '이예서', + // orgId: 125, + // profileImage: + // 'https://s3.ap-northeast-2.amazonaws.com/sopt-makers-internal//dev/image/project/377c054a-1d17-48bd-8906-e36af319eeff-thumb-1889155643_tTsRhUda_df98a7412d411689021274036b55ee934f215b47_640x640.jpg', + // }, + // status: 2, + // }, }; diff --git a/src/components/groupBrowsing/GroupBrowsingCard/GroupBrowsingCard.tsx b/src/components/groupBrowsing/GroupBrowsingCard/GroupBrowsingCard.tsx index d5b9ba88..15e1370d 100644 --- a/src/components/groupBrowsing/GroupBrowsingCard/GroupBrowsingCard.tsx +++ b/src/components/groupBrowsing/GroupBrowsingCard/GroupBrowsingCard.tsx @@ -2,11 +2,10 @@ import React, { FC } from 'react'; import { styled } from 'stitches.config'; import UserIcon from '@assets/svg/user.svg'; import CalendarIcon from '@assets/svg/calendar.svg'; -import Avatar from '@components/avatar/Avatar'; +import Avatar from '@components/@common/avatar/Avatar'; import { Flex } from '@components/util/layout/Flex'; import { - categoryType, - GroupBrowsingCardDetail, + GroupBrowsingCardItem, parsePartValueToLabel, returnIsGroupActive, returnNewStatus, @@ -14,71 +13,71 @@ import { import dayjs from 'dayjs'; import isBetween from 'dayjs/plugin/isBetween'; dayjs.extend(isBetween); -import { PART_NAME, ACTION_STATUS, EActionStatus } from '@constants/option'; +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'; -const GroupBrowsingCard: FC = ({ +const GroupBrowsingCard: FC = ({ id, title, category, - startDate, - mstartDate, - mendDate, - recentActivityDate, + // startDate, + mStartDate, + mEndDate, + // recentActivityDate, targetActiveGeneration, joinableParts, capacity, - applicantCount, - approvedUserCount, + appliedCount, + approvedCount, user, status, imageURL, }) => { const isAllParts = joinableParts?.length === Object.keys(PART_NAME).length || joinableParts === null; - const isGroupActive = returnIsGroupActive(mstartDate, mendDate); + const isGroupActive = returnIsGroupActive(mStartDate, mEndDate); - const newStatus = returnNewStatus(status, mstartDate, isGroupActive); + const newStatus = returnNewStatus(status, mStartDate, isGroupActive); type statusTextsType = { [key: number]: string; }; const statusTexts: statusTextsType = { - [EActionStatus.BEFORE]: `${-dayjs().diff(startDate, 'day')}일 남음`, - [EActionStatus.RECRUITING]: `${applicantCount}명 신청 중`, - [EActionStatus.ACTING]: - dayjs().diff(recentActivityDate, 'day') === 0 - ? '오늘 새 글' - : recentActivityDate === null - ? '' - : `${dayjs().diff(recentActivityDate, 'day')}일 전 활동`, + // [EActionStatus.BEFORE]: `${-dayjs().diff(startDate, 'day')}일 남음`, + [EActionStatus.RECRUITING]: `${appliedCount}명 신청 중`, + // [EActionStatus.ACTING]: + // dayjs().diff(recentActivityDate, 'day') === 0 + // ? '오늘 새 글' + // : recentActivityDate === null + // ? '' + // : `${dayjs().diff(recentActivityDate, 'day')}일 전 활동`, }; return ( {user.name} - | {categoryType(category)} + | {CATEGORY_NAME(category as CategoryType)} {title} - {dayjs(mstartDate).format('YYYY.MM.DD')} - {dayjs(mendDate).format('YYYY.MM.DD')} + {dayjs(mStartDate).format('YYYY.MM.DD')} - {dayjs(mEndDate).format('YYYY.MM.DD')}
- {approvedUserCount}/{capacity}명 + {approvedCount}/{capacity}명
diff --git a/src/components/groupBrowsing/mobileSizeCard.tsx b/src/components/groupBrowsing/mobileSizeCard.tsx index ab6e2d39..9e96f3cf 100644 --- a/src/components/groupBrowsing/mobileSizeCard.tsx +++ b/src/components/groupBrowsing/mobileSizeCard.tsx @@ -1,29 +1,13 @@ import React, { FC } from 'react'; import { styled } from 'stitches.config'; import { getResizedImage } from '@utils/image'; -import { ACTION_STATUS } from '@constants/option'; +import { ACTION_STATUS, CATEGORY_NAME, CategoryType } from '@constants/option'; import Link from 'next/link'; -import { categoryType, GroupBrowsingCardDetail, returnIsGroupActive, returnNewStatus } from '@api/API_LEGACY/meeting'; +import { GroupBrowsingCardItem, returnIsGroupActive, returnNewStatus } from '@api/API_LEGACY/meeting'; -const MobileSizeCard: FC = ({ - id, - title, - category, - startDate, - mstartDate, - mendDate, - recentActivityDate, - targetActiveGeneration, - joinableParts, - capacity, - applicantCount, - approvedUserCount, - user, - status, - imageURL, -}) => { - const isGroupActive = returnIsGroupActive(mstartDate, mendDate); - const newStatus = returnNewStatus(status, mstartDate, isGroupActive); +const MobileSizeCard: FC = ({ id, title, category, mStartDate, mEndDate, status, imageURL }) => { + const isGroupActive = returnIsGroupActive(mStartDate, mEndDate); + const newStatus = returnNewStatus(status, mStartDate, isGroupActive); return ( @@ -31,7 +15,7 @@ const MobileSizeCard: FC = ({ {ACTION_STATUS[newStatus]} @@ -39,7 +23,7 @@ const MobileSizeCard: FC = ({ {' '} - {categoryType(category)} + {CATEGORY_NAME(category as CategoryType)} {title} diff --git a/src/components/groupBrowsingSlider/groupBrowsingSlider.tsx b/src/components/groupBrowsingSlider/groupBrowsingSlider.tsx index 80739970..78ae87b5 100644 --- a/src/components/groupBrowsingSlider/groupBrowsingSlider.tsx +++ b/src/components/groupBrowsingSlider/groupBrowsingSlider.tsx @@ -1,10 +1,10 @@ import { styled } from 'stitches.config'; import React from 'react'; import MobileSizeCard from '@components/groupBrowsing/mobileSizeCard'; -import { GroupBrowsingCardDetail } from '@api/API_LEGACY/meeting'; +import { GroupBrowsingCardResponse } from '@api/API_LEGACY/meeting'; interface CarouselProps { - cardList: GroupBrowsingCardDetail[]; + cardList: GroupBrowsingCardResponse; } const GroupBrowsingSlider = ({ cardList }: CarouselProps) => { diff --git a/src/components/modal/ConfirmModal.tsx b/src/components/modal/ConfirmModal.tsx index d7525175..325fe7ca 100644 --- a/src/components/modal/ConfirmModal.tsx +++ b/src/components/modal/ConfirmModal.tsx @@ -1,7 +1,7 @@ import { styled } from 'stitches.config'; import { Dialog } from '@headlessui/react'; import ModalContainer from './ModalContainer'; -import Loader from '@components/loader/Loader'; +import Loader from '@components/@common/loader/Loader'; interface ConfirmModalProps { isModalOpened: boolean; diff --git a/src/components/page/meetingDetail/Carousel/NextArrow.tsx b/src/components/page/detail/Carousel/NextArrow.tsx similarity index 100% rename from src/components/page/meetingDetail/Carousel/NextArrow.tsx rename to src/components/page/detail/Carousel/NextArrow.tsx diff --git a/src/components/page/meetingDetail/Carousel/index.tsx b/src/components/page/detail/Carousel/index.tsx similarity index 100% rename from src/components/page/meetingDetail/Carousel/index.tsx rename to src/components/page/detail/Carousel/index.tsx diff --git a/src/components/page/meetingDetail/Feed/EmptyView.tsx b/src/components/page/detail/Feed/EmptyView.tsx similarity index 100% rename from src/components/page/meetingDetail/Feed/EmptyView.tsx rename to src/components/page/detail/Feed/EmptyView.tsx diff --git a/src/components/page/meetingDetail/Feed/FeedItem/MeetingInfo.tsx b/src/components/page/detail/Feed/FeedItem/MeetingInfo.tsx similarity index 96% rename from src/components/page/meetingDetail/Feed/FeedItem/MeetingInfo.tsx rename to src/components/page/detail/Feed/FeedItem/MeetingInfo.tsx index 85e62660..1e7b5aa9 100644 --- a/src/components/page/meetingDetail/Feed/FeedItem/MeetingInfo.tsx +++ b/src/components/page/detail/Feed/FeedItem/MeetingInfo.tsx @@ -1,5 +1,5 @@ import { ampli } from '@/ampli'; -import { Arrow } from '@components/button/Arrow'; +import { Arrow } from '@components/@common/button/Arrow'; import { CATEGORY_OPTIONS } from '@constants/option'; import { useRouter } from 'next/router'; import { styled } from 'stitches.config'; diff --git a/src/components/page/meetingDetail/Feed/FeedItem/index.tsx b/src/components/page/detail/Feed/FeedItem/index.tsx similarity index 98% rename from src/components/page/meetingDetail/Feed/FeedItem/index.tsx rename to src/components/page/detail/Feed/FeedItem/index.tsx index e050d97f..177f8e99 100644 --- a/src/components/page/meetingDetail/Feed/FeedItem/index.tsx +++ b/src/components/page/detail/Feed/FeedItem/index.tsx @@ -1,11 +1,11 @@ -import AvatarGroup from '@components/avatar/AvatarGroup'; +import AvatarGroup from '@components/@common/avatar/AvatarGroup'; import { Flex } from '@components/util/layout/Flex'; import { styled } from 'stitches.config'; // import MoreIcon from '@assets/svg/more.svg'; import { ampli } from '@/ampli'; import { UserResponse } from '@api/API_LEGACY/user'; import ProfileDefaultIcon from '@assets/svg/profile_default.svg?rect'; -import Avatar from '@components/avatar/Avatar'; +import Avatar from '@components/@common/avatar/Avatar'; import { AVATAR_MAX_LENGTH, CARD_TITLE_MAX_LENGTH } from '@constants/feed'; import { THUMBNAIL_IMAGE_INDEX } from '@constants/index'; import { playgroundLink } from '@sopt-makers/playground-common'; diff --git a/src/components/page/meetingDetail/Feed/FeedPanel.tsx b/src/components/page/detail/Feed/FeedPanel.tsx similarity index 98% rename from src/components/page/meetingDetail/Feed/FeedPanel.tsx rename to src/components/page/detail/Feed/FeedPanel.tsx index d8be668c..ca857048 100644 --- a/src/components/page/meetingDetail/Feed/FeedPanel.tsx +++ b/src/components/page/detail/Feed/FeedPanel.tsx @@ -2,7 +2,7 @@ import { ampli } from '@/ampli'; import { useQueryGetMeeting } from '@api/API_LEGACY/meeting/hooks'; import { useInfinitePosts, useMutationUpdateLike } from '@api/post/hooks'; import { useQueryMyProfile } from '@api/API_LEGACY/user/hooks'; -import LikeButton from '@components/button/LikeButton'; +import LikeButton from '@components/@common/button/LikeButton'; import FeedCreateModal from '@components/feed/Modal/FeedCreateModal'; import { POST_MAX_COUNT, TAKE_COUNT } from '@constants/feed'; import { MasonryInfiniteGrid } from '@egjs/react-infinitegrid'; diff --git a/src/components/page/meetingDetail/Feed/Skeleton/DesktopFeedListSkeleton.tsx b/src/components/page/detail/Feed/Skeleton/DesktopFeedListSkeleton.tsx similarity index 100% rename from src/components/page/meetingDetail/Feed/Skeleton/DesktopFeedListSkeleton.tsx rename to src/components/page/detail/Feed/Skeleton/DesktopFeedListSkeleton.tsx diff --git a/src/components/page/meetingDetail/Feed/Skeleton/FeedItemSkeleton.tsx b/src/components/page/detail/Feed/Skeleton/FeedItemSkeleton.tsx similarity index 100% rename from src/components/page/meetingDetail/Feed/Skeleton/FeedItemSkeleton.tsx rename to src/components/page/detail/Feed/Skeleton/FeedItemSkeleton.tsx diff --git a/src/components/page/meetingDetail/Feed/Skeleton/MobileFeedListSkeleton.tsx b/src/components/page/detail/Feed/Skeleton/MobileFeedListSkeleton.tsx similarity index 100% rename from src/components/page/meetingDetail/Feed/Skeleton/MobileFeedListSkeleton.tsx rename to src/components/page/detail/Feed/Skeleton/MobileFeedListSkeleton.tsx diff --git a/src/components/page/meetingDetail/Information/InformationPanel.tsx b/src/components/page/detail/Information/InformationPanel.tsx similarity index 98% rename from src/components/page/meetingDetail/Information/InformationPanel.tsx rename to src/components/page/detail/Information/InformationPanel.tsx index cc2f5aec..208503b7 100644 --- a/src/components/page/meetingDetail/Information/InformationPanel.tsx +++ b/src/components/page/detail/Information/InformationPanel.tsx @@ -1,4 +1,4 @@ -import { TabList } from '@components/tabList/TabList'; +import { TabList } from '@components/@common/tabList/TabList'; import { styled } from 'stitches.config'; import { useDisplay } from '@hooks/useDisplay'; import { parseTextToLink } from '@components/util/parseTextToLink'; diff --git a/src/components/page/meetingDetail/MeetingController/MentorTooltip.tsx b/src/components/page/detail/MeetingController/MentorTooltip.tsx similarity index 100% rename from src/components/page/meetingDetail/MeetingController/MentorTooltip.tsx rename to src/components/page/detail/MeetingController/MentorTooltip.tsx diff --git a/src/components/page/meetingDetail/MeetingController/Modal/Confirm/GuestConfirmModal.tsx b/src/components/page/detail/MeetingController/Modal/Confirm/GuestConfirmModal.tsx similarity index 100% rename from src/components/page/meetingDetail/MeetingController/Modal/Confirm/GuestConfirmModal.tsx rename to src/components/page/detail/MeetingController/Modal/Confirm/GuestConfirmModal.tsx diff --git a/src/components/page/meetingDetail/MeetingController/Modal/Confirm/ProfileConfirmModal.tsx b/src/components/page/detail/MeetingController/Modal/Confirm/ProfileConfirmModal.tsx similarity index 100% rename from src/components/page/meetingDetail/MeetingController/Modal/Confirm/ProfileConfirmModal.tsx rename to src/components/page/detail/MeetingController/Modal/Confirm/ProfileConfirmModal.tsx diff --git a/src/components/page/meetingDetail/MeetingController/Modal/Content/ApplicationModalContent.tsx b/src/components/page/detail/MeetingController/Modal/Content/ApplicationModalContent.tsx similarity index 97% rename from src/components/page/meetingDetail/MeetingController/Modal/Content/ApplicationModalContent.tsx rename to src/components/page/detail/MeetingController/Modal/Content/ApplicationModalContent.tsx index a7372c6f..521041e0 100644 --- a/src/components/page/meetingDetail/MeetingController/Modal/Content/ApplicationModalContent.tsx +++ b/src/components/page/detail/MeetingController/Modal/Content/ApplicationModalContent.tsx @@ -3,7 +3,7 @@ import { useQueryMyProfile } from '@api/API_LEGACY/user/hooks'; import Textarea from '@components/form/Textarea'; import { useState } from 'react'; import { styled } from 'stitches.config'; -import Loader from '@components/loader/Loader'; +import Loader from '@components/@common/loader/Loader'; interface ApplicationModalContentProps { handleApplicationButton: (textareaValue: string) => void; diff --git a/src/components/page/meetingDetail/MeetingController/Modal/Content/RecruitmentStatusModalContent/RecruitmentStatusList.tsx b/src/components/page/detail/MeetingController/Modal/Content/RecruitmentStatusModalContent/RecruitmentStatusList.tsx similarity index 100% rename from src/components/page/meetingDetail/MeetingController/Modal/Content/RecruitmentStatusModalContent/RecruitmentStatusList.tsx rename to src/components/page/detail/MeetingController/Modal/Content/RecruitmentStatusModalContent/RecruitmentStatusList.tsx diff --git a/src/components/page/meetingDetail/MeetingController/Modal/Content/RecruitmentStatusModalContent/index.tsx b/src/components/page/detail/MeetingController/Modal/Content/RecruitmentStatusModalContent/index.tsx similarity index 100% rename from src/components/page/meetingDetail/MeetingController/Modal/Content/RecruitmentStatusModalContent/index.tsx rename to src/components/page/detail/MeetingController/Modal/Content/RecruitmentStatusModalContent/index.tsx diff --git a/src/components/page/meetingDetail/MeetingController/ProfileAnchor.tsx b/src/components/page/detail/MeetingController/ProfileAnchor.tsx similarity index 100% rename from src/components/page/meetingDetail/MeetingController/ProfileAnchor.tsx rename to src/components/page/detail/MeetingController/ProfileAnchor.tsx diff --git a/src/components/page/meetingDetail/MeetingController/index.tsx b/src/components/page/detail/MeetingController/index.tsx similarity index 99% rename from src/components/page/meetingDetail/MeetingController/index.tsx rename to src/components/page/detail/MeetingController/index.tsx index d531c2c8..1e354824 100644 --- a/src/components/page/meetingDetail/MeetingController/index.tsx +++ b/src/components/page/detail/MeetingController/index.tsx @@ -18,7 +18,7 @@ import ArrowSmallRightIcon from '@assets/svg/arrow_small_right.svg'; import MentorTooltip from './MentorTooltip'; import { useQueryMyProfile } from '@api/API_LEGACY/user/hooks'; import { ampli } from '@/ampli'; -import ButtonLoader from '@components/loader/ButtonLoader'; +import ButtonLoader from '@components/@common/loader/ButtonLoader'; import { useDialog } from '@sopt-makers/ui'; import { ReactNode } from 'react'; import ProfileAnchor from './ProfileAnchor'; diff --git a/src/components/page/postList/FloatingButton/index.tsx b/src/components/page/home/FloatingButton/index.tsx similarity index 100% rename from src/components/page/postList/FloatingButton/index.tsx rename to src/components/page/home/FloatingButton/index.tsx diff --git a/src/components/page/home/HomeCardList/Card.tsx b/src/components/page/home/HomeCardList/Card.tsx new file mode 100644 index 00000000..bd9744ef --- /dev/null +++ b/src/components/page/home/HomeCardList/Card.tsx @@ -0,0 +1,102 @@ +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'; + +type HomeCardProps = { + id: number; + imageURL?: string; + title: string; + ownerName: string; + ownerImage?: string; + approvedCount: number; + capacity: number; + category: string; + canJoinOnlyActiveGeneration: boolean; + joinableParts: string[]; +}; +const HomeCard = ({ + id, + imageURL, + title, + ownerName, + ownerImage, + approvedCount, + capacity, + category, + canJoinOnlyActiveGeneration, + joinableParts, +}: HomeCardProps) => { + return ( + + + + + + {ownerName} + | + {CATEGORY_NAME(category as CategoryType)} + + + {title} + + + {`${approvedCount}/${capacity}명`} + {`${canJoinOnlyActiveGeneration ? '활동 기수' : '전체 기수'} / ${joinableParts.map( + part => PART_NAME[part] + )}`} + + + ); +}; + +export default HomeCard; + +const SCardWrapper = styled('article', { + display: 'flex', + flexDirection: 'column', + + width: '285px', + height: '266px', +}); + +const SThumbnailImage = styled('img', { + width: '285px', + height: '180px', + + borderRadius: '$12', + + backgroundColor: '$gray800', + backgroundSize: 'cover', + backgroundPosition: 'center center', + backgroundRepeat: 'no-repeat', +}); + +const STitleStyle = styled('h3', { + padding: '$4 0 $8', + + textStyle: 'H4', +}); + +const SMetaWrapper = styled('div', { + display: 'flex', + alignItems: 'center', + gap: '$6', +}); + +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/CardList.tsx b/src/components/page/home/HomeCardList/CardList.tsx new file mode 100644 index 00000000..56dd1520 --- /dev/null +++ b/src/components/page/home/HomeCardList/CardList.tsx @@ -0,0 +1,74 @@ +import { GroupBrowsingCardResponse } from '@api/API_LEGACY/meeting'; +import HomeCard from '@components/page/home/HomeCardList/Card'; +import { styled } from 'stitches.config'; + +type HomeCardProps = { + label: string; + isMore?: boolean; + onMoreClick?: () => void; + data: GroupBrowsingCardResponse; +}; + +const CardList = ({ label, isMore = false, onMoreClick = () => {}, data }: HomeCardProps) => { + return ( + + + {label} + {isMore && {'더보기 >'}} + + + {data.map(d => ( + + ))} + + + ); +}; + +export default CardList; + +const SCardListWrapper = styled('section', { + display: 'flex', + flexDirection: 'column', + + width: '894px', + paddingBottom: '$80', +}); + +const STitleWrapper = styled('div', { + display: 'flex', + justifyContent: 'space-between', + alignItems: 'center', + + width: '100%', + paddingBottom: '$20', +}); + +const STitleStyle = styled('p', { + padding: '4px 0 8px', + + fontStyle: 'H1', + color: '$white', +}); + +const SMoreBtn = styled('button', { + fontStyle: 'B2', + color: '$gray200', +}); + +const SCardWrapper = styled('div', { + display: 'flex', + gap: '20px', +}); diff --git a/src/components/page/home/HomeCardList/index.tsx b/src/components/page/home/HomeCardList/index.tsx new file mode 100644 index 00000000..dc49e067 --- /dev/null +++ b/src/components/page/home/HomeCardList/index.tsx @@ -0,0 +1,14 @@ +import { GroupBrowsingCardResponse } from '@api/API_LEGACY/meeting'; +import CardList from '@components/page/home/HomeCardList/CardList'; + +const HomeCardList = ({ groupBrowsingCardData }: { groupBrowsingCardData: GroupBrowsingCardResponse }) => { + return ( +
+ + + +
+ ); +}; + +export default HomeCardList; diff --git a/src/components/page/home/QuickMenu/index.tsx b/src/components/page/home/QuickMenu/index.tsx new file mode 100644 index 00000000..8f649996 --- /dev/null +++ b/src/components/page/home/QuickMenu/index.tsx @@ -0,0 +1,148 @@ +import { styled } from 'stitches.config'; +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'; + +const QuickMenu = () => { + const menu = [ + { Icon: SBoltIcon, label: '번쩍 모임' }, + { Icon: SStudyIcon, label: '스터디' }, + { Icon: SSeminarIcon, label: '세미나' }, + { Icon: SEventIcon, label: '행사' }, + ]; + + return ( + + 모임 신청 가이드 + {menu.map((item, idx) => ( + + + {item.label} + + ))} + + ); +}; + +export default QuickMenu; + +const SContainer = styled('section', { + display: 'flex', + flexDirection: 'column', + gap: '40px', + + '@laptop': { + flexDirection: 'row', + gap: '32px', + + paddingLeft: '0', + }, + '@tablet': { + gap: '9px', + }, +}); + +const SGuideBtn = styled('button', { + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + + padding: '20px 36px', + height: 'fit-content', + + borderRadius: '9999px', + backgroundColor: '$gray800', + + fontStyle: 'H2', + letterSpacing: '-0.4px', + color: '$white', + + '@laptop': { + display: 'none', + }, +}); + +const SItem = styled('div', { + display: 'flex', + alignItems: 'center', + gap: '24px', + + cursor: 'pointer', + + '@laptop': { + flexDirection: 'column', + gap: '12px', + }, +}); + +const SItemLabel = styled('h3', { + fontStyle: 'H2', + letterSpacing: '-0.4px', + color: '$white', + textAlign: 'center', + + '@laptop': { + flexDirection: 'column', + gap: '12px', + + fontStyle: 'H4', + }, + + '@tablet': { + fontStyle: 'H4', + flexDirection: 'column', + gap: '12px', + + fontSize: '11px', + fontWeight: '600', + lineHeight: '14px', + }, +}); + +const SBoltIcon = styled(BoltIcon, { + width: '80px', + height: '80px', + + cursor: 'pointer', + + '@tablet': { + width: '40px', + height: 'auto', + }, +}); + +const SStudyIcon = styled(StudyIcon, { + width: '80px', + height: '80px', + objectFit: 'contain', + + cursor: 'pointer', + + '@tablet': { + width: '40px', + height: '40px', + }, +}); + +const SSeminarIcon = styled(SeminarIcon, { + width: '80px', + height: '80px', + + cursor: 'pointer', + + '@tablet': { + width: '40px', + height: '40px', + }, +}); + +const SEventIcon = styled(EventIcon, { + width: '80px', + height: '80px', + + '@tablet': { + width: '40px', + height: '40px', + }, +}); diff --git a/src/components/page/meetingList/Advertisement/AdCarousel.tsx b/src/components/page/list/Advertisement/AdCarousel.tsx similarity index 100% rename from src/components/page/meetingList/Advertisement/AdCarousel.tsx rename to src/components/page/list/Advertisement/AdCarousel.tsx diff --git a/src/components/page/meetingList/Advertisement/AdCarouselArrowBtn.tsx b/src/components/page/list/Advertisement/AdCarouselArrowBtn.tsx similarity index 100% rename from src/components/page/meetingList/Advertisement/AdCarouselArrowBtn.tsx rename to src/components/page/list/Advertisement/AdCarouselArrowBtn.tsx diff --git a/src/components/page/meetingList/Advertisement/AdCarouselDotBtn.tsx b/src/components/page/list/Advertisement/AdCarouselDotBtn.tsx similarity index 100% rename from src/components/page/meetingList/Advertisement/AdCarouselDotBtn.tsx rename to src/components/page/list/Advertisement/AdCarouselDotBtn.tsx diff --git a/src/components/page/meetingList/Advertisement/PostAlertModal.tsx b/src/components/page/list/Advertisement/PostAlertModal.tsx similarity index 100% rename from src/components/page/meetingList/Advertisement/PostAlertModal.tsx rename to src/components/page/list/Advertisement/PostAlertModal.tsx diff --git a/src/components/page/meetingList/Advertisement/PostDeleteModal.tsx b/src/components/page/list/Advertisement/PostDeleteModal.tsx similarity index 100% rename from src/components/page/meetingList/Advertisement/PostDeleteModal.tsx rename to src/components/page/list/Advertisement/PostDeleteModal.tsx diff --git a/src/components/page/meetingList/Advertisement/index.tsx b/src/components/page/list/Advertisement/index.tsx similarity index 98% rename from src/components/page/meetingList/Advertisement/index.tsx rename to src/components/page/list/Advertisement/index.tsx index ad7b3579..c6f4ef2a 100644 --- a/src/components/page/meetingList/Advertisement/index.tsx +++ b/src/components/page/list/Advertisement/index.tsx @@ -3,10 +3,10 @@ import { useInfinitePosts, useMutationUpdateLike } from '@api/post/hooks'; import { TAKE_COUNT } from '@constants/feed'; import React from 'react'; import Link from 'next/link'; -import FeedItem from '@components/page/meetingDetail/Feed/FeedItem'; -import LikeButton from '@components/button/LikeButton'; +import FeedItem from '@components/page/detail/Feed/FeedItem'; +import LikeButton from '@components/@common/button/LikeButton'; import { useRouter } from 'next/router'; -import MeetingInfo from '@components/page/meetingDetail/Feed/FeedItem/MeetingInfo'; +import MeetingInfo from '@components/page/detail/Feed/FeedItem/MeetingInfo'; import { useDisplay } from '@hooks/useDisplay'; import { styled } from 'stitches.config'; import { MasonryInfiniteGrid } from '@egjs/react-infinitegrid'; diff --git a/src/components/page/meetingList/Card/DesktopSizeCard.tsx b/src/components/page/list/Card/DesktopSizeCard.tsx similarity index 100% rename from src/components/page/meetingList/Card/DesktopSizeCard.tsx rename to src/components/page/list/Card/DesktopSizeCard.tsx diff --git a/src/components/page/meetingList/Card/ManagementButton.tsx b/src/components/page/list/Card/ManagementButton.tsx similarity index 100% rename from src/components/page/meetingList/Card/ManagementButton.tsx rename to src/components/page/list/Card/ManagementButton.tsx diff --git a/src/components/page/meetingList/Card/MobileSize/CardType.tsx b/src/components/page/list/Card/MobileSize/CardType.tsx similarity index 100% rename from src/components/page/meetingList/Card/MobileSize/CardType.tsx rename to src/components/page/list/Card/MobileSize/CardType.tsx diff --git a/src/components/page/meetingList/Card/MobileSize/ListType.tsx b/src/components/page/list/Card/MobileSize/ListType.tsx similarity index 100% rename from src/components/page/meetingList/Card/MobileSize/ListType.tsx rename to src/components/page/list/Card/MobileSize/ListType.tsx diff --git a/src/components/page/meetingList/Card/MobileSize/index.tsx b/src/components/page/list/Card/MobileSize/index.tsx similarity index 100% rename from src/components/page/meetingList/Card/MobileSize/index.tsx rename to src/components/page/list/Card/MobileSize/index.tsx diff --git a/src/components/page/meetingList/Card/Skeleton/MobileSize/CardType.tsx b/src/components/page/list/Card/Skeleton/MobileSize/CardType.tsx similarity index 100% rename from src/components/page/meetingList/Card/Skeleton/MobileSize/CardType.tsx rename to src/components/page/list/Card/Skeleton/MobileSize/CardType.tsx diff --git a/src/components/page/meetingList/Card/Skeleton/MobileSize/ListType.tsx b/src/components/page/list/Card/Skeleton/MobileSize/ListType.tsx similarity index 100% rename from src/components/page/meetingList/Card/Skeleton/MobileSize/ListType.tsx rename to src/components/page/list/Card/Skeleton/MobileSize/ListType.tsx diff --git a/src/components/page/meetingList/Card/Skeleton/MobileSize/index.tsx b/src/components/page/list/Card/Skeleton/MobileSize/index.tsx similarity index 100% rename from src/components/page/meetingList/Card/Skeleton/MobileSize/index.tsx rename to src/components/page/list/Card/Skeleton/MobileSize/index.tsx diff --git a/src/components/page/meetingList/Card/Skeleton/index.tsx b/src/components/page/list/Card/Skeleton/index.tsx similarity index 100% rename from src/components/page/meetingList/Card/Skeleton/index.tsx rename to src/components/page/list/Card/Skeleton/index.tsx diff --git a/src/components/page/meetingList/Card/Status.tsx b/src/components/page/list/Card/Status.tsx similarity index 100% rename from src/components/page/meetingList/Card/Status.tsx rename to src/components/page/list/Card/Status.tsx diff --git a/src/components/page/meetingList/Card/index.tsx b/src/components/page/list/Card/index.tsx similarity index 100% rename from src/components/page/meetingList/Card/index.tsx rename to src/components/page/list/Card/index.tsx diff --git a/src/components/page/meetingList/EmptyView.tsx b/src/components/page/list/EmptyView.tsx similarity index 100% rename from src/components/page/meetingList/EmptyView.tsx rename to src/components/page/list/EmptyView.tsx diff --git a/src/components/page/meetingList/Filter/Modal/BottomSheet/index.tsx b/src/components/page/list/Filter/Modal/BottomSheet/index.tsx similarity index 100% rename from src/components/page/meetingList/Filter/Modal/BottomSheet/index.tsx rename to src/components/page/list/Filter/Modal/BottomSheet/index.tsx diff --git a/src/components/page/meetingList/Filter/Modal/Chip/ChipItem.tsx b/src/components/page/list/Filter/Modal/Chip/ChipItem.tsx similarity index 100% rename from src/components/page/meetingList/Filter/Modal/Chip/ChipItem.tsx rename to src/components/page/list/Filter/Modal/Chip/ChipItem.tsx diff --git a/src/components/page/meetingList/Filter/Modal/Chip/index.tsx b/src/components/page/list/Filter/Modal/Chip/index.tsx similarity index 100% rename from src/components/page/meetingList/Filter/Modal/Chip/index.tsx rename to src/components/page/list/Filter/Modal/Chip/index.tsx diff --git a/src/components/page/meetingList/Filter/Modal/OpenButton.tsx b/src/components/page/list/Filter/Modal/OpenButton.tsx similarity index 100% rename from src/components/page/meetingList/Filter/Modal/OpenButton.tsx rename to src/components/page/list/Filter/Modal/OpenButton.tsx diff --git a/src/components/page/meetingList/Filter/Modal/Toggle/index.tsx b/src/components/page/list/Filter/Modal/Toggle/index.tsx similarity index 97% rename from src/components/page/meetingList/Filter/Modal/Toggle/index.tsx rename to src/components/page/list/Filter/Modal/Toggle/index.tsx index 551f595a..00763786 100644 --- a/src/components/page/meetingList/Filter/Modal/Toggle/index.tsx +++ b/src/components/page/list/Filter/Modal/Toggle/index.tsx @@ -1,4 +1,4 @@ -import Switch from '@components/button/Switch'; +import Switch from '@components/@common/button/Switch'; import { Flex } from '@components/util/layout/Flex'; import { useIsOnlyActiveGenerationParams } from '@hooks/queryString/custom'; import { parseBool } from '@utils/parseBool'; diff --git a/src/components/page/meetingList/Filter/Modal/index.tsx b/src/components/page/list/Filter/Modal/index.tsx similarity index 100% rename from src/components/page/meetingList/Filter/Modal/index.tsx rename to src/components/page/list/Filter/Modal/index.tsx diff --git a/src/components/page/meetingList/Filter/Result/InitializationButton.tsx b/src/components/page/list/Filter/Result/InitializationButton.tsx similarity index 100% rename from src/components/page/meetingList/Filter/Result/InitializationButton.tsx rename to src/components/page/list/Filter/Result/InitializationButton.tsx diff --git a/src/components/page/meetingList/Filter/Result/ResultItem.tsx b/src/components/page/list/Filter/Result/ResultItem.tsx similarity index 100% rename from src/components/page/meetingList/Filter/Result/ResultItem.tsx rename to src/components/page/list/Filter/Result/ResultItem.tsx diff --git a/src/components/page/meetingList/Filter/Result/index.tsx b/src/components/page/list/Filter/Result/index.tsx similarity index 100% rename from src/components/page/meetingList/Filter/Result/index.tsx rename to src/components/page/list/Filter/Result/index.tsx diff --git a/src/components/page/meetingList/Filter/Search/Mobile.tsx b/src/components/page/list/Filter/Search/Mobile.tsx similarity index 100% rename from src/components/page/meetingList/Filter/Search/Mobile.tsx rename to src/components/page/list/Filter/Search/Mobile.tsx diff --git a/src/components/page/meetingList/Filter/Search/index.tsx b/src/components/page/list/Filter/Search/index.tsx similarity index 100% rename from src/components/page/meetingList/Filter/Search/index.tsx rename to src/components/page/list/Filter/Search/index.tsx diff --git a/src/components/page/meetingList/Filter/Select/index.tsx b/src/components/page/list/Filter/Select/index.tsx similarity index 100% rename from src/components/page/meetingList/Filter/Select/index.tsx rename to src/components/page/list/Filter/Select/index.tsx diff --git a/src/components/page/meetingList/Filter/index.tsx b/src/components/page/list/Filter/index.tsx similarity index 100% rename from src/components/page/meetingList/Filter/index.tsx rename to src/components/page/list/Filter/index.tsx diff --git a/src/components/page/meetingList/Grid/Layout.tsx b/src/components/page/list/Grid/Layout.tsx similarity index 100% rename from src/components/page/meetingList/Grid/Layout.tsx rename to src/components/page/list/Grid/Layout.tsx diff --git a/src/components/page/meetingList/Grid/List.tsx b/src/components/page/list/Grid/List.tsx similarity index 100% rename from src/components/page/meetingList/Grid/List.tsx rename to src/components/page/list/Grid/List.tsx diff --git a/src/components/page/meetingList/Pagination.tsx b/src/components/page/list/Pagination.tsx similarity index 97% rename from src/components/page/meetingList/Pagination.tsx rename to src/components/page/list/Pagination.tsx index 88b8bfa4..9f0ec0f9 100644 --- a/src/components/page/meetingList/Pagination.tsx +++ b/src/components/page/list/Pagination.tsx @@ -2,7 +2,7 @@ import { Flex } from '@components/util/layout/Flex'; import { bindThePages } from '@utils/bindThePages'; import { useEffect, useState } from 'react'; import { styled } from 'stitches.config'; -import { ArrowButton } from '@components/button/Arrow'; +import { ArrowButton } from '@components/@common/button/Arrow'; import { ampli } from '@/ampli'; interface PaginationProps { totalPagesLength?: number; diff --git a/src/components/page/meetingList/Slider/NoticeSlider/DotWrapper.tsx b/src/components/page/list/Slider/NoticeSlider/DotWrapper.tsx similarity index 100% rename from src/components/page/meetingList/Slider/NoticeSlider/DotWrapper.tsx rename to src/components/page/list/Slider/NoticeSlider/DotWrapper.tsx diff --git a/src/components/page/meetingList/Slider/NoticeSlider/NoticeSlider.tsx b/src/components/page/list/Slider/NoticeSlider/NoticeSlider.tsx similarity index 100% rename from src/components/page/meetingList/Slider/NoticeSlider/NoticeSlider.tsx rename to src/components/page/list/Slider/NoticeSlider/NoticeSlider.tsx diff --git a/src/components/page/meetingManagement/Filter/index.tsx b/src/components/page/mine/management/Filter/index.tsx similarity index 85% rename from src/components/page/meetingManagement/Filter/index.tsx rename to src/components/page/mine/management/Filter/index.tsx index 28369ea1..762542b6 100644 --- a/src/components/page/meetingManagement/Filter/index.tsx +++ b/src/components/page/mine/management/Filter/index.tsx @@ -1,4 +1,4 @@ -import FilterSelect from '@components/page/meetingList/Filter/Select'; +import FilterSelect from '@components/page/list/Filter/Select'; import { Flex } from '@components/util/layout/Flex'; import { FilterType } from '@constants/option'; diff --git a/src/components/page/meetingManagement/ItemDescriptionBox.tsx b/src/components/page/mine/management/ItemDescriptionBox.tsx similarity index 100% rename from src/components/page/meetingManagement/ItemDescriptionBox.tsx rename to src/components/page/mine/management/ItemDescriptionBox.tsx diff --git a/src/components/page/meetingManagement/ManagementListItem.tsx b/src/components/page/mine/management/ManagementListItem.tsx similarity index 100% rename from src/components/page/meetingManagement/ManagementListItem.tsx rename to src/components/page/mine/management/ManagementListItem.tsx diff --git a/src/components/page/meetingManagement/MeetingInformation.tsx b/src/components/page/mine/management/MeetingInformation.tsx similarity index 100% rename from src/components/page/meetingManagement/MeetingInformation.tsx rename to src/components/page/mine/management/MeetingInformation.tsx diff --git a/src/components/page/meetingManagement/Skeleton/ManagementListSkeleton.tsx b/src/components/page/mine/management/Skeleton/ManagementListSkeleton.tsx similarity index 100% rename from src/components/page/meetingManagement/Skeleton/ManagementListSkeleton.tsx rename to src/components/page/mine/management/Skeleton/ManagementListSkeleton.tsx diff --git a/src/components/page/meetingManagement/Skeleton/MeetingInformationSkeleton.tsx b/src/components/page/mine/management/Skeleton/MeetingInformationSkeleton.tsx similarity index 100% rename from src/components/page/meetingManagement/Skeleton/MeetingInformationSkeleton.tsx rename to src/components/page/mine/management/Skeleton/MeetingInformationSkeleton.tsx diff --git a/src/constants/option.ts b/src/constants/option.ts index d8b80408..26ea5d31 100644 --- a/src/constants/option.ts +++ b/src/constants/option.ts @@ -69,3 +69,19 @@ export const PART_FILTER = { interface StringKeyObject { [key: string]: string; } + +export type CategoryType = 'STUDY' | 'EVENT' | 'SEMINAR' | '번쩍'; +export const CATEGORY_NAME = (category: CategoryType) => { + switch (category) { + case '번쩍': + return '번쩍'; + case 'STUDY': + return '스터디'; + case 'EVENT': + return '행사'; + case 'SEMINAR': + return '세미나'; + default: + return ''; + } +}; diff --git a/src/hooks/useDisplay.ts b/src/hooks/useDisplay.ts index b22fc069..5ae4db8a 100644 --- a/src/hooks/useDisplay.ts +++ b/src/hooks/useDisplay.ts @@ -4,9 +4,11 @@ import useIsomorphicLayoutEffect from './useIsomorphicLayoutEffect'; export function useDisplay() { const [isMobile, setIsMobile] = useState(false); const [isTablet, setIsTable] = useState(false); + const [isLaptop, setIsLaptop] = useState(false); const [isDesktop, setIsDesktop] = useState(false); const mobile = useMediaQuery({ query: '(max-width: 414px)' }); const tablet = useMediaQuery({ query: '(max-width: 768px)' }); + const laptop = useMediaQuery({ query: '(max-width: 1259px)' }); const desktop = useMediaQuery({ query: '(min-width: 768px)' }); useIsomorphicLayoutEffect(() => { @@ -15,9 +17,12 @@ export function useDisplay() { useIsomorphicLayoutEffect(() => { setIsTable(tablet); }, [tablet]); + useIsomorphicLayoutEffect(() => { + setIsLaptop(laptop); + }, [laptop]); useIsomorphicLayoutEffect(() => { setIsDesktop(desktop); }, [desktop]); - return { isMobile, isTablet, isDesktop }; + return { isMobile, isTablet, isLaptop, isDesktop }; } diff --git a/stitches.config.ts b/stitches.config.ts index 65cec4ab..5d18726e 100644 --- a/stitches.config.ts +++ b/stitches.config.ts @@ -119,6 +119,8 @@ const stitches = createStitches({ B2: '16px', B3: '14px', B4: '12px', + L1: '12px', + L2: '11px', C1: '10px', 10: '10px', 12: '12px', @@ -289,6 +291,8 @@ const stitches = createStitches({ B2: '26px', B3: '24px', B4: '18px', + L1: '16px', + L2: '14px', C1: '10px', }, },