Merge pull request #126 from YAPP-Github/feature/FE-090

Feature/fe-090 : 메인페이지 QA 반영

src/api/board/api.ts

@@ -1,6 +1,7 @@
 import { request } from '@/utils/ky/request';
 import { BOARDS_PER_PAGE } from '@/app/home/constants';
 import { BoardListPagingData, BoardListResponse, BoardDetail, BoardRegionResponse, BoardStatus } from './types';
+import { SAMPLE_BOARD_IDS, SAMPLE_BOARDDETAILS } from '@/app/board/constants/sample';
 
 class BoardAPI {
   /**
@@ -37,6 +38,9 @@ class BoardAPI {
    * @param boardId - 가져올 board의 id
    */
   async getBoardDetail(boardId: number) {
+    if (SAMPLE_BOARD_IDS.includes(boardId)) {
+      return SAMPLE_BOARDDETAILS.find((board) => board.boardId === boardId) as BoardDetail;
+    }
     return request.get(`v1/boards/${boardId}`).json<BoardDetail>();
   }
 

src/api/board/hooks/useBoardListQuery.ts

@@ -4,6 +4,7 @@ import { BOARDS_PER_PAGE } from '@/app/home/constants';
 import { BoardListPagingData } from '@/api/board/types';
 import { boardKeys } from '@/api/board/queryKeys';
 import { boardAPI } from '@/api/board/api';
+import { SAMPLE_BOARD_LISTITEMS } from '@/app/home/constants/sample';
 
 /**
  * board list를 페이지당 boardsPerPage 개수만큼 가져옵니다.
@@ -18,6 +19,7 @@ const useBoardListQuery = (boardsPerPage = BOARDS_PER_PAGE, cityId?: number, pro
       ({ pageParam = undefined }) => boardAPI.getBoardList(pageParam, boardsPerPage, cityId, provinceId),
       {
         getNextPageParam: (lastPage) => (lastPage.isLastPage ? undefined : lastPage.lastId),
+        keepPreviousData: true,
       },
     );
 
@@ -30,7 +32,7 @@ const useBoardListQuery = (boardsPerPage = BOARDS_PER_PAGE, cityId?: number, pro
   }, [hasNextPage, isFetchingNextPage, fetchNextPage]);
 
   return {
-    data: boardList,
+    data: hasNextPage ? boardList : [...boardList, ...SAMPLE_BOARD_LISTITEMS],
     getNextPage,
     ...rest,
   };

src/api/board/types.ts

@@ -4,8 +4,8 @@ export interface BoardListItem {
   boardId: number;
   title: string;
   status: string;
-  todayOrTomorrow: string;
-  elapsedTime: string;
+  todayOrTomorrow: string | null;
+  elapsedTime?: string;
   meetingDateTime: string;
   meetingPlace: string;
   maxApply: number;
@@ -47,6 +47,7 @@ export interface BoardDetail {
   y: number;
   views: number;
   participants: Profile[];
+  isSample?: boolean;
 }
 
 export interface BoardProvince {

src/app/board/components/AsideSection/AsideSection.tsx

@@ -18,14 +18,17 @@ const AsideSection = ({ board }: Props) => {
   const [openModal, closeModal] = useOverlay();
   const [openToast, closeToast] = useOverlay();
 
-  const { boardId, chatLink, participants, status, minAge, maxAge, userAge } = board;
+  const { boardId, chatLink, participants, status, minAge, maxAge, userAge, isSample } = board;
 
   const isJoined = participants.find(({ userId }) => userId === profile?.userId);
 
   const isNotPossibleAge = Boolean(userAge && minAge && maxAge) && !(minAge <= userAge && userAge <= maxAge);
 
   const handleClickJoinButton = () => {
     if (!profile) return redirectToLogin();
+    if (isSample) {
+      return openToast(<Toast type="info" message={TOAST_TEXT.SAMPLE_BOARD} onClose={closeToast} />);
+    }
     openModal(
       <JoinModal
         boardId={boardId}

src/app/board/components/BottomSection/BottomSection.tsx

@@ -13,7 +13,7 @@ interface Props {
 
 const BottomSection = ({ board }: Props) => {
   const { data: profile } = useProfile();
-  const { boardId, chatLink, participants, userAge, minAge, maxAge, status } = board;
+  const { boardId, chatLink, participants, userAge, minAge, maxAge, status, isSample } = board;
   const [openBottomSheet, closeBottomSheet] = useOverlay();
   const [openToast, closeToast] = useOverlay();
   const { redirectToLogin } = useLoginRedirect();
@@ -24,6 +24,9 @@ const BottomSection = ({ board }: Props) => {
 
   const handleClickJoinButton = () => {
     if (!profile) return redirectToLogin();
+    if (isSample) {
+      return openToast(<Toast type="info" message={TOAST_TEXT.SAMPLE_BOARD} onClose={closeToast} />);
+    }
     openBottomSheet(
       <JoinBottomSheet
         boardId={boardId}

src/app/board/constants/sample.ts

@@ -0,0 +1,156 @@
+import { BoardDetail, Profile } from '@/api/types';
+import { format, addDays } from 'date-fns';
+import { ko } from 'date-fns/locale';
+
+export const SAMPLE_BOARD_IDS = [1000000000, 1000000001, 1000000002, 1000000003];
+
+const SAMPLE_PARTICIPANTS: Profile[] = [
+  { userId: 1000000000, nickName: 'MOUNTAIN', jobGroupMain: '개발', writer: true },
+  { userId: 1000000001, nickName: '퇴근하고싶어', jobGroupMain: '디자인', writer: false },
+  { userId: 1000000002, nickName: '아빠', jobGroupMain: '아빠', writer: false },
+  { userId: 1000000003, nickName: 'rachel', jobGroupMain: '개발', writer: false },
+  { userId: 1000000003, nickName: '조정디디', jobGroupMain: '교육', writer: false },
+];
+
+export const SAMPLE_BOARDDETAIL_1: BoardDetail = {
+  boardId: SAMPLE_BOARD_IDS[0],
+  prevId: null,
+  nextId: SAMPLE_BOARD_IDS[1],
+  title: '[샘플] 삼성 디자이너 모여라~!',
+  status: '모집중',
+  content: `안녕하세요, 디자이너 먹팟땡이에요.
+  
+삼성에 입사한 지 어느덧 3년이 되었는데, 연차가 쌓일수록 커리어를 어떻게 계획하면 좋을지 고민이 커지더라고요.
+
+그래서 비슷한 고민을 하고 계신 분들이랑 얘기해보고 싶어서 먹팟 만들었어요ㅎㅎ
+
+같이 점심 먹으면서 편하게 얘기해봐요.
+
+디자이너시라면 연차 상관없이 누구나 환영입니다!
+
+*샘플 먹팟입니다.`,
+  chatLink: 'https://open.kakao.com/o/g8Q4XqKc',
+  meetingDate: format(new Date(), 'yyyy년 MM월 dd일', {
+    locale: ko,
+  }),
+  meetingTime: '오후 12:00',
+  createDate: '2023년 07월 30일',
+  maxApply: 4,
+  currentApply: 3,
+  minAge: 23,
+  maxAge: 30,
+  userAge: 25,
+  locationName: '삼성전자 R&D 캠퍼스',
+  addressName: '서울특별시 서초구 성촌길 67',
+  x: 127.022,
+  y: 37.466,
+  locationDetail: 'A, B동 1층 로비',
+  views: 100,
+  participants: SAMPLE_PARTICIPANTS.slice(0, 3),
+  isSample: true,
+};
+
+export const SAMPLE_BOARDDETAIL_2: BoardDetail = {
+  boardId: SAMPLE_BOARD_IDS[1],
+  prevId: SAMPLE_BOARD_IDS[0],
+  nextId: SAMPLE_BOARD_IDS[2],
+  title: '[샘플] 최근에 이직하신 분들 !',
+  status: '모집중',
+  content: `안녕하세요. 최근에 다른 기업에서 삼성전자로 이직했는데 적응이 쉽지 않네요 😅
+
+최근에 이직한 사람들끼리 모여서 얘기하면 의지도 되고, 서로서로 도움도 많이 주고 받을 수 있을 것 같아요. 
+
+같이 밥먹어요 ~~`,
+  chatLink: 'https://open.kakao.com/o/g8Q4XqKc',
+  meetingDate: format(addDays(new Date(), 1), 'yyyy년 MM월 dd일', { locale: ko }),
+  meetingTime: '오후 01:00',
+  createDate: '2023년 07월 30일',
+  maxApply: 3,
+  currentApply: 2,
+  minAge: 23,
+  maxAge: 30,
+  userAge: 25,
+  locationName: '봉평 메밀 막국수',
+  addressName: '서울특별시 서초구 서초동 1307-4',
+  x: 127.025,
+  y: 37.468,
+  locationDetail: '식당 앞',
+  views: 100,
+  participants: SAMPLE_PARTICIPANTS.slice(0, 2),
+  isSample: true,
+};
+
+export const SAMPLE_BOARDDETAIL_3: BoardDetail = {
+  boardId: SAMPLE_BOARD_IDS[2],
+  prevId: SAMPLE_BOARD_IDS[1],
+  nextId: SAMPLE_BOARD_IDS[3],
+  title: '[샘플] 미친 닭볶음탕집 같이 가요.',
+  status: '모집중',
+  content: `안녕하세요~! 
+최근에 회사 근처에서 어마어마한 맛집을 발견했습니다. 
+
+청국장 닭볶음탕을 파는 곳인데 계속 생각나요
+
+혼자 먹기엔 양이 많아서 퇴근 후에 같이 한 잔 하실 분들 구합니다. 
+
+*샘플 먹팟입니다.`,
+  chatLink: 'https://open.kakao.com/o/g8Q4XqKc',
+  meetingDate: format(addDays(new Date(), 3), 'yyyy년 MM월 dd일', { locale: ko }),
+  meetingTime: '오후 09:00',
+  createDate: '2023년 07월 30일',
+  maxApply: 5,
+  currentApply: 4,
+  minAge: 23,
+  maxAge: 30,
+  userAge: 25,
+  locationName: '닭볶음탕집',
+  addressName: '서울 서초구 우면동 740',
+  x: 127.039,
+  y: 37.501,
+  locationDetail: '식당 앞',
+  views: 100,
+  participants: SAMPLE_PARTICIPANTS.slice(0, 4),
+  isSample: true,
+};
+
+export const SAMPLE_BOARDDETAIL_4: BoardDetail = {
+  boardId: SAMPLE_BOARD_IDS[3],
+  prevId: SAMPLE_BOARD_IDS[2],
+  nextId: null,
+  title: '[샘플]🚀💪 러닝크루 대모집 🚀🙌',
+  status: '모집중',
+  content: `혹시 러닝크루 관심 있으신 분들 계신가요?
+혼자 운동하기 싫어서 러닝크루 모집 중입니다 -!
+
+일시 : 매주 목요일 밤 9시
+장소 : 양재천
+길이 및 속도 : 참가자들 실력에 따라 대략 5-10km 정도의 거리를 조절하면서 달리려고 해요
+준비물 : 편안한 운동복, 운동화 물, 수건
+
+더 자세한 내용은 오픈채팅방에서 알려드릴게요 😆 
+* 샘플 먹팟입니다.`,
+  chatLink: 'https://open.kakao.com/o/g8Q4XqKc',
+  meetingDate: '2023년 07월 20일',
+  meetingTime: '오후 07시 00분',
+  createDate: '2023년 07월 30일',
+  maxApply: 10,
+  currentApply: SAMPLE_PARTICIPANTS.length,
+  minAge: 23,
+  maxAge: 30,
+  userAge: 25,
+  locationName: '섬들근린공원',
+  addressName: '서울 서초구 우면동 740',
+  x: 127.027,
+  y: 37.462,
+  locationDetail: 'gs25 앞',
+  views: 100,
+  participants: SAMPLE_PARTICIPANTS,
+  isSample: true,
+};
+
+export const SAMPLE_BOARDDETAILS: BoardDetail[] = [
+  SAMPLE_BOARDDETAIL_1,
+  SAMPLE_BOARDDETAIL_2,
+  SAMPLE_BOARDDETAIL_3,
+  SAMPLE_BOARDDETAIL_4,
+];

src/app/board/constants/toastText.ts

@@ -11,6 +11,7 @@ export const TOAST_TEXT = {
   SUCCESS_DELETE: '먹팟이 삭제됐어요!',
   FAILURE_DELETE: '먹팟 삭제에 실패했어요.',
 
+  SAMPLE_BOARD: '샘플 먹팟입니다.',
   SUCCESS_MAKE_DONE: '모집 완료 상태로 변경됐어요!',
   SUCCESS_MAKE_INPROGRESS: '모집 중 상태로 변경됐어요!',
 } as const;

src/app/home/components/BoardCard/BoardCard.css.ts

@@ -27,6 +27,12 @@ export const wrapper = recipe({
       [screenMQ.m]: {
         width: sizeProp('312px'),
         padding: space.xl,
+        selectors: {
+          '&:hover': {
+            boxShadow: 'none',
+            transform: 'none',
+          },
+        },
       },
     },
   },

src/app/home/components/BoardCard/BoardCard.tsx

@@ -51,7 +51,7 @@ const BoardCard = ({ boardListItem }: Props) => {
               <Chip color={getChipColor(status)}>{status}</Chip>
               {todayOrTomorrow && <Chip color={getChipColor(todayOrTomorrow)}>{todayOrTomorrow}</Chip>}
             </div>
-            <span className={timeText}>{elapsedTime}</span>
+            {elapsedTime && <span className={timeText}>{elapsedTime}</span>}
           </div>
           <Typography className={titleStyle} variant="title1" color="primary">
             {title}

src/app/home/components/RegionsFilter/RegionsFilter.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useCallback, startTransition } from 'react';
+import { useCallback } from 'react';
 import { Dropdown } from '@/components';
 import { useDetectSticky, useScrollDownState } from '@/app/home/hooks';
 import { useBoardRegions } from '@/api/hooks';
@@ -16,18 +16,14 @@ const RegionsFilter = () => {
 
   const handleSelectCity = useCallback(
     (cityId: string | null) => {
-      startTransition(() => {
-        setCityId?.(cityId ? Number(cityId) : undefined);
-      });
+      setCityId?.(cityId ? Number(cityId) : undefined);
     },
     [setCityId],
   );
 
   const handleSelectProvince = useCallback(
     (provinceId: string | null) => {
-      startTransition(() => {
-        setProvinceId?.(provinceId ? Number(provinceId) : undefined);
-      });
+      setProvinceId?.(provinceId ? Number(provinceId) : undefined);
     },
     [setProvinceId],
   );

src/app/home/constants/sample.ts

@@ -0,0 +1,64 @@
+import { BoardListItem } from '@/api/types';
+import {
+  SAMPLE_BOARDDETAIL_1,
+  SAMPLE_BOARDDETAIL_2,
+  SAMPLE_BOARDDETAIL_3,
+  SAMPLE_BOARDDETAIL_4,
+} from '@/app/board/constants/sample';
+import { format, addDays } from 'date-fns';
+import { ko } from 'date-fns/locale';
+
+export const SAMPLE_BOARD_LISTITEMS: BoardListItem[] = [
+  {
+    boardId: SAMPLE_BOARDDETAIL_1.boardId,
+    title: SAMPLE_BOARDDETAIL_1.title,
+    status: SAMPLE_BOARDDETAIL_1.status,
+    todayOrTomorrow: '오늘',
+    meetingDateTime: `${format(new Date(), 'MM월 dd일 (eee)', {
+      locale: ko,
+    })} ${SAMPLE_BOARDDETAIL_1.meetingTime}`,
+    meetingPlace: SAMPLE_BOARDDETAIL_1.locationName,
+    maxApply: SAMPLE_BOARDDETAIL_1.maxApply,
+    currentApply: SAMPLE_BOARDDETAIL_1.currentApply,
+    participants: SAMPLE_BOARDDETAIL_1.participants,
+  },
+  {
+    boardId: SAMPLE_BOARDDETAIL_2.boardId,
+    title: SAMPLE_BOARDDETAIL_2.title,
+    status: SAMPLE_BOARDDETAIL_2.status,
+    todayOrTomorrow: '내일',
+    meetingDateTime: `${format(addDays(new Date(), 1), 'MM월 dd일 (eee)', {
+      locale: ko,
+    })} ${SAMPLE_BOARDDETAIL_2.meetingTime}`,
+    meetingPlace: SAMPLE_BOARDDETAIL_2.locationName,
+    maxApply: SAMPLE_BOARDDETAIL_2.maxApply,
+    currentApply: SAMPLE_BOARDDETAIL_2.currentApply,
+    participants: SAMPLE_BOARDDETAIL_2.participants,
+  },
+  {
+    boardId: SAMPLE_BOARDDETAIL_3.boardId,
+    title: SAMPLE_BOARDDETAIL_3.title,
+    status: SAMPLE_BOARDDETAIL_3.status,
+    todayOrTomorrow: null,
+    meetingDateTime: `${format(addDays(new Date(), 3), 'MM월 dd일 (eee)', {
+      locale: ko,
+    })} ${SAMPLE_BOARDDETAIL_3.meetingTime}`,
+    meetingPlace: SAMPLE_BOARDDETAIL_3.locationName,
+    maxApply: SAMPLE_BOARDDETAIL_3.maxApply,
+    currentApply: SAMPLE_BOARDDETAIL_3.currentApply,
+    participants: SAMPLE_BOARDDETAIL_3.participants,
+  },
+  {
+    boardId: SAMPLE_BOARDDETAIL_4.boardId,
+    title: SAMPLE_BOARDDETAIL_4.title,
+    status: SAMPLE_BOARDDETAIL_4.status,
+    todayOrTomorrow: null,
+    meetingDateTime: `${format(addDays(new Date(), 3), 'MM월 dd일 (eee)', {
+      locale: ko,
+    })} ${SAMPLE_BOARDDETAIL_4.meetingTime}`,
+    meetingPlace: SAMPLE_BOARDDETAIL_4.locationName,
+    maxApply: SAMPLE_BOARDDETAIL_4.maxApply,
+    currentApply: SAMPLE_BOARDDETAIL_4.currentApply,
+    participants: SAMPLE_BOARDDETAIL_4.participants,
+  },
+];

src/app/home/utils/chipColor.ts

@@ -8,4 +8,9 @@ const chipColorMap = new Map<string, Color>([
   ['내일', 'yellow'],
 ]);
 
-export const getChipColor = (text: string): Color => chipColorMap.get(text) ?? 'primary';
+export const getChipColor = (text: string | null): Color => {
+  if (text) {
+    return chipColorMap.get(text) ?? 'primary';
+  }
+  return 'primary';
+};

src/styles/globals.css.ts

@@ -18,6 +18,7 @@ globalStyle('html, body', {
 globalStyle(`img, picture, video, canvas, svg`, {
   display: `block`,
   maxWidth: `100%`,
+  flexShrink: 0,
 });
 
 globalStyle('body', {