Merge pull request #204 from ODOICHON/feat/#202

Feat/#202 마이페이지 "임시저장한 게시글" 페이지 구현
ODOICHON · Nov 28, 2023 · 2672a0d · 2672a0d
2 parents d8242e6 + 6426cb6
commit 2672a0d
Show file tree

Hide file tree

Showing 14 changed files with 277 additions and 41 deletions.
diff --git a/src/Routes.tsx b/src/Routes.tsx
@@ -11,6 +11,7 @@ const MyPageHome = lazy(() => import('@/pages/Mypage/home'));
 const MyselfPage = lazy(() => import('@/pages/Mypage/trade/myself'));
 const MyWritePage = lazy(() => import('@/pages/Mypage/community/write'));
 const MyPageTradeScrap = lazy(() => import('@/pages/Mypage/trade/scrap'));
+const MyPageSaves = lazy(() => import('@/pages/Mypage/trade/saves'));
 const IntroducePage = lazy(() => import('@/pages/Introduce'));
 const IntroWritePage = lazy(() => import('@/pages/Introduce/Write'));
 const IntroBoardPage = lazy(() => import('@/pages/Introduce/Board'));
@@ -46,8 +47,8 @@ export const routes: RouteObject[] = [
             element: <MyselfPage />,
           },
           {
-            path: 'trade/save',
-            element: <div>save</div>,
+            path: 'trade/saves',
+            element: <MyPageSaves />,
           },
           {
             path: 'trade/scrap',

diff --git a/src/assets/common/paperclip.svg b/src/assets/common/paperclip.svg
diff --git a/src/components/Community/Quill/index.tsx b/src/components/Community/Quill/index.tsx
@@ -30,14 +30,16 @@ export default function CommunityQuill({ queryParam }: CommunityQuillProps) {
   const [title, setTitle] = useState(boardData ? boardData.title : '');
   const [contents, setContents] = useState('');
   const [category, setCategory] = useState(boardData ? boardData.category : '');
+  const [isProcessing, setIsProcessing] = useState(false);
+
   const prefixCategory =
     queryParam === 'free_board' ? 'DEFAULT' : 'ADVERTISEMENT';
   const categoryList =
     queryParam === 'free_board' ? freeCategory : advertiseCategory;
 
   const queryClient = useQueryClient();
 
-  const { mutate } = useMutation(
+  const { mutate, isLoading: isUpdateLoading } = useMutation(
     (BoardForm: BoardFormType) =>
       restFetcher({
         method: 'PUT',
@@ -69,6 +71,7 @@ export default function CommunityQuill({ queryParam }: CommunityQuillProps) {
   };
 
   const onPost = async () => {
+    setIsProcessing(true);
     const imageUrls = [...getImageUrls(contents)];
     if (!checkBeforePost(title, contents, category)) return;
 
@@ -80,11 +83,19 @@ export default function CommunityQuill({ queryParam }: CommunityQuillProps) {
       prefixCategory,
       fixed: false,
     };
-    const response = await PostBoardAPI(BoardForm);
-    if (response?.code === 'SUCCESS') {
-      alert('게시글이 작성되었습니다😄');
-      queryClient.refetchQueries([QueryKeys.COMMUNITY_BOARD]);
-      navigate(`/community/${queryParam}`);
+    try {
+      const response = await PostBoardAPI(BoardForm);
+      if (response?.code === 'SUCCESS') {
+        alert('게시글이 작성되었습니다😄');
+        queryClient.refetchQueries([QueryKeys.COMMUNITY_BOARD]);
+        navigate(`/community/${queryParam}`);
+      } else {
+        throw new Error(response?.message);
+      }
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setIsProcessing(false);
     }
   };
 
@@ -163,11 +174,11 @@ export default function CommunityQuill({ queryParam }: CommunityQuillProps) {
       </section>
       <section>
         {boardData ? (
-          <button type="button" onClick={onUpdate}>
+          <button type="button" onClick={onUpdate} disabled={isUpdateLoading}>
             수정하기
           </button>
         ) : (
-          <button type="button" onClick={onPost}>
+          <button type="button" onClick={onPost} disabled={isProcessing}>
             등록하기
           </button>
         )}

diff --git a/src/components/Introduce/Quill/index.tsx b/src/components/Introduce/Quill/index.tsx
@@ -36,10 +36,11 @@ export default function IntroduceQuill() {
   const [thumbnailTitle, setThumbnailTitle] = useState(
     boardData ? boardData.imageUrls[0].split('/')[3] : '',
   );
+  const [isProcessing, setIsProcessing] = useState(false);
 
   const queryClient = useQueryClient();
 
-  const { mutate } = useMutation(
+  const { mutate, isLoading: isUpdateLoading } = useMutation(
     (BoardForm: BoardFormType) =>
       restFetcher({
         method: 'PUT',
@@ -88,6 +89,7 @@ export default function IntroduceQuill() {
   };
 
   const onPost = async () => {
+    setIsProcessing(true);
     const imageUrls = [thumbnail, ...getImageUrls(contents)];
     if (!checkBeforePost(title, contents, category, imageUrls)) return;
 
@@ -99,11 +101,19 @@ export default function IntroduceQuill() {
       prefixCategory: 'INTRO',
       fixed: false,
     };
-    const response = await PostBoardAPI(BoardForm);
-    if (response?.code === 'SUCCESS') {
-      alert('게시글이 작성되었습니다.');
-      queryClient.refetchQueries([QueryKeys.INTRO_BOARD]);
-      navigate('/introduce');
+    try {
+      const response = await PostBoardAPI(BoardForm);
+      if (response?.code === 'SUCCESS') {
+        alert('게시글이 작성되었습니다.');
+        queryClient.refetchQueries([QueryKeys.INTRO_BOARD]);
+        navigate('/introduce');
+      } else {
+        throw new Error(response?.message);
+      }
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setIsProcessing(false);
     }
   };
 
@@ -196,11 +206,11 @@ export default function IntroduceQuill() {
         </span>
       </section>
       {boardData ? (
-        <button type="button" onClick={onUpdate}>
+        <button type="button" onClick={onUpdate} disabled={isUpdateLoading}>
           수정하기
         </button>
       ) : (
-        <button type="button" onClick={onPost}>
+        <button type="button" onClick={onPost} disabled={isProcessing}>
           등록하기
         </button>
       )}

diff --git a/src/components/Login/AfterLogin/index.tsx b/src/components/Login/AfterLogin/index.tsx
@@ -32,6 +32,10 @@ function DesktopMenu({
   navigate,
 }: DesktopMenuProps) {
   const dropdownRef = useRef<HTMLDivElement>(null);
+  const handleMyPageClick = () => {
+    navigate('/mypage');
+    setIsClicked(false);
+  };
   useEffect(() => {
     const handleCloseModal = (e: Event | React.MouseEvent) => {
       if (
@@ -74,7 +78,7 @@ function DesktopMenu({
             <li
               role="presentation"
               className={styles.dropdownMenu}
-              onClick={() => navigate('/mypage')}
+              onClick={handleMyPageClick}
             >
               <img className={styles.image} src={homeImage} alt="home" />
               <p>마이페이지</p>

diff --git a/src/components/MyPage/MyPageNavbar/index.tsx b/src/components/MyPage/MyPageNavbar/index.tsx
@@ -40,7 +40,7 @@ const navList: NavListType[] = [
       },
       {
         title: '임시저장',
-        path: '/mypage/trade/save',
+        path: '/mypage/trade/saves',
       },
       {
         title: '스크랩',

diff --git a/src/components/MyPage/MySaveCard/index.tsx b/src/components/MyPage/MySaveCard/index.tsx
@@ -0,0 +1,49 @@
+import { useNavigate } from 'react-router-dom';
+import { useQuery } from '@tanstack/react-query';
+import dayjs from 'dayjs';
+import clipImage from '@/assets/common/paperclip.svg';
+import { QueryKeys, restFetcher } from '@/queryClient';
+import { TradeBoardDetailType, TradeBoardType } from '@/types/Board/tradeType';
+import { ApiResponseWithDataType } from '@/types/apiResponseType';
+import styles from './styles.module.scss';
+
+type MySaveCardProps = {
+  saveData: TradeBoardType;
+};
+
+export default function MySaveCard({ saveData }: MySaveCardProps) {
+  const navigate = useNavigate();
+
+  const { data: detailData } = useQuery<
+    ApiResponseWithDataType<TradeBoardDetailType>
+  >(
+    [QueryKeys.TRADE_BOARD, saveData.houseId],
+    () =>
+      restFetcher({
+        method: 'GET',
+        path: `/houses/user-scrap/${saveData.houseId}`,
+      }),
+    {
+      staleTime: 0,
+    },
+  );
+  const handleEditButtonClick = (data: TradeBoardDetailType | undefined) => {
+    if (!data) return;
+    navigate(`/trade/write`, {
+      state: { data: { ...data, tmpYn: true } },
+    });
+  };
+  return (
+    <li
+      role="presentation"
+      className={styles.wrapper}
+      onClick={() => handleEditButtonClick(detailData?.data)}
+    >
+      <h1 className={styles.title}>
+        {saveData.title}
+        <img src={clipImage} alt="클립이미지" />
+      </h1>
+      <p>{dayjs(saveData.createdAt).format('YYYY.MM.DD')}</p>
+    </li>
+  );
+}
diff --git a/src/components/MyPage/MySaveCard/styles.module.scss b/src/components/MyPage/MySaveCard/styles.module.scss
@@ -0,0 +1,23 @@
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 100%;
+  height: 9.375rem;
+  padding: 2.25rem 2rem;
+  background-color: white;
+  cursor: pointer;
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.03);
+  }
+}
+.title {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-size: 1.375rem;
+  font-weight: 700;
+  & > img {
+    width: 1.25rem;
+  }
+}
diff --git a/src/components/Trade/Quill/index.tsx b/src/components/Trade/Quill/index.tsx
@@ -1,4 +1,4 @@
-import { useRef } from 'react';
+import { useRef, useState } from 'react';
 import ReactQuill from 'react-quill';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
@@ -32,8 +32,10 @@ export default function TradeQuill({
   // 이미지를 업로드 하기 위한 함수
   const modules = useQuillModules(QuillRef);
 
+  const [isProcessing, setIsProcessing] = useState(false);
+
   const queryClient = useQueryClient();
-  const { mutate } = useMutation(
+  const { mutate, isLoading: isUpdateLoading } = useMutation(
     (tradeBoardForm: TradeBoardForm) =>
       restFetcher({
         method: 'PUT',
@@ -44,9 +46,8 @@ export default function TradeQuill({
       }),
     {
       onSuccess: () => {
-        alert('게시글을 수정하였습니다.');
         queryClient.refetchQueries([QueryKeys.TRADE_BOARD]);
-        navigate(`/trade`);
+        queryClient.refetchQueries([QueryKeys.MY_SAVES]);
       },
       onError: () => {
         alert('게시글 수정을 실패했습니다.');
@@ -55,6 +56,7 @@ export default function TradeQuill({
   );
 
   const onPost = async ({ isTempSave }: { isTempSave: boolean }) => {
+    setIsProcessing(true);
     const imageUrls = [thumbnail, ...getImageUrls(form.code)];
 
     const extractedYear = form.createdDate.match(/\d{4}/);
@@ -77,16 +79,20 @@ export default function TradeQuill({
       await PostHouseAPI(newForm);
       if (isTempSave) {
         alert('게시글이 임시저장 되었습니다.');
+        queryClient.refetchQueries([QueryKeys.MY_SAVES]);
       } else {
         alert('게시글이 등록되었습니다.');
+        queryClient.refetchQueries([QueryKeys.TRADE_BOARD]);
         navigate(`/trade`);
       }
     } catch (error) {
       console.error(error);
+    } finally {
+      setIsProcessing(false);
     }
   };
 
-  const onUpdate = async () => {
+  const onUpdate = async ({ isTempSave }: { isTempSave: boolean }) => {
     const imageUrls = [thumbnail, ...getImageUrls(form.code)];
     const extractedYear = form.createdDate.match(/\d{4}/);
     const createdDate = extractedYear ? extractedYear[0] : '2002';
@@ -97,13 +103,29 @@ export default function TradeQuill({
       size: form.size.replace(/m2/g, ''),
       createdDate,
       imageUrls,
+      tmpYn: isTempSave,
     };
 
-    if (!checkBeforeTradePost(user!, newForm)) return;
-
-    mutate(newForm);
+    if (!isTempSave) {
+      if (!checkBeforeTradePost(user!, newForm)) return;
+    }
+    try {
+      mutate(newForm);
+      if (isTempSave) {
+        alert('게시글이 임시저장 되었습니다.');
+      } else {
+        alert(`게시글이 수정되었습니다.`);
+        navigate(`/trade`);
+      }
+    } catch (error) {
+      console.error(error);
+    }
   };
 
+  const isPosting = Boolean(!state); // 처음 글을 작성하는 상태
+  const isUpdating = Boolean(state && !state.data.tmpYn); // 등록된 글을 수정하는 상태
+  const isSaving = Boolean(state && state.data.tmpYn); // 임시저장된 글을 작성하는 상태
+
   return (
     <div className={styles.container}>
       <section className={styles.sectionWrapper}>
@@ -135,18 +157,30 @@ export default function TradeQuill({
         </span>
       </section>
       <section>
-        <button type="button" onClick={() => onPost({ isTempSave: true })}>
-          임시저장
-        </button>
-        {state ? (
-          <button type="button" onClick={onUpdate}>
-            수정하기
-          </button>
-        ) : (
-          <button type="button" onClick={() => onPost({ isTempSave: false })}>
-            등록하기
+        {(isPosting || isSaving) && (
+          <button
+            type="button"
+            onClick={() =>
+              isPosting
+                ? onPost({ isTempSave: true })
+                : onUpdate({ isTempSave: true })
+            }
+            disabled={isProcessing || isUpdateLoading}
+          >
+            임시저장
           </button>
         )}
+        <button
+          type="button"
+          onClick={() =>
+            isPosting
+              ? onPost({ isTempSave: false })
+              : onUpdate({ isTempSave: false })
+          }
+          disabled={isProcessing || isUpdateLoading}
+        >
+          {isUpdating ? '수정하기' : '등록하기'}
+        </button>
       </section>
     </div>
   );