Skip to content

Commit f600c2f

Browse files
tifsytifsy
committed
design: 홈 페이지 공유 미리보기 퍼블리싱
1 parent 02513ed commit f600c2f

File tree

3 files changed

+98
-27
lines changed

3 files changed

+98
-27
lines changed

‎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: 45 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,34 @@
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 landingBlur from '@/assets/images/landing_blur.png';
12+
913
const DUMMY_LETTER = {
1014
receiver: '12E21',
1115
content:
1216
'편지 내용 어쩌구저쩌구 뾰로롱 편지 내용 어쩌구저쩌구 뾰로롱편지 내용 어쩌구 뾰로롱편지 내용 어쩌구 뾰로롱편지 내용 어쩌구 뾰로롱편지 내용 어쩌구 뾰로롱편지 내용 어쩌구 뾰로롱편지 내용 어쩌구 뾰로롱편지 내용 어쩌구 뾰로롱편지 내용 어쩌구 뾰로롱편지 내용 어쩌구 저쩌구 끝~!!',
1317
sender: '12345',
1418
};
1519

16-
const LetterBoardDetailPage = () => {
20+
interface ShareLetterPreviewProps {
21+
confirmDisabled?: boolean;
22+
children?: React.ReactNode;
23+
onCancel?: () => void;
24+
onConfirm?: () => void;
25+
}
26+
27+
const LetterBoardDetailPage = ({
28+
confirmDisabled,
29+
onCancel,
30+
onConfirm,
31+
}: ShareLetterPreviewProps) => {
1732
const [likeCount, setLikeCount] = useState(122);
1833
const [isLike, setIsLike] = useState(false);
1934
const isWriter = false;
@@ -24,6 +39,11 @@ const LetterBoardDetailPage = () => {
2439
setIsLike((prev) => !prev);
2540
};
2641

42+
const location = useLocation();
43+
44+
const isShareLetterPreview = location.state?.isShareLetterPreview || false; // state가 없다면 false로 기본값 설정
45+
console.log(location);
46+
2747
return (
2848
<>
2949
{activeReportModal && <ReportModal onClose={() => setActiveReportModal(false)} />}
@@ -34,6 +54,7 @@ const LetterBoardDetailPage = () => {
3454
isWriter={isWriter}
3555
onToggleLike={handleToggleLike}
3656
onOpenReportModal={() => setActiveReportModal(true)}
57+
isShareLetterPreview={isShareLetterPreview}
3758
/>
3859
<main className="px-5 pt-18 pb-3">
3960
<p className="body-b mb-6 px-5">FROM. 12E31</p>
@@ -56,6 +77,29 @@ const LetterBoardDetailPage = () => {
5677
<Letter letter={DUMMY_LETTER} isSender />
5778
<Letter letter={DUMMY_LETTER} />
5879
</section>
80+
81+
{isShareLetterPreview && (
82+
<>
83+
<img src={landingBlur} alt="landing blur" className="fixed bottom-0 w-screen" />
84+
<section className="fixed bottom-[30px] left-1/2 flex w-73 translate-x-[-50%] gap-6">
85+
<button
86+
type="button"
87+
className="body-m secondary-btn h-10 flex-1 basis-1/2"
88+
onClick={onCancel}
89+
>
90+
거부하기
91+
</button>
92+
<button
93+
type="button"
94+
className="primary-btn body-m h-10 flex-1 basis-1/2"
95+
disabled={confirmDisabled}
96+
onClick={onConfirm}
97+
>
98+
승인하기
99+
</button>
100+
</section>
101+
</>
102+
)}
59103
</main>
60104
</div>
61105
</>

0 commit comments

Comments
 (0)