Merge pull request #141 from FinalDoubleTen/dev

리프레쉬 + 스크롤
WePlanPlans · Jan 11, 2024 · 98c186f · 98c186f
2 parents bfe8dd3 + 2f455f9
commit 98c186f
Show file tree

Hide file tree

Showing 9 changed files with 136 additions and 70 deletions.
diff --git a/src/api/authClient.ts b/src/api/authClient.ts
@@ -1,5 +1,6 @@
-import { getItem, setItem } from '@utils/localStorageFun';
+import { getItem, removeItem, setItem } from '@utils/localStorageFun';
 import axios from 'axios';
+import { postLogout } from './auth';
 
 const authClient = axios.create({
   baseURL: import.meta.env.VITE_SERVER_URL,
@@ -45,7 +46,10 @@ authClient.interceptors.response.use(
       // 2. 리프레시 토큰이 만료된 경우(리프레시 토큰이 존재하지 않습니다.)
       // 3. 리프레시 토큰이 없는 경우
       // 전부 비로그인으로 처리합니다.
+      // TODO 서지수 | 로그아웃 요청
       console.log('401에러 발생 로그인 페이지로 이동시키면 됩니다.');
+      postLogout();
+      removeItem('accessToken');
     }
     return Promise.reject(error);
   },

diff --git a/src/api/client.ts b/src/api/client.ts
@@ -5,7 +5,7 @@ const client = axios.create({
   headers: {
     'Content-Type': 'application/json',
   },
-  withCredentials: false,
+  withCredentials: true,
 });
 
 export default client;
diff --git a/src/components/Mypage/DeleteMemberButton.tsx b/src/components/Mypage/DeleteMemberButton.tsx
@@ -0,0 +1,30 @@
+import { deleteMember } from '@api/member';
+import { UserInfoState } from '@recoil/Auth.atom';
+import { useNavigate } from 'react-router-dom';
+import { useSetRecoilState } from 'recoil';
+
+const DeleteMemberButton = () => {
+  const setUserInfo = useSetRecoilState(UserInfoState);
+  const navigate = useNavigate();
+  const onDeleteClick = async () => {
+    if (confirm('정말 탈퇴 하시겠습니까?')) {
+      try {
+        const res = await deleteMember();
+        if (res.data.status === 200) {
+          setUserInfo(null);
+          navigate('/');
+          alert('회원 탈퇴되었습니다. 감사합니다.');
+        }
+      } catch (err) {
+        console.log(err);
+      }
+    }
+  };
+  return (
+    <button onClick={onDeleteClick} className="body5 text-gray4">
+      회원 탈퇴
+    </button>
+  );
+};
+
+export default DeleteMemberButton;
diff --git a/src/components/Review/ReviewComments.tsx b/src/components/Review/ReviewComments.tsx
@@ -63,43 +63,45 @@ export default function ReviewComments() {
         댓글
         <span className="pl-0.5 font-bold">{commentDataLength}</span>
       </div>
-      {commentDataLength == 0 && (
-        <div className="mb-4 flex flex-col items-center justify-center text-sm text-gray4">
-          <div>댓글이 없습니다. </div>
-          <div>첫 댓글을 작성해보세요!</div>
-        </div>
-      )}
-      <InfiniteScroll
-        pageStart={0}
-        loadMore={() => fetchNextPage()}
-        hasMore={hasNextPage}
-        loader={
-          <div className="loader" key={0}>
-            Loading ...
+      <div className="flex flex-col">
+        {commentDataLength == 0 && (
+          <div className="mb-4 flex flex-col items-center justify-center text-sm text-gray4">
+            <div>댓글이 없습니다. </div>
+            <div>첫 댓글을 작성해보세요!</div>
           </div>
-        }>
-        <div>
-          {reviewComments?.pages.map((group, index) => {
-            {
-              return (
-                <React.Fragment key={index}>
-                  {group?.data.data.comments.content.map((item: any) => (
-                    <CommentItem
-                      key={item.commentId}
-                      commentId={item.commentId}
-                      authorNickname={item.authorNickname}
-                      authorProfileImageUrl={item.authorProfileImageUrl}
-                      createdTime={item.createdTime}
-                      content={item.content}
-                      isAuthor={item.isAuthor}
-                    />
-                  ))}
-                </React.Fragment>
-              );
-            }
-          })}
-        </div>
-      </InfiniteScroll>
+        )}
+        <InfiniteScroll
+          pageStart={0}
+          loadMore={() => fetchNextPage()}
+          hasMore={hasNextPage}
+          loader={
+            <div className="loader" key={0}>
+              Loading ...
+            </div>
+          }>
+          <div>
+            {reviewComments?.pages.map((group, index) => {
+              {
+                return (
+                  <React.Fragment key={index}>
+                    {group?.data.data.comments.content.map((item: any) => (
+                      <CommentItem
+                        key={item.commentId}
+                        commentId={item.commentId}
+                        authorNickname={item.authorNickname}
+                        authorProfileImageUrl={item.authorProfileImageUrl}
+                        createdTime={item.createdTime}
+                        content={item.content}
+                        isAuthor={item.isAuthor}
+                      />
+                    ))}
+                  </React.Fragment>
+                );
+              }
+            })}
+          </div>
+        </InfiniteScroll>
+      </div>
       <Modal isOpen={isModalOpen} closeModal={closeModal}>
         {modalChildren === 'EditDelete' && <EditDelete />}
         {modalChildren === 'MyAlert' && (

diff --git a/src/components/common/BackBox/BackBox.tsx b/src/components/common/BackBox/BackBox.tsx
@@ -9,6 +9,7 @@ interface Props {
   showSkip?: boolean;
   skipHandler?: VoidFunction;
   showSave?: boolean;
+  saveHandler?: VoidFunction;
 }
 
 const BackBox = ({
@@ -18,6 +19,7 @@ const BackBox = ({
   showSkip,
   skipHandler,
   showSave,
+  saveHandler,
 }: Props) => {
   const navigate = useNavigate();
 
@@ -28,7 +30,7 @@ const BackBox = ({
     skipHandler && skipHandler();
   };
   const onSaveClick = () => {
-    console.log('저장 버튼 클릭');
+    saveHandler && saveHandler();
   };
 
   return (

diff --git a/src/components/common/nav/InputComment.tsx b/src/components/common/nav/InputComment.tsx
@@ -10,14 +10,17 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
 interface InputCommentProps {
   classNameName?: string;
 }
+
 interface PostCommentMutationParams {
   comment: string;
   reviewId: number;
 }
+
 interface EditCommentMutationParams {
   comment: string;
   targetCommentId: number;
 }
+
 export const InputComment: React.FC<InputCommentProps> = () => {
   const [comment, setComment] = useRecoilState(commentState);
   const params = useParams();
@@ -28,19 +31,29 @@ export const InputComment: React.FC<InputCommentProps> = () => {
   const targetCommentId = useRecoilValue(targetCommentIdState);
   const queryClient = useQueryClient();
 
-  const { mutate: postCommentMutate } = useMutation({
+  const { mutate: postReviewMutate } = useMutation({
     mutationFn: ({ comment, reviewId }: PostCommentMutationParams) =>
       postComments(comment, reviewId),
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['reviewComments'] });
+      queryClient.invalidateQueries({
+        queryKey: ['reviewComments'],
+      });
+      queryClient.invalidateQueries({
+        queryKey: ['myReviews'],
+      });
     },
     onError: () => console.log('error'),
   });
-  const { mutate: editCommentMutate } = useMutation({
+  const { mutate: editReviewMutate } = useMutation({
     mutationFn: ({ comment, targetCommentId }: EditCommentMutationParams) =>
       putComments(comment, targetCommentId),
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['reviewComments'] });
+      queryClient.invalidateQueries({
+        queryKey: ['reviewComments'],
+      });
+      queryClient.invalidateQueries({
+        queryKey: ['myReviews'],
+      });
     },
     onError: () => console.log('error'),
   });
@@ -52,10 +65,10 @@ export const InputComment: React.FC<InputCommentProps> = () => {
 
   const handleSubmit = async () => {
     if (isModifyingComment) {
-      await editCommentMutate({ comment, targetCommentId });
+      await editReviewMutate({ comment, targetCommentId });
       setIsModifyingComment(false);
     } else {
-      await postCommentMutate({ comment, reviewId });
+      await postReviewMutate({ comment, reviewId });
     }
     setComment('');
   };
@@ -65,29 +78,27 @@ export const InputComment: React.FC<InputCommentProps> = () => {
     }
   };
   return (
-    <>
-      <div className="sticky bottom-0 mt-auto flex flex h-[64px] w-full items-center justify-center border  border-solid border-[#EDEDED] bg-white ">
-        <div className="ml-4 mr-4 flex h-[40px] w-full items-center  rounded-md border border-solid border-[#EDEDED]">
-          <div className="pl-1 pr-0.5 text-sm font-bold text-[#29ddf6]">ㅣ</div>
-          <div className="flex  w-full ">
-            <input
-              type="text"
-              placeholder="댓글을 입력하세요"
-              className=" w-full max-w-full text-sm placeholder-[#d7d7d7]  outline-none"
-              onChange={handleTextChange}
-              value={comment}
-              onKeyPress={handleKeyPress}
-            />
-          </div>
-          <div className="ml-auto mr-1 min-w-[2rem] ">
-            <button
-              onClick={handleSubmit}
-              className=" text-sm font-bold text-[#29ddf6]">
-              등록
-            </button>
-          </div>
+    <div className="sticky bottom-0 mt-auto flex flex h-[64px] w-full items-center justify-center border  border-solid border-[#EDEDED] bg-white ">
+      <div className="ml-4 mr-4 flex h-[40px] w-full items-center  rounded-md border border-solid border-[#EDEDED]">
+        <div className="pl-1 pr-0.5 text-sm font-bold text-[#29ddf6]">ㅣ</div>
+        <div className="flex  w-full ">
+          <input
+            type="text"
+            placeholder="댓글을 입력하세요"
+            className=" w-full max-w-full text-sm placeholder-[#d7d7d7]  outline-none"
+            onChange={handleTextChange}
+            value={comment}
+            onKeyPress={handleKeyPress}
+          />
+        </div>
+        <div className="ml-auto mr-1 min-w-[2rem] ">
+          <button
+            onClick={handleSubmit}
+            className=" text-sm font-bold text-[#29ddf6]">
+            등록
+          </button>
         </div>
       </div>
-    </>
+    </div>
   );
 };
diff --git a/src/pages/detail/detail.page.tsx b/src/pages/detail/detail.page.tsx
@@ -1,15 +1,15 @@
 import { DetailHeader } from '@components/common/header';
 import DetailSectionTop from '@components/DetailSectionTop/DetailSectionTop';
 import DetailSectionBottom from '@components/DetailSectionBottom/DetailSectionBottom';
-import { DetailTopButton } from '@components/DetailSectionTop';
+// import { DetailTopButton } from '@components/DetailSectionTop';
 
 const DetailTours = () => {
   return (
     <>
       <DetailHeader />
       <DetailSectionTop />
       <DetailSectionBottom />
-      <DetailTopButton />
+      {/* <DetailTopButton /> */}
     </>
   );
 };

diff --git a/src/pages/mypage/editUserInfo.page.tsx b/src/pages/mypage/editUserInfo.page.tsx
@@ -1,5 +1,21 @@
+import DeleteMemberButton from '@components/Mypage/DeleteMemberButton';
+import { BackBox } from '@components/common';
+import { Link } from 'react-router-dom';
+
 const EditUserInfo = () => {
-  return <>회원 정보 수정 페이지</>;
+  return (
+    <>
+      <BackBox showBack showSave saveHandler={() => {}}>
+        회원정보 수정
+      </BackBox>
+      <div className="flex flex-col items-center">
+        <Link to="password" className="body4 text-gray4">
+          비밀번호 변경
+        </Link>
+        <DeleteMemberButton />
+      </div>
+    </>
+  );
 };
 
 export default EditUserInfo;
diff --git a/src/pages/reviewComment/reviewComment.page.tsx b/src/pages/reviewComment/reviewComment.page.tsx
@@ -1,5 +1,6 @@
 import { DetailHeader } from '@components/common/header';
 import { DetailReview, ReviewComments } from '@components/Review';
+
 const ReviewComment = () => {
   return (
     <>