Skip to content

Commit

Permalink
Quick menu, 모임 카드 구현 및 폴더구조 리팩토링 (#968)
Browse files Browse the repository at this point in the history 
* feat: QuickMenu 구현

* style: tablet gap 조정

* refactor: domain에 따른 폴더구조 변경

* refactor: 아이콘 및 레이블을 객체 매핑 방식으로 개선

* feat: Desktop 모임 카드 구현

* refactor: Tab 공통 컴포넌트 분리

* refactor: 도메인 종속되지 않은 공통 컴포넌트 폴더 분리

* refactor: HomeCardList 분리

* style: 모임신청 가이드 mds 미적용

* fix: CI 빌드 에러 해결

* refactor: 1259px 미디어쿼리 -> @Laptop

* chore: 콘솔 삭제

* refactor: tabText 3항 연산자 -> 객체 맵핑

* refactor: Flex 활용

* fix: chakra가 없다! 롤백!
  • Loading branch information
@j-nary
j-nary authored Dec 22, 2024
1 parent 34eb6ab commit 51258ec
Show file tree
Hide file tree
Showing 107 changed files with 896 additions and 543 deletions.
2 changes: 1 addition & 1 deletion pages/_app.tsx
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand Down
10 changes: 5 additions & 5 deletions pages/detail/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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');

Expand Down
2 changes: 1 addition & 1 deletion pages/edit/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
139 changes: 69 additions & 70 deletions pages/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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();

Expand All @@ -33,78 +34,76 @@ const Home: NextPage = () => {
}, [inView, hasNextPage, fetchNextPage]);

return (
<>
<div>
<Flex align="start" justify="between">
<TabList text="feedAll" size="big">
<Link href="/" onClick={() => ampli.clickNavbarGroup({ menu: '피드' })}>
<TabList.Item text="feedAll">홈</TabList.Item>
<div>
<CrewTab />
{isLoading && (isTablet ? <MobileFeedListSkeleton count={3} /> : <DesktopFeedListSkeleton row={3} column={3} />)}
{isTablet ? (
<>
<SContentTitle style={{ marginTop: '16px' }}>
⚡ ️솝트만의 일회성 모임, 번쩍
<Link href="/list?category=번쩍&page=1">
<SMoreButton>더보기 {'>'}</SMoreButton>
</Link>
<Link href="/list" onClick={() => ampli.clickNavbarGroup({ menu: '전체 모임' })}>
<TabList.Item text="groupAll">전체 모임</TabList.Item>
</Link>
<Link href="/mine" onClick={() => ampli.clickNavbarGroup({ menu: '내 모임' })}>
<TabList.Item text="mine">내 모임</TabList.Item>
</Link>
</TabList>
</Flex>

{isLoading &&
(isTablet ? <MobileFeedListSkeleton count={3} /> : <DesktopFeedListSkeleton row={3} column={3} />)}

{isTablet ? (
<>
<SContentTitle style={{ marginTop: '16px' }}>
모임 둘러보기
<Link href="/list">
</SContentTitle>
{groupBrowsingCardData && <GroupBrowsingSlider cardList={groupBrowsingCardData}></GroupBrowsingSlider>}
</>
) : (
<>
<Flex align="center" justify="center">
<SContentTitle style={{ marginTop: '54px' }}>
⚡ ️솝트만의 일회성 모임, 번쩍
<Link href="/list?category=번쩍&page=1">
<SMoreButton>더보기 {'>'}</SMoreButton>
</Link>
</SContentTitle>
{groupBrowsingCardData && <GroupBrowsingSlider cardList={groupBrowsingCardData}></GroupBrowsingSlider>}
<SContentTitle style={{ marginBottom: '0px' }}>최신 피드</SContentTitle>
</>
) : (
<>
<Flex align="center" justify="center">
<SContentTitle style={{ marginTop: '54px' }}>
모임 둘러보기
<Link href="/list">
<SMoreButton>더보기 {'>'}</SMoreButton>
</Link>
</SContentTitle>
</Flex>
<GroupBrowsingCarouselContainer>
<SGradationContainer>
<SCarouselGradationRight />
{groupBrowsingCardData && <Carousel cardList={groupBrowsingCardData} />}
</SGradationContainer>
</GroupBrowsingCarouselContainer>
<SCarouselBlank />
<Flex align="center" justify="center">
<SContentTitle style={{ marginBottom: '0px' }}>최신 피드</SContentTitle>
</Flex>
</>
)}

<RenderPostsWithAds />

{isFetchingNextPage && isTablet && <MobileFeedListSkeleton count={3} />}
{!isFetchingNextPage && hasNextPage ? (
<div ref={ref} style={{ height: '1px' }} />
) : (
<div style={{ height: '1px' }} />
)}

<FloatingButton />
</div>
</>
</Flex>
<GroupBrowsingCarouselContainer>
<SGradationContainer>
<SCarouselGradationRight />
{groupBrowsingCardData && <Carousel cardList={groupBrowsingCardData} />}
</SGradationContainer>
</GroupBrowsingCarouselContainer>
</>
)}
{isLaptop ? (
<>
<Flex justify="center">
<QuickMenu />
</Flex>
{groupBrowsingCardData && (
<HomeCardList groupBrowsingCardData={groupBrowsingCardData as GroupBrowsingCardResponse} />
)}
</>
) : (
<>
<SCarouselBlank />
<Flex justify="center">
{groupBrowsingCardData && (
<HomeCardList groupBrowsingCardData={groupBrowsingCardData as GroupBrowsingCardResponse} />
)}
<div style={{ paddingLeft: '106px' }}>
<QuickMenu />
</div>
</Flex>
</>
)}

{isFetchingNextPage && isTablet && <MobileFeedListSkeleton count={3} />}
{!isFetchingNextPage && hasNextPage ? (
<div ref={ref} style={{ height: '1px' }} />
) : (
<div style={{ height: '1px' }} />
)}

<FloatingButton />
</div>
);
};

