Skip to content

Commit 0a8e69a

Browse files
wldnjs990wldnjs990
committed
feat:편지전송 답장 post api 연결완료
1 parent 73835b9 commit 0a8e69a

File tree

7 files changed

+60
-45
lines changed

7 files changed

+60
-45
lines changed

‎src/apis/letterDetail.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,23 @@ import { client } from './client';
33
const getLetter = async (
44
letterId: string,
55
setLetterState: React.Dispatch<React.SetStateAction<LetterDetail | null>>,
6+
callBack?: () => void,
67
) => {
78
try {
89
const res = await client.get(`/api/letters/${letterId}`);
910
setLetterState(res.data.data);
11+
if (callBack) callBack();
1012
console.log(res);
1113
} catch (error) {
1214
console.error(error);
1315
}
1416
};
1517

16-
const deleteLetter = async (letterId: string) => {
18+
const deleteLetter = async (letterId: string, callBack?: () => void) => {
1719
try {
1820
console.log(`/api/letters/${letterId}`);
1921
const res = await client.delete(`/api/letters/${letterId}`);
22+
if (callBack) callBack();
2023
console.log(res);
2124
} catch (error) {
2225
console.error(error);

‎src/apis/write.ts‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,24 @@
11
import { client } from './client';
22

3-
const postLetter = async (
4-
data: LetterRequest,
5-
setState?: React.Dispatch<React.SetStateAction<boolean>>,
6-
) => {
3+
const postLetter = async (data: LetterRequest, callBack?: () => void) => {
74
try {
85
const res = await client.post('/api/letters', data);
9-
if (setState) setState(true);
6+
if (callBack) callBack();
107
console.log(res);
118
} catch (error) {
129
console.error(error);
1310
}
1411
};
1512

1613
const getPrevLetter = async (
17-
setPrevLetterState: React.Dispatch<React.SetStateAction<PrevLetter[]>>,
1814
letterId: string,
15+
setPrevLetterState: React.Dispatch<React.SetStateAction<PrevLetter[]>>,
16+
callBack?: () => void,
1917
) => {
2018
try {
2119
const res = await client.get(`/api/letters/${letterId}/previous`);
2220
setPrevLetterState(res.data.data);
21+
if (callBack) callBack();
2322
console.log(res);
2423
} catch (error) {
2524
console.error(error);

‎src/components/ResultLetter.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,12 @@ import { CATEGORYS } from '../pages/Write/constants';
55
export default function ResultLetter({
66
categoryName = 'CONSOLATION',
77
title,
8+
zipCode = 'error',
89
}: {
910
categoryName: Category;
1011
title: string;
12+
zipCode?: string;
1113
}) {
12-
const address = '1A3E2';
1314
const date = new Date();
1415
const today = `${date.getFullYear()}년 ${date.getMonth() + 1}월 ${date.getDate()}일`;
1516

@@ -28,7 +29,7 @@ export default function ResultLetter({
2829
<div className="flex flex-col gap-[5px]">
2930
<span className="caption-sb text-gray-60">{today}</span>
3031
<div className="flex gap-1">
31-
{address.split('').map((spell, idx) => {
32+
{zipCode.split('').map((spell, idx) => {
3233
return (
3334
<span
3435
className="caption-r flex h-6 w-6 items-center justify-center rounded-sm bg-white/40"

‎src/pages/Write/CategorySelect.tsx‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { useState } from 'react';
21
import { Link } from 'react-router';
32

43
import { postLetter } from '@/apis/write';
@@ -13,20 +12,22 @@ import WritePageButton from './components/WritePageButton';
1312
export default function CategorySelect({
1413
setStep,
1514
prevLetter,
15+
send,
16+
setSend,
1617
}: {
1718
setStep: React.Dispatch<React.SetStateAction<Step>>;
1819
prevLetter: PrevLetter[];
20+
send: boolean;
21+
setSend: React.Dispatch<React.SetStateAction<boolean>>;
1922
}) {
2023
const letterTitle = useWrite((state) => state.letterTitle);
2124
const letterText = useWrite((state) => state.letterText);
2225
const category = useWrite((state) => state.category);
2326
const paperType = useWrite((state) => state.paperType);
2427
const fontType = useWrite((state) => state.fontType);
2528

26-
const [send, setSend] = useState<boolean>(false);
27-
2829
const LETTER_REQUEST: LetterRequest = {
29-
receiver: null,
30+
receiverId: null,
3031
parentLetterId: null,
3132
title: letterTitle,
3233
content: letterText,
@@ -60,7 +61,7 @@ export default function CategorySelect({
6061
{/* 카테고리 선택 컴포넌트 */}
6162
{!send && prevLetter.length <= 0 && <CategoryList />}
6263

63-
{prevLetter.length > 0 && (
64+
{send && prevLetter.length > 0 && (
6465
<div className="mt-25 flex w-full max-w-[300px] flex-col items-center gap-5">
6566
<ResultLetterAnimation categoryName="답변자" />
6667
<div className="animate-show-text flex flex-col items-center opacity-0">
@@ -74,7 +75,7 @@ export default function CategorySelect({
7475
</div>
7576
)}
7677

77-
{send && (
78+
{send && prevLetter.length <= 0 && (
7879
<div className="mt-25 flex w-full max-w-[300px] flex-col items-center gap-5">
7980
<ResultLetterAnimation categoryName={category} />
8081
<span className="animate-show-text body-sb text-gray-60 opacity-0">
@@ -95,7 +96,9 @@ export default function CategorySelect({
9596
className="bg-primary-3 body-m mt-auto flex h-10 w-full items-center justify-center rounded-lg"
9697
onClick={() => {
9798
if (category) {
98-
postLetter(LETTER_REQUEST, setSend);
99+
postLetter(LETTER_REQUEST, () => {
100+
setSend(true);
101+
});
99102
// setSend(true);
100103
} else {
101104
alert('우표 선택을 해주세요');

‎src/pages/Write/LetterEditor.tsx‎

Lines changed: 21 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import { useRef } from 'react';
21
import { twMerge } from 'tailwind-merge';
32

3+
import { postLetter } from '@/apis/write';
44
import BackButton from '@/components/BackButton';
55
import WritePageButton from '@/pages/Write/components/WritePageButton';
66
import { FONT_TYPE_OBJ } from '@/pages/Write/constants';
@@ -10,25 +10,31 @@ import useWrite from '@/stores/writeStore';
1010
export default function LetterEditor({
1111
setStep,
1212
prevLetter,
13+
setSend,
14+
searchParams,
1315
}: {
1416
setStep: React.Dispatch<React.SetStateAction<Step>>;
1517
prevLetter: PrevLetter[];
18+
setSend: React.Dispatch<React.SetStateAction<boolean>>;
19+
searchParams: URLSearchParams;
1620
}) {
17-
const textareaRef = useRef<HTMLTextAreaElement | null>(null);
18-
1921
const fontType = useWrite((state) => state.fontType);
22+
const paperType = useWrite((state) => state.paperType);
2023

2124
const letterTitle = useWrite((state) => state.letterTitle);
2225
const setLetterTitle = useWrite((state) => state.setLetterTitle);
2326

2427
const letterText = useWrite((state) => state.letterText);
2528
const setLetterText = useWrite((state) => state.setLetterText);
2629

27-
const handleResizeHeight = () => {
28-
if (textareaRef.current !== null) {
29-
textareaRef.current.style.height = 'auto'; //height 초기화
30-
textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
31-
}
30+
const LETTER_REQUEST: LetterRequest = {
31+
receiverId: prevLetter.length > 0 ? prevLetter[0].memberId : null,
32+
parentLetterId: Number(searchParams.get('letterId')),
33+
title: letterTitle,
34+
content: letterText,
35+
category: prevLetter.length > 0 ? prevLetter[0].category : 'ETC',
36+
paperType: paperType,
37+
fontType: fontType,
3238
};
3339

3440
return (
@@ -41,7 +47,12 @@ export default function LetterEditor({
4147
text="답장 전송"
4248
onClick={() => {
4349
if (letterTitle.trim() !== '' && letterText.trim() !== '') {
44-
setStep('category');
50+
postLetter(LETTER_REQUEST, () => {
51+
console.log(LETTER_REQUEST);
52+
console.log(prevLetter);
53+
setSend(true);
54+
setStep('category');
55+
});
4556
} else {
4657
alert('편지 제목, 내용이 작성되었는지 확인해주세요');
4758
}
@@ -80,7 +91,7 @@ export default function LetterEditor({
8091
)}
8192
placeholder="클릭해서 내용을 작성하세요"
8293
onChange={(e) => {
83-
handleResizeHeight();
94+
// handleResizeHeight();
8495
setLetterText(e.target.value);
8596
}}
8697
value={letterText}

‎src/pages/Write/index.tsx‎

Lines changed: 13 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -12,28 +12,17 @@ import LetterEditor from './LetterEditor';
1212
const WritePage = () => {
1313
const [searchParams] = useSearchParams();
1414

15+
const [send, setSend] = useState<boolean>(false);
1516
const [step, setStep] = useState<Step>('edit');
1617
const [prevLetter, setPrevLetter] = useState<PrevLetter[]>([]);
1718

1819
const paperType = useWrite((state) => state.paperType);
1920
const resetWrite = useWrite((state) => state.resetWrite);
2021

21-
// 답글 작성 과정에서 데이터 정제 + 답글작성시 api연결 해야함(백서버가 꺼져서 내일 진행2025.02.21)
22-
23-
// const LETTER_REQUEST: LetterRequest = {
24-
// receiver: null,
25-
// parentLetterId: null,
26-
// title: letterTitle,
27-
// content: letterText,
28-
// category: searchParams,
29-
// paperType: paperType,
30-
// fontType: fontType,
31-
// };
32-
3322
useEffect(() => {
3423
const letterId = searchParams.get('letterId');
3524
if (letterId) {
36-
getPrevLetter(setPrevLetter, letterId);
25+
getPrevLetter(letterId, setPrevLetter);
3726
}
3827
}, [searchParams]);
3928

@@ -60,8 +49,17 @@ const WritePage = () => {
6049
);
6150
return (
6251
<div className={wrapStyle}>
63-
{step === 'edit' && <LetterEditor setStep={setStep} prevLetter={prevLetter} />}
64-
{step === 'category' && <CategorySelect setStep={setStep} prevLetter={prevLetter} />}
52+
{step === 'edit' && (
53+
<LetterEditor
54+
setStep={setStep}
55+
prevLetter={prevLetter}
56+
setSend={setSend}
57+
searchParams={searchParams}
58+
/>
59+
)}
60+
{step === 'category' && (
61+
<CategorySelect setStep={setStep} prevLetter={prevLetter} send={send} setSend={setSend} />
62+
)}
6563
</div>
6664
);
6765
};

‎src/types/write.d.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,11 +19,11 @@ interface Fonts {
1919
}
2020

2121
interface PrevLetter {
22-
letterId: number;
22+
letterId: string;
2323
title: string;
2424
content: string;
25-
paperType: PaperType;
26-
fontType: FontType;
25+
category: Category;
26+
memberId: number;
2727
}
2828

2929
interface Categorys {
@@ -48,7 +48,7 @@ interface CategoryStamps {
4848

4949
// API 타입
5050
interface LetterRequest {
51-
receiver: number | null;
51+
receiverId: number | null;
5252
parentLetterId: number | null;
5353
title: string;
5454
content: string;

0 commit comments

Comments
 (0)