design: 반응형 조정

Author: tifsy

src/pages/Home/components/FloatingLetters.tsx

@@ -16,7 +16,7 @@ const FloatingLetters = () => {
     lettersRef.current.forEach((letter, index) => {
       gsap.to(letter, {
         // x: Math.random() * 50 - 40,
-        y: Math.random() * 20 - 40 + 'vh', // 위아래 이동
+        y: Math.random() * 20 - 30 + 'vh', // 위아래 이동
         rotation: Math.random() * 50 - 25, // 회전
         duration: Math.random() * 3 + 2, // 지속 시간
         repeat: -1, // 무한 반복
@@ -35,7 +35,7 @@ const FloatingLetters = () => {
           ref={(el) => {
             if (el) lettersRef.current[index] = el;
           }}
-          className="absolute w-20 opacity-90"
+          className="absolute w-20 opacity-90 md:w-24"
           style={{
             left: `${index * 30 + 30}px`, // 편지지 간격
             top: '60vh',

src/pages/Home/components/GoToLetterBoard.tsx

@@ -4,11 +4,15 @@ import goToLetterBoard from '@/assets/images/go-to-letter-board.png';
 
 const GoToLetterBoard = () => {
   return (
-    <div className="absolute bottom-48 left-[calc(var(--vh)*33)] z-9 flex w-full">
+    <div className="absolute right-[-56%] bottom-[28%] z-9 flex w-full md:right-[-42%]">
       <div className="text-left">
         <p className="text-gray-60 body-r mb-1 ml-2">게시판</p>
         <Link to="/board/letter">
-          <img src={goToLetterBoard} alt="go to letter board" className="w-[177px]" />
+          <img
+            src={goToLetterBoard}
+            alt="go to letter board"
+            className="w-[160px] sm:w-[200px] md:w-[240px]"
+          />
         </Link>
       </div>
     </div>

src/pages/Home/components/GoToLetterBox.tsx

@@ -28,14 +28,14 @@ const GoToLetterBox = () => {
   }, []);
 
   return (
-    <div className="absolute bottom-15 left-5 z-9 flex">
+    <div className="absolute bottom-[11%] left-5 z-9 flex">
       <div className="text-left">
         <p className="text-gray-60 body-r mb-1 ml-2">내 편지함</p>
         <Link to="/letter/box">
           <img
             src={arrivedCount ? goToLetterBoxNewLetters : goToLetterBox}
             alt="go to letter box"
-            className="w-[206.5px]"
+            className="w-[190px] sm:w-[210px] md:w-[240px]"
           />
         </Link>
       </div>

src/pages/Home/components/HomeBackgroundRightBottom.tsx

@@ -5,7 +5,7 @@ const HomeBackgroundRightBottom = () => {
   return (
     <BackgroundImageWrapper
       as="div"
-      className="absolute bottom-0 z-[10] h-[calc(var(--vh)*20)] w-full min-w-[600px] -translate-x-1/4 overflow-hidden"
+      className="absolute bottom-0 z-10 h-[20%] w-full min-w-[600px] -translate-x-1/4 overflow-hidden md:w-[920px]"
       imageUrl={homeRightMountainBottom}
     />
   );

src/pages/Home/components/HomeBackgroundRightTop.tsx

@@ -4,7 +4,7 @@ const HomeBackgroundRightTop = () => {
   return (
     <BackgroundImageWrapper
       as="div"
-      className="absolute bottom-0 z-8 h-[calc(var(--vh)*32)] w-full min-w-[760px] -translate-x-1/4 overflow-hidden"
+      className="absolute bottom-0 z-8 h-[35%] w-full min-w-[760px] -translate-x-1/4 overflow-hidden md:w-[1200px]"
       imageUrl={homeRightMountainTop}
     />
   );