Merge pull request #191 from DevKor-github/feat/#156/pick-page

[Feat] pick 페이지 구현

Author: halionaz

src/common/components/ItemTokenList/index.tsx

@@ -17,7 +17,7 @@ interface Props {
     color?: Color;
     tradeMethods?: TradeMethods[];
     quality?: Quality;
-    size: Size;
+    size?: Size;
   };
   showCount?: number;
 }

src/common/components/NoResult/index.tsx

@@ -3,7 +3,7 @@ import { cx } from '@styled-system/css';
 import * as s from './style.css';
 
 interface Props {
-  type: 'search' | '404' | 'like' | 'chat';
+  type: 'search' | '404' | 'like' | 'chat' | 'pick' | 'chat-list';
 }
 const NoResult = ({ type }: Props) => {
   const icon = type === 'search' ? 'mgc_alert_fill' : 'mgc_puzzled_fill';
@@ -12,13 +12,17 @@ const NoResult = ({ type }: Props) => {
     if (type === 'search') return '검색 결과가 없어요!';
     if (type === '404') return '앗, 잘못된 접근이에요!';
     if (type === 'chat') return '아직 시작된 대화가 없어요!';
-    return '검색 결과가 없어요!';
+    if (type === 'chat-list') return '아직 시작된 대화가 없어요!';
+    if (type === 'pick') return '아직 생성된 PICK이 없어요!';
+    return '아직 관심목록이 없어요!';
   })();
 
   const description = (() => {
     if (type === 'search') return '다른 키워드로 다시 검색해 주세요.';
     if (type === '404') return '다른 경로로 접속해 주세요.';
     if (type === 'chat') return '상품에 관심 있는 사람이 나타나면\n채팅을 주고받을 수 있습니다.';
+    if (type === 'chat-list') return '채팅을 시작해 보세요.';
+    if (type === 'pick') return '약속을 생성해 보세요.';
     return '원하는 상품을 관심목록에 담아 보세요.';
   })();
 

src/common/utils/parseDate.ts

@@ -1,11 +1,16 @@
 import { ko } from 'date-fns/locale/ko';
 import { format } from 'date-fns';
 
