Skip to content

Commit 9ca7baa

Browse files
nirii00nirii00
committed
Feat: Menu 버튼 추가
1 parent ba48253 commit 9ca7baa

File tree

9 files changed

+128
-67
lines changed

9 files changed

+128
-67
lines changed

‎src/components/HomeButton.tsx‎

Lines changed: 0 additions & 17 deletions
This file was deleted.

‎src/components/MenuButton.tsx‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import MenuRoundedIcon from '@mui/icons-material/MenuRounded';
2+
import EditNoteRoundedIcon from '@mui/icons-material/EditNoteRounded';
3+
import MarkunreadOutlinedIcon from '@mui/icons-material/MarkunreadOutlined';
4+
import CalendarTodayOutlinedIcon from '@mui/icons-material/CalendarTodayOutlined';
5+
6+
import { useState } from 'react';
7+
import { Link } from 'react-router';
8+
import { twMerge } from 'tailwind-merge';
9+
10+
export default function MenuButton() {
11+
const [isOpen, setIsOpen] = useState(false);
12+
13+
return (
14+
<>
15+
<div className="flex w-full max-w-150 justify-end pr-5 text-center">
16+
<Link
17+
to="/letter/box"
18+
className={twMerge(
19+
'bg-primary-3 fixed bottom-[220px] z-50 h-12 w-12 rotate-360 content-center rounded-full text-white transition-all duration-200 hover:scale-105 active:scale-90',
20+
isOpen
21+
? 'translate-y-0 rotate-0 opacity-100'
22+
: 'translate-y-[120%] rotate-180 opacity-0',
23+
)}
24+
>
25+
<MarkunreadOutlinedIcon fontSize="small" onClick={() => setIsOpen(false)} />
26+
</Link>
27+
<Link
28+
to="/board/letter"
29+
className={twMerge(
30+
'bg-primary-3 fixed bottom-[160px] z-50 h-12 w-12 rotate-360 content-center rounded-full text-white transition-all duration-200 hover:scale-105 active:scale-90',
31+
isOpen
32+
? 'translate-y-0 rotate-0 opacity-100'
33+
: 'translate-y-[120%] rotate-180 opacity-0',
34+
)}
35+
>
36+
<CalendarTodayOutlinedIcon fontSize="small" onClick={() => setIsOpen(false)} />
37+
</Link>
38+
<Link
39+
to="/letter/write"
40+
className={twMerge(
41+
'bg-primary-3 fixed bottom-[100px] z-50 h-12 w-12 rotate-360 content-center rounded-full text-white transition-all duration-200 hover:scale-105 active:scale-90',
42+
isOpen
43+
? 'translate-y-0 rotate-0 opacity-100'
44+
: 'translate-y-[120%] rotate-180 opacity-0',
45+
)}
46+
>
47+
<EditNoteRoundedIcon fontSize="medium" onClick={() => setIsOpen(false)} />
48+
</Link>
49+
50+
<div
51+
className={twMerge(
52+
'bg-primary-3 fixed bottom-[30px] z-50 h-13 w-13 content-center rounded-full text-white transition-all duration-200 hover:scale-105 active:scale-90',
53+
isOpen ? 'rotate-90' : 'rotate-0',
54+
)}
55+
>
56+
<MenuRoundedIcon onClick={() => setIsOpen((state) => !state)} />
57+
</div>
58+
</div>
59+
</>
60+
);
61+
}

‎src/pages/Home/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { useEffect } from 'react';
22
import { useNavigate } from 'react-router';
33

4-
import HomeButton from '@/components/HomeButton';
4+
import MenuButton from '@/components/MenuButton';
55
import NoticeRollingPaper from '@/components/NoticeRollingPaper';
66
import useViewport from '@/hooks/useViewport';
77
import useAuthStore from '@/stores/authStore';
@@ -46,7 +46,7 @@ const HomePage = () => {
4646
</section>
4747
</div>
4848

49-
<HomeButton />
49+
<MenuButton />
5050
</div>
5151
);
5252
};

