Skip to content

Commit ab7edfc

Browse files
jw0202058jw0202058
authored
Merge pull request #230 from DevKor-github/dev
[배포] delete item, pick label, pick 이미지 추가
2 parents 676426b + 4a59fa9 commit ab7edfc

10 files changed

Lines changed: 66 additions & 51 deletions

File tree

‎src/features/chatRoom/components/ItemInfo/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ const ItemInfo = ({ data }: Props) => {
5252
<button className={s.Container} onClick={onClick}>
5353
<div className={s.Deleted({ isDeleted })}>
5454
<img className={s.Thumbnail} src={getImageUrl(data.thumbnail)} />
55-
<div className={s.Info({ isDeleted })}>
55+
<div className={s.Info}>
5656
<span>{data.title}</span>
5757
{isSale && <Sale />}
5858
{isRental && <Rental />}

‎src/features/chatRoom/components/ItemInfo/style.css.ts‎

Lines changed: 17 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -35,33 +35,24 @@ export const Thumbnail = css({
3535
objectFit: 'cover',
3636
});
3737

38-
export const Info = cva({
39-
base: {
40-
color: '100',
41-
fontFamily: 'Pretendard',
42-
fontSize: '0.875rem',
43-
fontStyle: 'normal',
44-
fontWeight: 600,
45-
lineHeight: 'normal',
46-
letterSpacing: '-0.035rem',
38+
export const Info = css({
39+
color: '100',
40+
fontFamily: 'Pretendard',
41+
fontSize: '0.875rem',
42+
fontStyle: 'normal',
43+
fontWeight: 600,
44+
lineHeight: 'normal',
45+
letterSpacing: '-0.035rem',
4746

48-
display: 'flex',
49-
padding: '0.25rem 0',
50-
flexDirection: 'column',
51-
justifyContent: 'space-between',
52-
alignItems: ' flex-start',
53-
flex: '1 0 0',
54-
alignSelf: 'stretch',
55-
'& span': {
56-
lineClamp: 1,
57-
},
58-
},
59-
variants: {
60-
isDeleted: {
61-
true: {
62-
// opacity: 0.5,
63-
},
64-
},
47+
display: 'flex',
48+
padding: '0.25rem 0',
49+
flexDirection: 'column',
50+
justifyContent: 'space-between',
51+
alignItems: ' flex-start',
52+
flex: '1 0 0',
53+
alignSelf: 'stretch',
54+
'& span': {
55+
lineClamp: 1,
6556
},
6657
});
6758

‎src/features/chatRoom/components/PickChat/index.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { useNavigate } from 'react-router';
22
import * as s from './style.css';
33
import type { ReactNode } from 'react';
44
import { useToast } from '@/common/hooks/useToast';
5+
import Pick from '@/libs/assets/Pick.png';
56

67
interface Props {
78
children: ReactNode;
@@ -26,7 +27,9 @@ const PickChat = ({ isMine, marginTop, children, pickId, isDeleted }: Props) =>
2627
return (
2728
<div className={s.Container({ isMine })} style={{ marginTop: marginTop }}>
2829
<div className={s.HeadText}>{children}</div>
29-
<div className={s.Image} />
30+
<div className={s.Image}>
31+
<img src={Pick} alt="예시 이미지" />
32+
</div>
3033
<button className={s.PickBtn({ isDeleted })} onClick={onClick}>
3134
<div className={s.PickText}>PICK 확인하기</div>
3235
</button>

‎src/features/notification/components/NotificationItemCard/index.tsx‎

Lines changed: 19 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
import ItemTokenList from '@/common/components/ItemTokenList';
22
import PriceToken from '@/features/home/components/ItemCard/PriceToken';
3-
import { Link } from 'react-router';
43
import * as s from './style.css';
54
import getImageUrl from '@/common/utils/getImageUrl';
65
import { cx } from '@styled-system/css';
76
import type { NotificationInterface } from '../../types';
87
import { parsePickDate, parsePickTime } from '@/common/utils/parseDate';
8+
import { useToast } from '@/common/hooks/useToast';
9+
import { useNavigate } from 'react-router';
910

1011
interface Props {
1112
data: NotificationInterface;
@@ -19,6 +20,10 @@ const NotificationItemCard = ({ data }: Props) => {
1920
const isRemind = type === 'APPOINTMENT_RENTAL_REMIND' || type === 'APPOINTMENT_RETURN_REMIND';
2021
const remindDate =
2122
type === 'APPOINTMENT_RENTAL_REMIND' ? data.appointmentInfo.rentalDate : data.appointmentInfo.returnDate;
23+
const isDeleted = data.itemInfo.isDeleted;
24+
const { openToast } = useToast();
25+
const navigate = useNavigate();
26+
const title = data.itemInfo.title;
2227

2328
const label = (() => {
2429
if (type === 'APPOINTMENT_CANCEL') return '나의 Pick이 취소됐어요.';
@@ -39,11 +44,19 @@ const NotificationItemCard = ({ data }: Props) => {
3944
if (type === 'APPOINTMENT_RENTAL_REMIND') return 'mgc_t_shirt_fill';
4045
if (type === 'APPOINTMENT_RETURN_REMIND') return 'mgc_t_shirt_fill';
4146
if (type === 'APPOINTMENT_CONFIRM') return 'mgc_emoji_fill';
42-
if (type === 'APPOINTMENT_SUCCESS') return 'hands_clapping_fill';
47+
if (type === 'APPOINTMENT_SUCCESS') return 'mgc_hands_clapping_fill';
4348
})();
4449

50+
const onClick = () => {
51+
if (isDeleted) {
52+
openToast({ message: '삭제된 게시글에 대한 PICK입니다.' });
53+
return;
54+
}
55+
navigate(`/pick-detail/${data.appointmentInfo.id}`);
56+
};
57+
4558
return (
46-
<div className={s.Wrapper({ isRemind })}>
59+
<div className={s.Wrapper({ isRemind, isDeleted })}>
4760
<div className={s.RemindTime}>
4861
<div className={s.Type}>
4962
<div className={cx(`${icon}`, s.Icon({ icon }))} />
@@ -56,11 +69,11 @@ const NotificationItemCard = ({ data }: Props) => {
5669
</div>
5770
)}
5871
</div>
59-
<Link className={s.Container} to={`/pick-detail/${data.appointmentInfo.id}`}>
72+
<button className={s.Container} onClick={onClick}>
6073
<img className={s.Image} src={getImageUrl(data.itemInfo.thumbnail)} aria-hidden />
6174
<div className={s.Info}>
6275
<div className={s.Header}>
63-
<h2 className={s.Title}>{data.itemInfo.title}</h2>
76+
<h2 className={s.Title}>{title}</h2>
6477
<div className={s.Price}>
6578
{isRental && <PriceToken price={data.itemInfo.rentalFee} deposit={data.itemInfo.deposit} />}
6679
{isSale && <PriceToken price={data.itemInfo.salePrice} />}
@@ -91,7 +104,7 @@ const NotificationItemCard = ({ data }: Props) => {
91104
</div>
92105
</div>
93106
</div>
94-
</Link>
107+
</button>
95108
</div>
96109
);
97110
};

‎src/features/notification/components/NotificationItemCard/style.css.ts‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,11 @@ export const Wrapper = cva({
1313
bg: 'systemGray5',
1414
},
1515
},
16+
isDeleted: {
17+
true: {
18+
opacity: 0.2,
19+
},
20+
},
1621
},
1722
});
1823

@@ -53,7 +58,7 @@ export const Icon = cva({
5358
mgc_t_shirt_fill: {
5459
background: 'linear-gradient(128deg, #0F71FF 16.45%, #FF0004 102.04%)',
5560
},
56-
hands_clapping_fill: {
61+
mgc_hands_clapping_fill: {
5762
bg: 'linear-gradient(142deg, #FFB200 -0.11%, #F83E00 100.8%)',
5863
},
5964
},
@@ -104,7 +109,7 @@ export const Header = css({
104109
display: 'flex',
105110
flexDir: 'column',
106111
gap: '0.25rem',
107-
alignItems: 'stretch',
112+
alignItems: 'flex-start',
108113
});
109114

110115
export const Title = css({

‎src/features/notification/components/NotificationList/index.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,7 @@ interface Props {
88
const NotificationList = ({ notification }: Props) => {
99
return (
1010
<>
11-
{/* {notifications.map(item => ( */}
1211
<NotificationItemCard data={notification} />
13-
{/* ))} */}
1412
</>
1513
);
1614
};

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

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import Btn from '../Btn';
77
import type { AppointmentInterface } from '../../types';
88
import { Link } from 'react-router';
99
import { parsePickDate } from '@/common/utils/parseDate';
10-
// import { isBefore } from 'date-fns';
10+
import { isBefore } from 'date-fns';
1111

1212
interface PickItemListProps {
1313
data: AppointmentInterface;
@@ -18,16 +18,15 @@ const PickItemList = ({ data }: PickItemListProps) => {
1818
const isRental = data.type === 'RENTAL';
1919
const isSale = data.type === 'SALE';
2020

21-
// const currentDate = new Date(); // 현재 시간
22-
// const tradeData = isRental ? data.returnDate : data.rentalDate; // 거래 실제 시간
23-
// const isComplete = isBefore(tradeData, currentDate); // 거래 실제 시간이 도래했는지 -> 거래 완료 버튼 활성화
21+
const currentDate = new Date(); // 현재 시간
22+
const isInProgress = isBefore(data.rentalDate, currentDate);
2423

2524
const isSuccess = data.state === 'SUCCESS'; // 거래 실제로 완료됐는지 -> 거래 실제 시간 이후에 거래 완료 버튼을 눌렀거나, 24시간이 지났거나 (서버에서 내려줌)
2625
const tradeDate = parsePickDate(data.rentalDate);
2726

2827
return (
2928
<div className={s.TradeInfo}>
30-
<TradeInfo isSuccess={isSuccess} date={tradeDate} />
29+
<TradeInfo isSuccess={isSuccess} date={tradeDate} isInProgress={isInProgress} />
3130
<Link className={s.Container} to={`/pick-detail/${data.appointmentId}`}>
3231
<img className={s.Image} src={getImageUrl(data.imageUrl)} aria-hidden />
3332

‎src/features/pickList/components/TradeInfo/index.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,22 @@ import * as s from './style.css';
33

44
interface TradeInfoProps {
55
isSuccess: boolean;
6+
isInProgress: boolean;
67
date: string;
78
}
89

9-
const TradeInfo = ({ isSuccess, date }: TradeInfoProps) => {
10-
const label = isSuccess ? `${date} 거래 완료` : `${date} 거래 예정 상품`;
10+
const TradeInfo = ({ isSuccess, isInProgress, date }: TradeInfoProps) => {
11+
const state = isSuccess ? `${date} 거래 완료` : `${date} 거래 예정 상품`;
12+
const label = isInProgress ? '거래진행중' : '거래예정'; // 거래 완료가 아닐 떄 띄우기
1113

1214
return (
1315
<div className={s.Wrapper}>
1416
{!isSuccess && <div className={cx('mgc_t_shirt_fill', s.Icon)} />}
1517
<div className={s.TradeInfo}>
1618
<div>
17-
<div className={s.TradeDate({ isComplete: isSuccess })}>{label}</div>
19+
<div className={s.TradeDate({ isComplete: isSuccess })}>{state}</div>
1820
</div>
19-
{!isSuccess && <div className={s.InProgress}>거래진행중</div>}
21+
{!isSuccess && <div className={s.InProgress}>{label}</div>}
2022
</div>
2123
</div>
2224
);

‎src/libs/assets/Pick.png‎

447 KB
Loading

‎src/pages/PickDetailPage/index.tsx‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import NotFoundPage from '@/pages/NotFoundPage';
1212
import CustomHeader from '@/common/components/CustomHeader';
1313
import DetailBottom from '@/features/pick/components/DetailBottom';
1414
import { cx } from '@styled-system/css';
15+
import { ko } from 'date-fns/locale/ko';
1516

1617
interface InfoItemProps {
1718
title: string;
@@ -74,8 +75,8 @@ const PickDetailPage = () => {
7475
title={isSale ? '발송 일자' : '대여 기간'}
7576
value={
7677
data.returnDate === null
77-
? formatDate(data.rentalDate, 'yy.MM.dd')
78-
: `${formatDate(data.rentalDate, 'yy.MM.dd')} ~ ${formatDate(data.returnDate, 'yy.MM.dd')}`
78+
? formatDate(data.rentalDate, 'yy.MM.dd. (eee)', { locale: ko })
79+
: `${formatDate(data.rentalDate, 'yy.MM.dd. (eee)', { locale: ko })} ~ ${formatDate(data.returnDate, 'yy.MM.dd. (eee)', { locale: ko })}`
7980
}
8081
/>
8182
</div>
@@ -85,13 +86,16 @@ const PickDetailPage = () => {
8586
<InfoItem title={isSale ? '판매 장소' : '대여 장소'} value={data.rentalLocation} />
8687
<InfoItem
8788
title={isSale ? '판매 일시' : '대여 일시'}
88-
value={formatDate(data.rentalDate, 'yy.MM.dd HH시 mm분')}
89+
value={formatDate(data.rentalDate, 'yy.MM.dd. (eee) HH시 mm분', { locale: ko })}
8990
/>
9091
</div>
9192
{data.returnDate !== null && data.returnLocation !== null && (
9293
<div className={s.Block}>
9394
<InfoItem title={'반납 장소'} value={data.returnLocation} />
94-
<InfoItem title={'반납 일시'} value={formatDate(data.returnDate, 'yy.MM.dd HH시 mm분')} />
95+
<InfoItem
96+
title={'반납 일시'}
97+
value={formatDate(data.returnDate, 'yy.MM.dd. (eee) HH시 mm분', { locale: ko })}
98+
/>
9599
</div>
96100
)}
97101
</>

0 commit comments

Comments
 (0)