-
+
+ {/* 믈결 애니메이션 */}
+
+
+
+
+
+
+
+
+
+
+
+
);
};
diff --git a/src/components/HomePage/HomeBottleLetter.tsx b/src/components/HomePage/HomeBottleLetter.tsx
deleted file mode 100644
index f43771c..0000000
--- 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 1297e3c..ef0a4b1 100644
--- a/src/components/HomePage/LetterContainer/LetterContainer.tsx
+++ b/src/components/HomePage/LetterContainer/LetterContainer.tsx
@@ -1,9 +1,8 @@
import { Swiper, SwiperSlide } from 'swiper/react';
-import { EffectCards } from 'swiper/modules';
+// import { EffectCards } from 'swiper/modules';
import 'swiper/swiper-bundle.css';
-import { NotificationBadge } from '../../Common/NotificationBadge/NotificationBadge';
-import { HomeBottleLetter } from '../HomeBottleLetter';
import { WaveContainer } from '@/components/Common/WaveContainer/WaveContainer';
+import { HomeBottle } from '../HomeBottle';
type RecommendLetter = {
letterId: number;
@@ -26,18 +25,12 @@ type LetterContainerProps = {
export const LetterContainer = ({ letters }: LetterContainerProps) => {
const hasLetters = (
-
-
-
-
+
+
+
-
+
{letters.map((letter, i) => {
// 추천편지의 경우 label, 답장편지의 경우 labelUrl
const labelUrl =
@@ -51,8 +44,8 @@ export const LetterContainer = ({ letters }: LetterContainerProps) => {
return (
-
-
+ {
const noLetters = (
- {/*
*/}
diff --git a/src/index.css b/src/index.css
index da6e435..8c38d07 100644
--- 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 {
diff --git a/src/pages/Home/HomePage.tsx b/src/pages/Home/HomePage.tsx
index f22d1c9..fd76431 100644
--- a/src/pages/Home/HomePage.tsx
+++ b/src/pages/Home/HomePage.tsx
@@ -12,7 +12,7 @@ import { ToggleVariant } from '@/constants/toggleVariant';
import { useGetThreeLetterData } from '@/hooks/useGetThreeLetterData';
import { ErrorPage } from '../ErrorPage';
import { usePushNotifications } from '@/hooks/usePushNotifications';
-import { Margin } from '@/components/Common/Margin/Margin';
+import { NotificationBadge } from '@/components/Common/NotificationBadge/NotificationBadge';
const HomePage = () => {
usePushNotifications(); // 푸시 알림 훅
@@ -32,27 +32,37 @@ const HomePage = () => {
}
return (
-
+
-
{
- setToggle(!toggle);
- }}
- leftLabel="추천"
- rightLabel="답장"
- variant={ToggleVariant.Main}
- />
+ {/* toggle button section */}
+
+
{
+ setToggle(!toggle);
+ }}
+ leftLabel="추천"
+ rightLabel="답장"
+ variant={ToggleVariant.Main}
+ />
+
+
+
+
+
-