export default Home;

const SContentTitle = styled('div', {
fontStyle: 'H2',
fontStyle: 'H1',
color: '$white',
mb: '$20',
display: 'flex',
Expand Down Expand Up @@ -154,7 +153,7 @@ const GroupBrowsingCarouselContainer = styled('div', {
display: 'flex',
justifyContent: 'center',

'@media (max-width: 1259px)': {
'@laptop': {
left: '-30px',
},
});
Expand Down
31 changes: 9 additions & 22 deletions pages/list/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -51,18 +49,7 @@ const Home: NextPage = () => {
return (
<>
<div>
<Flex align="start" justify="between">
<TabList text="groupAll" size="big">
<Link href="/" onClick={() => ampli.clickNavbarGroup({ menu: '피드' })}>
<TabList.Item text="feedAll">홈</TabList.Item>
</Link>
<Link href="/list" onClick={() => ampli.clickNavbarGroup({ menu: '전체 모임' })}>
<TabList.Item text="groupAll">전체 모임</TabList.Item>
</Link>
<Link href="/mine" onClick={() => ampli.clickNavbarGroup({ menu: '내 모임' })}>
<TabList.Item text="mine">내 모임</TabList.Item>
</Link>
</TabList>
<CrewTab>
<SMobileButtonContainer>
<WriteIcon onClick={handleMakeMeeting} className="make-button" />
<Search.Mobile />
Expand All @@ -71,7 +58,7 @@ const Home: NextPage = () => {
<PlusIcon />
<span>모임 개설하기</span>
</SMakeMeetingButton>
</Flex>
</CrewTab>
<SNoticeWrapper>
<NoticeSlider notices={notices} />
</SNoticeWrapper>
Expand Down
24 changes: 5 additions & 19 deletions pages/mine/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -39,19 +37,7 @@ const MinePage: NextPage = () => {

return (
<div>
<Flex align="center" justify="between">
<TabList text="mine" size="big">
<Link href="/" onClick={() => ampli.clickNavbarGroup({ menu: '피드' })}>
<TabList.Item text="feedAll">홈</TabList.Item>
</Link>
<Link href="/list" onClick={() => ampli.clickNavbarGroup({ menu: '전체 모임' })}>
<TabList.Item text="groupAll">전체 모임</TabList.Item>
</Link>
<Link href="/mine" onClick={() => ampli.clickNavbarGroup({ menu: '내 모임' })}>
<TabList.Item text="mine">내 모임</TabList.Item>
</Link>
</TabList>
</Flex>
<CrewTab />
<Tab.Group selectedIndex={Number(selectedMeetingType)} onChange={setSelectedMeetingType}>
<STabList>
<Tab as={Fragment}>
Expand Down
29 changes: 10 additions & 19 deletions pages/mine/management/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -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();
Expand Down Expand Up @@ -62,17 +63,7 @@ const ManagementPage = () => {

return (
<SManagementPage>
<TabList text="mine" size="big">
<Link href="/" onClick={() => ampli.clickNavbarGroup({ menu: '피드' })}>
<TabList.Item text="feedAll">홈</TabList.Item>
</Link>
<Link href="/list" onClick={() => ampli.clickNavbarGroup({ menu: '전체 모임' })}>
<TabList.Item text="groupAll">전체 모임</TabList.Item>
</Link>
<Link href="/mine" onClick={() => ampli.clickNavbarGroup({ menu: '내 모임' })}>
<TabList.Item text="mine">내 모임</TabList.Item>
</Link>
</TabList>
<CrewTab />
{isMeetingDataLoading ? (
<MeetingInformationSkeleton />
) : (
Expand Down
Loading

0 comments on commit 51258ec

Please sign in to comment.