Merge pull request #282 from TEAM-SEONYAK/fix/#273/promiseListErrorSt…

…atus [ Fix ] 선배 약속 거절 페이지 에러 수정
TEAM-SEONYAK · Oct 18, 2024 · 13da379 · 13da379
2 parents 166fd06 + c8ffa3c
commit 13da379
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 33 deletions.
diff --git a/src/assets/svgs/ic_arrow_down_mg.svg b/src/assets/svgs/ic_arrow_down_mg.svg
diff --git a/src/components/commons/BottomSheet.tsx b/src/components/commons/BottomSheet.tsx
@@ -4,22 +4,28 @@ import { DEFAULT_REJECT_TEXT } from '@pages/promiseDetail/constants/constant';
 import React from 'react';
 interface BottomSheetPropType {
   isSheetOpen: boolean;
-  handleSheetOpen: (type: boolean) => void;
-  handleSheetClose: (type: boolean) => void;
+  handleSheetClose: () => void;
   children: React.ReactNode;
   btnActive: string;
 }
 
-export const BottomSheet = ({ isSheetOpen, handleSheetClose, children, btnActive }: BottomSheetPropType) => {
+export const BottomSheet = ({
+  isSheetOpen,
+  handleSheetClose,
+  children,
+  btnActive,
+}: BottomSheetPropType) => {
+
   return (
     <>
-      <Background $isSheetOpen={isSheetOpen} onClick={() => handleSheetClose(false)} />
+      <Background $isSheetOpen={isSheetOpen} onClick={handleSheetClose} />
       <BottomSheetWrapper $isSheetOpen={isSheetOpen}>
+        <Handler />
         {children}
         <ExitBottomSheet
           disabled={btnActive === DEFAULT_REJECT_TEXT}
           type="button"
-          onClick={() => handleSheetClose(false)}
+          onClick={handleSheetClose}
           $isActive={btnActive !== DEFAULT_REJECT_TEXT}>
           적용할래요
         </ExitBottomSheet>
@@ -43,6 +49,7 @@ const Background = styled.div<{ $isSheetOpen: boolean }>`
 const BottomSheetWrapper = styled.form<{ $isSheetOpen: boolean }>`
   display: flex;
   flex-direction: column;
+  justify-content: center;
   position: fixed;
   bottom: 0;
   z-index: 13;
@@ -73,3 +80,16 @@ const ExitBottomSheet = styled.button<{ $isActive: boolean }>`
   ${({ theme }) => theme.fonts.Head2_SB_18};
   cursor: pointer;
 `;
+
+const Handler = styled.div`
+  position: fixed;
+  top: 1.6rem;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  width: 4.7rem;
+  height: 0.3rem;
+  border-radius: 5px;
+
+  background-color: ${({ theme }) => theme.colors.grayScaleLG2};
+`;
diff --git a/src/pages/promiseDetail/PromiseDetailPage.tsx b/src/pages/promiseDetail/PromiseDetailPage.tsx
@@ -42,6 +42,7 @@ const PromiseDetail = () => {
   const [isBottomSheetOpen, setIsBottomSheetOpen] = useState(false);
   // 거절 사유 토글에서 저장
   const [rejectReason, setRejectReason] = useState(DEFAULT_REJECT_TEXT);
+  const [currRejectReason, setCurrRejectReason] = useState(DEFAULT_REJECT_TEXT);
   // 작성한 거절사유 저장
   const [rejectDetail, setRejectDetail] = useState('');
   // 서버 전달용 날짜, 시작시간, 끝시간 저장 state
@@ -114,22 +115,15 @@ const PromiseDetail = () => {
 
   useGetGoogleMeetLink(appointmentId, isEnterBtnClicked, handleClickEnterBtn);
 
-  const handleBottomSheetOpen = () => {
-    setIsBottomSheetOpen(true);
-  };
-
   const handleBottomSheetClose = () => {
     setIsBottomSheetOpen(false);
+    setRejectReason(currRejectReason);
   };
 
   const handleClickDeclineBtn = () => {
     setViewType('DECLINE');
   };
 
-  const handleRejectReason = (reason: string) => {
-    setRejectReason(reason);
-  };
-
   const handleRejectDetailReason = (detailReason: string) => {
     setRejectDetail(detailReason);
   };
@@ -149,15 +143,24 @@ const PromiseDetail = () => {
   const { diffText, diff } = countdown;
   const { month, day } = dateInfo;
 
+  // 뒤로가기 버튼
+  const handleBackBtn = () => {
+    if (viewType === 'DEFAULT') {
+      navigate(`/promiseList`, {
+        state: {
+          prevTap: tap,
+        },
+      });
+    } else {
+      setViewType('DEFAULT');
+    }
+  };
+
   return (
     <>
       <Header
         LeftSvg={ArrowLeftIc}
-        onClickLeft={() => navigate(`/promiseList`, {
-          state: {
-            prevTap: tap
-          }
-        })}
+        onClickLeft={handleBackBtn}
         title={viewType === 'DEFAULT' ? '자세히 보기' : '거절하기'}
       />
       <Wrapper>
@@ -176,7 +179,7 @@ const PromiseDetail = () => {
               </Content>
             ) : (
               <DeclineContent onClick={() => setIsBottomSheetOpen(true)}>
-                {!isBottomSheetOpen && rejectReason}
+                {rejectReason}
                 <ArrowDownMgIcon />
               </DeclineContent>
             )}
@@ -199,9 +202,10 @@ const PromiseDetail = () => {
                 <Textarea
                   placeholder="선약을 거절하는 자세한 이유에 대해 작성해주세요 (선택)"
                   wordLimit={200}
-                  height={27.4}
+                  height={20.4}
                   inputVal={rejectDetail}
                   handleInputVal={handleRejectDetailReason}
+                  variant="secondary"
                 />
                 <DeclineText>
                   이 단계 이후로 거절을 취소할 수 없어요 <br />
@@ -288,28 +292,35 @@ const PromiseDetail = () => {
       </Wrapper>
 
       {viewType === 'DECLINE' ? (
-        <AutoCloseModal text="선약이 거절되었어요" showModal={isModalOpen} handleShowModal={handleModalOpen} path="/promiseList">
+        <AutoCloseModal
+          text="선약이 거절되었어요"
+          showModal={isModalOpen}
+          handleShowModal={handleModalOpen}
+          path="/promiseList">
           <ModalRejectImg />
         </AutoCloseModal>
       ) : (
-        <AutoCloseModal text="선약이 수락되었어요" showModal={isModalOpen} handleShowModal={handleModalOpen} path="/promiseList">
+        <AutoCloseModal
+          text="선약이 수락되었어요"
+          showModal={isModalOpen}
+          handleShowModal={handleModalOpen}
+          path="/promiseList">
           <ModalAcceptImg />
         </AutoCloseModal>
       )}
 
       <BottomSheet
-        btnActive={rejectReason}
+        btnActive={currRejectReason}
         isSheetOpen={isBottomSheetOpen}
-        handleSheetOpen={handleBottomSheetOpen}
         handleSheetClose={handleBottomSheetClose}>
         <BottomSheetLayout>
           <BottomSheetTitle>거절 사유 선택</BottomSheetTitle>
           <DeclineReasonWrapper>
             {REJECT_REASON.map((el) => (
               <DeclineReason
                 key={el.id}
-                onClick={() => handleRejectReason(el.content)}
-                $isActive={rejectReason === el.content}>
+                onClick={() => setCurrRejectReason(el.content)}
+                $isActive={currRejectReason === el.content}>
                 {el.content}
               </DeclineReason>
             ))}
@@ -528,5 +539,7 @@ const DeclineReason = styled.div<{ $isActive: boolean }>`
   background-color: ${({ theme }) => theme.colors.grayScaleWhite};
 
   color: ${({ $isActive, theme }) => ($isActive ? theme.colors.Blue : theme.colors.grayScaleDG)};
+
   ${({ theme }) => theme.fonts.Title2_M_16};
+  cursor: pointer;
 `;
diff --git a/src/pages/promiseList/PromiseListPage.tsx b/src/pages/promiseList/PromiseListPage.tsx
@@ -8,14 +8,16 @@ import Title from './components/Title';
 import { useGetPromiseList } from './hooks/queries';
 import Loading from '@components/commons/Loading';
 import { getRole } from '@utils/storage';
+import ErrorPage from '@pages/errorPage/ErrorPage';
 
 const PromiseListPage = () => {
   // 유저가 선배일 경우
   const userRole = getRole() + '';
 
-  const { myNickname, pending, scheduled, past, isLoading } = useGetPromiseList();
+  const { myNickname, pending, scheduled, past, isLoading, isError } = useGetPromiseList();
 
   if (isLoading) return <Loading />;
+  if (isError) return <ErrorPage />;
 
   return (
     <>

diff --git a/src/pages/promiseList/hooks/queries.ts b/src/pages/promiseList/hooks/queries.ts
@@ -32,7 +32,7 @@ export const useGetGoogleMeetLink = (
 };
 
 export const useGetPromiseList = () => {
-  const { data, isSuccess, isLoading } = useQuery({
+  const { data, isSuccess, isLoading, isError } = useQuery({
     queryKey: [QUERY_KEY_PROMISE_LIST.getPromiseList],
     queryFn: getPromiseList,
   });
@@ -42,5 +42,5 @@ export const useGetPromiseList = () => {
   const scheduled = data && data.scheduled;
   const past = data && data.past;
 
-  return { myNickname, pending, scheduled, past, isSuccess, isLoading };
+  return { myNickname, pending, scheduled, past, isSuccess, isLoading, isError };
 };