Skip to content

Commit cc4fac2

Browse files
gustn99gustn99
committed
Refactor: 코멘트 남기기 바텀시트 모듈화 & api 연동
1 parent d5d8c2a commit cc4fac2

5 files changed

Lines changed: 163 additions & 27 deletions

File tree

‎src/pages/Home/BottomSheets/PostCommentBottomSheet.tsx‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import BottomSheet from '../../../components/BottomSheet';
2+
import { BottomSheetProps } from '../../../components/BottomSheet/dto';
3+
import Comment from '../../../components/Comment';
4+
import { CommentProps } from '../../../components/Comment/dto';
5+
import request from '../../../apis/core';
6+
import { ApiDto } from '../dto';
7+
import { useRecoilState, useRecoilValue } from 'recoil';
8+
import {
9+
IsOpenPostCommentBottomSheetAtom,
10+
IsOpenPostCommentFailModalAtom,
11+
IsOpenPostCommentSuccessModalAtom,
12+
PostCommentAtom,
13+
} from '../../../recoil/PostCommentBottomSheetAtom';
14+
15+
const PostCommentBottomSheet: React.FC = () => {
16+
const [isOpenPostCommentBottomSheet, setIsOpenPostCommentBottomSheet] = useRecoilState(
17+
IsOpenPostCommentBottomSheetAtom,
18+
);
19+
const [, setIsOpenPostCommentSuccessModal] = useRecoilState(IsOpenPostCommentSuccessModalAtom);
20+
const [, setIsOpenPostCommentFailModal] = useRecoilState(IsOpenPostCommentFailModalAtom);
21+
const postComment = useRecoilValue(PostCommentAtom);
22+
23+
const postCommentProps: CommentProps = {
24+
content: `${postComment?.userName} 님의 게시물에 대한 코멘트를 남겨주세요\n코멘트는 ${postComment?.userName} 님에게만 전달됩니다`,
25+
sendComment: (message: string) => {
26+
const postNewComment = async () => {
27+
if (postComment) {
28+
const response = await request.post<ApiDto>(`/post/${postComment.postId}/comment`, {
29+
content: message,
30+
});
31+
32+
if (response.isSuccess) {
33+
setIsOpenPostCommentBottomSheet(false);
34+
setTimeout(() => {
35+
setIsOpenPostCommentSuccessModal(true);
36+
}, 100);
37+
} else {
38+
setIsOpenPostCommentFailModal(true);
39+
}
40+
} else {
41+
alert('잘못된 요청입니다.');
42+
}
43+
};
44+
45+
postNewComment();
46+
},
47+
};
48+
49+
const postCommentBottomSheet: BottomSheetProps = {
50+
isOpenBottomSheet: isOpenPostCommentBottomSheet,
51+
Component: Comment,
52+
componentProps: postCommentProps,
53+
onCloseBottomSheet: () => {
54+
setIsOpenPostCommentBottomSheet(false);
55+
},
56+
};
57+
return <BottomSheet {...postCommentBottomSheet} />;
58+
};
59+
60+
export default PostCommentBottomSheet;
61+
6;

‎src/pages/Home/BottomSheets/dto.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,3 +17,8 @@ export interface PostReportDto {
1717
userName: string;
1818
reason: string;
1919
}
20+
21+
export interface PostCommentDto {
22+
userName: string;
23+
postId: number;
24+
}

‎src/pages/Home/OOTD/Feed/index.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ import request from '../../../../apis/core'; // request 인스턴스 임포트
3030
import { useRecoilState } from 'recoil';
3131
import { IsOpenHeartBottomSheetAtom, PostRequestAtom } from '../../../../recoil/HeartBottomSheetAtom';
3232
import { IsOpenBlockConfirmationModalAtom, PostBlockAtom } from '../../../../recoil/BlockBottomSheetAtom';
33+
import { PostCommentAtom } from '../../../../recoil/PostCommentBottomSheetAtom';
3334

