Skip to content

Commit ffe9afb

Browse files
xxinzzixxinzzi
committed
Refactor: Post 페이지 리팩토링
1 parent 50adedc commit ffe9afb

1 file changed

Lines changed: 55 additions & 52 deletions

File tree

‎src/pages/Post/index.tsx‎

Lines changed: 55 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -5,24 +5,25 @@ import { useRecoilValue, useRecoilState } from 'recoil';
55
import { postIdAtom, userAtom } from '@recoil/Post/PostAtom.ts';
66
import { isPostRepresentativeAtom } from '@recoil/Post/PostAtom';
77

8-
import PostBase from './PostBase/index.tsx';
9-
import OptionsBottomSheet from '@components/BottomSheet/OptionsBottomSheet/index.tsx';
10-
import { OptionsBottomSheetProps } from '@components/BottomSheet/OptionsBottomSheet/dto.ts';
11-
import Modal from '@components/Modal';
12-
import { ModalProps } from '@components/Modal/dto';
8+
import OptionsBottomSheet from '@components/BottomSheet/OptionsBottomSheet';
139
import BottomSheet from '@components/BottomSheet';
14-
import { BottomSheetProps } from '@components/BottomSheet/dto';
1510
import BottomSheetMenu from '@components/BottomSheetMenu';
16-
import { BottomSheetMenuProps } from '@components/BottomSheetMenu/dto';
11+
import Modal from '@components/Modal';
12+
import PostBase from './PostBase/index';
13+
14+
import type { OptionsBottomSheetProps } from '@components/BottomSheet/OptionsBottomSheet/dto.ts';
15+
import type { BottomSheetProps } from '@components/BottomSheet/dto';
16+
import type { BottomSheetMenuProps } from '@components/BottomSheetMenu/dto';
17+
import type { ModalProps } from '@components/Modal/dto';
1718

1819
import Edit from '@assets/default/edit.svg';
1920
import Pin from '@assets/default/pin.svg';
2021
import Delete from '@assets/default/delete.svg';
2122

2223
import { modifyPostRepresentativeStatusApi, deletePostApi } from '@apis/post';
24+
import { getCurrentUserId } from '@utils/getCurrentUserId';
2325

2426
const Post: React.FC = () => {
25-
const userId = localStorage.getItem('current_user_id');
2627
const user = useRecoilValue(userAtom);
2728
const postId = useRecoilValue(postIdAtom);
2829
const [isMyPost, setIsMyPost] = useState(false);
@@ -35,21 +36,61 @@ const Post: React.FC = () => {
3536
const [isApiResponseModalOpen, setIsApiResponseModalOpen] = useState(false);
3637
const [modalContent, setModalContent] = useState('');
3738
const [postPinStatus, setPostPinStatus] = useState<'지정' | '해제'>('지정');
39+
40+
const userId = getCurrentUserId();
3841
const navigate = useNavigate();
3942

43+
const handleMenuOpen = () => {
44+
{
45+
isMyPost ? setIsMyPostMenuBottomSheetOpen(true) : setIsOptionsBottomSheetOpen(true);
46+
}
47+
};
48+
49+
const modifyPostRepresentativeStatus = async () => {
50+
try {
51+
const response = await modifyPostRepresentativeStatusApi(Number(postId));
52+
53+
if (response.isSuccess) {
54+
setModalContent(`대표 OOTD ${postPinStatus}에 성공했어요`);
55+
setIsPostRepresentative((prev) => !prev);
56+
} else {
57+
setModalContent(`대표 OOTD ${postPinStatus}에 실패했어요\n잠시 뒤 다시 시도해 보세요`);
58+
}
59+
} catch (error) {
60+
console.error('Error pinning post:', error);
61+
} finally {
62+
setIsApiResponseModalOpen(true);
63+
}
64+
};
65+
66+
const deletePost = async () => {
67+
try {
68+
const response = await deletePostApi(Number(postId));
69+
70+
if (response.isSuccess) {
71+
setModalContent('OOTD 삭제에 성공했어요');
72+
73+
setTimeout(() => {
74+
navigate(`/profile/${userId}`);
75+
}, 1000);
76+
} else {
77+
setModalContent(`OOTD 삭제에 실패했어요\n잠시 뒤 다시 시도해 보세요`);
78+
}
79+
} catch (error) {
80+
console.error('Error deleting post:', error);
81+
} finally {
82+
setIsApiResponseModalOpen(true);
83+
setIsDeleteConfirmationModalOpen(false); // 확인 모달을 닫음
84+
}
85+
};
86+
4087
useEffect(() => {
4188
// 현재 게시글이 내 게시글인지 확인
4289
if (user?.id && postId) {
4390
setIsMyPost(Number(userId) === user.id);
4491
}
4592
}, [user, postId]);
4693

47-
const handleMenuOpen = () => {
48-
{
49-
isMyPost ? setIsMyPostMenuBottomSheetOpen(true) : setIsOptionsBottomSheetOpen(true);
50-
}
51-
};
52-
5394
useEffect(() => {
5495
setPostPinStatus(isPostRepresentative ? '해제' : '지정');
5596
}, [isPostRepresentative]);
@@ -105,44 +146,6 @@ const Post: React.FC = () => {
105146
onCloseBottomSheet: () => setIsMyPostMenuBottomSheetOpen(false),
106147
};
107148

108-
const modifyPostRepresentativeStatus = async () => {
109-
try {
110-
const response = await modifyPostRepresentativeStatusApi(Number(postId));
111-
112-
if (response.isSuccess) {
113-
setModalContent(`대표 OOTD ${postPinStatus}에 성공했어요`);
114-
setIsPostRepresentative((prev) => !prev);
115-
} else {
116-
setModalContent(`대표 OOTD ${postPinStatus}에 실패했어요\n잠시 뒤 다시 시도해 보세요`);
117-
}
118-
} catch (error) {
119-
console.error('Error pinning post:', error);
120-
} finally {
121-
setIsApiResponseModalOpen(true);
122-
}
123-
};
124-
125-
const deletePost = async () => {
126-
try {
127-
const response = await deletePostApi(Number(postId));
128-
129-
if (response.isSuccess) {
130-
setModalContent('OOTD 삭제에 성공했어요');
131-
132-
setTimeout(() => {
133-
navigate(`/profile/${userId}`);
134-
}, 1000);
135-
} else {
136-
setModalContent(`OOTD 삭제에 실패했어요\n잠시 뒤 다시 시도해 보세요`);
137-
}
138-
} catch (error) {
139-
console.error('Error deleting post:', error);
140-
} finally {
141-
setIsApiResponseModalOpen(true);
142-
setIsDeleteConfirmationModalOpen(false); // 확인 모달을 닫음
143-
}
144-
};
145-
146149
const deleteConfirmationModalProps: ModalProps = {
147150
isCloseButtonVisible: true,
148151
onClose: () => setIsDeleteConfirmationModalOpen(false),

0 commit comments

Comments
 (0)