{children}
+
+
+
+
+
+
+
+
+
+
+
+ {children}
+ {title}
+{description}
+
+
+
+
+ );
+}
diff --git a/src/components/LetterWrapper.tsx b/src/components/LetterWrapper.tsx
new file mode 100644
index 0000000..7373ea2
--- /dev/null
+++ b/src/components/LetterWrapper.tsx
@@ -0,0 +1,30 @@
+import { forwardRef } from 'react';
+import { twMerge } from 'tailwind-merge';
+
+interface LetterWrapperProps {
+ isSender?: boolean;
+ className?: string;
+ children: React.ReactNode;
+ onClick?: (e: React.MouseEvent{children}
+
+ {description}
+{children}
+
+ {children}
+
+
+
+ );
+};
+
+export default ModalOverlay;
diff --git a/src/components/NoticeRollingPaper.tsx b/src/components/NoticeRollingPaper.tsx
new file mode 100644
index 0000000..b495b0e
--- /dev/null
+++ b/src/components/NoticeRollingPaper.tsx
@@ -0,0 +1,34 @@
+import { useQuery } from '@tanstack/react-query';
+import { Link } from 'react-router';
+import { twMerge } from 'tailwind-merge';
+
+import { getCurrentRollingPaper } from '@/apis/rolling';
+import { NoticeIcon } from '@/assets/icons';
+
+const NoticeRollingPaper = () => {
+ const { data } = useQuery({
+ queryKey: ['notice-rolling-paper'],
+ queryFn: () => getCurrentRollingPaper(),
+ });
+
+ const noticeText = data?.title;
+
+ return (
+
+
+ {children}
+
+
+
+ {noticeText}
++ {children} +
+ ); +}; + +export default PageTitle; diff --git a/src/components/ReportModal.tsx b/src/components/ReportModal.tsx new file mode 100644 index 0000000..be47d81 --- /dev/null +++ b/src/components/ReportModal.tsx @@ -0,0 +1,94 @@ +import { useEffect, useState } from 'react'; +import { twMerge } from 'tailwind-merge'; + +import { postReports } from '@/apis/admin'; + +import ConfirmModal from './ConfirmModal'; +import TextareaField from './TextareaField'; + +interface ReportModalProps { + reportType: ReportType; + letterId: number | null; + onClose: () => void; +} + +interface ReportReason { + name: string; + type: Reason; +} +const REPORT_REASON: ReportReason[] = [ + { name: '욕설', type: 'ABUSE' }, + { name: '비방', type: 'DEFAMATION' }, + { name: '폭언', type: 'THREATS' }, + { name: '성희롱', type: 'HARASSMENT' }, + { name: '기타', type: 'ETC' }, +]; + +const ReportModal = ({ reportType, letterId, onClose }: ReportModalProps) => { + const [postReportRequest, setPostReportRequest] = useState
+
+
+ 
+
+
+ 따숨이님께
+ {title}
+
+
+ {today}
+
+
+ {zipCode.split('').map((spell, idx) => {
+ return (
+
+ {spell}
+
+ );
+ })}
+
+
+
+
+ );
+};
+
+export default TextareaField;
diff --git a/src/hooks/.gitkeep b/src/hooks/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/src/hooks/useViewport.ts b/src/hooks/useViewport.ts
new file mode 100644
index 0000000..feb0447
--- /dev/null
+++ b/src/hooks/useViewport.ts
@@ -0,0 +1,21 @@
+import { useEffect } from 'react';
+
+function useViewport() {
+ useEffect(() => {
+ const setViewport = () => {
+ const vh = window.innerHeight * 0.01;
+ const vw = document.documentElement.clientWidth * 0.01;
+ document.documentElement.style.setProperty('--vh', `${vh}px`);
+ document.documentElement.style.setProperty('--vw', `${vw}px`);
+ };
+
+ setViewport();
+ window.addEventListener('resize', setViewport);
+
+ return () => {
+ window.removeEventListener('resize', setViewport);
+ };
+ }, []);
+}
+
+export default useViewport;
diff --git a/src/layouts/.gitkeep b/src/layouts/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/src/layouts/Header.tsx b/src/layouts/Header.tsx
new file mode 100644
index 0000000..8efa549
--- /dev/null
+++ b/src/layouts/Header.tsx
@@ -0,0 +1,26 @@
+import { Link, useNavigate } from 'react-router';
+
+import { AlarmIcon, ArrowLeftIcon, PersonIcon } from '@/assets/icons';
+
+const Header = () => {
+ // TODO: 뒤로 가기 버튼이 보이는 조건 추가
+ // TODO: 스크롤 발생 시, 어떻게 보여져야 하는지
+ const navigate = useNavigate();
+ return (
+
+
+
+
+
+ );
+};
+export default MobileLayout;
diff --git a/src/layouts/PrivateRoute.tsx b/src/layouts/PrivateRoute.tsx
new file mode 100644
index 0000000..bc78b4a
--- /dev/null
+++ b/src/layouts/PrivateRoute.tsx
@@ -0,0 +1,24 @@
+import { useEffect, useState } from 'react';
+import { useNavigate, Outlet } from 'react-router';
+
+import useAuthStore from '@/stores/authStore';
+
+export default function PrivateRoute() {
+ const isLoggedIn = useAuthStore((state) => state.isLoggedIn);
+ const navigate = useNavigate();
+ const [shouldRender, setShouldRender] = useState(false);
+
+ useEffect(() => {
+ if (!isLoggedIn) {
+ navigate('/login', { replace: true });
+ } else {
+ setShouldRender(true);
+ }
+ }, [isLoggedIn, navigate]);
+
+ if (!shouldRender) {
+ return null;
+ }
+
+ return
+
+
+ {badWords.map((badWord, idx) => {
+ return (
+
+ {badWord.word}
+
+
+ );
+ })}
+ {addInputShow ? (
+
+
+
+
+
+
+ {reportPages.currentPage}/{reportPages.totalPages}
+
+
+
+ | ID | +제목 | +쌓인 편지 수 | +상태 | ++ |
|---|---|---|---|---|
| 1 | ++ 침수 피해를 복구중인 포스코 임직원 분들에게 응원의 메시지를 보내주세요! + | +12 | ++ + 진행 중 + + | ++ |
| 2 | ++ 침수 피해를 복구중인 포스코 임직원 분들에게 응원의 메시지를 보내주세요! + | +12 | ++ + | ++ + | +
+ {children} +
+ ); +} diff --git a/src/pages/Admin/components/DetailFrame.tsx b/src/pages/Admin/components/DetailFrame.tsx new file mode 100644 index 0000000..f6bf7e9 --- /dev/null +++ b/src/pages/Admin/components/DetailFrame.tsx @@ -0,0 +1,43 @@ +import { ReactNode, useEffect, useRef } from 'react'; + +import { getScrollbarWidth } from '@/utils/getScrollbarWidth'; + +export default function DetailFrame({ + children, + closeEvent, +}: { + children: ReactNode; + closeEvent: React.Dispatch handleOutsideClick(e)}
+ >
+
+ );
+}
diff --git a/src/pages/Admin/components/DetailSmallBoxFrame.tsx b/src/pages/Admin/components/DetailSmallBoxFrame.tsx
new file mode 100644
index 0000000..83e971f
--- /dev/null
+++ b/src/pages/Admin/components/DetailSmallBoxFrame.tsx
@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+import { twMerge } from 'tailwind-merge';
+
+interface DetailSmallBoxFrame {
+ children: ReactNode;
+ className?: string;
+}
+export default function DetailSmallBoxFrame({ children, className }: DetailSmallBoxFrame) {
+ const frameStyle = twMerge(`w-full rounded-lg border border-[#D6D6D6] px-3 py-4`, className);
+ return
+ {children}
+
+ {children}
;
+}
diff --git a/src/pages/Admin/components/FilteredLetterListItem.tsx b/src/pages/Admin/components/FilteredLetterListItem.tsx
new file mode 100644
index 0000000..af908fa
--- /dev/null
+++ b/src/pages/Admin/components/FilteredLetterListItem.tsx
@@ -0,0 +1,23 @@
+import { KebobMenuIcon } from '@/assets/icons';
+// import MenuModal from "./MenuModal";
+
+export default function FilteredLetterListItem() {
+ return (
+ {}}
+ >
+
+ );
+}
diff --git a/src/pages/Admin/components/ListHeaderFrame.tsx b/src/pages/Admin/components/ListHeaderFrame.tsx
new file mode 100644
index 0000000..59e084e
--- /dev/null
+++ b/src/pages/Admin/components/ListHeaderFrame.tsx
@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+
+export default function ListHeaderFrame({ children }: { children: ReactNode }) {
+ return (
+
+ {'더미'}
+ {'더미'}
+ {'더미'}
+ {'더미'}
+ {'더미'}
+
+
+ {/* {modalOpen &&
+
+ );
+}
diff --git a/src/pages/Admin/components/MenuModal.tsx b/src/pages/Admin/components/MenuModal.tsx
new file mode 100644
index 0000000..924baf9
--- /dev/null
+++ b/src/pages/Admin/components/MenuModal.tsx
@@ -0,0 +1,47 @@
+import { useEffect, useRef } from 'react';
+
+interface ModalContents {
+ title: string;
+ onClick: () => void;
+}
+export default function MenuModal({
+ modalContents,
+ setModalOpen,
+}: {
+ modalContents: ModalContents[];
+ setModalOpen: React.Dispatch{children}
+
+ {modalContents.map((content, idx) => (
+
+ ))}
+
+ );
+}
diff --git a/src/pages/Admin/components/ReportDetailModal.tsx b/src/pages/Admin/components/ReportDetailModal.tsx
new file mode 100644
index 0000000..dae1d08
--- /dev/null
+++ b/src/pages/Admin/components/ReportDetailModal.tsx
@@ -0,0 +1,33 @@
+import DetailFrame from './DetailFrame';
+import DetailSmallBoxFrame from './DetailSmallBoxFrame';
+
+export default function ReportDetailModal({
+ selectedReport,
+ closeEvent,
+}: {
+ selectedReport: Report | null;
+ closeEvent: React.Dispatch
+ 신고사유
+
+ {selectedReport?.reason}
+
+
+
+
+ 편지 상세
+
+ {selectedReport?.contentDetail.title}
+ {selectedReport?.contentDetail.content}
+
+
+
+
+
+
+
+
+
+
+
+ {
+ setSelectReport(report);
+ setDetailModalOpen(true);
+ }}
+ >
+
+ );
+}
diff --git a/src/pages/Admin/components/Sidebar.tsx b/src/pages/Admin/components/Sidebar.tsx
new file mode 100644
index 0000000..6de7cc6
--- /dev/null
+++ b/src/pages/Admin/components/Sidebar.tsx
@@ -0,0 +1,61 @@
+import { NavLink, useLocation } from 'react-router';
+import { twMerge } from 'tailwind-merge';
+
+import { AlarmIcon, ArrowDownIcon } from '@/assets/icons';
+
+import { ADMIN_MENU_LIST } from '../constants';
+
+export default function Sidebar() {
+ const location = useLocation();
+
+ return (
+
+ {report.id}
+ {report.reporterEmail}
+ {report.targetEmail}
+ {`${formattedDate} ${formattedTime}`}
+ {reasonList[report.reasonType]}
+
+
+ {modalOpen && + 마음이 맞닿는 온도 + 36.5 +
+현재 로그인 계정
+{'admin123@test.com'}
++
사이트 관리
+ {ADMIN_MENU_LIST.map((menu) => ( +
+
+
+
+ ))}
+
+ {menu.subMenu &&
+ menu.subMenu.map((subMenu) => (
+
+ {subMenu.title}
+
+ ))}
+
+
+
+ {children}
+
+
+ );
+}
diff --git a/src/pages/Admin/components/WrapperTitle.tsx b/src/pages/Admin/components/WrapperTitle.tsx
new file mode 100644
index 0000000..22b076e
--- /dev/null
+++ b/src/pages/Admin/components/WrapperTitle.tsx
@@ -0,0 +1,13 @@
+export default function WrapperTitle({
+ title,
+ Icon,
+}: {
+ title: string;
+ Icon: React.FunctionComponent
+
+ );
+};
+
+export default GoToLetterBoard;
diff --git a/src/pages/Home/components/GoToLetterBox.tsx b/src/pages/Home/components/GoToLetterBox.tsx
new file mode 100644
index 0000000..ca8b3fe
--- /dev/null
+++ b/src/pages/Home/components/GoToLetterBox.tsx
@@ -0,0 +1,39 @@
+import { useState, useEffect } from 'react';
+import { Link } from 'react-router';
+
+import { getUnreadLettersCount } from '@/apis/unreadLetters';
+import goToLetterBoxNewLetters from '@/assets/images/go-to-letter-box-new-letters.png';
+import goToLetterBox from '@/assets/images/go-to-letter-box.png';
+
+const GoToLetterBox = () => {
+ const [arrivedCount, setArrivedCount] = useState
+ 
+
+
+ 게시판
+ +
+
+ );
+};
+
+export default GoToLetterBox;
diff --git a/src/pages/Home/components/GoToRandomLetter.tsx b/src/pages/Home/components/GoToRandomLetter.tsx
new file mode 100644
index 0000000..2154e7e
--- /dev/null
+++ b/src/pages/Home/components/GoToRandomLetter.tsx
@@ -0,0 +1,18 @@
+import { Link } from 'react-router';
+
+import goToRandomLetter from '@/assets/images/go-to-random-letter.png';
+
+const GoToRandomLetter = () => {
+ return (
+ <>
+
+ 
+
+
+ 내 편지함
+ +
+ 
+
+
+
+ );
+};
+
+export default GoToRandomLetter;
diff --git a/src/pages/Home/components/GoToWrite.tsx b/src/pages/Home/components/GoToWrite.tsx
new file mode 100644
index 0000000..9c4d589
--- /dev/null
+++ b/src/pages/Home/components/GoToWrite.tsx
@@ -0,0 +1,16 @@
+import { Link } from 'react-router';
+
+import goToWrite from '@/assets/images/postoffice-letter.png';
+
+const GoToWrite = () => {
+ return (
+ 고민편지 보러가기
+ +
+ 
+
+
+ );
+};
+
+export default GoToWrite;
diff --git a/src/pages/Home/components/HomeBackgroundLeft.tsx b/src/pages/Home/components/HomeBackgroundLeft.tsx
new file mode 100644
index 0000000..43b9f91
--- /dev/null
+++ b/src/pages/Home/components/HomeBackgroundLeft.tsx
@@ -0,0 +1,14 @@
+import homeLeftMountain from '@/assets/images/home-left-mountain.png';
+import BackgroundImageWrapper from '@/components/BackgroundImageWrapper';
+
+const HomeBackgroundLeft = () => {
+ return (
+ 속마음 나누기
+ +
+
+
+
+
+ );
+};
+
+export default HomeLeft;
diff --git a/src/pages/Home/components/HomeRight.tsx b/src/pages/Home/components/HomeRight.tsx
new file mode 100644
index 0000000..8182517
--- /dev/null
+++ b/src/pages/Home/components/HomeRight.tsx
@@ -0,0 +1,35 @@
+import { useEffect, useState } from 'react';
+
+import { getUnreadLettersCount } from '@/apis/unreadLetters';
+
+import FloatingLetters from './FloatingLetters';
+import GoToLetterBoard from './GoToLetterBoard';
+import GoToLetterBox from './GoToLetterBox';
+import UnreadLetterModal from './UnreadLetterModal';
+
+const HomeRight = () => {
+ const [arrivedCount, setArrivedCount] = useState
+ {arrivedCount !== 0 &&
+ );
+};
+
+export default HomeRight;
diff --git a/src/pages/Home/components/LetterActions.tsx b/src/pages/Home/components/LetterActions.tsx
new file mode 100644
index 0000000..a7259cd
--- /dev/null
+++ b/src/pages/Home/components/LetterActions.tsx
@@ -0,0 +1,55 @@
+import DriveFileRenameOutlineOutlinedIcon from '@mui/icons-material/DriveFileRenameOutlineOutlined';
+import SendOutlinedIcon from '@mui/icons-material/SendOutlined';
+import ShareOutlinedIcon from '@mui/icons-material/ShareOutlined';
+import { useState } from 'react';
+
+import ShowDraftModal from './ShowDraftModal';
+import ShowIncomingLettersModal from './ShowIncomingLettersModal';
+import ShowShareAccessModal from './ShowShareAccessModal';
+
+const LetterActions = () => {
+ const [activeModal, setActiveModal] = useState<
+ null | 'incomingLetters' | 'draft' | 'shareAccess'
+ >(null);
+
+ const arr: { title: 'incomingLetters' | 'draft' | 'shareAccess'; icon: React.ReactNode }[] = [
+ {
+ title: 'incomingLetters',
+ icon:
+
+ {activeModal === 'incomingLetters' && (
+
+ {arr.map((item, index) => (
+
+ ))}
+
+
+ 
+
+ );
+};
+
+export default RandomCheer;
diff --git a/src/pages/Home/components/ShowDraftModal.tsx b/src/pages/Home/components/ShowDraftModal.tsx
new file mode 100644
index 0000000..3cb9060
--- /dev/null
+++ b/src/pages/Home/components/ShowDraftModal.tsx
@@ -0,0 +1,68 @@
+import DeleteOutlineRoundedIcon from '@mui/icons-material/DeleteOutlineRounded';
+import React, { useEffect, useState } from 'react';
+// import { useNavigate } from 'react-router';
+
+import { DraftLetter, getDraftLetters } from '@/apis/draftLetters';
+import ModalBackgroundWrapper from '@/components/ModalBackgroundWrapper';
+import ModalOverlay from '@/components/ModalOverlay';
+
+interface ShowDraftModalProps {
+ children?: React.ReactNode;
+ onClose: () => void;
+}
+
+const ShowDraftModal = ({ onClose }: ShowDraftModalProps) => {
+ const [draftLetters, setDraftLetters] = useState setRandomCheer(getRandomCheer())}
+ >
+
+ {randomCheer}
+ +
+
+ + 임시저장된 편지가 있어요! +
+
+
+
+
+
+
+ 임시저장 편지
+로그아웃 시 임시 저장된 편지는 사라집니다
+
+ {draftLetters.map((draft) => (
+
+ handleNavigation(draft.letterId)}
+ >
+
+ ))}
+ {draft.title}
+
+
+
+
+ + 따숨 배달부가 따숨이의 답장을 배달 중이에요! +
+
+
+
+
+
+
+ 오고 있는 편지
+시간은 실제 시간을 기반으로 책정됩니다.
+
+ {data.map((letter) => (
+
+
+
+ ))}
+ {letter.title}
+{letter.remainingTime}
+
+
+ + 공유 요청이 왔어요! +
+
+
+
+
+
+
+ 게시판 공유 승인하기
++ 따숨님과 주고받은 추억을 게시판에 공유하고 싶으신 분이 있어요. 클릭해서 확인하고, + 허락 여부를 체크해주세요! +
+
+ {sharePosts?.content.map((post) => (
+
+ ))}
+
+ + {arrivedCount}통의 편지가 도착했어요! +
+ ); +}; + +export default UnreadLetterModal; diff --git a/src/pages/Home/constants/index.ts b/src/pages/Home/constants/index.ts new file mode 100644 index 0000000..a2e0fd8 --- /dev/null +++ b/src/pages/Home/constants/index.ts @@ -0,0 +1,45 @@ +export const RANDOM_CHEER_LIST: string[] = [ + '오늘도 화이팅!☀️', + '오늘도 수고 많았어요. ☕', + '괜찮아요, 다 잘 될 거예요. 💙', + '혼자가 아니에요. 🤗', + '잠시 쉬어가도 괜찮아요. 🍃', + '있는 그대로도 충분해요. 🫂', + '분명 나아질 거예요. 🌈', + '천천히 가도 돼요. 👣', + '지금도 충분히 잘하고 있어요. 💕', + '항상 응원하고 있어요! 😊', + '조금만 더 힘내봐요. 🌟', + '기대도 괜찮아요. 🎈', + '좋은 날이 올 거예요. ✨', + '너무 잘하고 있어요! 💪', + '따숨님의 노력은 언젠가 빛날 거예요. 🌟', + '하루하루 조금씩 나아지고 있어요. ⏳', + '매일 조금씩 성장하고 있어요. 🌱', + '세상은 따숨님을 기다리고 있어요. 🌍', + '힘들 땐 잠시 멈추어도 괜찮아요. ⏸️', + '오늘도 멋진 하루가 될 거예요. 🌅', + '모든 순간이 소중해요. 🌸', + '이 순간이 따숨님의 노력의 결과예요. 🎯', + '항상 자기 자신을 사랑해주세요. ❤️', + '모든 일은 시간이 해결해줄 거예요. ⏳', + '따숨님은 이미 충분히 잘하고 있어요. 🏅', + '끝까지 가면 꿈이 이루어져요. 🌠', + '오늘도 행복한 하루 되세요. 🌞', + '따숨님의 열정이 빛나고 있어요. 🔥', + '내일은 오늘보다 더 나을 거예요. 🌟', + '모든 것이 끝난 후 웃을 수 있을 거예요. 😁', + '자신감을 가지고 계속 나아가세요. 🚀', + '세상에서 가장 중요한 건 따숨님이에요. 💖', + '따숨님의 미소가 세상을 밝게 해요. 😄', + '한 걸음씩, 천천히 가도 괜찮아요. 👟', + '지금 그 길이 바로 올바른 길이에요. 🛣️', + '작은 변화가 큰 차이를 만들어낼 거예요. 🔄', + '오늘도 모든 것이 가능해요. 💫', + '따숨님의 열정이 승리로 이어질 거예요. 🏆', + '힘들 때일수록 더 강해지는 거예요. 💥', + '따숨님은 강하고 대단한 사람이에요! 💪', + '따숨님은 충분히 잘하고 있어요. 🥇', + '모든 것은 시간이 지나면 잘 될 거예요. ⏳', + '도전이 결국 성공으로 이어질 거예요! 🏅', +]; diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx index b2f0bf4..68f528f 100644 --- a/src/pages/Home/index.tsx +++ b/src/pages/Home/index.tsx @@ -1,5 +1,54 @@ +import { useEffect } from 'react'; +import { useNavigate } from 'react-router'; + +import HomeButton from '@/components/HomeButton'; +import NoticeRollingPaper from '@/components/NoticeRollingPaper'; +import useViewport from '@/hooks/useViewport'; +import useAuthStore from '@/stores/authStore'; + +import HomeBackgroundLeft from './components/HomeBackgroundLeft'; +import HomeBackgroundRightBottom from './components/HomeBackgroundRightBottom'; +import HomeBackgroundRightTop from './components/HomeBackgroundRightTop'; +import HomeHeader from './components/HomeHeader'; +import HomeLeft from './components/HomeLeft'; +import HomeRight from './components/HomeRight'; +import LetterActions from './components/LetterActions'; + const HomePage = () => { - returnHomePage
;
+ const isLoggedIn = useAuthStore.getState().isLoggedIn;
+ const navigate = useNavigate();
+
+ useViewport();
+ useEffect(() => {
+ if (!isLoggedIn) {
+ navigate('/login');
+ }
+ }, []);
+
+ return (
+
+
+ );
};
export default HomePage;
diff --git a/src/pages/Landing/constants/index.ts b/src/pages/Landing/constants/index.ts
new file mode 100644
index 0000000..da27eda
--- /dev/null
+++ b/src/pages/Landing/constants/index.ts
@@ -0,0 +1,25 @@
+export const STYLE_CLASS = [
+ {
+ imagePosition: 'left-[calc(50%-200px)]',
+ mask: 'bottom-26 left-[calc(50%+65px)]',
+ circle: 'h-41 w-41',
+ textPosition: '-top-20 left-[calc(50%-30px)] text-right',
+ description:
+ '따뜻한 편지 사례들을 모아 볼 수 있어요.\n응원이 필요한 사람들에게\n단체로 롤링페이퍼를 쓸 수도 있습니다.',
+ },
+ {
+ imagePosition: 'left-[calc(50%-200px)]',
+ mask: 'bottom-5 left-[calc(50%-75px)]',
+ circle: 'h-42 w-42',
+ textPosition: '-top-14 left-[calc(50%+40px)] text-left',
+ description: '주고받은 편지 내역을 확인해 보세요.\n보는 것 만으로도 마음이 따뜻해집니다.',
+ },
+ {
+ imagePosition: 'left-[calc(50%+130px)]',
+ mask: 'bottom-8 left-[calc(50%)]',
+ circle: 'h-65 w-65',
+ textPosition: '-top-14 left-1/2 text-center',
+ description:
+ '모르는 사람에게 고민을 털어 놓아 보세요.\n다른 사람에게도 위로, 응원, 축하를 보낼 수 있어요.',
+ },
+];
diff --git a/src/pages/Landing/index.tsx b/src/pages/Landing/index.tsx
new file mode 100644
index 0000000..b89bfda
--- /dev/null
+++ b/src/pages/Landing/index.tsx
@@ -0,0 +1,56 @@
+import { useState, useEffect } from 'react';
+import { Navigate, useNavigate } from 'react-router';
+import { twMerge } from 'tailwind-merge';
+
+import LandingImg from '@/assets/images/landing.png';
+import useAuthStore from '@/stores/authStore';
+
+import { STYLE_CLASS } from './constants';
+
+const Landing = () => {
+ const [step, setStep] = useState(0);
+ const isLoggedIn = useAuthStore((state) => state.isLoggedIn);
+ const navigate = useNavigate();
+
+ useEffect(() => {
+ if (isLoggedIn) navigate('/');
+ }, [isLoggedIn, navigate]);
+
+ if (step === 3) return
+
+
+
+
+
+
+
+
+
+ + {STYLE_CLASS[step].description} +
+ +
+
+ From.{from}
+{content}
+To.{to}
+LetterBoardPage
;
+ const navigate = useNavigate();
+ const { ref, inView } = useInView();
+
+ const fetchPostList = async (page: number = 1) => {
+ try {
+ const response = await getSharePostList(page);
+ if (!response) throw new Error('게시글 목록을 불러오는데 실패했습니다.');
+ console.log('page', response);
+ return response as SharePostResponse;
+ } catch (e) {
+ console.error(e);
+ }
+ };
+
+ const { data, isLoading, isError, fetchNextPage, hasNextPage, isFetchingNextPage } =
+ useInfiniteQuery({
+ queryKey: ['sharePostList'],
+ queryFn: ({ pageParam = 1 }) => fetchPostList(pageParam),
+ enabled: true,
+ initialPageParam: 1,
+ getNextPageParam: (res) => {
+ if (!res || res.currentPage >= res.totalPages) {
+ return undefined;
+ }
+ return res.currentPage + 1;
+ },
+ staleTime: 1000 * 60 * 5,
+ gcTime: 1000 * 60 * 10,
+ });
+
+ const postLists = data?.pages.flatMap((page) => page?.content) || [];
+
+ useEffect(() => {
+ if (!hasNextPage) return;
+ if (inView && !isFetchingNextPage) {
+ fetchNextPage();
+ }
+ }, [inView, hasNextPage, isFetchingNextPage, fetchNextPage]);
+
+ if (isError) {
+ navigate('/notFound');
+ }
+
+ return (
+ <>
+ + 따숨이에게 힘이 되었던 다양한 편지들을 모아두었어요 +
+ + {isLoading ? ( +loading
+ ) : ( +
+ {isShareLetterPreview ? (
+
+ ) : (
+
+
+
+
+
+ )}
+
+
+
+ {isWriter ? (
+ {likeCount}
+
+
+ To. {letter.receiverZipCode}
+{letter.content}
+From. {letter.writerZipCode}
+LetterBoardDetailPage
;
+import { useEffect, useState } from 'react';
+import { useLocation, useNavigate } from 'react-router';
+import { twMerge } from 'tailwind-merge';
+
+import {
+ getSharePostDetail,
+ postShareProposalApproval,
+ SharePost,
+ postSharePostLike,
+ getSharePostLikeCount,
+} from '@/apis/share';
+import BlurImg from '@/assets/images/landing-blur.png';
+import ReportModal from '@/components/ReportModal';
+
+import Header from './components/Header';
+import Letter from './components/Letter';
+
+interface ShareLetterPreviewProps {
+ confirmDisabled?: boolean;
+ children?: React.ReactNode;
+}
+
+const LetterBoardDetailPage = ({ confirmDisabled }: ShareLetterPreviewProps) => {
+ const [likeCount, setLikeCount] = useState(122);
+ const [isLike, setIsLike] = useState(false);
+ const isWriter = false;
+ const [activeReportModal, setActiveReportModal] = useState(false);
+
+ const handleToggleLike = () => {
+ setLikeCount((prev) => prev + (isLike ? -1 : 1));
+ setIsLike((prev) => !prev);
+ };
+
+ const location = useLocation();
+ const navigate = useNavigate();
+
+ const isShareLetterPreview = location.state?.isShareLetterPreview || false;
+ const [postDetail, setPostDetail] = useState
+ setActiveReportModal(true)}
+ isShareLetterPreview={isShareLetterPreview}
+ />
+
+
+ {postDetail?.letters.map((letter, index) => (
+
+
+ {isShareLetterPreview && (
+ <>
+ 
+
+
+
+
+
+
+ )}
+
+
+
+ );
};
export default LetterBoardDetailPage;
diff --git a/src/pages/LetterBox/components/LetterBoxItem.tsx b/src/pages/LetterBox/components/LetterBoxItem.tsx
new file mode 100644
index 0000000..f493ffb
--- /dev/null
+++ b/src/pages/LetterBox/components/LetterBoxItem.tsx
@@ -0,0 +1,68 @@
+import { useNavigate } from 'react-router';
+import { twMerge } from 'tailwind-merge';
+interface LetterBoxItemProps {
+ boxId: number;
+ zipCode: string;
+ letterCount: number;
+ isChecked?: boolean;
+ isClosed?: boolean;
+}
+
+const LetterBoxItem = ({
+ boxId,
+ zipCode,
+ letterCount,
+ isChecked = false,
+ isClosed = false,
+}: LetterBoxItemProps) => {
+ const navigate = useNavigate();
+ const handleClickItem = (id: number) => {
+ navigate(`${id}`, {
+ state: {
+ id,
+ zipCode,
+ isClosed,
+ },
+ });
+ };
+ return (
+ FROM. {postDetail?.zipCode}
++ {postDetail?.sharePostContent} +
+
+
+ + {zipCode} +
+ {isClosed ? ( + + ) : ( +
+
+ )}
+ {letterCount}통
+
+
+
+
+
+ LetterBoxPage
;
+ const {
+ data: letterBox = [],
+ isLoading,
+ isError,
+ } = useQuery({
+ queryKey: ['mailbox'],
+ queryFn: fetchMailLists,
+ staleTime: 1000 * 60 * 5,
+ gcTime: 1000 * 60 * 10,
+ });
+
+ const navigate = useNavigate();
+
+ if (isError) {
+ navigate('/NotFound');
+ }
+
+ return (
+
+
+
+
+ + 나와 연락한 사람들 {letterBox?.length} +
+
+ {isLoading ? (
+
+ 로딩중..
+ ) : letterBox.length > 0 ? ( + chunkBox( + letterBox.map((data: LetterBoxData, index) => ( +
+ {row}
+
+ ) : (
+
+ {row}
+ 
+ {row.length === 1 && (
+
+ )}
+
+ ),
+ )
+ ) : (
+ 아직 주고 받은 편지가 없어요
+ )} +
+
+ 
+
+
+
+
+
+
+
+
+ );
+};
+
+export default InformationTooltip;
diff --git a/src/pages/LetterBoxDetail/components/LetterPreview.tsx b/src/pages/LetterBoxDetail/components/LetterPreview.tsx
new file mode 100644
index 0000000..ac4f843
--- /dev/null
+++ b/src/pages/LetterBoxDetail/components/LetterPreview.tsx
@@ -0,0 +1,70 @@
+import { forwardRef } from 'react';
+import { useNavigate } from 'react-router';
+
+import LetterWrapper from '@/components/LetterWrapper';
+import formatDate from '@/utils/formatDate';
+
+interface LetterPreviewProps {
+ id: number;
+ date: string;
+ title: string;
+ isSend: boolean;
+ checked: boolean;
+ isShareMode?: boolean;
+ onToggle: () => void;
+ isClosed: boolean;
+ zipCode: string;
+}
+const LetterPreview = forwardRef나만 보기 아까운 편지, 함께 나눠요!
++
+ 주고받은 편지 중 감동적이거나 도움이 된 편지를 공유 게시판에 등록해 더 많은 사람들과 + 따뜻한 마음을 나눌 수 있어요. +
+
+
+ {formatDate(date)}
+ +{title}
+{formatDate(date)}
+{title}
+상대방 동의 후에 게시글이 업로드 됩니다.
+주고 받은 편지 {mailLists.length}
+
+ {!userInfo.isClosed && (
+
+ )}
+ {!isShareMode && !userInfo.isClosed && !isLoading &&
+ Loading
+ ) : (
+ mailLists.map((letter, index) => (
+
+
+
+ )}
+
+ );
+};
+
+export default LetterBoxDetailPage;
diff --git a/src/pages/LetterDetail/index.tsx b/src/pages/LetterDetail/index.tsx
index 98ef5b0..88a40a4 100644
--- a/src/pages/LetterDetail/index.tsx
+++ b/src/pages/LetterDetail/index.tsx
@@ -1,5 +1,178 @@
+import { useEffect, useRef, useState } from 'react';
+import { useNavigate, useParams } from 'react-router';
+import { twMerge } from 'tailwind-merge';
+
+import { deleteLetter, getLetter } from '@/apis/letterDetail';
+import {
+ CloudIcon,
+ DeleteIcon,
+ SirenOutlinedIcon,
+ SnowIcon,
+ ThermostatIcon,
+ WarmIcon,
+} from '@/assets/icons';
+import BackButton from '@/components/BackButton';
+import ConfirmModal from '@/components/ConfirmModal';
+import ReportModal from '@/components/ReportModal';
+import { FONT_TYPE_OBJ, PAPER_TYPE_OBJ } from '@/pages/Write/constants';
+
const LetterDetailPage = () => {
- return LetterDetailPage
;
+ const params = useParams();
+ const navigate = useNavigate();
+ // 상대방의 우편번호도 데이터에 포함되어야 할 거 같음!!!
+ const [letterDetail, setLetterDetail] = useState
+ {
+ setDeleteModalOpen(false);
+ }}
+ onConfirm={() => {
+ if (params.id) handleDeleteLetter(params.id);
+ navigate(-1);
+ }}
+ />
+ )}
+
+
+ );
};
export default LetterDetailPage;
diff --git a/src/pages/Login/components/Background.tsx b/src/pages/Login/components/Background.tsx
new file mode 100644
index 0000000..0c6caf0
--- /dev/null
+++ b/src/pages/Login/components/Background.tsx
@@ -0,0 +1,46 @@
+import { Link } from 'react-router';
+
+import FieldImg from '@/assets/images/home-left-mountain.png';
+import BlurImg from '@/assets/images/landing-blur.png';
+import EnvelopeImg from '@/assets/images/postoffice-letter.png';
+import PostofficeImg from '@/assets/images/postoffice.png';
+import BackgroundImageWrapper from '@/components/BackgroundImageWrapper';
+
+const Background = () => {
+ return (
+ <>
+
+
+
+
+
+
+ {degreeModalOpen && (
+
+
+ {DEGREES.map((degree, idx) => {
+ return (
+
+ );
+ })}
+
+ )}
+
+ TO. 따숨이
+ {letterDetail?.title}
+
+
+ FROM. {'12E12'}
+
+ {deleteModalOpen && (
+
+
+
+
+ 
+ 
+
+
+ 
+
+
+ + 36.5 설명 보기 +
+LoginPage
;
+ const isLoggedIn = useAuthStore((state) => state.isLoggedIn);
+ const navigate = useNavigate();
+
+ const handleLogin = (loginType: LoginType) => {
+ socialLogin(loginType);
+ };
+
+ useEffect(() => {
+ if (isLoggedIn) navigate('/');
+ }, [isLoggedIn]);
+
+ return (
+ <>
+ 마음이 맞닿는 온도
+36.5
+
+ 모르는 사람과 편지를 주고 받으며
+
+ 마음의 위안을 얻어보세요.
+
loading
+ ) : ( +MyPage
;
+ useEffect(() => {
+ fetchMyPageInfo();
+ }, []);
+
+ const { data, fetchMyPageInfo } = useMyPageStore();
+ const [isOpenModal, setIsOpenModal] = useState(false);
+ const logout = useAuthStore((state) => state.logout);
+
+ const getDescriptionByTemperature = (temp: number) => {
+ const range = TEMPERATURE_RANGE.find((range) => temp >= range.min && temp < range.max);
+ return range?.description;
+ };
+
+ const description = getDescriptionByTemperature(Number(data.temperature));
+
+ const handleLeave = async () => {
+ try {
+ const response = await deleteUserInfo();
+ if (!response) throw new Error('deletioning failed');
+ console.log(response);
+ } catch (error) {
+ console.error(error);
+ }
+ };
+
+ return (
+ <>
+ {isOpenModal && (
+
+ {data.zipCode.split('').map((code, index) => (
+
+ {code}
+
+ ))}
+
+ +
{description}
+{data.temperature}도
+ +
+
+
+
+
+ 활동
+ +내가 올린 게시물
+ +
+
+ 고객 센터
+ + 운영자에게 문의하기 + +
+
+ 계정
+
+
+
+ 로그인 정보
++ {data.social} + {data.email} +
+존재하지 않는 페이지
+존재한다는 건 정말 소중한 일이에요.
+누군가에게 발견될 수 있으니 말이죠.
+마치 36.5를 통해 연결된 따숨님들처럼요.
++
36.5 에 존재하는 다른 페이지들이 많아요!
+여러분을 기다리고 있는 다른 페이지들을 발견해주시겠어요?
+From.9황작물
+
+ {isRead && }
+
+ {message}
+
+
+ 경고 안내
++ 따사로운 서비스 이용을 위해, 부적절하다고 판단되는 편지는 반려하고 있어요. 서로를 + 존중하는 따뜻한 공간을 만들기 위해 협조 부탁드립니다. +
+경고 규칙
+
+ 1회 경고: 주의 안내
+
+ 2회 경고: 7일 동안 서비스 이용 제한
+
+ 3회 경고: 서비스 이용 불가능
+
NotificationsPage
;
+ const [isOpenWarningModal, setIsOpenWarningModal] = useState(false);
+
+ const handleClickItem = (type: string) => {
+ if (type === 'warning') {
+ setIsOpenWarningModal(true);
+ }
+ };
+
+ return (
+ <>
+ -
+ {DUMMY_NOTI.map((notification) => (
+
-
+
handleClickItem(notification.type)} + /> +
+ ))}
+
우편번호를 설정하고 있습니다.
+우편번호란?
+사용자님이 편지를 주고 받는 주소입니다.
+이제 편지를 보내러 가볼까요?
+편지를 눌러보세요!
+
+ 
+ {/* {openAnimation && (
+ 
+ )} */}
+ 
{
+ // if (e.animationName === 'envelopeSink') {
+ // const rect = sinkRef.current?.getBoundingClientRect();
+ // if (rect?.top) setSinkRefTop({ top: rect?.top });
+ // console.log('Animation ended. boundingRect top:', rect?.top);
+ // }
+ // }}
+ className={twMerge(
+ `z-0 mx-10 h-auto rounded`,
+ imgToBottom && !envelopeOut && 'animate-envelopeSink',
+ envelopeOut && 'animate-envelopeOut',
+ )}
+ style={{
+ top: `calc(${imgPos.top}px - 5rem)`,
+ position: 'absolute',
+ width: `${imgPos.width}px`,
+ left: '0px',
+ }}
+ />
+ {letterOutAnimation && (
+
+ )}
+
+ );
+ }
+}
diff --git a/src/pages/Onboarding/WelcomeLetter.tsx b/src/pages/Onboarding/WelcomeLetter.tsx
new file mode 100644
index 0000000..50b7e4e
--- /dev/null
+++ b/src/pages/Onboarding/WelcomeLetter.tsx
@@ -0,0 +1,38 @@
+import { useNavigate } from 'react-router';
+
+export default function index() {
+ // eslint-disable-next-line react-hooks/rules-of-hooks
+ const navigate = useNavigate();
+ return (
+ To.따숨이
+환영합니다! 우리 함께 마음을 나누어 보아요
+안녕하세요, 따숨이님!
++
요즘 어떤 말을 하고싶으신가요?
+36.5에서 따뜻한 마음의 편지를 나누어 보세요.
++
따뜻한 편지 문화를 위해 아래의 안내 사항을 숙지해주세요!
+1. 욕설, 비방, 성희롱은 금지입니다.
++ 2. 만약 위의 이유로 신고를 당할 경우 경고를 받게 되고, 세번의 경고를 받게 되면 서비스를 + 이용하실 수 없습니다. +
+3. 고민 편지에 대한 답장은 검수 후에 전달됩니다.
+From.9황작물
+
+
+ );
+};
+
+export default Spinner;
diff --git a/src/pages/Onboarding/constants/index.ts b/src/pages/Onboarding/constants/index.ts
new file mode 100644
index 0000000..345f5d1
--- /dev/null
+++ b/src/pages/Onboarding/constants/index.ts
@@ -0,0 +1,38 @@
+export const ELEMENTS = [
+ 1,
+ 2,
+ 3,
+ 4,
+ 5,
+ 6,
+ 7,
+ 8,
+ 9,
+ 0,
+ 'A',
+ 'B',
+ 'C',
+ 'D',
+ 'E',
+ 'F',
+ 'G',
+ 'H',
+ 'I',
+ 'J',
+ 'K',
+ 'L',
+ 'M',
+ 'N',
+ 'O',
+ 'P',
+ 'Q',
+ 'R',
+ 'S',
+ 'T',
+ 'U',
+ 'V',
+ 'W',
+ 'X',
+ 'Y',
+ 'Z',
+];
diff --git a/src/pages/Onboarding/index.tsx b/src/pages/Onboarding/index.tsx
index 5be8052..c5ab71c 100644
--- a/src/pages/Onboarding/index.tsx
+++ b/src/pages/Onboarding/index.tsx
@@ -1,5 +1,55 @@
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router';
+
+import useAuthStore from '@/stores/authStore';
+
+import SetZipCode from './SetZipCode';
+import UserInteraction from './UserInteraction';
+import WelcomeLetter from './WelcomeLetter';
+
const OnboardingPage = () => {
- return
+ {TARGET_ARR.map((item, index) => {
+ return (
+
+ + {item} +
+ ); + })} +OnboardingPage
;
+ const [isZipCodeSet, setIsZipCodeSet] = useState
+
+ );
+}
diff --git a/src/pages/RandomLetters/components/Matched.tsx b/src/pages/RandomLetters/components/Matched.tsx
new file mode 100644
index 0000000..0bc3857
--- /dev/null
+++ b/src/pages/RandomLetters/components/Matched.tsx
@@ -0,0 +1,120 @@
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router';
+
+import { deleteRandomLetterMatching } from '@/apis/randomLetter';
+import ResultLetter from '@/components/ResultLetter';
+import { formatNumber } from '@/utils/formatNumber';
+import { timeFormatter } from '@/utils/timeFormatter';
+
+export default function Matched({
+ matchedLetter,
+ setIsMatched,
+ setIsCoolTime,
+ setOpenSelectedDetailModal,
+}: {
+ matchedLetter: MatchedLetter;
+ setIsMatched: React.Dispatch
+
+ 랜덤 편지 활성화 까지
++ {formatNumber(formatedEndTime.hours)} : {formatNumber(formatedEndTime.minutes)} :{' '} + {formatNumber(formatedEndTime.seconds)} +
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/pages/RandomLetters/components/MatchedLetter.tsx b/src/pages/RandomLetters/components/MatchedLetter.tsx
new file mode 100644
index 0000000..1e05d46
--- /dev/null
+++ b/src/pages/RandomLetters/components/MatchedLetter.tsx
@@ -0,0 +1,57 @@
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router';
+import { twMerge } from 'tailwind-merge';
+
+import BackButton from '@/components/BackButton';
+import ReportModal from '@/components/ReportModal';
+import { FONT_TYPE_OBJ, PAPER_TYPE_OBJ } from '@/pages/Write/constants';
+
+const MatchedLetter = ({ matchedLetter }: { matchedLetter: MatchedLetter }) => {
+ const navigate = useNavigate();
+
+ const [reportModalOpen, setReportModalOpen] = useState
+
+ 답장까지 남은 시간
++ {formatNumber(FormatedEndTimes.hours)} : {formatNumber(FormatedEndTimes.minutes)} :{' '} + {formatNumber(FormatedEndTimes.seconds)} +
+ {
+ setOpenSelectedDetailModal(true);
+ }}
+ >
+
+
+
+
+
+ );
+};
+
+export default MatchedLetter;
diff --git a/src/pages/RandomLetters/components/MatchingSelect.tsx b/src/pages/RandomLetters/components/MatchingSelect.tsx
new file mode 100644
index 0000000..78f2614
--- /dev/null
+++ b/src/pages/RandomLetters/components/MatchingSelect.tsx
@@ -0,0 +1,98 @@
+import { useEffect, useState } from 'react';
+import { EffectCards } from 'swiper/modules';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { twMerge } from 'tailwind-merge';
+
+import 'swiper/swiper-bundle.css';
+
+import { getRandomLetters } from '@/apis/randomLetter';
+import { RestartIcon } from '@/assets/icons';
+import ResultLetter from '@/components/ResultLetter';
+
+import { CATEGORY_LIST } from '../constants';
+
+export default function MatchingSelect({
+ setOpenModal,
+ setSelectedLetter,
+}: {
+ setOpenModal: React.Dispatch
+
+
+ TO. 따숨이
+ {matchedLetter?.title}
+
+
+ FROM. {matchedLetter.zipCode}
+
+
+
+
+
+
+
+ {randomLetters.map((list, idx) => {
+ return (
+
+
+ );
+ })}
+
+
+ {
+ setOpenModal(true);
+ setSelectedLetter(list);
+ }}
+ >
+
+
+ {CATEGORY_LIST.map((category, idx) => {
+ return (
+
+ );
+ })}
+
+
+ );
+}
diff --git a/src/pages/RandomLetters/components/MatchingSelectModal.tsx b/src/pages/RandomLetters/components/MatchingSelectModal.tsx
new file mode 100644
index 0000000..c7d22c5
--- /dev/null
+++ b/src/pages/RandomLetters/components/MatchingSelectModal.tsx
@@ -0,0 +1,67 @@
+// import { useNavigate } from 'react-router';
+
+import { postRandomLettersApprove } from '@/apis/randomLetter';
+import ModalOverlay from '@/components/ModalOverlay';
+import ResultLetter from '@/components/ResultLetter';
+
+function MatchingSelectModal({
+ setOpenModal,
+ selectedLetter,
+ setMatchedLetter,
+ setOpenSelectedDetailModal,
+}: {
+ setOpenModal: React.Dispatch
+
+
+ 이 편지에 답장 하시겠어요?
+ 수락한 편지는 5분이 지나면 취소할 수 없습니다.
+
+
+
+
+
+
+
+ RandomLettersPage
;
+ const [openSelectModal, setOpenSelectModal] = useState
+
+ {isCoolTime
+ ? '조금 뒤에 편지 매칭이 가능해요!'
+ : !isMatched
+ ? '답장하고 싶은 편지를 선택해주세요!'
+ : '이미 답장 중인 편지가 있어요!'}
+
+ {isCoolTime ? (
+
+
+
+ {comment.content}
+From. {comment.zipCode}
+
+
+ {comment.content}
+From. {comment.zipCode}
+{error}
+From. {DUMMY_USER_ZIP_CODE}
+RollingPaperPage
;
+ const id = useParams().id ?? '';
+ const [activeComment, setActiveComment] = useState등록된 편지 {DUMMY_MESSAGE_COUNT}
+
+
+ {send || isReply ? '편지 작성이 완료 되었어요!' : '어떤 답장을 받고 싶나요?'}
+
+
+ {/* 카테고리 선택 컴포넌트 */}
+ {!send && !isReply &&
+
+ );
+}
diff --git a/src/pages/Write/LetterEditor.tsx b/src/pages/Write/LetterEditor.tsx
new file mode 100644
index 0000000..4e91d38
--- /dev/null
+++ b/src/pages/Write/LetterEditor.tsx
@@ -0,0 +1,135 @@
+import { useEffect, useState } from 'react';
+import { useLocation } from 'react-router';
+import { twMerge } from 'tailwind-merge';
+
+import { postFirstReply, postLetter } from '@/apis/write';
+import BackButton from '@/components/BackButton';
+import WritePageButton from '@/pages/Write/components/WritePageButton';
+import { FONT_TYPE_OBJ } from '@/pages/Write/constants';
+import OptionSlide from '@/pages/Write/OptionSlide';
+import useWrite from '@/stores/writeStore';
+import { removeProperty } from '@/utils/removeProperty';
+
+export default function LetterEditor({
+ setStep,
+ prevLetter,
+ setSend,
+ searchParams,
+ isReply,
+}: {
+ setStep: React.Dispatch
+ {!send && !isReply && (
+ {
+ setStep('edit');
+ }}
+ bgColor="white"
+ />
+ )}
+
+
+
+
+ )}
+
+ {send && !isReply && (
+
+ 작성하신 편지는
+
+ {'00'}시간
+ {'00'}분
+ {'00'}초 후에 도착합니다.
+
+
+
+
+ )}
+
+ {send || isReply ? (
+
+ 홈으로 돌아가기
+
+ ) : (
+
+ )}
+
+
+ );
+}
diff --git a/src/pages/Write/OptionSlide.tsx b/src/pages/Write/OptionSlide.tsx
new file mode 100644
index 0000000..cc9a05b
--- /dev/null
+++ b/src/pages/Write/OptionSlide.tsx
@@ -0,0 +1,123 @@
+import { useEffect, useRef, useState } from 'react';
+
+import FontOption from './components/FontOption';
+import PreviousLetterOption from './components/PreviousLetterOption';
+import ThemeOption from './components/ThemeOption';
+import WritePageButton from './components/WritePageButton';
+
+function OptionSlide({ prevLetter }: { prevLetter: PrevLetter[] }) {
+ const [target, setTarget] = useState
+ {
+ if (letterRequest.title.trim() !== '' && letterRequest.content.trim() !== '') {
+ if (randomMatched) {
+ const firstReplyRequest = removeProperty(letterRequest, ['matchingId']);
+ console.log(firstReplyRequest);
+ handlePostFirstReply(firstReplyRequest);
+ } else {
+ handlePostReply(letterRequest);
+ }
+ } else {
+ alert('편지 제목, 내용이 작성되었는지 확인해주세요');
+ }
+ }}
+ />
+ ) : (
+ {
+ if (letterRequest.title.trim() !== '' && letterRequest.content.trim() !== '') {
+ setStep('category');
+ } else {
+ alert('편지 제목, 내용이 작성되었는지 확인해주세요');
+ }
+ }}
+ />
+ )}
+
+
+
+ TO. 따숨이에게
+ {
+ setLetterRequest({ title: e.target.value });
+ }}
+ value={letterRequest.title}
+ />
+
+
+
+