From 6aadf56b7440cec8cb3f7a5aa06b51abb991b3b6 Mon Sep 17 00:00:00 2001 From: nirii00 Date: Mon, 24 Feb 2025 12:51:13 +0900 Subject: [PATCH 1/3] =?UTF-8?q?feat:=20=EB=82=B4=20=ED=8E=B8=EC=A7=80?= =?UTF-8?q?=ED=95=A8,=20=EC=83=81=EC=84=B8=20=EA=B8=B0=EB=8A=A5=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84=201=EC=B0=A8=20-=20=EB=82=B4=20=ED=8E=B8?= =?UTF-8?q?=EC=A7=80=ED=95=A8=20=EA=B8=B0=EB=8A=A5=EA=B5=AC=ED=98=84=20=20?= =?UTF-8?q?=20-=20=EB=A0=8C=EB=8D=94=EB=A7=81=20=20=20-=203=EC=9D=98=20?= =?UTF-8?q?=EB=B0=B0=EC=88=98=EA=B0=80=20=EC=95=84=EB=8B=8C=20=EA=B2=BD?= =?UTF-8?q?=EC=9A=B0=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EC=B6=94=EA=B0=80=20?= =?UTF-8?q?=20=20-=20=EC=95=84=EB=AC=B4=EA=B2=83=EB=8F=84=20=EC=97=86?= =?UTF-8?q?=EC=9D=84=20=EB=95=8C=20=EB=85=B8=ED=8A=B8=20=EC=B6=94=EA=B0=80?= =?UTF-8?q?=20-=20=EB=82=B4=20=ED=8E=B8=EC=A7=80=ED=95=A8=20=EC=83=81?= =?UTF-8?q?=EC=84=B8=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84=20=20=20-?= =?UTF-8?q?=20=EA=B3=B5=EC=9C=A0=20=EC=9E=91=EC=84=B1=20=EB=B0=8F=20?= =?UTF-8?q?=EC=A0=84=EC=86=A1=20=20=20-=20=ED=8E=B8=EC=A7=80=20=EB=A6=AC?= =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=EB=A0=8C=EB=8D=94=EB=A7=81=20=20=20-=20?= =?UTF-8?q?=EC=83=81=EB=8C=80=EB=B0=A9=20=EC=B0=A8=EB=8B=A8=ED=95=98?= =?UTF-8?q?=EA=B8=B0=20-=20TODO=20=20=20-=20[=20]=20tanstackQuery=20?= =?UTF-8?q?=EC=A0=81=EC=9A=A9=20=20=20-=20[=20]=20=EB=AC=B4=ED=95=9C=20?= =?UTF-8?q?=EC=8A=A4=ED=81=AC=EB=A1=A4=3F=20=EC=A0=81=EC=9A=A9=ED=95=A0?= =?UTF-8?q?=EC=A7=80=3F=20=20=20-=20[=20]=20=EC=83=81=ED=83=9C=EA=B4=80?= =?UTF-8?q?=EB=A6=AC=20=ED=99=95=EC=9D=B8=ED=95=98=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/apis/api.ts | 23 +++ src/apis/client.ts | 18 ++- src/apis/letterBoxAPI.ts | 31 ++++ src/apis/shareAPI.ts | 21 +++ src/assets/images/window-disabled.png | Bin 0 -> 12609 bytes .../LetterBox/components/LetterBoxItem.tsx | 78 ++++++---- src/pages/LetterBox/index.tsx | 80 +++++++--- .../components/InformationTooltip.tsx | 2 +- .../components/LetterPreview.tsx | 29 +++- src/pages/LetterBoxDetail/index.tsx | 146 +++++++++++------- src/pages/LetterDetail/index.tsx | 15 +- src/pages/Onboarding/SetZipCode.tsx | 3 +- src/pages/Onboarding/UserInteraction.tsx | 22 +-- src/pages/Onboarding/components/Spinner.tsx | 1 + src/pages/Onboarding/index.tsx | 3 +- src/styles/utilities.css | 1 - 16 files changed, 335 insertions(+), 138 deletions(-) create mode 100644 src/apis/api.ts create mode 100644 src/apis/letterBoxAPI.ts create mode 100644 src/apis/shareAPI.ts create mode 100644 src/assets/images/window-disabled.png diff --git a/src/apis/api.ts b/src/apis/api.ts new file mode 100644 index 0000000..06bcdff --- /dev/null +++ b/src/apis/api.ts @@ -0,0 +1,23 @@ +import client from './client'; + +export const getRequest = async (url: string, params?: unknown) => { + try { + const response = await client.get(url, { params }); + if (!response) throw new Error('not a valid response'); + return response.data; + } catch (error) { + //TODO 에러처리 + console.error('GET request failed', error); + } +}; + +export const postRequest = async (url: string, data?: unknown) => { + try { + const response = await client.post(url, data); + if (!response) throw new Error('not a valid response'); + return response.data; + } catch (error) { + //TODO 에러처리 + console.error('POST request failed', error); + } +}; diff --git a/src/apis/client.ts b/src/apis/client.ts index c2b5f85..3ec122e 100644 --- a/src/apis/client.ts +++ b/src/apis/client.ts @@ -1,5 +1,21 @@ import axios from 'axios'; -export const client = axios.create({ +const client = axios.create({ baseURL: import.meta.env.VITE_API_URL, }); + +client.interceptors.request.use( + (config) => { + const token = localStorage.getItem('authToken'); + if (token) { + config.headers['Authorization'] = `Bearer ${token}`; + } + return config; + }, + (error) => { + //TODO: 에러처리 + return Promise.reject(error); + }, +); + +export default client; diff --git a/src/apis/letterBoxAPI.ts b/src/apis/letterBoxAPI.ts new file mode 100644 index 0000000..06390f8 --- /dev/null +++ b/src/apis/letterBoxAPI.ts @@ -0,0 +1,31 @@ +import { getRequest, postRequest } from './api'; + +export const getMailbox = async () => { + try { + const response = getRequest('/api/mailbox'); + if (!response) throw new Error('error while fetching mailbox data'); + return response; + } catch (error) { + console.error(error); + } +}; + +export const getMailboxDetail = async (id: number) => { + try { + const response = getRequest(`/api/mailbox/${id}`); + if (!response) throw new Error('error while fetching mailbox detail data'); + return response; + } catch (error) { + console.error(error); + } +}; + +export const postMailboxDisconnect = async (id: number) => { + try { + const response = postRequest(`/api/mailbox/${id}/disconnect`); + if (!response) throw new Error('error while disconnecting mailbox'); + return response; + } catch (error) { + console.error(error); + } +}; diff --git a/src/apis/shareAPI.ts b/src/apis/shareAPI.ts new file mode 100644 index 0000000..9c9231b --- /dev/null +++ b/src/apis/shareAPI.ts @@ -0,0 +1,21 @@ +import { getRequest, postRequest } from './api'; + +export const postShareProposals = async ( + letterIds: number[], + requesterId: number, + recipientId: number, + message: string, +) => { + try { + const response = postRequest('/api/share-proposals', { + letterIds: letterIds, + requesterId: requesterId, + recipientId: recipientId, + message: message, + }); + if (!response) throw new Error('error while fetching mailbox data'); + return response; + } catch (error) { + console.error(error); + } +}; diff --git a/src/assets/images/window-disabled.png b/src/assets/images/window-disabled.png new file mode 100644 index 0000000000000000000000000000000000000000..b3d2ca6129e4ee41c390e779eece78ee96b77092 GIT binary patch literal 12609 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 { + const navigate = useNavigate(); + const handleClickItem = (id: number) => { + navigate(`${id}`, { + state: { + id, + zipCode, + isClosed, + }, + }); + }; return ( - -
-
-

handleClickItem(boxId)} + > +

+

+ {zipCode} +

+ {isClosed ? ( +
+ ) : ( +
- {zipCode} -

- {isClosed ? ( -
- ) : ( -
-

{letterCount}통

-
- )} -
-
-
-
-
-
-
- +

{letterCount}통

+ + )} + +
+
+
+
+
+ ); }; diff --git a/src/pages/LetterBox/index.tsx b/src/pages/LetterBox/index.tsx index 8f8d328..5d5945a 100644 --- a/src/pages/LetterBox/index.tsx +++ b/src/pages/LetterBox/index.tsx @@ -1,39 +1,81 @@ +import { useEffect, useState } from 'react'; + +import { getMailbox } from '@/apis/letterBoxAPI'; import DoorImg from '@/assets/images/door.png'; +import ClosedWindowImg from '@/assets/images/window-disabled.png'; import PageTitle from '@/components/PageTitle'; import { chunkBox } from '@/utils/chunkBox'; import LetterBoxItem from './components/LetterBoxItem'; -const DUMMY_COUNT = 200; - +interface LetterBoxData { + letterMatchingId: number; + oppositeZipCode: string; + active: boolean; + oppositeRead: boolean; + // totalLetters: number; +} const LetterBoxPage = () => { + const [letterBox, setLetterBox] = useState([]); + + const fetchMailLists = async () => { + try { + const response = await getMailbox(); + if (!response) throw new Error(); + const data: LetterBoxData[] = response.data; + // 정렬? + setLetterBox(data); + } catch (error) { + console.error(error); + } + }; + useEffect(() => { + fetchMailLists(); + }, []); + return (
내 편지함

- 나와 연락한 사람들 {DUMMY_COUNT} + 나와 연락한 사람들 {letterBox?.length}

- {chunkBox( - Array.from({ length: 12 }).map((_, index) => ( - - )), - ).map((row, index) => ( -
- {row} -
- ))} + {letterBox.length > 0 ? ( + chunkBox( + letterBox.map((data: LetterBoxData, index) => ( + + )), + ).map((row, index) => + row.length === 3 ? ( +
+ {row} +
+ ) : ( +
+ {row} + 닫힌 문 이미지 + {row.length === 1 && ( + 닫힌 문 이미지 + )} +
+ ), + ) + ) : ( +

아직 주고 받은 편지가 없어요

+ )}
- + 닫힌 문 이미지 출입문 이미지 - + 닫힌 문 이미지
diff --git a/src/pages/LetterBoxDetail/components/InformationTooltip.tsx b/src/pages/LetterBoxDetail/components/InformationTooltip.tsx index eacfd3c..820652f 100644 --- a/src/pages/LetterBoxDetail/components/InformationTooltip.tsx +++ b/src/pages/LetterBoxDetail/components/InformationTooltip.tsx @@ -24,7 +24,7 @@ const InformationTooltip = () => {
diff --git a/src/pages/LetterBoxDetail/components/LetterPreview.tsx b/src/pages/LetterBoxDetail/components/LetterPreview.tsx index 4dbf628..1650c97 100644 --- a/src/pages/LetterBoxDetail/components/LetterPreview.tsx +++ b/src/pages/LetterBoxDetail/components/LetterPreview.tsx @@ -1,4 +1,4 @@ -import { Link } from 'react-router'; +import { useNavigate } from 'react-router'; import ListItemWrapper from '@/components/ListItemWrapper'; @@ -10,6 +10,8 @@ interface LetterPreviewProps { checked: boolean; isShareMode?: boolean; onToggle: () => void; + isClosed: boolean; + zipCode: string; } const LetterPreview = ({ id, @@ -19,7 +21,22 @@ const LetterPreview = ({ checked, isShareMode = false, onToggle, + isClosed, + zipCode, }: LetterPreviewProps) => { + // 차단된 편지인경우 편지 보내기 disable + const navigate = useNavigate(); + + const handleItemClick = (id: number) => { + navigate(`/letter/${id}`, { + state: { + id, + isClosed, + zipCode, + }, + }); + }; + if (isShareMode) return ( @@ -41,12 +58,10 @@ const LetterPreview = ({ ); return ( - - -

{date}

-

{title}

- - + handleItemClick(id)}> +

{date}

+

{title}

+ ); }; diff --git a/src/pages/LetterBoxDetail/index.tsx b/src/pages/LetterBoxDetail/index.tsx index d7c484b..a52e803 100644 --- a/src/pages/LetterBoxDetail/index.tsx +++ b/src/pages/LetterBoxDetail/index.tsx @@ -1,5 +1,8 @@ -import { ChangeEvent, useState } from 'react'; +import { ChangeEvent, useEffect, useState } from 'react'; +import { useLocation, useNavigate } from 'react-router'; +import { getMailboxDetail, postMailboxDisconnect } from '@/apis/letterBoxAPI'; +import { postShareProposals } from '@/apis/shareAPI'; import ConfirmModal from '@/components/ConfirmModal'; import MessageModal from '@/components/MessageModal'; import PageTitle from '@/components/PageTitle'; @@ -7,48 +10,43 @@ import PageTitle from '@/components/PageTitle'; import InformationTooltip from './components/InformationTooltip'; import LetterPreview from './components/LetterPreview'; -const DUMMY_ZIP_CODE = '12E12'; -const DUMMY_LETTER_LIST = [ - { - id: 1, - date: '2025.01.01', - title: '이건 받은 편지 입니다.이건 받은 편지 입니다.이건 받은 편지 입니다.', - isSend: false, - }, - { - id: 2, - date: '2025.01.01', - title: '이건 보낸 편지입니다.', - isSend: true, - }, - { - id: 3, - date: '2025.01.01', - title: '이건 받은 편지 입니다.이건 받은 편지 입니다.이건 받은 편지 입니다.', - isSend: false, - }, - { - id: 4, - date: '2025.01.01', - title: '이건 받은 편지 입니다.이건 받은 편지 입니다.이건 받은 편지 입니다.', - isSend: false, - }, - { - id: 5, - date: '2025.01.01', - title: '이건 보낸 편지입니다.', - isSend: true, - }, -]; - const LetterBoxDetailPage = () => { - //const { id } = useParams(); + interface MailBoxDetailProps { + letterId: number; + title: string; + myLetter: boolean; + active: boolean; + // createdAt: date; + } + + const location = useLocation(); + const userInfo = { ...location.state }; + + const [mailLists, setMailLists] = useState([]); + const [isShareMode, setShareMode] = useState(false); - const [isOpenUnconnectModal, setIsOpenUnconnectModal] = useState(false); + const [isOpenDisConnectModal, setIsOpenDisConnectModal] = useState(false); const [isOpenShareModal, setIsOpenShareModal] = useState(false); const [selected, setSelected] = useState([]); const [shareComment, setShareComment] = useState(''); + const navigate = useNavigate(); + + const fetchData = async () => { + try { + const response = await getMailboxDetail(userInfo.id || ''); + if (!response) throw new Error('LetterBoxDetailPage, fetchData error'); + setMailLists(response.data); + console.log(response.data); + } catch (error) { + console.error(error); + } + }; + + useEffect(() => { + fetchData(); + }, []); + const toggleShareMode = () => { if (isShareMode) { setSelected([]); @@ -68,16 +66,41 @@ const LetterBoxDetailPage = () => { setShareComment(e.target.value); }; + const handleDisconnect = async () => { + try { + const response = await postMailboxDisconnect(userInfo.id); + if (!response) throw new Error('letterBoxDetail, disconnecting failed'); + console.log(response); + navigate(-1); + } catch (error) { + console.error(error); + } + }; + + const handleShare = async () => { + try { + // TODO: myId -> 전역객체에서 가져오기 + const response = await postShareProposals(selected, 1, userInfo.id, shareComment); + if (!response) throw new Error(response); + console.log(response); + } catch (error) { + console.error(error); + } + }; + return ( <> - {isOpenUnconnectModal && ( + {isOpenDisConnectModal && ( setIsOpenUnconnectModal(false)} - onConfirm={() => setIsOpenUnconnectModal(false)} + onCancel={() => setIsOpenDisConnectModal(false)} + onConfirm={() => { + setIsOpenDisConnectModal(false); + handleDisconnect(); + }} /> )} {isOpenShareModal && ( @@ -88,10 +111,15 @@ const LetterBoxDetailPage = () => { completeText="동의 요청 보내기" inputValue={shareComment} onInputChange={handleChangeComment} - onCancel={() => setIsOpenShareModal(false)} + onCancel={() => { + setIsOpenShareModal(false); + setShareComment(''); + }} onComplete={() => { setIsOpenShareModal(false); + handleShare(); toggleShareMode(); + setShareComment(''); }} >

상대방 동의 후에 게시글이 업로드 됩니다.

@@ -101,36 +129,40 @@ const LetterBoxDetailPage = () => { {isShareMode ? '게시판에 올릴 편지를 선택해주세요' - : `${DUMMY_ZIP_CODE}님과 주고 받은 편지`} + : `${userInfo.zipCode}님과 주고 받은 편지`}
-

주고 받은 편지 {DUMMY_LETTER_LIST.length}

+

주고 받은 편지 {mailLists.length}

- - {!isShareMode && } + {!userInfo.isClosed && ( + + )} + {!isShareMode && !userInfo.isClosed && }
- {DUMMY_LETTER_LIST.map((letter) => ( + {mailLists.map((letter) => ( toggleSelected(letter.id)} + isClosed={userInfo.isClosed} + onToggle={() => toggleSelected(letter.letterId)} + zipCode={userInfo.zipCode} /> ))}
- {!isShareMode && ( + {!isShareMode && !userInfo.isClosed && ( diff --git a/src/pages/LetterDetail/index.tsx b/src/pages/LetterDetail/index.tsx index c892656..2d29e41 100644 --- a/src/pages/LetterDetail/index.tsx +++ b/src/pages/LetterDetail/index.tsx @@ -1,5 +1,5 @@ import { useEffect, useRef, useState } from 'react'; -import { useNavigate, useParams } from 'react-router'; +import { useLocation } from 'react-router'; import { twMerge } from 'tailwind-merge'; import { deleteLetter, getLetter } from '@/apis/letterDetail'; @@ -16,11 +16,16 @@ import ReportModal from '@/components/ReportModal'; import { FONT_TYPE_OBJ, PAPER_TYPE_OBJ } from '@/pages/Write/constants'; const LetterDetailPage = () => { - const params = useParams(); - const navigate = useNavigate(); - // 상대방의 우편번호도 데이터에 포함되어야 할 거 같음!!! - const [letterDetail, setLetterDetail] = useState(null); + // isClosed인 경우 편지보내기 disable + const location = useLocation(); + const { id, zipCode, isClosed } = location.state; + const DUMMY = { + title: '나에게 햄버거 햄부기우기우가 햄북스따스 함부르크 햄버거링고를 대령하거라 ', + text: '이 편지는 영국에서 최초로 시작되어 일년에 한바퀴를 돌면서 받는 사람에게 행운을 주었고 지금은 당신에게로 옮겨진 이 편지는 4일 안에 당신 곁을 떠나야 합니다. 이 편지를 포함해서 7통을 행운이 필요한 사람에게 보내 주셔야 합니다. 복사를 해도 좋습니다. 혹 미신이라 하실지 모르지만 사실입니다.영국에서 HGXWCH이라는 사람은 1930년에 이 편지를 받았습니다. 그는 비서에게 복사해서 보내라고 했습니다. 며칠 뒤에 복권이 당첨되어 20억을 받았습니다. 어떤 이는 이 편지를 받았으나 96시간 이내 자신의 손에서 떠나야 한다는 사실을 잊었습니다. 그는 곧 사직되었습니다. 나중에야 이 사실을 알고 7통의 편지를 보냈는데 다시 좋은 직장을 얻었습니다. 미국의 케네디 대통령은 이 편지를 받았지만 그냥 버렸습니다. 결국 9일 후 그는 암살당했습니다. 기억해 주세요. 이 편지를 보내면 7년의 행운이 있을 것이고 그렇지 않으면 3년의 불행이 있을 것입니다. ', + }; + const FONT = 'kobyo'; + const THEME = 'celebrate'; const DEGREES = [ { icon: , title: '따뜻해요' }, { icon: , title: '그럭저럭' }, diff --git a/src/pages/Onboarding/SetZipCode.tsx b/src/pages/Onboarding/SetZipCode.tsx index e71b876..b941f78 100644 --- a/src/pages/Onboarding/SetZipCode.tsx +++ b/src/pages/Onboarding/SetZipCode.tsx @@ -1,10 +1,9 @@ -import React from 'react'; import Spinner from './components/Spinner'; const SetZipCode = ({ setIsZipCodeSet, }: { - setIsZipCodeSet: React.Dispatch>; + setIsZipCodeSet: React.Dispatch>; }) => { const DUMMY_ZIPCODE = '122A2'; diff --git a/src/pages/Onboarding/UserInteraction.tsx b/src/pages/Onboarding/UserInteraction.tsx index 6ab062e..a7fee26 100644 --- a/src/pages/Onboarding/UserInteraction.tsx +++ b/src/pages/Onboarding/UserInteraction.tsx @@ -1,21 +1,21 @@ -import envelope from '@/assets/images/closed-letter.png'; -import envelopeFront from '@/assets/images/opened-letter-front.png'; -import envelopeTop from '@/assets/images/envelope-pink-back-top.png'; - import { useState, useRef, useEffect } from 'react'; -import { twMerge } from 'tailwind-merge'; import { Link } from 'react-router'; +import { twMerge } from 'tailwind-merge'; + +import envelope from '@/assets/images/closed-letter.png'; +import envelopeTop from '@/assets/images/envelope-pink-back-top.png'; +import envelopeFront from '@/assets/images/opened-letter-front.png'; export default function UserInteraction() { const imgRef = useRef(null); const [imgPos, setImgPos] = useState<{ top: number; width: number }>({ top: 0, width: 0 }); - const [imgToBottom, setImgToBottom] = useState(false); + const [imgToBottom, setImgToBottom] = useState(false); - const [startAnimation, setStartAnimation] = useState(false); - const [openAnimation, setOpenAnimation] = useState(false); - const [letterOutAnimation, setLetterOutAnimation] = useState(false); - const [envelopeOut, setEnvelopeOut] = useState(false); - const [finishAnimation, setFinishAnimation] = useState(false); + const [startAnimation, setStartAnimation] = useState(false); + const [openAnimation, setOpenAnimation] = useState(false); + const [letterOutAnimation, setLetterOutAnimation] = useState(false); + const [envelopeOut, setEnvelopeOut] = useState(false); + const [finishAnimation, setFinishAnimation] = useState(false); const handleLetterClick = () => { if (imgRef.current) { diff --git a/src/pages/Onboarding/components/Spinner.tsx b/src/pages/Onboarding/components/Spinner.tsx index d100bf4..c4b9295 100644 --- a/src/pages/Onboarding/components/Spinner.tsx +++ b/src/pages/Onboarding/components/Spinner.tsx @@ -1,4 +1,5 @@ import { useEffect, useRef, useState } from 'react'; + import { ELEMENTS } from '../constants/index'; interface SpinnerProps { diff --git a/src/pages/Onboarding/index.tsx b/src/pages/Onboarding/index.tsx index 1bc4afe..14b839c 100644 --- a/src/pages/Onboarding/index.tsx +++ b/src/pages/Onboarding/index.tsx @@ -1,9 +1,10 @@ import { useState } from 'react'; + import SetZipCode from './SetZipCode'; import UserInteraction from './UserInteraction'; const OnboardingPage = () => { - const [isZipCodeSet, setIsZipCodeSet] = useState(false); + const [isZipCodeSet, setIsZipCodeSet] = useState(false); return (
diff --git a/src/styles/utilities.css b/src/styles/utilities.css index b5c36e0..5a3b206 100644 --- a/src/styles/utilities.css +++ b/src/styles/utilities.css @@ -99,5 +99,4 @@ .animate-envelopeOut { animation: envelopeOut 2s ease-in-out forwards; } - } From b1994ca4d7e7699b544a35f7c631728db586d10f Mon Sep 17 00:00:00 2001 From: nirii00 Date: Mon, 24 Feb 2025 14:25:58 +0900 Subject: [PATCH 2/3] =?UTF-8?q?refactor:=20API=20=EC=BB=A8=EB=B2=A4?= =?UTF-8?q?=EC=85=98=20=ED=86=B5=EC=9D=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - API 파일이름 수정 - api.ts 삭제 --- src/apis/api.ts | 23 ----------------------- src/apis/{letterBoxAPI.ts => mailBox.ts} | 8 ++++---- src/apis/{shareAPI.ts => share.ts} | 4 ++-- src/pages/LetterBoardDetail/index.tsx | 3 +-- src/pages/LetterBox/index.tsx | 2 +- src/pages/LetterBoxDetail/index.tsx | 5 +++-- src/pages/LetterDetail/index.tsx | 6 +++--- 7 files changed, 14 insertions(+), 37 deletions(-) delete mode 100644 src/apis/api.ts rename src/apis/{letterBoxAPI.ts => mailBox.ts} (74%) rename src/apis/{shareAPI.ts => share.ts} (79%) diff --git a/src/apis/api.ts b/src/apis/api.ts deleted file mode 100644 index 06bcdff..0000000 --- a/src/apis/api.ts +++ /dev/null @@ -1,23 +0,0 @@ -import client from './client'; - -export const getRequest = async (url: string, params?: unknown) => { - try { - const response = await client.get(url, { params }); - if (!response) throw new Error('not a valid response'); - return response.data; - } catch (error) { - //TODO 에러처리 - console.error('GET request failed', error); - } -}; - -export const postRequest = async (url: string, data?: unknown) => { - try { - const response = await client.post(url, data); - if (!response) throw new Error('not a valid response'); - return response.data; - } catch (error) { - //TODO 에러처리 - console.error('POST request failed', error); - } -}; diff --git a/src/apis/letterBoxAPI.ts b/src/apis/mailBox.ts similarity index 74% rename from src/apis/letterBoxAPI.ts rename to src/apis/mailBox.ts index 06390f8..b87d8c3 100644 --- a/src/apis/letterBoxAPI.ts +++ b/src/apis/mailBox.ts @@ -1,8 +1,8 @@ -import { getRequest, postRequest } from './api'; +import client from './client'; export const getMailbox = async () => { try { - const response = getRequest('/api/mailbox'); + const response = client.get('/api/mailbox'); if (!response) throw new Error('error while fetching mailbox data'); return response; } catch (error) { @@ -12,7 +12,7 @@ export const getMailbox = async () => { export const getMailboxDetail = async (id: number) => { try { - const response = getRequest(`/api/mailbox/${id}`); + const response = client.get(`/api/mailbox/${id}`); if (!response) throw new Error('error while fetching mailbox detail data'); return response; } catch (error) { @@ -22,7 +22,7 @@ export const getMailboxDetail = async (id: number) => { export const postMailboxDisconnect = async (id: number) => { try { - const response = postRequest(`/api/mailbox/${id}/disconnect`); + const response = client.post(`/api/mailbox/${id}/disconnect`); if (!response) throw new Error('error while disconnecting mailbox'); return response; } catch (error) { diff --git a/src/apis/shareAPI.ts b/src/apis/share.ts similarity index 79% rename from src/apis/shareAPI.ts rename to src/apis/share.ts index 9c9231b..8248532 100644 --- a/src/apis/shareAPI.ts +++ b/src/apis/share.ts @@ -1,4 +1,4 @@ -import { getRequest, postRequest } from './api'; +import client from './client'; export const postShareProposals = async ( letterIds: number[], @@ -7,7 +7,7 @@ export const postShareProposals = async ( message: string, ) => { try { - const response = postRequest('/api/share-proposals', { + const response = client.post('/api/share-proposals', { letterIds: letterIds, requesterId: requesterId, recipientId: recipientId, diff --git a/src/pages/LetterBoardDetail/index.tsx b/src/pages/LetterBoardDetail/index.tsx index 35abe1c..137eb67 100644 --- a/src/pages/LetterBoardDetail/index.tsx +++ b/src/pages/LetterBoardDetail/index.tsx @@ -1,14 +1,13 @@ import { useState } from 'react'; import { useLocation } from 'react-router'; - import { twMerge } from 'tailwind-merge'; +import BlurImg from '@/assets/images/landing-blur.png'; import ReportModal from '@/components/ReportModal'; import Header from './components/Header'; import Letter from './components/Letter'; -import BlurImg from '@/assets/images/landing-blur.png'; const DUMMY_LETTER = { receiver: '12E21', content: diff --git a/src/pages/LetterBox/index.tsx b/src/pages/LetterBox/index.tsx index 5d5945a..a7aa199 100644 --- a/src/pages/LetterBox/index.tsx +++ b/src/pages/LetterBox/index.tsx @@ -1,6 +1,6 @@ import { useEffect, useState } from 'react'; -import { getMailbox } from '@/apis/letterBoxAPI'; +import { getMailbox } from '@/apis/mailBox'; import DoorImg from '@/assets/images/door.png'; import ClosedWindowImg from '@/assets/images/window-disabled.png'; import PageTitle from '@/components/PageTitle'; diff --git a/src/pages/LetterBoxDetail/index.tsx b/src/pages/LetterBoxDetail/index.tsx index a52e803..7962789 100644 --- a/src/pages/LetterBoxDetail/index.tsx +++ b/src/pages/LetterBoxDetail/index.tsx @@ -1,8 +1,8 @@ import { ChangeEvent, useEffect, useState } from 'react'; import { useLocation, useNavigate } from 'react-router'; -import { getMailboxDetail, postMailboxDisconnect } from '@/apis/letterBoxAPI'; -import { postShareProposals } from '@/apis/shareAPI'; +import { getMailboxDetail, postMailboxDisconnect } from '@/apis/mailBox'; +import { postShareProposals } from '@/apis/share'; import ConfirmModal from '@/components/ConfirmModal'; import MessageModal from '@/components/MessageModal'; import PageTitle from '@/components/PageTitle'; @@ -147,6 +147,7 @@ const LetterBoxDetailPage = () => { { // isClosed인 경우 편지보내기 disable - const location = useLocation(); - const { id, zipCode, isClosed } = location.state; + // const location = useLocation(); + // const { id, zipCode, isClosed } = location.state; const DUMMY = { title: '나에게 햄버거 햄부기우기우가 햄북스따스 함부르크 햄버거링고를 대령하거라 ', From 9b63ec3ba868c65545553c0bbbe722d0edee2f41 Mon Sep 17 00:00:00 2001 From: nirii00 Date: Mon, 24 Feb 2025 14:49:20 +0900 Subject: [PATCH 3/3] =?UTF-8?q?refactor:=20merge=20=ED=9B=84=20=EC=98=A4?= =?UTF-8?q?=EB=A5=98=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/apis/client.ts | 26 +++++++++++++------------- src/apis/letterDetail.ts | 2 +- src/apis/mailBox.ts | 10 +++++----- src/apis/share.ts | 2 +- src/apis/write.ts | 2 +- src/pages/Admin/Report.tsx | 2 +- src/pages/LetterDetail/index.tsx | 15 +++++---------- 7 files changed, 27 insertions(+), 32 deletions(-) diff --git a/src/apis/client.ts b/src/apis/client.ts index 3ec122e..d2c900a 100644 --- a/src/apis/client.ts +++ b/src/apis/client.ts @@ -4,18 +4,18 @@ const client = axios.create({ baseURL: import.meta.env.VITE_API_URL, }); -client.interceptors.request.use( - (config) => { - const token = localStorage.getItem('authToken'); - if (token) { - config.headers['Authorization'] = `Bearer ${token}`; - } - return config; - }, - (error) => { - //TODO: 에러처리 - return Promise.reject(error); - }, -); +// client.interceptors.request.use( +// (config) => { +// const token = localStorage.getItem('authToken'); +// if (token) { +// config.headers['Authorization'] = `Bearer ${token}`; +// } +// return config; +// }, +// (error) => { +// //TODO: 에러처리 +// return Promise.reject(error); +// }, +// ); export default client; diff --git a/src/apis/letterDetail.ts b/src/apis/letterDetail.ts index cefd391..7f0b061 100644 --- a/src/apis/letterDetail.ts +++ b/src/apis/letterDetail.ts @@ -1,4 +1,4 @@ -import { client } from './client'; +import client from './client'; const getLetter = async ( letterId: string, diff --git a/src/apis/mailBox.ts b/src/apis/mailBox.ts index b87d8c3..7c8b120 100644 --- a/src/apis/mailBox.ts +++ b/src/apis/mailBox.ts @@ -2,9 +2,9 @@ import client from './client'; export const getMailbox = async () => { try { - const response = client.get('/api/mailbox'); + const response = await client.get('/api/mailbox'); if (!response) throw new Error('error while fetching mailbox data'); - return response; + return response.data; } catch (error) { console.error(error); } @@ -12,9 +12,9 @@ export const getMailbox = async () => { export const getMailboxDetail = async (id: number) => { try { - const response = client.get(`/api/mailbox/${id}`); + const response = await client.get(`/api/mailbox/${id}`); if (!response) throw new Error('error while fetching mailbox detail data'); - return response; + return response.data; } catch (error) { console.error(error); } @@ -22,7 +22,7 @@ export const getMailboxDetail = async (id: number) => { export const postMailboxDisconnect = async (id: number) => { try { - const response = client.post(`/api/mailbox/${id}/disconnect`); + const response = await client.post(`/api/mailbox/${id}/disconnect`); if (!response) throw new Error('error while disconnecting mailbox'); return response; } catch (error) { diff --git a/src/apis/share.ts b/src/apis/share.ts index 8248532..447037a 100644 --- a/src/apis/share.ts +++ b/src/apis/share.ts @@ -7,7 +7,7 @@ export const postShareProposals = async ( message: string, ) => { try { - const response = client.post('/api/share-proposals', { + const response = await client.post('/api/share-proposals', { letterIds: letterIds, requesterId: requesterId, recipientId: recipientId, diff --git a/src/apis/write.ts b/src/apis/write.ts index b8e950a..bcecde9 100644 --- a/src/apis/write.ts +++ b/src/apis/write.ts @@ -1,4 +1,4 @@ -import { client } from './client'; +import client from './client'; const postLetter = async ( data: LetterRequest, diff --git a/src/pages/Admin/Report.tsx b/src/pages/Admin/Report.tsx index 36b8040..48f85bb 100644 --- a/src/pages/Admin/Report.tsx +++ b/src/pages/Admin/Report.tsx @@ -1,6 +1,6 @@ import { useEffect, useState } from 'react'; -import { client } from '@/apis/client'; +import client from '@/apis/client'; import { AlarmIcon } from '@/assets/icons'; import DetailFrame from './components/DetailFrame'; diff --git a/src/pages/LetterDetail/index.tsx b/src/pages/LetterDetail/index.tsx index a798a95..c892656 100644 --- a/src/pages/LetterDetail/index.tsx +++ b/src/pages/LetterDetail/index.tsx @@ -1,5 +1,5 @@ import { useEffect, useRef, useState } from 'react'; -// import { useLocation } from 'react-router'; +import { useNavigate, useParams } from 'react-router'; import { twMerge } from 'tailwind-merge'; import { deleteLetter, getLetter } from '@/apis/letterDetail'; @@ -16,16 +16,11 @@ import ReportModal from '@/components/ReportModal'; import { FONT_TYPE_OBJ, PAPER_TYPE_OBJ } from '@/pages/Write/constants'; const LetterDetailPage = () => { - // isClosed인 경우 편지보내기 disable - // const location = useLocation(); - // const { id, zipCode, isClosed } = location.state; + const params = useParams(); + const navigate = useNavigate(); + // 상대방의 우편번호도 데이터에 포함되어야 할 거 같음!!! + const [letterDetail, setLetterDetail] = useState(null); - const DUMMY = { - title: '나에게 햄버거 햄부기우기우가 햄북스따스 함부르크 햄버거링고를 대령하거라 ', - text: '이 편지는 영국에서 최초로 시작되어 일년에 한바퀴를 돌면서 받는 사람에게 행운을 주었고 지금은 당신에게로 옮겨진 이 편지는 4일 안에 당신 곁을 떠나야 합니다. 이 편지를 포함해서 7통을 행운이 필요한 사람에게 보내 주셔야 합니다. 복사를 해도 좋습니다. 혹 미신이라 하실지 모르지만 사실입니다.영국에서 HGXWCH이라는 사람은 1930년에 이 편지를 받았습니다. 그는 비서에게 복사해서 보내라고 했습니다. 며칠 뒤에 복권이 당첨되어 20억을 받았습니다. 어떤 이는 이 편지를 받았으나 96시간 이내 자신의 손에서 떠나야 한다는 사실을 잊었습니다. 그는 곧 사직되었습니다. 나중에야 이 사실을 알고 7통의 편지를 보냈는데 다시 좋은 직장을 얻었습니다. 미국의 케네디 대통령은 이 편지를 받았지만 그냥 버렸습니다. 결국 9일 후 그는 암살당했습니다. 기억해 주세요. 이 편지를 보내면 7년의 행운이 있을 것이고 그렇지 않으면 3년의 불행이 있을 것입니다. ', - }; - const FONT = 'kobyo'; - const THEME = 'celebrate'; const DEGREES = [ { icon: , title: '따뜻해요' }, { icon: , title: '그럭저럭' },