design: 홈 페이지 퍼블리싱

Author: tifsy

package.json

@@ -4,19 +4,25 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host 0.0.0.0",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
     "preview": "vite preview"
   },
   "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
     "@mui/icons-material": "^6.4.4",
+    "@mui/material": "^6.4.4",
     "@tailwindcss/vite": "^4.0.6",
     "@tanstack/react-query": "^5.66.0",
     "axios": "^1.7.9",
+    "gsap": "^3.12.7",
+    "pnpm": "^10.4.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router": "^7.1.5",
+    "react-router-dom": "^7.1.5",
     "tailwind-merge": "^3.0.1",
     "tailwindcss": "^4.0.6",
     "zustand": "^5.0.3"

pnpm-lock.yaml

@@ -0,0 +1,15 @@
+import HomeOutlinedIcon from '@mui/icons-material/HomeOutlined';
+import { Link } from 'react-router';
+
+export default function HomeButton() {
+  return (
+    <>
+      <Link
+        to="/"
+        className="bg-primary-3 absolute right-5 bottom-[30px] z-50 flex h-13 w-13 items-center justify-center rounded-full text-white transition-all duration-200 hover:scale-105 active:scale-90"
+      >
+        <HomeOutlinedIcon />
+      </Link>
+    </>
+  );
+}

src/components/HomeButton.tsx

@@ -1,10 +1,14 @@
 interface ModalOverlayProps {
   children: React.ReactElement;
+  onClick?: () => void;
 }
 
-const ModalOverlay = ({ children }: ModalOverlayProps) => {
+const ModalOverlay = ({ children, onClick }: ModalOverlayProps) => {
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60">
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/60"
+      onClick={onClick}
+    >
       {children}
     </div>
   );

src/components/ModalOverlay.tsx

@@ -0,0 +1,41 @@
+import { useEffect, useRef } from 'react';
+import gsap from 'gsap';
+const FloatingLetters = () => {
+  const lettersRef = useRef<HTMLImageElement[]>([]);
+  useEffect(() => {
+    if (!lettersRef.current) return;
+
+    lettersRef.current.forEach((letter, index) => {
+      gsap.to(letter, {
+        // x: Math.random() * 50 - 40,
+        y: Math.random() * 20 - 25 + 'vh', // 위아래 이동
+        rotation: Math.random() * 50 - 25, // 회전
+        duration: Math.random() * 3 + 2, // 지속 시간
+        repeat: -1, // 무한 반복
+        yoyo: true, // 왕복
+        ease: 'power1.inOut',
+        delay: index * 1, // 편지마다 시차
+      });
+    });
+  }, []);
+  return (
+    <>
+      {Array.from({ length: 4 }).map((_, index) => (
+        <img
+          key={index}
+          src={`/src/assets/letter_${index + 1}.png`}
+          ref={(el) => {
+            if (el) lettersRef.current[index] = el;
+          }}
+          className="absolute w-20 opacity-90"
+          style={{
+            left: `${index * 30 + 30}px`, // 편지지 간격
+            top: '60vh',
+          }}
+        />
+      ))}
+    </>
+  );
+};
+
+export default FloatingLetters;

src/pages/Home/components/FloatingLetters.tsx

@@ -0,0 +1,20 @@
+import { Link } from 'react-router';
+
+const GoToLetterBoard = () => {
+  return (
+    <div className="absolute right-[-30px] bottom-48 z-20 flex w-fit">
+      <div className="text-left">
+        <p className="text-gray-60 body-r mb-1 ml-2">게시판</p>
+        <Link to="/letter/board">
+          <img
+            src="/src/assets/go_to_letter_board.png"
+            alt="go to letter board"
+            className="w-[177px]"
+          />
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export default GoToLetterBoard;

src/pages/Home/components/GoToLetterBoard.tsx

@@ -0,0 +1,26 @@
+import { Link } from 'react-router';
+
+const GoToLetterBox = () => {
+  //TODO : hasNewLetters 전역으로 상태 관리하기
+  let hasNewLetters = true;
+  return (
+    <div className="absolute bottom-10 left-5 z-30 flex w-fit">
+      <div className="text-left">
+        <p className="text-gray-60 body-r mb-1 ml-2">내 편지함</p>
+        <Link to="/letter/box">
+          <img
+            src={
+              hasNewLetters
+                ? 'src/assets/go_to_letter_box_new_letters.png'
+                : '/src/assets/go_to_letter_box.png'
+            }
+            alt="go to letter box"
+            className="w-[206.5px]"
+          />
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export default GoToLetterBox;

src/pages/Home/components/GoToLetterBox.tsx

@@ -0,0 +1,14 @@
+import { Link } from 'react-router';
+
+const GoToRandomLetter = () => {
+  return (
+    <>
+      <p className="text-gray-60 body-r mb-1 rotate-[-5.277deg] pl-5">고민편지 보러가기</p>
+      <Link to={'/letter/random'}>
+        <img src="/src/assets/go_to_random_letter.png" alt="go to random letter" />
+      </Link>
+    </>
+  );
+};
+
+export default GoToRandomLetter;

src/pages/Home/components/GoToRandomLetter.tsx

@@ -0,0 +1,14 @@
+import { Link } from 'react-router';
+
+const GoToWrite = () => {
+  return (
+    <div className="h-fit pl-[87px]">
+      <p className="text-gray-60 body-r mb-1 rotate-[-5.277deg]">속마음 나누기</p>
+      <Link to={'/letter/write'}>
+        <img src="/src/assets/go_to_write.png" alt="go to wrte" />
+      </Link>
+    </div>
+  );
+};
+
+export default GoToWrite;

src/pages/Home/components/GoToWrite.tsx

@@ -0,0 +1,25 @@
+import RandomCheer from './RandomCheer';
+import GoToWrite from './GoToWrite';
+import GoToRandomLetter from './GoToRandomLetter';
+
+const HomeLeft = () => {
+  return (
+    <div className="flex w-full flex-shrink-0 grow snap-start flex-col justify-between pt-64">
+      <RandomCheer />
+      <GoToWrite />
+
+      <div className="relative mt-24 flex h-fit w-full flex-col justify-center">
+        <div className="absolute top-[-94px] z-20 w-full">
+          <GoToRandomLetter />
+        </div>
+        <img
+          src="/src/assets/home_left_mountain.png"
+          alt="home left mountain"
+          className="z-10 w-full max-w-[600px]"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default HomeLeft;