Skip to content

Commit

Permalink
chore : 키워드, 지도 편지 수정 (#414)
Browse files Browse the repository at this point in the history 
* chore : 기능 구현 없는 수정

* chore : 지도 답장 편지 페이지 이동 오류 해결

* chore : 답장 했으면 버튼 없어지게 수정

* chore : 키워드 편지 답장 확인

* chore : 답장 리스트 임시 주석

* chore : 스토리북 오류 해결

* chore : 스토리북 삭제
  • Loading branch information
@mmjjaa
mmjjaa authored Dec 9, 2024
1 parent f3d2433 commit 44d1551
Show file tree
Hide file tree
Showing 20 changed files with 164 additions and 566 deletions.
24 changes: 0 additions & 24 deletions src/components/Common/NotificationBadge/NotificationBadge.stories.tsx
View file

This file was deleted.

11 changes: 6 additions & 5 deletions src/components/LetterDetailPage/Delete/DeleteModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,28 +15,29 @@ export const DeleteModal = ({ closeModal }: DeleteModalProps) => {
const navigate = useNavigate();
const { pathname } = useLocation();
const letterType = pathname.split('/')[2];
const { dataType, letterId } = useParams<{
const { dataType, letterId, replyLetterId } = useParams<{
dataType: string;
letterId: string;
replyLetterId: string;
}>();
const transformedLetterType = dataType === 'sent' ? 'SEND' : 'RECEIVE';

const keywordMutation = useDeleteKeywordLetter({
letterId: Number(letterId),
letterId: Number(letterId) || Number(replyLetterId),
boxType: transformedLetterType
});

const mapMutation = useDeleteMapSentLetter({
letterIds: [Number(letterId)]
letterIds: [Number(letterId) || Number(replyLetterId)]
});

const keywordReplyMutation = useDeleteKeywordReplyLetter({
letterId: Number(letterId),
letterId: Number(letterId) || Number(replyLetterId),
boxType: transformedLetterType
});

const mapReceivedMutation = useDeleteMapReceivedLetter({
letterIds: [Number(letterId)]
letterIds: [Number(letterId) || Number(replyLetterId)]
});

const mutation =
Expand Down
142 changes: 47 additions & 95 deletions src/components/LetterDetailPage/LetterDatail/KeywordLetterDetail/KeywordLetterDetail.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@ import { Margin } from '@/components/Common/Margin/Margin';
import { KeywordList } from '../../Keyword/KeywordList';
import { DeleteButton } from '../../Delete/DeleteButton';
import clsx from 'clsx';
import { useGetKeywordReplyList } from '@/hooks/useGetKeywordReplyList';
import { ReplyList } from '../../ReplyList/ReplyList';
// import { useGetKeywordReplyList } from '@/hooks/useGetKeywordReplyList';
// import { ReplyList } from '../../ReplyList/ReplyList';
import { ReportButton } from '../../Report/ReportButton';
import { useParams, useNavigate } from 'react-router-dom';
import { Label } from '@/components/Common/BottleLetter/Label/Label';
Expand All @@ -19,6 +19,7 @@ type KeywordLetterDetailProps = {
createdAt: string;
font: string;
label: string;
isReplied?: boolean;
};
};

Expand All @@ -30,28 +31,35 @@ export const KeywordLetterDetail = ({
letterType: string;
}>();
const navigate = useNavigate();
const { letterId, title, content, keywords, createdAt, font, label } =
letterData;

const {
data: keywordReplyListData,
isLoading: isKeywordReplyListDataLoading,
error: keywordReplyListDataError
} = useGetKeywordReplyList({
letterId: Number(letterId) || 0,
page: 1,
size: 1,
sort: 'createdAt'
});
letterId,
title,
content,
keywords,
createdAt,
font,
label,
isReplied
} = letterData;

// const {
// data: keywordReplyListData,
// isLoading: isKeywordReplyListDataLoading,
// error: keywordReplyListDataError
// } = useGetKeywordReplyList({
// letterId: Number(letterId) || 0,
// page: 1,
// size: 1,
// sort: 'createdAt'
// });

if (isKeywordReplyListDataLoading) {
return <div>로딩 중...</div>;
}
// if (isKeywordReplyListDataLoading) {
// return <div>로딩 중...</div>;
// }

if (keywordReplyListDataError instanceof Error) {
return <div>오류...: {keywordReplyListDataError.message}</div>;
}
console.log(keywordReplyListData);
// if (keywordReplyListDataError instanceof Error) {
// return <div>오류...: {keywordReplyListDataError.message}</div>;
// }

return (
<div className={clsx(font ? font : 'font-sans')}>
Expand All @@ -63,7 +71,7 @@ export const KeywordLetterDetail = ({
<Label imgSrc={label} />
</div>
<DeleteButton />
{dataType === 'received' && <ReportButton />}
{letterType === 'REPLY_LETTER' && <ReportButton />}
</div>
<h1>{title}</h1>
<img src={'/to_line.f4c129e6.svg'} className="w-full" />
Expand All @@ -74,90 +82,34 @@ export const KeywordLetterDetail = ({

<Margin top={30} />
<div className="flex justify-between w-full ">
<p className="font-bold ">편지의 키워드</p>
{keywords && <p className="font-bold ">편지의 키워드</p>}
<p className="">{formatDate(createdAt)}</p>
</div>
{keywords && <KeywordList keywords={keywords} />}
<Margin bottom={5} />
{dataType === 'sent' && keywordReplyListData?.content ? (
{/* {dataType === 'sent' && keywordReplyListData?.content ? (
<div className="mx-auto mt-16">
<ReplyList
keywordReplyListData={keywordReplyListData.content}
/>
</div>
) : null}
) : null} */}

{dataType === 'received' && letterType === 'LETTER' && (
<button
className="btn-base flex-center rounded-3xl h-[40px]"
onClick={() =>
navigate(
`/letter/keyword/reply/create/:${letterId}`
)
}
>
편지에 답장하기
</button>
)}
{dataType === 'received' &&
letterType === 'LETTER' &&
!isReplied && (
<button
className="btn-base flex-center rounded-3xl h-[40px]"
onClick={() =>
navigate(
`/letter/keyword/reply/create/${letterId}`
)
}
>
편지에 답장하기
</button>
)}
</div>
</div>
);
};

/*
<div className="relative mx-auto mt-4 max-w">
{letterId && (
<div className="absolute top-0 flex mt-10 right-8">
<DeleteButton id={letterId} />
{!data?.isOwner && <ReportButton id={letterId} />}
</div>
)}
<div className="relative mt-16 flex-center">
<img
src={labelItem.src}
alt={labelItem.name}
className="absolute top-4 translate-x-40 w-[125.32px] h-[201.1px]"
/>
{type === 'map' ? (
<MapLetterDetail
title="편지제목"
content="편지내용"
date="24.11.18"
place="서울시 종로구 평창동"
hint="서대문역 앞 붕어빵 가게에서"
/>
) : (
data && <KeywordLetterDetail letterData={data} />
)}
</div>
</div>
{data?.isOwner ? (
hasReplies ? (
<div className="mt-16 w-[710px] mx-auto">
<ReplyList replies={sampleReplies} />
</div>
) : null
) : type === 'map' ? (
<div className="gap-4 mx-auto mt-4 flex-center max-w">
{!data?.isOwner && (
<>
<button className="btn-base rounded-3xl w-[339.82px] h-[80px]">
보관하기
</button>
<button className="btn-base rounded-3xl w-[339.82px] h-[80px]">
편지에 답장하기
</button>
</>
)}
</div>
) : (
<div className="gap-4 mx-auto mt-4 flex-center max-w">
{!data?.isOwner && (
<button className="btn-base rounded-3xl w-[700px] h-[80px]">
편지에 답장하기
</button>
)}
</div>
)}
*/
12 changes: 6 additions & 6 deletions ...ponents/LetterDetailPage/LetterDatail/MapLetterArchieveDetail/MapLetterArchieveDetail.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,18 +5,18 @@ import clsx from 'clsx';
import { DeleteButton } from '../../Delete/DeleteButton';
import { TextArea } from '@/components/Common/TextArea/TextArea';
import { useGetMapReplyList } from '@/hooks/useGetMapReplyList';
import { ReplyList } from '../../ReplyList/ReplyList';
// import { ReplyList } from '../../ReplyList/ReplyList';
import { ReportButton } from '../../Report/ReportButton';
import { useLocation } from 'react-router-dom';
import { Label } from '@/components/Common/BottleLetter/Label/Label';

type MapLetterDetailProps = {
letterData: {
title: string;
title?: string;
content: string;
description: string;
description?: string;
createdAt: string;
profileImg: string;
profileImg?: string;
font: string;
paper: string;
label: string;
Expand Down Expand Up @@ -90,14 +90,14 @@ export const MapLetterArchieveDetail = ({
</span>
<span>{DayCounter({ createdAt })}</span>
</div>
{mapReplyListData?.content ? (
{/* {mapReplyListData?.content ? (
<div className="mt-16 mx-auto">
<ReplyList
title={title}
keywordReplyListData={mapReplyListData.content}
/>
</div>
) : null}
) : null} */}
</div>
</div>
);
Expand Down
16 changes: 9 additions & 7 deletions src/components/LetterDetailPage/LetterDatail/MapLetterDetail/MapLetterDetail.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -146,13 +146,15 @@ export const MapLetterDetail = ({ letterData }: MapLetterDetailProps) => {
{!isOwner && (
<>
<div className="flex">
<button
className="btn-base flex-center rounded-3xl h-[40px]"
onClick={onStorageClick}
>
{isStored ? '보관됨' : '보관하기'}
</button>
{!isReplied && (
{!isStored && (
<button
className="btn-base flex-center rounded-3xl h-[40px]"
onClick={onStorageClick}
>
보관하기
</button>
)}
{isReplied !== undefined && !isReplied && (
<button
className="btn-base flex-center rounded-3xl h-[40px]"
onClick={onReplyClick}
Expand Down
Loading

0 comments on commit 44d1551

Please sign in to comment.