From 7eafc26058de07f2cd06a296f9093c0bdbb544eb Mon Sep 17 00:00:00 2001 From: kangminguu Date: Sun, 12 Jan 2025 21:40:29 +0900 Subject: [PATCH] =?UTF-8?q?refactor=20:=20=EB=A9=94=EC=9D=B8=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EB=AC=BC=EB=B3=91=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81=20?= =?UTF-8?q?=EB=B0=8F=20=EC=95=A0=EB=8B=88=EB=A9=94=EC=9D=B4=EC=85=98=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ..._\354\234\240\353\246\254\353\263\221.svg" | 51 ------------------- .../Common/WaveContainer/WaveContainer.tsx | 2 +- src/components/HomePage/HomeBottle.tsx | 44 ++++++++++++++-- src/components/HomePage/HomeBottleLetter.tsx | 46 ----------------- .../LetterContainer/LetterContainer.tsx | 19 +++---- src/index.css | 4 +- 6 files changed, 52 insertions(+), 114 deletions(-) delete mode 100644 "public/\355\231\210_\354\234\240\353\246\254\353\263\221.svg" delete mode 100644 src/components/HomePage/HomeBottleLetter.tsx diff --git "a/public/\355\231\210_\354\234\240\353\246\254\353\263\221.svg" "b/public/\355\231\210_\354\234\240\353\246\254\353\263\221.svg" deleted file mode 100644 index 1db5edbc..00000000 --- "a/public/\355\231\210_\354\234\240\353\246\254\353\263\221.svg" +++ /dev/null @@ -1,51 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/components/Common/WaveContainer/WaveContainer.tsx b/src/components/Common/WaveContainer/WaveContainer.tsx index 134fcfd5..ac0c75a1 100644 --- a/src/components/Common/WaveContainer/WaveContainer.tsx +++ b/src/components/Common/WaveContainer/WaveContainer.tsx @@ -2,7 +2,7 @@ export const WaveContainer = () => { return (
-
+
); }; diff --git a/src/components/HomePage/HomeBottle.tsx b/src/components/HomePage/HomeBottle.tsx index 836d6d07..88b949fa 100644 --- 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 ( -
- +
+ {/* 믈결 애니메이션 */} +
+
+
+
+
+ +
+
+
+
+
); }; diff --git a/src/components/HomePage/HomeBottleLetter.tsx b/src/components/HomePage/HomeBottleLetter.tsx deleted file mode 100644 index f43771cb..00000000 --- a/src/components/HomePage/HomeBottleLetter.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import React from 'react'; -import { Label } from '../Common/BottleLetter/Label/Label'; -import { useNavigate } from 'react-router-dom'; -import { HomeBottle } from './HomeBottle'; - -interface HomeBottleLetterProps { - letterType: 'LETTER' | 'REPLY_LETTER'; - labelUrl: string; - letterId: number; -} - -export const HomeBottleLetter = ({ - letterType, - labelUrl, - letterId -}: HomeBottleLetterProps) => { - const navigate = useNavigate(); - - const handleClickBottle = () => { - navigate(`letter/keyword/${letterType}/received/${letterId}`); - }; - - // 키워드 편지 경로 - // /letter/keyword/LETTER/received/49 - - // + 답장의 경우 경로? - // + 아직 지도 편지 답장 경로는 설정하지 않았습니다. - // /letter/map/received/3 - // /letter/keyword/REPLY_LETTER/received/5 - - return ( -
-
-
- -
-
-
-
-
- ); -}; diff --git a/src/components/HomePage/LetterContainer/LetterContainer.tsx b/src/components/HomePage/LetterContainer/LetterContainer.tsx index e2a86925..ef0a4b1e 100644 --- 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 = (
- +
+ +
- + {letters.map((letter, i) => { // 추천편지의 경우 label, 답장편지의 경우 labelUrl const labelUrl = @@ -47,8 +44,8 @@ export const LetterContainer = ({ letters }: LetterContainerProps) => { return ( -
- +