Skip to content

Commit 0e3f25f

Browse files
tifsytifsy
committed
design: 홈 페이지 모달 퍼블리싱
1 parent 04bbbea commit 0e3f25f

File tree

3 files changed

+154
-0
lines changed

3 files changed

+154
-0
lines changed

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

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import React from 'react';
2+
import ModalBg from '@/assets/images/yellow-modal.png';
3+
import ModalOverlay from '@/components/ModalOverlay';
4+
5+
import DeleteOutlineRoundedIcon from '@mui/icons-material/DeleteOutlineRounded';
6+
7+
interface ShowDraftModalProps {
8+
children?: React.ReactNode;
9+
onClose: () => void;
10+
}
11+
12+
const DUMMY_DRAFT = [
13+
{ id: 1, title: '취업 때문에 고민이 많아요!!' },
14+
{ id: 2, title: '배고파서 죽을 거 같아요 😭' },
15+
{ id: 3, title: '개발하니까 밖에 나갈 일이 없어서 너무 심심하고 피곤해요' },
16+
{ id: 4, title: '마라샹궈 먹고 싶어요' },
17+
];
18+
19+
const ShowDraftModal = ({ onClose }: ShowDraftModalProps) => {
20+
return (
21+
<ModalOverlay onClick={onClose}>
22+
<div className="flex h-full flex-col items-center justify-center">
23+
<p className="body-sb mb-4 h-fit max-w-[170px] text-center text-white">
24+
임시저장된 편지가 있어요!
25+
</p>
26+
<div className="flex w-73 justify-center">
27+
<section className="relative overflow-hidden rounded-lg p-5">
28+
<img src={ModalBg} className="absolute inset-0 z-[-10] h-full w-full" />
29+
<div className="flex flex-col gap-1">
30+
<p className="body-sb text-gray-80">임시저장 편지</p>
31+
<p className="caption-r text-black">로그아웃 시 임시 저장된 편지는 사라집니다</p>
32+
</div>
33+
<div className="mt-6 flex w-[251px] flex-col gap-[10px]">
34+
{DUMMY_DRAFT.map((draft) => (
35+
<div
36+
className="text-gray-80 body-m flex h-10 w-full items-center justify-between gap-1 rounded-lg bg-white p-3"
37+
key={draft.id}
38+
>
39+
<p className="truncate">{draft.title}</p>
40+
<div className="text-gray-20">
41+
<DeleteOutlineRoundedIcon />
42+
</div>
43+
</div>
44+
))}
45+
</div>
46+
</section>
47+
</div>
48+
</div>
49+
</ModalOverlay>
50+
);
51+
};
52+
53+
export default ShowDraftModal;

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

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import React from 'react';
2+
import ModalBg from '@/assets/images/yellow-modal.png';
3+
import ModalOverlay from '@/components/ModalOverlay';
4+
5+
interface ShowIncomingLettersModalProps {
6+
children?: React.ReactNode;
7+
onClose: () => void;
8+
}
9+
10+
const DUMMY_INCOMING_LETTERS = [
11+
{ id: 1, title: '취업 때문에 고민이 많아요!!', time: '12:00:00' },
12+
{ id: 2, title: '배고파서 죽을 거 같아요 😭', time: '00:00:03' },
13+
{ id: 3, title: '개발하니까 밖에 나갈 일이 없어서 너무 심심하고 피곤해요', time: '00:00:03' },
14+
{ id: 4, title: '마라샹궈 먹고 싶어요', time: '00:00:03' },
15+
];
16+
17+
const ShowIncomingLettersModal = ({ onClose }: ShowIncomingLettersModalProps) => {
18+
return (
19+
<ModalOverlay onClick={onClose}>
20+
<div className="flex h-full flex-col items-center justify-center">
21+
<p className="body-sb mb-4 h-fit max-w-[170px] text-center text-white">
22+
따숨 배달부가 따숨이의 답장을 배달 중이에요!
23+
</p>
24+
<div className="flex w-73 justify-center">
25+
<section className="relative overflow-hidden rounded-lg p-5">
26+
<img src={ModalBg} className="absolute inset-0 z-[-10] h-full w-full" />
27+
<div className="flex flex-col gap-1">
28+
<p className="body-sb text-gray-80">오고 있는 편지</p>
29+
<p className="caption-r text-black">시간은 실제 시간을 기반으로 책정됩니다.</p>
30+
</div>
31+
<div className="mt-6 flex w-[251px] flex-col gap-[10px]">
32+
{DUMMY_INCOMING_LETTERS.map((letter) => (
33+
<div
34+
className="text-gray-80 body-m flex h-10 w-full items-center justify-between gap-1 rounded-lg bg-white p-3"
35+
key={letter.id}
36+
>
37+
<p className="truncate">{letter.title}</p>
38+
<p>{letter.time}</p>
39+
</div>
40+
))}
41+
</div>
42+
</section>
43+
</div>
44+
</div>
45+
</ModalOverlay>
46+
);
47+
};
48+
49+
export default ShowIncomingLettersModal;

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

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import React from 'react';
2+
import ModalBg from '@/assets/images/yellow-modal.png';
3+
import ModalOverlay from '@/components/ModalOverlay';
4+
5+
interface ShowShareAccessModalProps {
6+
children?: React.ReactNode;
7+
onClose: () => void;
8+
}
9+
10+
const DUMMY_SHARE_ACCESS = [
11+
{ id: 1, zip_code: '235EA' },
12+
{ id: 2, zip_code: '711PO' },
13+
{ id: 3, zip_code: '105CF' },
14+
{ id: 4, zip_code: '299EB' },
15+
];
16+
17+
const ShowShareAccessModal = ({ onClose }: ShowShareAccessModalProps) => {
18+
return (
19+
<ModalOverlay onClick={onClose}>
20+
<div className="flex h-full flex-col items-center justify-center">
21+
<p className="body-sb mb-4 h-fit max-w-[170px] text-center text-white">
22+
공유 요청이 왔어요!
23+
</p>
24+
<div className="flex w-73 justify-center">
25+
<section className="relative overflow-hidden rounded-lg p-5">
26+
<img src={ModalBg} className="absolute inset-0 z-[-10] h-full w-full" />
27+
<div className="flex flex-col gap-1">
28+
<p className="body-sb text-gray-80">게시판 공유 승인하기</p>
29+
<p className="caption-r text-black">
30+
따숨님과 주고받은 추억을 게시판에 공유하고 싶으신 분이 있어요. 클릭해서 확인하고,
31+
허락 여부를 체크해주세요!
32+
</p>
33+
</div>
34+
<div className="mt-6 flex w-[251px] flex-col gap-[10px]">
35+
{DUMMY_SHARE_ACCESS.map((access) => (
36+
<div
37+
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}
39+
key={access.id}
40+
>
41+
<p>{access.zip_code}님의 공유 요청</p>
42+
</div>
43+
))}
44+
</div>
45+
</section>
46+
</div>
47+
</div>
48+
</ModalOverlay>
49+
);
50+
};
51+
52+
export default ShowShareAccessModal;

0 commit comments

Comments
 (0)