Skip to content

Commit 5b79a33

Browse files
tifsytifsy
authored
design: 홈 페이지 공유 미리보기 퍼블리싱 (#25)
* fix: 홈 페이지 게시판 라우팅 오류 해결 * fix: 랜덤 응원 메시지 z-index 조정으로 클릭 안되는 오류 해결 * design: 홈 페이지 공유 미리보기 에셋 추가 * design: 홈 페이지 공유 미리보기 퍼블리싱 * fix: 랜덤 응원 메시지가 모달보다 위로 뜨는 오류 해결 * remove: landing blur 중복 에셋 삭제 * fix: landing blur 에셋 import 경로 수정
1 parent 4c90dbc commit 5b79a33

File tree

5 files changed

+99
-29
lines changed

5 files changed

+99
-29
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ const GoToLetterBoard = () => {
66
<div className="absolute bottom-48 left-[calc(var(--vh)*36)] z-9 flex w-full">
77
<div className="text-left">
88
<p className="text-gray-60 body-r mb-1 ml-2">게시판</p>
9-
<Link to="/letter/board">
9+
<Link to="/board/letter">
1010
<img src={goToLetterBoard} alt="go to letter board" className="w-[177px]" />
1111
</Link>
1212
</div>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ const RandomCheer = () => {
1111
const [randomCheer, setRandomCheer] = useState(getRandomCheer());
1212

1313
return (
14-
<div className="flex flex-col items-end pr-20">
14+
<div className="z-30 flex flex-col items-end pr-20">
1515
<div
1616
className="relative mb-3 w-fit rounded-lg border-1 border-white bg-white px-6 py-[7px] text-center"
1717
onClick={() => setRandomCheer(getRandomCheer())}

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

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from 'react';
22
import ModalBg from '@/assets/images/modal-yellow.png';
33
import ModalOverlay from '@/components/ModalOverlay';
4+
import { useNavigate } from 'react-router';
45

56
interface ShowShareAccessModalProps {
67
children?: React.ReactNode;
@@ -15,6 +16,13 @@ const DUMMY_SHARE_ACCESS = [
1516
];
1617

1718
const ShowShareAccessModal = ({ onClose }: ShowShareAccessModalProps) => {
19+
const navigate = useNavigate();
20+
21+
const handleNavigation = (accessId: number) => {
22+
navigate(`/board/letter/${accessId}`, {
23+
state: { isShareLetterPreview: true },
24+
});
25+
};
1826
return (
1927
<ModalOverlay closeOnOutsideClick onClose={onClose}>
2028
<div className="flex h-full flex-col items-center justify-center">
@@ -33,13 +41,13 @@ const ShowShareAccessModal = ({ onClose }: ShowShareAccessModalProps) => {
3341
</div>
3442
<div className="mt-6 flex w-[251px] flex-col gap-[10px]">
3543
{DUMMY_SHARE_ACCESS.map((access) => (
36-
<div
44+
<button
3745
className="text-gray-80 body-m flex h-10 w-full items-center justify-between gap-1 rounded-lg bg-white p-3"
38-
// onClick={openLetterPreview}
3946
key={access.id}
47+
onClick={() => handleNavigation(access.id)}
4048
>
4149
<p>{access.zip_code}님의 공유 요청</p>
42-
</div>
50+
</button>
4351
))}
4452
</div>
4553
</section>

‎src/pages/LetterBoardDetail/components/Header.tsx‎

Lines changed: 42 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Link } from 'react-router';
1+
import { Link, useNavigate } from 'react-router';
22

33
import {
44
ArrowLeftIcon,
@@ -14,34 +14,53 @@ interface HeaderProps {
1414
isWriter: boolean;
1515
onToggleLike: () => void;
1616
onOpenReportModal: () => void;
17+
isShareLetterPreview?: boolean;
1718
}
1819

19-
const Header = ({ likeCount, isLike, isWriter, onToggleLike, onOpenReportModal }: HeaderProps) => {
20+
const Header = ({
21+
likeCount,
22+
isLike,
23+
isWriter,
24+
onToggleLike,
25+
onOpenReportModal,
26+
isShareLetterPreview = false,
27+
}: HeaderProps) => {
28+
const navigate = useNavigate();
29+
2030
return (
2131
<header className="fixed top-0 z-40 w-full max-w-150">
2232
<div className="flex h-16 items-center justify-between bg-white p-5">
23-
<Link to="/board/letter">
24-
<ArrowLeftIcon className="text-primary-1 h-6 w-6" />
25-
</Link>
26-
<div className="flex items-center gap-3">
27-
<div className="flex items-center gap-1">
28-
<button type="button" onClick={onToggleLike}>
29-
{isLike ? (
30-
<LikeFilledIcon className="text-primary-1 h-6 w-6" />
31-
) : (
32-
<LikeOutlinedIcon className="text-primary-1 h-6 w-6" />
33-
)}
34-
</button>
35-
<p className="body-l-m text-primary-1">{likeCount}</p>
33+
{isShareLetterPreview ? (
34+
<button onClick={() => navigate(-1)}>
35+
<ArrowLeftIcon className="text-primary-1 h-6 w-6" />
36+
</button>
37+
) : (
38+
<Link to="/board/letter">
39+
<ArrowLeftIcon className="text-primary-1 h-6 w-6" />
40+
</Link>
41+
)}
42+
43+
{!isShareLetterPreview && (
44+
<div className="flex items-center gap-3">
45+
<div className="flex items-center gap-1">
46+
<button type="button" onClick={onToggleLike}>
47+
{isLike ? (
48+
<LikeFilledIcon className="text-primary-1 h-6 w-6" />
49+
) : (
50+
<LikeOutlinedIcon className="text-primary-1 h-6 w-6" />
51+
)}
52+
</button>
53+
<p className="body-l-m text-primary-1">{likeCount}</p>
54+
</div>
55+
{isWriter ? (
56+
<DeleteIcon className="text-primary-1 h-6 w-6" />
57+
) : (
58+
<button type="button" onClick={onOpenReportModal}>
59+
<SirenOutlinedIcon className="text-primary-1 h-6 w-6" />
60+
</button>
61+
)}
3662
</div>
37-
{isWriter ? (
38-
<DeleteIcon className="text-primary-1 h-6 w-6" />
39-
) : (
40-
<button type="button" onClick={onOpenReportModal}>
41-
<SirenOutlinedIcon className="text-primary-1 h-6 w-6" />
42-
</button>
43-
)}
44-
</div>
63+
)}
4564
</div>
4665
<div className="h-4 w-full bg-gradient-to-b from-white to-white/0" />
4766
</header>

‎src/pages/LetterBoardDetail/index.tsx‎

Lines changed: 44 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,33 @@
11
import { useState } from 'react';
2+
import { useLocation } from 'react-router';
3+
24
import { twMerge } from 'tailwind-merge';
35

46
import ReportModal from '@/components/ReportModal';
57

68
import Header from './components/Header';
79
import Letter from './components/Letter';
810

11+
import BlurImg from '@/assets/images/landing-blur.png';
912
const DUMMY_LETTER = {
1013
receiver: '12E21',
1114
content:
1215
'편지 내용 어쩌구저쩌구 뾰로롱 편지 내용 어쩌구저쩌구 뾰로롱편지 내용 어쩌구 뾰로롱편지 내용 어쩌구 뾰로롱편지 내용 어쩌구 뾰로롱편지 내용 어쩌구 뾰로롱편지 내용 어쩌구 뾰로롱편지 내용 어쩌구 뾰로롱편지 내용 어쩌구 뾰로롱편지 내용 어쩌구 뾰로롱편지 내용 어쩌구 저쩌구 끝~!!',
1316
sender: '12345',
1417
};
1518

16-
const LetterBoardDetailPage = () => {
19+
interface ShareLetterPreviewProps {
20+
confirmDisabled?: boolean;
21+
children?: React.ReactNode;
22+
onCancel?: () => void;
23+
onConfirm?: () => void;
24+
}
25+
26+
const LetterBoardDetailPage = ({
27+
confirmDisabled,
28+
onCancel,
29+
onConfirm,
30+
}: ShareLetterPreviewProps) => {
1731
const [likeCount, setLikeCount] = useState(122);
1832
const [isLike, setIsLike] = useState(false);
1933
const isWriter = false;
@@ -24,6 +38,11 @@ const LetterBoardDetailPage = () => {
2438
setIsLike((prev) => !prev);
2539
};
2640

41+
const location = useLocation();
42+
43+
const isShareLetterPreview = location.state?.isShareLetterPreview || false; // state가 없다면 false로 기본값 설정
44+
console.log(location);
45+
2746
return (
2847
<>
2948
{activeReportModal && <ReportModal onClose={() => setActiveReportModal(false)} />}
@@ -34,6 +53,7 @@ const LetterBoardDetailPage = () => {
3453
isWriter={isWriter}
3554
onToggleLike={handleToggleLike}
3655
onOpenReportModal={() => setActiveReportModal(true)}
56+
isShareLetterPreview={isShareLetterPreview}
3757
/>
3858
<main className="px-5 pt-18 pb-3">
3959
<p className="body-b mb-6 px-5">FROM. 12E31</p>
@@ -56,6 +76,29 @@ const LetterBoardDetailPage = () => {
5676
<Letter letter={DUMMY_LETTER} isSender />
5777
<Letter letter={DUMMY_LETTER} />
5878
</section>
79+
80+
{isShareLetterPreview && (
81+
<>
82+
<img src={BlurImg} alt="landing blur" className="fixed bottom-0 w-screen" />
83+
<section className="fixed bottom-[30px] left-1/2 flex w-73 translate-x-[-50%] gap-6">
84+
<button
85+
type="button"
86+
className="body-m secondary-btn h-10 flex-1 basis-1/2"
87+
onClick={onCancel}
88+
>
89+
거부하기
90+
</button>
91+
<button
92+
type="button"
93+
className="primary-btn body-m h-10 flex-1 basis-1/2"
94+
disabled={confirmDisabled}
95+
onClick={onConfirm}
96+
>
97+
승인하기
98+
</button>
99+
</section>
100+
</>
101+
)}
59102
</main>
60103
</div>
61104
</>

0 commit comments

Comments
 (0)