‎src/pages/LetterBoard/index.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import NoticeRollingPaper from '@/components/NoticeRollingPaper';
99
import PageTitle from '@/components/PageTitle';
1010

1111
import LetterPreview from './components/LetterPreview';
12+
import MenuButton from '@/components/MenuButton';
1213

1314
const LetterBoardPage = () => {
1415
const navigate = useNavigate();
@@ -99,6 +100,7 @@ const LetterBoardPage = () => {
99100
</p>
100101
)}
101102
</main>
103+
<MenuButton />
102104
<BackgroundBottom />
103105
</>
104106
);

‎src/pages/LetterBox/index.tsx‎

Lines changed: 52 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import PageTitle from '@/components/PageTitle';
88
import { chunkBox } from '@/utils/chunkBox';
99

1010
import LetterBoxItem from './components/LetterBoxItem';
11+
import MenuButton from '@/components/MenuButton';
1112

1213
const fetchMailLists = async () => {
1314
const response = await getMailbox();
@@ -38,56 +39,59 @@ const LetterBoxPage = () => {
3839
}
3940

4041
return (
41-
<main className="flex grow flex-col items-center px-5 pt-20">
42-
<PageTitle>내 편지함</PageTitle>
43-
<div className="w-full max-w-94">
44-
<p className="body-sb mt-16 mb-[7px] place-self-start text-gray-50">
45-
나와 연락한 사람들 {letterBox?.length}
46-
</p>
47-
<section className="letter-box-bg flex grow flex-col items-center px-4 pt-5">
48-
<div className="flex w-full flex-col gap-5">
49-
{isLoading ? (
50-
<p className="body-m text-gray-60 text-center">로딩중..</p>
51-
) : letterBox.length > 0 ? (
52-
chunkBox(
53-
letterBox.map((data: LetterBoxData, index) => (
54-
<LetterBoxItem
55-
boxId={data.letterMatchingId}
56-
key={index}
57-
zipCode={data.oppositeZipCode}
58-
letterCount={data.letterCount}
59-
isChecked={data.oppositeRead}
60-
isClosed={!data.active}
61-
oppositeId={data.oppositeId}
62-
/>
63-
)),
64-
).map((row, index) =>
65-
row.length === 3 ? (
66-
<div key={index} className="flex justify-between">
67-
{row}
68-
</div>
69-
) : (
70-
<div key={index} className="flex justify-between">
71-
{row}
72-
<img src={ClosedWindowImg} alt="닫힌 문 이미지" className="h-28 w-23" />
73-
{row.length === 1 && (
42+
<>
43+
<main className="flex grow flex-col items-center px-5 pt-20">
44+
<PageTitle>내 편지함</PageTitle>
45+
<div className="w-full max-w-94">
46+
<p className="body-sb mt-16 mb-[7px] place-self-start text-gray-50">
47+
나와 연락한 사람들 {letterBox?.length}
48+
</p>
49+
<section className="letter-box-bg flex grow flex-col items-center px-4 pt-5">
50+
<div className="flex w-full flex-col gap-5">
51+
{isLoading ? (
52+
<p className="body-m text-gray-60 text-center">로딩중..</p>
53+
) : letterBox.length > 0 ? (
54+
chunkBox(
55+
letterBox.map((data: LetterBoxData, index) => (
56+
<LetterBoxItem
57+
boxId={data.letterMatchingId}
58+
key={index}
59+
zipCode={data.oppositeZipCode}
60+
letterCount={data.letterCount}
61+
isChecked={data.oppositeRead}
62+
isClosed={!data.active}
63+
oppositeId={data.oppositeId}
64+
/>
65+
)),
66+
).map((row, index) =>
67+
row.length === 3 ? (
68+
<div key={index} className="flex justify-between">
69+
{row}
70+
</div>
71+
) : (
72+
<div key={index} className="flex justify-between">
73+
{row}
7474
<img src={ClosedWindowImg} alt="닫힌 문 이미지" className="h-28 w-23" />
75-
)}
76-
</div>
77-
),
78-
)
79-
) : (
80-
<p className="body-m text-gray-60 text-center">아직 주고 받은 편지가 없어요</p>
81-
)}
82-
<div className="flex justify-between">
83-
<img src={ClosedWindowImg} alt="닫힌 문 이미지" className="h-28 w-23" />
84-
<img src={DoorImg} alt="출입문 이미지" />
85-
<img src={ClosedWindowImg} alt="닫힌 문 이미지" className="h-28 w-23" />
75+
{row.length === 1 && (
76+
<img src={ClosedWindowImg} alt="닫힌 문 이미지" className="h-28 w-23" />
77+
)}
78+
</div>
79+
),
80+
)
81+
) : (
82+
<p className="body-m text-gray-60 text-center">아직 주고 받은 편지가 없어요</p>
83+
)}
84+
<div className="flex justify-between">
85+
<img src={ClosedWindowImg} alt="닫힌 문 이미지" className="h-28 w-23" />
86+
<img src={DoorImg} alt="출입문 이미지" />
87+
<img src={ClosedWindowImg} alt="닫힌 문 이미지" className="h-28 w-23" />
88+
</div>
8689
</div>
87-
</div>
88-
</section>
89-
</div>
90-
</main>
90+
</section>
91+
</div>
92+
</main>
93+
<MenuButton />
94+
</>
9195
);
9296
};
9397

