refactor : 메인페이지 물병 컴포넌트 리팩토링 및 애니메이션 추가

prgrms-web-devcourse-final-project · Jan 12, 2025 · 7eafc26 · 7eafc26
1 parent c9c1290
commit 7eafc26
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 114 deletions.
diff --git a/public/홈_유리병.svg b/public/홈_유리병.svg
diff --git a/src/components/Common/WaveContainer/WaveContainer.tsx b/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>
     );
 };
diff --git a/src/components/HomePage/HomeBottle.tsx b/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>
     );
 };
diff --git a/src/components/HomePage/HomeBottleLetter.tsx b/src/components/HomePage/HomeBottleLetter.tsx
diff --git a/src/components/HomePage/LetterContainer/LetterContainer.tsx b/src/components/HomePage/LetterContainer/LetterContainer.tsx
@@ -1,8 +1,8 @@
 import { Swiper, SwiperSlide } from 'swiper/react';
-import { EffectCards } from 'swiper/modules';
+// import { EffectCards } from 'swiper/modules';
 import 'swiper/swiper-bundle.css';
-import { HomeBottleLetter } from '../HomeBottleLetter';
 import { WaveContainer } from '@/components/Common/WaveContainer/WaveContainer';
+import { HomeBottle } from '../HomeBottle';
 
 type RecommendLetter = {
     letterId: number;
@@ -25,15 +25,12 @@ type LetterContainerProps = {
 export const LetterContainer = ({ letters }: LetterContainerProps) => {
     const hasLetters = (
         <div className="relative -m-6 pb-10">
-            <WaveContainer />
+            <div className="">
+                <WaveContainer />
+            </div>
 
             <div className="overflow-hidden mx-[-20px] mt-[50px]">
-                <Swiper
-                    effect={'cards'}
-                    grabCursor={true}
-                    modules={[EffectCards]}
-                    className="object-cover mySwiper"
-                >
+                <Swiper effect={'cards'} grabCursor={true} className="mySwiper">
                     {letters.map((letter, i) => {
                         // 추천편지의 경우 label, 답장편지의 경우 labelUrl
                         const labelUrl =
@@ -47,8 +44,8 @@ export const LetterContainer = ({ letters }: LetterContainerProps) => {
 
                         return (
                             <SwiperSlide key={i}>
-                                <div className="h-[350px] ">
-                                    <HomeBottleLetter
+                                <div className="h-[350px]">
+                                    <HomeBottle
                                         letterType={LetterType}
                                         letterId={letter.letterId}
                                         labelUrl={labelUrl}

diff --git a/src/index.css b/src/index.css
@@ -3,9 +3,9 @@
 @tailwind utilities;
 
 /* 홈페이지 병편지 스와이퍼 그림자 스타일 커스텀 */
-.swiper-slide-shadow {
+/* .swiper-slide-shadow {
     @apply opacity-0 !important;
-}
+} */
 
 @layer base {
     #root {