refactor : 메인페이지 물병 컴포넌트

src/components/Common/WaveContainer/WaveContainer.tsx

@@ -2,7 +2,7 @@ export const WaveContainer = () => {
     return (
         <div className="z-0">
             <img src="/무인도.svg" className="absolute -top-10 right-20" />
-            <div className="bg-[url('/물결.svg')] absolute h-full w-full overflow-auto bg-cover bg-center custom-mask" />
+            <div className="animate-shake animate-infinite animate-duration-[5000ms] animate-ease-linear bg-[url('/물결.svg')] absolute h-full w-full overflow-auto bg-cover bg-center custom-mask" />
         </div>
     );
 };

src/components/HomePage/HomeBottle.tsx

@@ -1,9 +1,47 @@
 import React from 'react';
+import bottleImg from '../../../public/라벨택_유리병.svg';
+import { Label } from '../Common/BottleLetter/Label/Label';
+import { useNavigate } from 'react-router-dom';
+
+interface HomeBottleProps {
+    letterType: 'LETTER' | 'REPLY_LETTER';
+    labelUrl: string;
+    letterId: number;
+}
+
+export const HomeBottle = ({
+    letterType,
+    labelUrl,
+    letterId
+}: HomeBottleProps) => {
+    const navigate = useNavigate();
+
+    const handleClickBottle = () => {
+        navigate(`letter/keyword/${letterType}/received/${letterId}`);
+    };
 
-export const HomeBottle = () => {
     return (
-        <div className="flex justify-center h-full">
-            <img src="/홈_유리병.svg" className="object-contain" />
+        <div className="absolute top-[115px] left-[90px] -rotate-[45deg]">
+            {/* 믈결 애니메이션 */}
+            <div className="absolute h-[300px] w-[300px] rounded-[135px] animate-spin animate-duration-[14000ms] bg-transparent overflow-hidden" />
+            <div className="absolute h-[300px] w-[300px] rounded-[135px] animate-spin animate-duration-[12000ms] bg-transparent overflow-hidden" />
+            <div className="absolute h-[300px] w-[300px] rounded-[135px] animate-spin animate-duration-[10000ms] bg-transparent overflow-hidden">
+                <div className="relative top-[7px] h-[300px] w-[300px] animate-spin animate-duration-[10000ms] animate-reverse">
+                    <div className="rotate-[40deg] flex justify-center h-[300px]">
+                        <img
+                            src={bottleImg}
+                            className="object-contain relative top-[35px]"
+                            onClick={handleClickBottle}
+                        />
+                        <div
+                            className="h-[35%] absolute top-[105px] left-[190px] rotate-[20deg]"
+                            onClick={handleClickBottle}
+                        >
+                            <Label imgSrc={labelUrl} />
+                        </div>
+                    </div>
+                </div>
+            </div>
         </div>
     );
 };