‎src/pages/LetterBoxDetail/index.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { postShareProposals } from '@/apis/share';
88
import ConfirmModal from '@/components/ConfirmModal';
99
import MessageModal from '@/components/MessageModal';
1010
import PageTitle from '@/components/PageTitle';
11+
import MenuButton from '@/components/MenuButton';
1112

1213
import InformationTooltip from './components/InformationTooltip';
1314
import LetterPreview from './components/LetterPreview';
@@ -225,6 +226,7 @@ const LetterBoxDetailPage = () => {
225226
</button>
226227
</div>
227228
)}
229+
<MenuButton />
228230
</>
229231
);
230232
};

‎src/pages/RandomLetters/index.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { useEffect, useState } from 'react';
33
import { getRandomLetterCoolTime, getRandomLetterMatched } from '@/apis/randomLetter';
44
import BackgroundBottom from '@/components/BackgroundBottom';
55
import PageTitle from '@/components/PageTitle';
6+
import MenuButton from '@/components/MenuButton';
67

78
import CoolTime from './components/CoolTime';
89
import Matched from './components/Matched';
@@ -115,6 +116,7 @@ const RandomLettersPage = () => {
115116
<BackgroundBottom />
116117
</>
117118
)}
119+
<MenuButton />
118120
</>
119121
);
120122
};

‎src/pages/RollingPaper/index.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import BackgroundBottom from '@/components/BackgroundBottom';
88
import ConfirmModal from '@/components/ConfirmModal';
99
import PageTitle from '@/components/PageTitle';
1010
import Header from '@/layouts/Header';
11+
import MenuButton from '@/components/MenuButton';
1112

1213
import Comment from './components/Comment';
1314
import CommentDetailModal from './components/CommentDetailModal';
@@ -116,6 +117,7 @@ const RollingPaperPage = () => {
116117
</section>
117118
<WriteCommentButton rollingPaperId={id} />
118119
</main>
120+
<MenuButton />
119121
<BackgroundBottom />
120122
</>
121123
);

‎src/styles/utilities.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -108,4 +108,9 @@
108108
.window-bottom-unChecked {
109109
background: linear-gradient(to bottom, #fff4f2, #ffe6e3) !important;
110110
}
111+
112+
/* Menu */
113+
.submenu-btn {
114+
@apply bg-primary-3 flex h-12 w-12 items-center justify-center rounded-full text-white transition-all duration-300 hover:scale-105 active:scale-90;
115+
}
111116
}

0 commit comments

Comments
 (0)