-export const parseDate = (raw: string) => {
+export const parseChatDate = (raw: string) => {
   const date = new Date(raw);
   return format(date, 'yyyy년 MM월 dd일 eeee', { locale: ko });
 };
 
+export const parsePickDate = (raw: string) => {
+  const date = new Date(raw);
+  return format(date, 'yyyy. MM. dd. eeee', { locale: ko });
+};
+
 export const parseTime = (raw: string) => {
   const date = new Date(raw);
   return format(date, 'a h:mm', { locale: ko });

src/features/chatRoom/components/ChatMessageContents/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { parseDate, parseTime } from '@/common/utils/parseDate';
+import { parseChatDate, parseTime } from '@/common/utils/parseDate';
 import * as s from './style.css';
 
 import type { ChatInterface } from '@/features/chatRoom/types';
@@ -23,14 +23,14 @@ const ChatMessageContents = ({ chat, index, messages, myUserId, isOpponentOnline
   const isRead = isOpponentOnline || isBefore(chat.createdAt, opponentLastEnterAt);
 
   const time = parseTime(chat.createdAt);
-  const date = parseDate(chat.createdAt);
+  const date = parseChatDate(chat.createdAt);
   const isMine = chat.userId === myUserId;
   const isNotification = chat.isNotification;
 
   const prevChat = messages[index - 1];
   const nextChat = messages[index + 1];
 
-  const prevDate = prevChat ? parseDate(prevChat.createdAt) : null;
+  const prevDate = prevChat ? parseChatDate(prevChat.createdAt) : null;
   const prevIsMine = prevChat ? (prevChat.isNotification ? false : prevChat.userId === myUserId) : false;
 
   const isNewDate = date !== prevDate;

src/features/chatRoom/components/ChatRoomLayout/ChatRoomContent/index.tsx

@@ -23,7 +23,14 @@ const ChatRoomContent = ({ data }: Props) => {
     restOpponentLastEnterAt: data.opponentLastEnterAt,
   });
 
-  const { data: chats = [], hasNextPage, isFetching, isFetchingNextPage, fetchNextPage } = useGetLoadChat(chatRoomId);
+  const {
+    data: chats = [],
+    hasNextPage,
+    isFetching,
+    isSuccess,
+    isFetchingNextPage,
+    fetchNextPage,
+  } = useGetLoadChat(chatRoomId);
 
   // 메시지 합치기
   const messages = [[...chats].reverse(), ...newMessages].flat();
@@ -39,11 +46,15 @@ const ChatRoomContent = ({ data }: Props) => {
 
   useEffect(() => {
     // 첫 방문시에 스크롤 위치 초기화
-    if (scrollRef.current && !isFetching && !isMountedRef.current) {
+    if (scrollRef.current && isSuccess && !isMountedRef.current) {
+      console.log(scrollRef.current.scrollTop);
+      console.log(scrollRef.current.scrollHeight);
       scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+      console.log(scrollRef.current.scrollTop);
+      console.log(scrollRef.current.scrollHeight);
       isMountedRef.current = true;
     }
-  }, [isFetching]);
+  }, [isSuccess]);
 
   useEffect(() => {
     // 페이지네이션시에 스크롤 보정

src/features/pick/components/DetailBottom/index.tsx

@@ -32,7 +32,8 @@ const DetailBottom = ({ id, itemId, isCreator, pickState }: Props) => {
   const confirmPick = () => {
     confirm(id, {
       onSuccess: () => {
-        navigate(`/pick-detail/${id}`);
+        // TODO: 채팅방 이동
+        navigate(`/chat`);
       },
     });
   };

src/features/pickList/apis/useGetAppointment.ts

@@ -0,0 +1,61 @@
+import client from '@/common/utils/client';
+import { QUERY_KEYS } from '@/libs/queryKeys';
+import { useInfiniteQuery } from '@tanstack/react-query';
+import type { AppointmentInterface } from '../types';
+
+export interface GetAppointmentReuest {
+  pageSize: number;
+  subject: 'REQUESTER' | 'OWNER';
+  period: 'ALL' | 'YEAR' | 'SIX_MONTH' | 'WEEK';
+  cursorState?: string | null;
+  cursorId?: string | null;
+  cursorDate?: string | null;
+}
+
+export interface GetAppointmentResponst {
+  message: string;
+  data: {
+    appointmentInfoList: AppointmentInterface[];
+    pageInfo: {
+      cursorState: string | null;
+      cursorDate: string | null;
+      cursorId: string | null;
+      hasNext: boolean;
+    };
+  };
+}
+
+interface PageParam {
+  cursorState?: string | null;
+  cursorId?: string | null;
+  cursorDate?: string | null;
+}
+
+const getAppointment = async (params: GetAppointmentReuest) => {
+  const res = await client.get<GetAppointmentResponst>('/api/v1/appointment', {
+    params,
+  });
+
+  return res.data;
+};
+
+const useGetAppointment = (params: GetAppointmentReuest) => {
+  const initialPageParam: PageParam = {};
+
+  return useInfiniteQuery({
+    queryKey: [QUERY_KEYS.APPOINTMENT_LIST, params],
+    queryFn: ({ pageParam }) => getAppointment({ ...params, ...pageParam }),
+    getNextPageParam: lastPage =>
+      lastPage.data.pageInfo.hasNext
+        ? {
+            cursorId: lastPage.data.pageInfo.cursorId,
+            cursorLastChatAt: lastPage.data.pageInfo.cursorDate,
+          }
+        : undefined,
+    initialPageParam,
+    select: data => data.pages.flatMap(page => page.data.appointmentInfoList),
+    staleTime: 0,
+  });
+};
+
+export default useGetAppointment;

src/features/pickList/components/Btn/index.tsx

@@ -0,0 +1,57 @@
+import { cx } from '@styled-system/css';
+import * as s from './style.css';
+import { useNavigate } from 'react-router';
+
+interface BtnProps {
+  type: 'review' | 'chat';
+  nickname?: string;
+  chatRoomId?: number;
+  appointmentId: number;
+  isComplete?: boolean;
+}
+
+const Btn = ({ type, isComplete, chatRoomId, appointmentId, nickname }: BtnProps) => {
+  const title = type === 'chat' ? '채팅창' : isComplete ? '작성완료' : '리뷰작성';
+  const iconColor = type === 'chat' ? '54' : isComplete ? 'systemGray2' : '100';
+  const icon = type === 'chat' ? 'mgc_chat_1_fill' : isComplete ? 'mgc_choice_fill' : 'mgc_message_4_fill';
+
+  const bg = type === 'chat' ? 'systemGray2' : isComplete ? 'systemGray5' : 'main';
+  const color = type === 'review' && isComplete ? '54' : '100';
+
+  const navigate = useNavigate();
+
+  const onClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    e.preventDefault();
+
+    if (type === 'chat') {
+      alert('채팅창으로 연결');
+      navigate(`/chatroom/${chatRoomId}`);
+
+      return;
+    }
+    if (type === 'review') {
+      // 리뷰 작성 전일 때,
+      if (!isComplete) {
+        alert('리뷰 작성 페이지로 연결');
+        navigate(`/review/${appointmentId}`, {
+          state: {
+            nickname: nickname,
+          },
+        });
+        return;
+      }
+      // 리뷰 작성 완료 동작
+      alert('리뷰 작성 완료');
+    }
+  };
+
+  return (
+    <button className={s.Container({ bg, color })} onClick={onClick}>
+      <div className={cx(icon, s.Icon({ iconColor }))} />
+      {title}
+    </button>
+  );
+};
+
+export default Btn;

src/features/pickList/components/Btn/style.css.ts

@@ -0,0 +1,61 @@
+import { cva } from '@styled-system/css';
+
+export const Container = cva({
+  base: {
+    display: 'flex',
+    padding: '0.25rem 0.375rem',
+    justifyContent: 'center',
+    alignItems: 'center',
+    gap: '0.375rem',
+
+    borderRadius: '0.375rem',
+    bg: 'systemGray2',
+
+    fontFamily: 'Pretendard',
+    fontSize: '0.75rem',
+    fontStyle: 'normal',
+    fontWeight: 500,
+    lineHeight: 'normal',
+    letterSpacing: '-0.03rem',
+  },
+  variants: {
+    bg: {
+      main: {
+        bg: 'main',
+      },
+      systemGray2: {
+        bg: 'systemGray2',
+      },
+      systemGray5: {
+        bg: 'systemGray5',
+      },
+    },
+    color: {
+      '100': {
+        color: '100',
+      },
+      '54': {
+        color: '54',
+      },
+    },
+  },
+});
+
+export const Icon = cva({
+  base: {
+    fontSize: '1rem',
+  },
+  variants: {
+    iconColor: {
+      systemGray2: {
+        color: 'systemGray2',
+      },
+      '100': {
+        color: '100',
+      },
+      '54': {
+        color: '54',
+      },
+    },
+  },
+});

src/features/pickList/components/PickItemList/index.tsx

@@ -0,0 +1,76 @@
+import ItemTokenList from '@/common/components/ItemTokenList';
+import getImageUrl from '@/common/utils/getImageUrl';
+import PriceToken from '@/features/home/components/ItemCard/PriceToken';
+import * as s from './style.css';
+import TradeInfo from '../TradeInfo';
+import Btn from '../Btn';
+import type { AppointmentInterface } from '../../types';
+import { Link } from 'react-router';
+import { parsePickDate } from '@/common/utils/parseDate';
+
+interface PickItemListProps {
+  data: AppointmentInterface;
+}
+
+const PickItemList = ({ data }: PickItemListProps) => {
+  const isSuccess = data.state === 'SUCCESS';
+  const date = parsePickDate(data.rentalDate);
+
+  return (
+    <div className={s.TradeInfo}>
+      <TradeInfo isSuccess={isSuccess} date={date} />
+      <Link className={s.Container} to={`/pick-detail/${data.appointmentId}`}>
+        <img className={s.Image} src={getImageUrl(data.imageUrl)} aria-hidden />
+
+        <div className={s.Wrapper}>
+          <div className={s.Heart}>
+            <div className={s.Info}>
+              <div className={s.Header}>
+                <h2 className={s.Title}>{data.title}</h2>
+                <div className={s.Price}>
+                  {data.type === 'RENTAL' && <PriceToken price={data.price} deposit={data.deposit} />}
+                  {data.type === 'SALE' && <PriceToken price={data.price} />}
+                </div>
+
+                <div className={s.Tokens}>
+                  <ItemTokenList
+                    showCount={3}
+                    itemInfo={{
+                      productTypes: data.productTypes,
+                      // transactionTypes: data.type,
+                      // quality: 'BEST',
+                      // size: 'L',
+                      // color: 'BLACK',
+                      // tradeMethods: ['DIRECT'],
+                    }}
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className={s.Footer}>
+            <Btn
+              type="chat"
+              appointmentId={data.appointmentId}
+              // nickname={data.nickname}
+              // chatRoomId={data.chatRoomId}
+            />
+            {isSuccess && (
+              <Btn
+                type="review"
+                appointmentId={data.appointmentId}
+                // nickname={data.nickname}
+                // isComplete={data.isComplete}
+                // chatRoomId={data.chatRoomId}
+              />
+            )}
+          </div>
+        </div>
+      </Link>
+      <div className={s.Border} />
+    </div>
+  );
+};
+
+export default PickItemList;