3435
interface Props {
3536
feed: FeedProps;
@@ -44,6 +45,7 @@ const Feed: React.FC<Props> = ({ feed, onMoreClick }) => {
4445
const [, setIsOpenHeartBottomSheet] = useRecoilState(IsOpenHeartBottomSheetAtom);
4546
const [, setPostBlock] = useRecoilState(PostBlockAtom);
4647
const [, setIsOpenBlockConfirmationModal] = useRecoilState(IsOpenBlockConfirmationModalAtom);
48+
const [, setPostComment] = useRecoilState(PostCommentAtom);
4749
const storedValue = localStorage.getItem('id');
4850
const userId = Number(storedValue);
4951

@@ -93,6 +95,10 @@ const Feed: React.FC<Props> = ({ feed, onMoreClick }) => {
9395
};
9496

9597
const handleCommentClick = () => {
98+
setPostComment({
99+
userName: feed.userName,
100+
postId: feed.postId,
101+
});
96102
nav(`/post/${feed.postId}`, { state: { isCommentModalOpen: true } });
97103
};
98104

‎src/pages/Home/index.tsx‎

Lines changed: 69 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useEffect, useState } from 'react';
1+
import React, { useEffect } from 'react';
22
import { useNavigate } from 'react-router-dom';
33
import { OODDFrame } from '../../components/Frame/Frame';
44
import HomeTabBar from './HomeTabBar';
@@ -7,10 +7,6 @@ import NavBar from '../../components/NavBar';
77
import { HomeContainer } from './styles';
88
import request, { BaseResponse } from '../../apis/core';
99

10-
import { BottomSheetProps } from '../../components/BottomSheet/dto';
11-
import { CommentProps } from '../../components/Comment/dto';
12-
import Comment from '../../components/Comment';
13-
import BottomSheet from '../../components/BottomSheet/index.tsx';
1410
import Modal from '../../components/Modal/index.tsx';
1511
import HeartBottomSheet from './BottomSheets/HeartBottomSheet.tsx';
1612
import {
@@ -36,6 +32,12 @@ import {
3632
IsOpenReportSuccessModalAtom,
3733
PostReportAtom,
3834
} from '../../recoil/MeatballBottomSheetAtom.ts';
35+
import PostCommentBottomSheet from './BottomSheets/PostCommentBottomSheet.tsx';
36+
import {
37+
IsOpenPostCommentBottomSheetAtom,
38+
IsOpenPostCommentFailModalAtom,
39+
IsOpenPostCommentSuccessModalAtom,
40+
} from '../../recoil/PostCommentBottomSheetAtom.ts';
3941

4042
interface UserResponseType {
4143
id: number;
@@ -55,9 +57,6 @@ const Home: React.FC = () => {
5557
const navigate = useNavigate();
5658

5759
// 모달과 바텀시트 상태 및 로직
58-
const [isCommentModalOpen, setIsCommentModalOpen] = useState(false);
59-
const [userName] = useState<string>('');
60-
6160
const [isOpenRequestSuccessModal, setIsOpenRequestSuccessModal] = useRecoilState(IsOpenRequestSuccessModalAtom);
6261
const [isOpenRequestFailModal, setIsOpenRequestFailModal] = useRecoilState(IsOpenRequestFailModalAtom);
6362
const postRequest = useRecoilValue(PostRequestAtom);
@@ -70,6 +69,11 @@ const Home: React.FC = () => {
7069
const [isOpenReportSuccessModal, setIsOpenReportSuccessModal] = useRecoilState(IsOpenReportSuccessModalAtom);
7170
const [isOpenReportFailModal, setIsOpenReportFailModal] = useRecoilState(IsOpenReportFailModalAtom);
7271
const postReport = useRecoilValue(PostReportAtom);
72+
const [, setIsOpenPostCommentBottomSheet] = useRecoilState(IsOpenPostCommentBottomSheetAtom);
73+
const [isOpenPostCommentSuccessModal, setIsOpenPostCommentSuccessModal] = useRecoilState(
74+
IsOpenPostCommentSuccessModalAtom,
75+
);
76+
const [isOpenPostCommentFailModal, setIsOpenPostCommentFailModal] = useRecoilState(IsOpenPostCommentFailModalAtom);
7377

7478
// 로그인 여부에 따라 navigate
7579
useEffect(() => {
@@ -128,6 +132,21 @@ const Home: React.FC = () => {
128132
content: `요청에 실패했어요\n잠시 뒤 다시 시도해 보세요`,
129133
};
130134

135+
// 코멘트 남기기 버튼
136+
const postCommentSuccessModalProps: ModalProps = {
137+
onClose: () => {
138+
setIsOpenPostCommentSuccessModal(false);
139+
},
140+
content: '코멘트가 전달되었어요',
141+
};
142+
143+
const postCommentFailModalProps: ModalProps = {
144+
onClose: () => {
145+
setIsOpenPostCommentFailModal(false);
146+
},
147+
content: '일시적인 오류입니다다',
148+
};
149+
131150
// 신고하기 메뉴
132151
const reportSuccessModalProps: ModalProps = {
133152
onClose: () => {
@@ -144,22 +163,43 @@ const Home: React.FC = () => {
144163
};
145164

146165
// 코멘트 남기기 버튼 클릭 시
147-
const commentProps: CommentProps = {
148-
content: `${userName}님의 게시물에 대한 코멘트를 남겨주세요.\n코멘트는 ${userName}님에게만 전달됩니다.`,
149-
sendComment: (comment: string) => {
150-
console.log(`api에 ${comment} 전달`);
151-
},
152-
};
153-
154-
const commentSheetProps: BottomSheetProps = {
155-
isOpenBottomSheet: isCommentModalOpen,
156-
isHandlerVisible: true,
157-
Component: Comment,
158-
componentProps: commentProps,
159-
onCloseBottomSheet: () => {
160-
setIsCommentModalOpen(false);
161-
},
162-
};
166+
// const commentProps: CommentProps = {
167+
// content: `${userName}님의 게시물에 대한 코멘트를 남겨주세요.\n코멘트는 ${userName}님에게만 전달됩니다.`,
168+
// sendComment: (message: string) => {
169+
// const postNewRequest = async () => {
170+
// if (postRequest) {
171+
// const response = await request.post<ApiDto>('/user-relationships', {
172+
// requesterId: postRequest.requesterId,
173+
// targetId: postRequest.targetId,
174+
// message: message,
175+
// });
176+
177+
// if (response.isSuccess) {
178+
// setIsOpenHeartBottomSheet(false);
179+
// setTimeout(() => {
180+
// setIsOpenRequestSuccessModal(true);
181+
// }, 100);
182+
// } else {
183+
// setIsOpenRequestFailModal(true);
184+
// }
185+
// } else {
186+
// alert('잘못된 요청입니다.');
187+
// }
188+
// };
189+
190+
// postNewRequest();
191+
// },
192+
// };
193+
194+
// const commentSheetProps: BottomSheetProps = {
195+
// isOpenBottomSheet: isCommentModalOpen,
196+
// isHandlerVisible: true,
197+
// Component: Comment,
198+
// componentProps: commentProps,
199+
// onCloseBottomSheet: () => {
200+
// setIsCommentModalOpen(false);
201+
// },
202+
// };
163203

164204
return (
165205
<OODDFrame>
@@ -171,19 +211,21 @@ const Home: React.FC = () => {
171211
{isOpenRequestSuccessModal && <Modal {...requestSuccessModalProps} />}
172212
{isOpenRequestFailModal && <Modal {...requestFailModalProps} />}
173213

214+
<PostCommentBottomSheet />
215+
{isOpenPostCommentSuccessModal && <Modal {...postCommentSuccessModalProps} />}
216+
{isOpenPostCommentFailModal && <Modal {...postCommentFailModalProps} />}
217+
174218
<MeatballBottomSheet />
175219
<ReportBottomSheet />
176220
{isOpenReportSuccessModal && <Modal {...reportSuccessModalProps} />}
177221
{isOpenReportFailModal && <Modal {...reportFailModalProps} />}
178222

179-
<BottomSheet {...commentSheetProps} />
180-
181223
<HomeContainer>
182224
<HomeTopBar />
183225
<HomeTabBar
184226
onOpenBottomSheet={() => setIsOpenMeatballBottomSheet(true)}
185227
onOpenReportSheet={() => setIsOpenReportBottomSheet(true)}
186-
onOpenCommentModal={() => setIsCommentModalOpen(true)}
228+
onOpenCommentModal={() => setIsOpenPostCommentBottomSheet(true)}
187229
/>
188230
</HomeContainer>
189231
<NavBar />

‎src/recoil/PostCommentBottomSheetAtom.ts‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { atom } from 'recoil';
2+
import { PostCommentDto } from '../pages/Home/BottomSheets/dto';
3+
4+
export const IsOpenPostCommentBottomSheetAtom = atom<boolean>({
5+
key: 'isOpenPostCommentBottomSheetAtom',
6+
default: false,
7+
});
8+
9+
export const IsOpenPostCommentSuccessModalAtom = atom<boolean>({
10+
key: 'IsOpenPostCommentSuccessModalAtom',
11+
default: false,
12+
});
13+
14+
export const IsOpenPostCommentFailModalAtom = atom<boolean>({
15+
key: 'IsOpenPostCommentFailModalAtom',
16+
default: false,
17+
});
18+
19+
export const PostCommentAtom = atom<PostCommentDto | null>({
20+
key: 'PostCommentAtom',
21+
default: null,
22+
});

0 commit comments

Comments
 (0)