Skip to content

Commit f748ef3

Browse files
tifsytifsy
authored
fix: 3차 QA 반영 (#133)
* fix: 마이페이지 신고 안내 모달 텍스트 수정 * feat: toast 컴포넌트 사용 * fix: 공유 요청 toast 텍스트 수정 * design: 반응형 조정
1 parent e2d90da commit f748ef3

File tree

12 files changed

+102
-13
lines changed

12 files changed

+102
-13
lines changed

‎src/pages/Home/components/FloatingLetters.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ const FloatingLetters = () => {
1616
lettersRef.current.forEach((letter, index) => {
1717
gsap.to(letter, {
1818
// x: Math.random() * 50 - 40,
19-
y: Math.random() * 20 - 40 + 'vh', // 위아래 이동
19+
y: Math.random() * 20 - 30 + 'vh', // 위아래 이동
2020
rotation: Math.random() * 50 - 25, // 회전
2121
duration: Math.random() * 3 + 2, // 지속 시간
2222
repeat: -1, // 무한 반복
@@ -35,7 +35,7 @@ const FloatingLetters = () => {
3535
ref={(el) => {
3636
if (el) lettersRef.current[index] = el;
3737
}}
38-
className="absolute w-20 opacity-90"
38+
className="absolute w-20 opacity-90 md:w-24"
3939
style={{
4040
left: `${index * 30 + 30}px`, // 편지지 간격
4141
top: '60vh',

‎src/pages/Home/components/GoToLetterBoard.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,15 @@ import goToLetterBoard from '@/assets/images/go-to-letter-board.png';
44

55
const GoToLetterBoard = () => {
66
return (
7-
<div className="absolute bottom-48 left-[calc(var(--vh)*33)] z-9 flex w-full">
7+
<div className="absolute right-[-56%] bottom-[28%] z-9 flex w-full md:right-[-42%]">
88
<div className="text-left">
99
<p className="text-gray-60 body-r mb-1 ml-2 dark:text-white">게시판</p>
1010
<Link to="/board/letter">
11-
<img src={goToLetterBoard} alt="go to letter board" className="w-[177px]" />
11+
<img
12+
src={goToLetterBoard}
13+
alt="go to letter board"
14+
className="w-[160px] sm:w-[200px] md:w-[240px]"
15+
/>
1216
</Link>
1317
</div>
1418
</div>

‎src/pages/Home/components/GoToLetterBox.tsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,11 @@ import { Link } from 'react-router';
44
import { getUnreadLettersCount } from '@/apis/unreadLetters';
55
import goToLetterBoxNewLetters from '@/assets/images/go-to-letter-box-new-letters.png';
66
import goToLetterBox from '@/assets/images/go-to-letter-box.png';
7+
import useToastStore from '@/stores/toastStore';
78

89
const GoToLetterBox = () => {
910
const [arrivedCount, setArrivedCount] = useState<number>(0);
11+
const setToastActive = useToastStore((state) => state.setToastActive);
1012

1113
useEffect(() => {
1214
const fetchUnreadCount = async () => {
@@ -15,20 +17,25 @@ const GoToLetterBox = () => {
1517
setArrivedCount(result.data);
1618
} catch (error) {
1719
console.error('❌ 안 읽은 편지 개수를 불러오는 데 실패했습니다:', error);
20+
setToastActive({
21+
toastType: 'Error',
22+
title: '서버 오류로 안 읽은 편지 개수를 불러오는 데에 실패했습니다.',
23+
time: 5,
24+
});
1825
}
1926
};
2027
fetchUnreadCount();
2128
}, []);
2229

2330
return (
24-
<div className="absolute bottom-15 left-5 z-9 flex">
31+
<div className="absolute bottom-[11%] left-5 z-9 flex">
2532
<div className="text-left">
2633
<p className="text-gray-60 body-r mb-1 ml-2 dark:text-white">내 편지함</p>
2734
<Link to="/letter/box">
2835
<img
2936
src={arrivedCount ? goToLetterBoxNewLetters : goToLetterBox}
3037
alt="go to letter box"
31-
className="w-[206.5px]"
38+
className="w-[190px] sm:w-[210px] md:w-[240px]"
3239
/>
3340
</Link>
3441
</div>

‎src/pages/Home/components/HomeBackgroundRightBottom.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ const HomeBackgroundRightBottom = () => {
99
return (
1010
<BackgroundImageWrapper
1111
as="div"
12-
className="absolute bottom-0 z-[10] h-[calc(var(--vh)*20)] w-full min-w-[600px] -translate-x-1/4 overflow-hidden"
12+
className="absolute bottom-0 z-10 h-[20%] w-full min-w-[600px] -translate-x-1/4 overflow-hidden md:w-[920px]"
1313
imageUrl={theme === 'light' ? homeRightMountainBottom : homeRightMountainBottomDark}
1414
/>
1515
);

‎src/pages/Home/components/HomeBackgroundRightTop.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ const HomeBackgroundRightTop = () => {
1010
return (
1111
<BackgroundImageWrapper
1212
as="div"
13-
className="absolute bottom-0 z-8 h-[calc(var(--vh)*32)] w-full min-w-[760px] -translate-x-1/4 overflow-hidden"
13+
className="absolute bottom-0 z-8 h-[35%] w-full min-w-[760px] -translate-x-1/4 overflow-hidden md:w-[1200px]"
1414
imageUrl={theme === 'light' ? homeRightMountainTop : homeRightMountainTopDark}
1515
/>
1616
);

‎src/pages/Home/components/HomeRight.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,16 +7,25 @@ import GoToLetterBoard from './GoToLetterBoard';
77
import GoToLetterBox from './GoToLetterBox';
88
import UnreadLetterModal from './UnreadLetterModal';
99

10+
import useToastStore from '@/stores/toastStore';
11+
1012
const HomeRight = () => {
1113
const [arrivedCount, setArrivedCount] = useState<number>(0);
1214

15+
const setToastActive = useToastStore((state) => state.setToastActive);
16+
1317
useEffect(() => {
1418
const fetchUnreadCount = async () => {
1519
try {
1620
const result = await getUnreadLettersCount();
1721
setArrivedCount(result.data);
1822
} catch (error) {
1923
console.error('❌ 안 읽은 편지 개수를 불러오는 데 실패했습니다:', error);
24+
setToastActive({
25+
toastType: 'Error',
26+
title: '서버 오류로 안 읽은 편지 개수를 불러오는 데에 실패했습니다.',
27+
time: 5,
28+
});
2029
}
2130
};
2231
fetchUnreadCount();

‎src/pages/Home/components/ShowDraftModal.tsx‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ import { DraftLetter, getDraftLetters, deleteDraftLetters } from '@/apis/draftLe
66
import ModalBackgroundWrapper from '@/components/ModalBackgroundWrapper';
77
import ModalOverlay from '@/components/ModalOverlay';
88

9+
import useToastStore from '@/stores/toastStore';
10+
911
interface ShowDraftModalProps {
1012
children?: React.ReactNode;
1113
onClose: () => void;
@@ -16,6 +18,8 @@ const ShowDraftModal = ({ onClose }: ShowDraftModalProps) => {
1618

1719
const navigate = useNavigate();
1820

21+
const setToastActive = useToastStore((state) => state.setToastActive);
22+
1923
const handleNavigation = (draft: DraftLetter) => {
2024
navigate(`/letter/write/?letterId=${draft.parentLetterId}`, {
2125
state: { draft, isDraft: true },
@@ -29,17 +33,26 @@ const ShowDraftModal = ({ onClose }: ShowDraftModalProps) => {
2933
})
3034
.catch((error) => {
3135
console.error('❌ 임시저장된 편지를 불러오는데 실패했습니다', error);
36+
setToastActive({
37+
toastType: 'Error',
38+
title: '서버 오류로 임시저장된 편지를 불러오는 데에 실패했습니다.',
39+
time: 5,
40+
});
3241
});
3342
};
3443

3544
const handleDeleteDraftLetters = async (letterId: number) => {
36-
//TODO: 정말로 삭제하시겠습니까? 모달창
3745
try {
3846
await deleteDraftLetters(letterId);
3947
setDraftLetters((prev) => prev.filter((letter) => letter.letterId !== letterId));
4048
console.log(`letterId는 `, letterId);
4149
} catch (error) {
4250
console.error(`❌임시저장된 편지를 삭제하던 중 에러가 발생했습니다.`, error);
51+
setToastActive({
52+
toastType: 'Error',
53+
title: '서버 오류로 임시저장 된 편지를 삭제하던 중 에러가 발생했습니다.',
54+
time: 5,
55+
});
4356
}
4457
};
4558

‎src/pages/Home/components/ShowShareAccessModal.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ import { ShareProposal } from '@/apis/share';
88
import ModalBackgroundWrapper from '@/components/ModalBackgroundWrapper';
99
import ModalOverlay from '@/components/ModalOverlay';
1010

11+
import useToastStore from '@/stores/toastStore';
12+
1113
interface ShowShareAccessModalProps {
1214
children?: React.ReactNode;
1315
onClose: () => void;
@@ -18,13 +20,20 @@ const ShowShareAccessModal = ({ onClose }: ShowShareAccessModalProps) => {
1820

1921
const [shareProposals, setShareProposals] = useState<ShareProposal[]>([]);
2022

23+
const setToastActive = useToastStore((state) => state.setToastActive);
24+
2125
useEffect(() => {
2226
getShareProposalList()
2327
.then((data) => {
2428
setShareProposals(data || []);
2529
})
2630
.catch((error) => {
2731
console.error('❌ 공유 요청 목록을 불러오는 데 실패했습니다.', error);
32+
setToastActive({
33+
toastType: 'Error',
34+
title: '서버 오류로 공유 요청 목록을 불러오는 데에 실패했습니다.',
35+
time: 5,
36+
});
2837
});
2938
}, []);
3039

@@ -36,6 +45,11 @@ const ShowShareAccessModal = ({ onClose }: ShowShareAccessModalProps) => {
3645
});
3746
} catch (error) {
3847
console.error('❌ 게시글 상세 페이지로 이동하는 데에 실패했습니다.', error);
48+
setToastActive({
49+
toastType: 'Error',
50+
title: '서버 오류로 게시글 상세 페이지로 이동하는 데에 실패했습니다.',
51+
time: 5,
52+
});
3953
}
4054
};
4155

‎src/pages/Home/components/UnreadLetterModal.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import { useEffect, useState } from 'react';
22

33
import { getUnreadLettersCount } from '@/apis/unreadLetters';
4+
import useToastStore from '@/stores/toastStore';
45

56
const UnreadLetterModal = () => {
67
const [arrivedCount, setArrivedCount] = useState<number>(0);
8+
const setToastActive = useToastStore((state) => state.setToastActive);
79

810
useEffect(() => {
911
const fetchUnreadCount = async () => {
@@ -12,6 +14,11 @@ const UnreadLetterModal = () => {
1214
setArrivedCount(result.data);
1315
} catch (error) {
1416
console.error('❌ 안 읽은 편지 개수를 불러오는 데 실패했습니다:', error);
17+
setToastActive({
18+
toastType: 'Error',
19+
title: '서버 오류로 안 읽은 편지 개수를 불러오는 데에 실패했습니다.',
20+
time: 5,
21+
});
1522
}
1623
};
1724
fetchUnreadCount();

‎src/pages/LetterBoxDetail/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -95,13 +95,13 @@ const LetterBoxDetailPage = () => {
9595
setShareComment('');
9696
setToastActive({
9797
toastType: 'Success',
98-
title: '공유 완료 되었습니다.',
98+
title: '공유 요청이 완료 되었습니다.',
9999
});
100100
},
101101
onError: (error) => {
102102
setToastActive({
103103
toastType: 'Error',
104-
title: '공유가 실패했습니다. 잠시 후에 다시 시도해주세요.',
104+
title: '공유 요청이 실패했습니다. 잠시 후에 다시 시도해주세요.',
105105
});
106106
console.error(error);
107107
},

0 commit comments

Comments
 (0)