Skip to content

Commit 45bdda0

Browse files
wldnjs990wldnjs990
committed
feat:글작성, 상세 페이지 뒤로가기 버튼 + 상세페이지 글 삭제 버튼 추가
1 parent b0d7161 commit 45bdda0

File tree

4 files changed

+74
-45
lines changed

4 files changed

+74
-45
lines changed

‎src/components/BackButton.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { ArrowLeftIcon } from '@/assets/icons';
2+
3+
export default function BackButton() {
4+
return (
5+
<button onClick={() => window.history.back()}>
6+
<ArrowLeftIcon className="text-primary-1 h-6 w-6" />
7+
</button>
8+
);
9+
}

‎src/pages/LetterDetail/index.tsx‎

Lines changed: 55 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,15 @@ import { useNavigate, useParams } from 'react-router';
33
import { twMerge } from 'tailwind-merge';
44

55
import { deleteLetter, getLetter } from '@/apis/letterDetail';
6-
import { CloudIcon, SirenOutlinedIcon, SnowIcon, ThermostatIcon, WarmIcon } from '@/assets/icons';
6+
import {
7+
CloudIcon,
8+
DeleteIcon,
9+
SirenOutlinedIcon,
10+
SnowIcon,
11+
ThermostatIcon,
12+
WarmIcon,
13+
} from '@/assets/icons';
14+
import BackButton from '@/components/BackButton';
715
import ReportModal from '@/components/ReportModal';
816
import { FONT_TYPE_OBJ, PAPER_TYPE_OBJ } from '@/pages/Write/constants';
917

@@ -34,7 +42,6 @@ const LetterDetailPage = () => {
3442
if (params.id) {
3543
getLetter(params.id, setLetterDetail);
3644
// 편지 삭제 요청 테스트(내일 삭제 버튼 만들어서 여기다 추가하긔)
37-
deleteLetter(params.id);
3845
}
3946

4047
return () => {
@@ -50,42 +57,52 @@ const LetterDetailPage = () => {
5057
letterDetail && PAPER_TYPE_OBJ[letterDetail.paperType],
5158
)}
5259
>
53-
<div className="absolute top-5 right-5 flex gap-3">
54-
<button
55-
ref={degreeButtonRef}
56-
className="flex items-center justify-center gap-1"
57-
onClick={() => {
58-
setDegreeModalOpen((cur) => !cur);
59-
}}
60-
>
61-
<ThermostatIcon className="h-6 w-6" />
62-
<span className="caption-b text-primary-1">편지 온도</span>
63-
</button>
64-
<button
65-
onClick={() => {
66-
setReportModalOpen(true);
67-
}}
68-
>
69-
<SirenOutlinedIcon className="text-primary-1 h-6 w-6" />
70-
</button>
71-
{degreeModalOpen && (
72-
<div className="caption-b text-primary-1 bg-primary-5 absolute top-7 z-40 flex flex-col gap-1 p-2 shadow">
73-
{DEGREES.map((degree, idx) => {
74-
return (
75-
<button
76-
key={idx}
77-
className="flex items-center justify-start gap-1"
78-
onClick={() => {
79-
console.log(idx);
80-
}}
81-
>
82-
{degree.icon}
83-
{degree.title}
84-
</button>
85-
);
86-
})}
87-
</div>
88-
)}
60+
<div className="absolute top-5 left-0 flex w-full justify-between px-5">
61+
<BackButton />
62+
<div className="flex gap-2">
63+
<button
64+
ref={degreeButtonRef}
65+
className="flex items-center justify-center gap-1"
66+
onClick={() => {
67+
setDegreeModalOpen((cur) => !cur);
68+
}}
69+
>
70+
<ThermostatIcon className="h-6 w-6" />
71+
<span className="caption-b text-primary-1">편지 온도</span>
72+
</button>
73+
<button
74+
onClick={() => {
75+
if (params.id) deleteLetter(params.id);
76+
}}
77+
>
78+
<DeleteIcon className="text-primary-1 h-6 w-6" />
79+
</button>
80+
<button
81+
onClick={() => {
82+
setReportModalOpen(true);
83+
}}
84+
>
85+
<SirenOutlinedIcon className="text-primary-1 h-6 w-6" />
86+
</button>
87+
{degreeModalOpen && (
88+
<div className="caption-b text-primary-1 bg-primary-5 absolute top-7 z-40 flex flex-col gap-1 p-2 shadow">
89+
{DEGREES.map((degree, idx) => {
90+
return (
91+
<button
92+
key={idx}
93+
className="flex items-center justify-start gap-1"
94+
onClick={() => {
95+
console.log(idx);
96+
}}
97+
>
98+
{degree.icon}
99+
{degree.title}
100+
</button>
101+
);
102+
})}
103+
</div>
104+
)}
105+
</div>
89106
</div>
90107
<div className="flex flex-col gap-3 px-5">
91108
<span className="body-b mt-[55px]">TO. 따숨이</span>

‎src/pages/Write/CategorySelect.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,11 @@ import { useState } from 'react';
22
import { Link } from 'react-router';
33

44
import { postLetter } from '@/apis/write';
5+
import BackButton from '@/components/BackButton';
56
import PageTitle from '@/components/PageTitle';
7+
import CategoryList from '@/pages/Write/components/CategoryList';
68
import useWrite from '@/stores/writeStore';
79

8-
import CategoryList from './components/CategoryList';
910
import ResultLetterAnimation from './components/ResultLetterAnimation';
1011
import WritePageButton from './components/WritePageButton';
1112

@@ -37,7 +38,8 @@ export default function CategorySelect({
3738
return (
3839
<>
3940
<div className="flex w-full grow flex-col items-center">
40-
<div className="absolute right-5">
41+
<div className="absolute left-0 flex w-full items-center justify-between px-5">
42+
<BackButton />
4143
{!send && prevLetter.length <= 0 && (
4244
<WritePageButton
4345
text="이전 단계"

‎src/pages/Write/LetterEditor.tsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import { useRef } from 'react';
22
import { twMerge } from 'tailwind-merge';
33

4+
import BackButton from '@/components/BackButton';
5+
import WritePageButton from '@/pages/Write/components/WritePageButton';
6+
import { FONT_TYPE_OBJ } from '@/pages/Write/constants';
7+
import OptionSlide from '@/pages/Write/OptionSlide';
48
import useWrite from '@/stores/writeStore';
59

6-
import WritePageButton from './components/WritePageButton';
7-
import { FONT_TYPE_OBJ } from './constants';
8-
import OptionSlide from './OptionSlide';
9-
1010
export default function LetterEditor({
1111
setStep,
1212
prevLetter,
@@ -34,7 +34,8 @@ export default function LetterEditor({
3434
return (
3535
<div className="flex grow flex-col pb-15">
3636
<OptionSlide prevLetter={prevLetter} />
37-
<div className="absolute right-5">
37+
<div className="absolute left-0 flex w-full items-center justify-between px-5">
38+
<BackButton />
3839
{prevLetter.length > 0 ? (
3940
<WritePageButton
4041
text="답장 전송"

0 commit comments

Comments
 (0)