Merge pull request #215 from DevKor-github/feat/notification-no-result

feat: 알림 없을 때 띄워주는 화면 / fix: 나의 판매내역 width 수정

Author: jw0202058

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' | 'pick' | 'chat-list';
+  type: 'search' | '404' | 'like' | 'chat' | 'pick' | 'chat-list' | 'notification' | 'my-trade';
 }
 const NoResult = ({ type }: Props) => {
   const icon = type === 'search' ? 'mgc_alert_fill' : 'mgc_puzzled_fill';
@@ -14,6 +14,8 @@ const NoResult = ({ type }: Props) => {
     if (type === 'chat') return '아직 시작된 대화가 없어요!';
     if (type === 'chat-list') return '아직 시작된 대화가 없어요!';
     if (type === 'pick') return '아직 생성된 PICK이 없어요!';
+    if (type === 'notification') return '아직 알림이 없어요!';
+    if (type === 'my-trade') return '아직 등록한 상품이 없어요!';
     return '아직 관심목록이 없어요!';
   })();
 
@@ -22,7 +24,9 @@ const NoResult = ({ type }: Props) => {
     if (type === '404') return '다른 경로로 접속해 주세요.';
     if (type === 'chat') return '상품에 관심 있는 사람이 나타나면\n채팅을 주고받을 수 있습니다.';
     if (type === 'chat-list') return '채팅을 시작해 보세요.';
-    if (type === 'pick') return '약속을 생성해 보세요.';
+    if (type === 'pick') return 'PICK을 생성해 보세요.';
+    if (type === 'notification') return 'PICK을 생성해 보세요.';
+    if (type === 'my-trade') return '상품을 등록해 보세요.';
     return '원하는 상품을 관심목록에 담아 보세요.';
   })();
 

src/features/myTrade/components/myTradeItemList/index.tsx

@@ -24,7 +24,7 @@ const UserItemList = ({ userId }: Props) => {
     <div className={s.Content({ isEmpty })}>
       {isEmpty ? (
         <div className={s.NoResult}>
-          <NoResult type="like" />
+          <NoResult type="my-trade" />
           <Btn mode="main" className={s.Button} onClick={() => navigate('/')}>
             홈으로 돌아가기
           </Btn>

src/features/myTrade/components/myTradeItemList/style.css.ts

@@ -38,6 +38,7 @@ export const Content = cva({
     p: '1rem',
     overflowY: 'auto',
     gap: '1rem',
+    w: '100%',
   },
   variants: {
     isEmpty: {

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

@@ -7,7 +7,7 @@ import Btn from '../Btn';
 import type { AppointmentInterface } from '../../types';
 import { Link } from 'react-router';
 import { parsePickDate } from '@/common/utils/parseDate';
-import { isBefore } from 'date-fns';
+// import { isBefore } from 'date-fns';
 
 interface PickItemListProps {
   data: AppointmentInterface;
@@ -18,9 +18,9 @@ const PickItemList = ({ data }: PickItemListProps) => {
   const isRental = data.type === 'RENTAL';
   const isSale = data.type === 'SALE';
 
-  const currentDate = new Date(); // 현재 시간
-  const tradeData = isRental ? data.returnDate : data.rentalDate; // 거래 실제 시간
-  const isComplete = isBefore(tradeData, currentDate); // 거래 실제 시간이 도래했는지  ->  거래 완료 버튼 활성화
+  // const currentDate = new Date(); // 현재 시간
+  // const tradeData = isRental ? data.returnDate : data.rentalDate; // 거래 실제 시간
+  // const isComplete = isBefore(tradeData, currentDate); // 거래 실제 시간이 도래했는지  ->  거래 완료 버튼 활성화
 
   const isSuccess = data.state === 'SUCCESS'; // 거래 실제로 완료됐는지   ->  거래 실제 시간 이후에 거래 완료 버튼을 눌렀거나, 24시간이 지났거나 (서버에서 내려줌)
   const tradeDate = parsePickDate(data.rentalDate);

src/pages/NotificationPage/index.tsx

@@ -24,7 +24,7 @@ const NotigicationPage = () => {
         <div className={s.Content({ isEmpty })}>
           {isEmpty ? (
             <div className={s.NoResult}>
-              <NoResult type="like" />
+              <NoResult type="notification" />
               <Btn mode="main" className={s.Button} onClick={() => navigate('/')}>
                 홈으로 돌아가기
               </Btn>