+
+ );
+};
+
+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..691ed55
--- /dev/null
+++ b/src/pages/Home/components/GoToLetterBox.tsx
@@ -0,0 +1,24 @@
+import { Link } from 'react-router';
+import goToLetterBoxNewLetters from '@/assets/images/go-to-letter-box-new-letters.png';
+import goToLetterBox from '@/assets/images/go-to-letter-box.png';
+
+const GoToLetterBox = () => {
+ //TODO : hasNewLetters 전역으로 상태 관리하기
+ let hasNewLetters = true;
+ return (
+
+ 
+
+
+ 게시판
+ +
+
+ );
+};
+
+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..51db971
--- /dev/null
+++ b/src/pages/Home/components/GoToRandomLetter.tsx
@@ -0,0 +1,17 @@
+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..302cba7
--- /dev/null
+++ b/src/pages/Home/components/GoToWrite.tsx
@@ -0,0 +1,15 @@
+import { Link } from 'react-router';
+import goToWrite from '@/assets/images/go-to-write.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..b8855e2
--- /dev/null
+++ b/src/pages/Home/components/HomeBackgroundLeft.tsx
@@ -0,0 +1,14 @@
+import BackgroundImageWrapper from '@/components/BackgroundImageWrapper';
+import homeLeftMountain from '@/assets/images/home-left-mountain.png';
+
+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..226bf4e
--- /dev/null
+++ b/src/pages/Home/components/HomeRight.tsx
@@ -0,0 +1,20 @@
+import FloatingLetters from './FloatingLetters';
+import GoToLetterBoard from './GoToLetterBoard';
+import GoToLetterBox from './GoToLetterBox';
+import NewLetterModal from './NewLetterModal';
+
+const HomeRight = () => {
+ //TODO : hasNewLetters 전역으로 상태 관리할지
+ let hasNewLetters = true;
+
+ return (
+
+ {hasNewLetters &&
+ );
+};
+
+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..0fa98ee
--- /dev/null
+++ b/src/pages/Home/components/LetterActions.tsx
@@ -0,0 +1,52 @@
+import { useState } from 'react';
+import SendOutlinedIcon from '@mui/icons-material/SendOutlined';
+import DriveFileRenameOutlineOutlinedIcon from '@mui/icons-material/DriveFileRenameOutlineOutlined';
+import ShareOutlinedIcon from '@mui/icons-material/ShareOutlined';
+import ShowIncomingLettersModal from './ShowIncomingLettersModal';
+import ShowDraftModal from './ShowDraftModal';
+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:
+ setActiveModal(null)} />
+ )}
+ {activeModal === 'draft' && setActiveModal(null)} />}
+ {activeModal === 'shareAccess' && (
+ setActiveModal(null)} />
+ )}
+
+ );
+};
+
+export default LetterActions;
diff --git a/src/pages/Home/components/LetterPreview.tsx b/src/pages/Home/components/LetterPreview.tsx
new file mode 100644
index 0000000..37aaf23
--- /dev/null
+++ b/src/pages/Home/components/LetterPreview.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+const LetterPreview = () => {
+ return
+ {arr.map((item, index) => (
+
+ ))}
+
+ {activeModal === 'incomingLetters' && (
+ LetterPreview
;
+};
+
+export default LetterPreview;
diff --git a/src/pages/Home/components/NewLetterModal.tsx b/src/pages/Home/components/NewLetterModal.tsx
new file mode 100644
index 0000000..40c1c41
--- /dev/null
+++ b/src/pages/Home/components/NewLetterModal.tsx
@@ -0,0 +1,13 @@
+import { useState } from 'react';
+
+const NewLetterModal = () => {
+ const [newLetterCount, setNewLetterCount] = useState(0);
+
+ return (
+ + {newLetterCount}통의 편지가 도착했어요! +
+ ); +}; + +export default NewLetterModal; diff --git a/src/pages/Home/components/RandomCheer.tsx b/src/pages/Home/components/RandomCheer.tsx new file mode 100644 index 0000000..758ff82 --- /dev/null +++ b/src/pages/Home/components/RandomCheer.tsx @@ -0,0 +1,31 @@ +import { useState } from 'react'; +import { RANDOM_CHEER_LIST } from '../constants'; +import randomCheerBird from '@/assets/images/random-cheer-bird.png'; + +const RandomCheer = () => { + const getRandomCheer = (): string => { + const randomIndex = Math.floor(Math.random() * RANDOM_CHEER_LIST.length); + return RANDOM_CHEER_LIST[randomIndex]; + }; + + const [randomCheer, setRandomCheer] = useState(getRandomCheer()); + + return ( +
+ 
+
+ );
+};
+
+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..8028cfa
--- /dev/null
+++ b/src/pages/Home/components/ShowDraftModal.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import ModalBg from '@/assets/images/modal-yellow.png';
+import ModalOverlay from '@/components/ModalOverlay';
+
+import DeleteOutlineRoundedIcon from '@mui/icons-material/DeleteOutlineRounded';
+
+interface ShowDraftModalProps {
+ children?: React.ReactNode;
+ onClose: () => void;
+}
+
+const DUMMY_DRAFT = [
+ { id: 1, title: '취업 때문에 고민이 많아요!!' },
+ { id: 2, title: '배고파서 죽을 거 같아요 😭' },
+ { id: 3, title: '개발하니까 밖에 나갈 일이 없어서 너무 심심하고 피곤해요' },
+ { id: 4, title: '마라샹궈 먹고 싶어요' },
+];
+
+const ShowDraftModal = ({ onClose }: ShowDraftModalProps) => {
+ return (
+ setRandomCheer(getRandomCheer())}
+ >
+
+ {randomCheer}
+ +
+
+ + 임시저장된 편지가 있어요! +
+
+
+ 
+
+
+
+
+ 임시저장 편지
+로그아웃 시 임시 저장된 편지는 사라집니다
+
+ {DUMMY_DRAFT.map((draft) => (
+
+
+
+ ))}
+ {draft.title}
+
+
+
+
+ + 따숨 배달부가 따숨이의 답장을 배달 중이에요! +
+
+
+
+
+
+
+
+ 오고 있는 편지
+시간은 실제 시간을 기반으로 책정됩니다.
+
+ {DUMMY_INCOMING_LETTERS.map((letter) => (
+
+
+
+ ))}
+ {letter.title}
+{letter.time}
+
+
+ + 공유 요청이 왔어요! +
+
+
+
+
+
+
+
+ 게시판 공유 승인하기
++ 따숨님과 주고받은 추억을 게시판에 공유하고 싶으신 분이 있어요. 클릭해서 확인하고, + 허락 여부를 체크해주세요! +
+
+ {DUMMY_SHARE_ACCESS.map((access) => (
+
+
+
+ ))}
+ {access.zip_code}님의 공유 요청
+
+
+ );
+};
+
+export default SpecialLetterBanner;
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..e66481f 100644
--- a/src/pages/Home/index.tsx
+++ b/src/pages/Home/index.tsx
@@ -1,5 +1,38 @@
+import HomeLeft from './components/HomeLeft';
+import HomeRight from './components/HomeRight';
+import HomeHeader from './components/HomeHeader';
+import SpecialLetterBanner from './components/SpecialLetterBanner';
+import LetterActions from './components/LetterActions';
+import HomeButton from '@/components/HomeButton';
+import HomeBackgroundLeft from './components/HomeBackgroundLeft';
+import HomeBackgroundRightBottom from './components/HomeBackgroundRightBottom';
+import HomeBackgroundRightTop from './components/HomeBackgroundRightTop';
+import useViewport from '@/hooks/useViewport';
+
const HomePage = () => {
- return
+
+
+
+
+
+ {DUMMY_SPECIAL_LETTER_BANNER}
+
+
+ HomePage
;
+ useViewport();
+ return (
+
+
+ );
};
export default HomePage;
diff --git a/src/styles/animations.css b/src/styles/animations.css
index 218f2ee..a3e366a 100644
--- a/src/styles/animations.css
+++ b/src/styles/animations.css
@@ -54,6 +54,19 @@
}
}
+ /* SpecialLetterBanner 애니메이션 */
+ --animate-marquee: marquee 10s linear infinite;
+
+ @keyframes marquee {
+ 0% {
+ transform: translateX(10%);
+ }
+
+ 100% {
+ transform: translateX(-100%);
+ }
+ }
+
/* onBoarding */
/* comment floating */
@keyframes float {
+
+
+
+
+
+
+
+