[Fix] - 4차 스프린트 QA 반영 2차 (시모) (#400)

* fix(FloatingButton): 여행 계획 작성 글자 잘리는 문제 해결 * fix(useTravelPlanDays): todos 빈 배열로 보내도록 수정 * refactor(Button): children 위치 유연하게 받도록 수정 * fix(modalBottomSheet): isPending 시 spinner 보여주도록 수정 * fix(debouncedTime): 디바운스 시간 10초로 수정 * fix(Button): justify-content 안 먹는 문제 해결
woowacourse-teams · Aug 22, 2024 · 5729b7b · 5729b7b
1 parent 02915f5
commit 5729b7b
Show file tree

Hide file tree

Showing 18 changed files with 87 additions and 40 deletions.
diff --git a/frontend/src/components/common/Button/Button.styled.ts b/frontend/src/components/common/Button/Button.styled.ts
@@ -26,7 +26,32 @@ const createVariantStyling = ($variants: Required<ButtonProps>["variants"]) => {
   return styles[$variants];
 };
 
-export const Button = styled.button<{ $variants: ButtonProps["variants"] }>`
+const createPositionStyling = ($position: Required<ButtonProps>["position"]) => {
+  const styles = {
+    left: css`
+      justify-content: flex-start;
+    `,
+
+    center: css`
+      justify-content: center;
+    `,
+
+    right: css`
+      justify-content: flex-end;
+    `,
+  };
+
+  return styles[$position];
+};
+
+export const Button = styled.button<{
+  $variants: ButtonProps["variants"];
+  $position: ButtonProps["position"];
+}>`
+  display: flex;
+  ${({ $position = "center" }) => createPositionStyling($position)};
+  align-items: center;
+
   width: 100%;
   height: 4rem;
   border: none;

diff --git a/frontend/src/components/common/Button/Button.tsx b/frontend/src/components/common/Button/Button.tsx
@@ -1,16 +1,17 @@
 import type { ComponentPropsWithoutRef } from "react";
 
-import type { ButtonVariants } from "@components/common/Button/Button.type";
+import type { ButtonPosition, ButtonVariants } from "@components/common/Button/Button.type";
 
 import * as S from "./Button.styled";
 
 export interface ButtonProps extends ComponentPropsWithoutRef<"button"> {
   variants?: ButtonVariants;
+  position?: ButtonPosition;
 }
 
-const Button = ({ variants = "primary", children, ...props }: ButtonProps) => {
+const Button = ({ variants = "primary", position = "center", children, ...props }: ButtonProps) => {
   return (
-    <S.Button $variants={variants} {...props}>
+    <S.Button $variants={variants} $position={position} {...props}>
       {children}
     </S.Button>
   );

diff --git a/frontend/src/components/common/Button/Button.type.ts b/frontend/src/components/common/Button/Button.type.ts
@@ -1 +1,2 @@
 export type ButtonVariants = "primary" | "secondary";
+export type ButtonPosition = "left" | "center" | "right";
diff --git a/frontend/src/components/common/FloatingButton/FloatingButton.styled.ts b/frontend/src/components/common/FloatingButton/FloatingButton.styled.ts
@@ -18,9 +18,8 @@ export const FloatingButtonContainer = styled.div`
 export const SubButtonContainer = styled.div<{ $isOpen: boolean }>`
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
 
-  width: 15rem;
+  width: 16rem;
   padding: ${({ theme }) => theme.spacing.l} ${({ theme }) => theme.spacing.m};
   border-radius: ${({ theme }) => theme.spacing.s};
 
@@ -36,6 +35,13 @@ export const SubButtonContainer = styled.div<{ $isOpen: boolean }>`
   `}
 `;
 
+export const SubButton = styled.button`
+  display: flex;
+  justify-content: flex-start;
+
+  width: 100%;
+`;
+
 export const MainButtonWrapper = styled.div<{ $isOpen: boolean }>`
   display: flex;
   justify-content: center;

diff --git a/frontend/src/components/common/FloatingButton/FloatingButton.tsx b/frontend/src/components/common/FloatingButton/FloatingButton.tsx
@@ -30,16 +30,16 @@ const FloatingButton = () => {
     <S.FloatingButtonContainer>
       {isOpen && <Modal isOpen={isOpen} onCloseModal={handleToggleButton} />}
       <S.SubButtonContainer $isOpen={isOpen}>
-        <button onClick={handleClickTravelPlanRegister}>
+        <S.SubButton onClick={handleClickTravelPlanRegister}>
           <Text textType="body" css={S.subButtonTextStyle}>
             ✈️ 여행 계획 작성
           </Text>
-        </button>
-        <button onClick={handleClickTravelogueRegister}>
+        </S.SubButton>
+        <S.SubButton onClick={handleClickTravelogueRegister}>
           <Text textType="body" css={S.subButtonTextStyle}>
             📝 여행기 작성
           </Text>
-        </button>
+        </S.SubButton>
       </S.SubButtonContainer>
 
       <S.MainButtonWrapper onClick={handleToggleButton} $isOpen={isOpen}>

diff --git a/frontend/src/components/common/ModalBottomSheet/ModalBottomSheet.stories.tsx b/frontend/src/components/common/ModalBottomSheet/ModalBottomSheet.stories.tsx
@@ -25,6 +25,7 @@ export const Default: Story = {
     secondaryButtonLabel: "취소",
     primaryButtonLabel: "확인",
     isOpen: true,
+    isPending: false,
     onClose: () => {},
     onConfirm: () => {},
   },

diff --git a/frontend/src/components/common/ModalBottomSheet/ModalBottomSheet.tsx b/frontend/src/components/common/ModalBottomSheet/ModalBottomSheet.tsx
@@ -1,6 +1,7 @@
 import useBottomSheet from "@hooks/useBottomSheet";
 
 import Button from "../Button/Button";
+import Spinner from "../Spinner/Spinner";
 import BackDrop from "./BackDrop/BackDrop";
 import Container from "./Container/Container";
 import Content from "./Content/Content";
@@ -11,6 +12,7 @@ export interface ModalBottomSheetProps {
   mainText: string;
   subText: string;
   isOpen: boolean;
+  isPending: boolean;
   primaryButtonLabel: string;
   secondaryButtonLabel: string;
   onClose: () => void;
@@ -21,6 +23,7 @@ const ModalBottomSheet = ({
   mainText,
   subText,
   isOpen,
+  isPending,
   primaryButtonLabel,
   secondaryButtonLabel,
   onClose,
@@ -38,8 +41,8 @@ const ModalBottomSheet = ({
           <Button variants="secondary" onClick={onClose}>
             {secondaryButtonLabel}
           </Button>
-          <Button variants="primary" onClick={onConfirm}>
-            {primaryButtonLabel}
+          <Button variants="primary" onClick={onConfirm} disabled={isPending}>
+            {isPending ? <Spinner variants="circle" size={20} /> : primaryButtonLabel}
           </Button>
         </Footer>
       </Container>

diff --git a/...c/components/pages/travelPlanDetail/TravelPlanDeleteModal/TravelPlanDeleteModal.styled.ts b/...c/components/pages/travelPlanDetail/TravelPlanDeleteModal/TravelPlanDeleteModal.styled.ts
@@ -16,10 +16,6 @@ export const modalBodyStyle = css`
   padding: "2.6rem 0";
 `;
 
-export const mainTextStyle = css`
-  font-weight: 700;
-`;
-
 export const subTextStyle = css`
   color: ${theme.colors.text.secondary};
 `;
diff --git a/...end/src/components/pages/travelPlanDetail/TravelPlanDeleteModal/TravelPlanDeleteModal.tsx b/...end/src/components/pages/travelPlanDetail/TravelPlanDeleteModal/TravelPlanDeleteModal.tsx
@@ -1,17 +1,20 @@
 import { Button, Modal, Text } from "@components/common";
+import Spinner from "@components/common/Spinner/Spinner";
 
 import { Tturi } from "@assets/svg";
 
 import * as S from "./TravelPlanDeleteModal.styled";
 
 interface TravelPlanDeleteModalProps {
   isOpen: boolean;
+  isPending: boolean;
   onCloseModal: () => void;
   onClickDeleteButton: () => void;
 }
 
 const TravelPlanDeleteModal = ({
   isOpen,
+  isPending,
   onCloseModal,
   onClickDeleteButton,
 }: TravelPlanDeleteModalProps) => {
@@ -21,17 +24,15 @@ const TravelPlanDeleteModal = ({
       <Modal.Body direction="column" css={S.modalBodyStyle}>
         <Tturi />
         <S.TextContainer>
-          <Text textType="body" css={S.mainTextStyle}>
-            여행 계획을 삭제할까요?
-          </Text>
+          <Text textType="bodyBold">여행 계획을 삭제할까요?</Text>
           <Text textType="detail" css={S.subTextStyle}>
             삭제한 후에는 여행 계획을 다시 복구할 수 없어요.
           </Text>
         </S.TextContainer>
       </Modal.Body>
       <Modal.Footer>
-        <Button variants="primary" onClick={onClickDeleteButton}>
-          삭제
+        <Button variants="primary" onClick={onClickDeleteButton} disabled={isPending}>
+          {isPending ? <Spinner variants="circle" size={20} /> : "삭제"}
         </Button>
       </Modal.Footer>
     </Modal>

diff --git a/frontend/src/components/pages/travelPlanDetail/TravelPlanDetailPage.tsx b/frontend/src/components/pages/travelPlanDetail/TravelPlanDetailPage.tsx
@@ -51,7 +51,7 @@ const TravelPlanDetailPage = () => {
       ? `${data?.days.length - 1}박 ${data?.days.length}일`
       : "당일치기";
 
-  const { mutate: mutateDeleteTravelPlan } = useDeleteTravelPlan();
+  const { mutate: mutateDeleteTravelPlan, isPending: isDeletingPending } = useDeleteTravelPlan();
 
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
@@ -177,6 +177,7 @@ const TravelPlanDetailPage = () => {
       {isDeleteModalOpen && (
         <TravelPlanDeleteModal
           isOpen={isDeleteModalOpen}
+          isPending={isDeletingPending}
           onCloseModal={handleToggleDeleteModal}
           onClickDeleteButton={handleClickDeleteButton}
         />

diff --git a/frontend/src/components/pages/travelPlanEdit/TravelPlanEditPage.tsx b/frontend/src/components/pages/travelPlanEdit/TravelPlanEditPage.tsx
@@ -73,7 +73,11 @@ const TravelPlanEditPage = () => {
     setIsOpen(false);
   };
 
-  const { mutate: mutateTravelPlanEdit, isPaused } = usePutTravelPlan();
+  const {
+    mutate: mutateTravelPlanEdit,
+    isPaused,
+    isPending: isPuttingTravelPlanPending,
+  } = usePutTravelPlan();
 
   const handleEditTravelPlan = () => {
     const formattedStartDate = extractUTCDate(startDate);
@@ -224,6 +228,7 @@ const TravelPlanEditPage = () => {
 
       <ModalBottomSheet
         isOpen={isOpen}
+        isPending={isPuttingTravelPlanPending}
         mainText="여행 계획을 수정할까요?"
         subText="수정한 후에도 다시 여행 계획을 변경할 수 있어요."
         secondaryButtonLabel="취소"

diff --git a/frontend/src/components/pages/travelPlanRegister/TravelPlanRegisterPage.tsx b/frontend/src/components/pages/travelPlanRegister/TravelPlanRegisterPage.tsx
@@ -70,7 +70,8 @@ const TravelPlanRegisterPage = () => {
 
   const navigate = useNavigate();
 
-  const { mutate: mutateTravelPlanRegister } = usePostTravelPlan();
+  const { mutate: mutateTravelPlanRegister, isPending: isPostingTravelPlanPending } =
+    usePostTravelPlan();
 
   const handleRegisterTravelPlan = () => {
     const formattedStartDate = extractUTCDate(startDate);
@@ -212,6 +213,7 @@ const TravelPlanRegisterPage = () => {
 
       <ModalBottomSheet
         isOpen={isOpen}
+        isPending={isPostingTravelPlanPending}
         mainText="여행 계획을 등록할까요?"
         subText="등록한 후에도 다시 여행 계획을 수정할 수 있어요."
         secondaryButtonLabel="취소"

diff --git a/...c/components/pages/travelogueDetail/TravelogueDeleteModal/TravelogueDeleteModal.styled.ts b/...c/components/pages/travelogueDetail/TravelogueDeleteModal/TravelogueDeleteModal.styled.ts
@@ -19,9 +19,3 @@ export const modalBodyStyle = css`
 export const subTextStyle = css`
   color: ${theme.colors.text.secondary};
 `;
-
-export const buttonStyle = css`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`;
diff --git a/...end/src/components/pages/travelogueDetail/TravelogueDeleteModal/TravelogueDeleteModal.tsx b/...end/src/components/pages/travelogueDetail/TravelogueDeleteModal/TravelogueDeleteModal.tsx
@@ -31,12 +31,7 @@ const TravelogueDeleteModal = ({
         </S.TextContainer>
       </Modal.Body>
       <Modal.Footer>
-        <Button
-          variants="primary"
-          onClick={onClickDeleteButton}
-          disabled={isPending}
-          css={S.buttonStyle}
-        >
+        <Button variants="primary" onClick={onClickDeleteButton} disabled={isPending}>
           {isPending ? <Spinner variants="circle" size={20} /> : "삭제"}
         </Button>
       </Modal.Footer>

diff --git a/frontend/src/components/pages/travelogueEdit/TravelogueEditPage.tsx b/frontend/src/components/pages/travelogueEdit/TravelogueEditPage.tsx
@@ -96,7 +96,8 @@ const TravelogueEditPage = () => {
     setIsOpen(false);
   };
 
-  const { mutate: mutateTravelogueEdit } = usePutTravelogue();
+  const { mutate: mutateTravelogueEdit, isPending: isPuttingTraveloguePending } =
+    usePutTravelogue();
 
   const handleEditTravelogue = () => {
     mutateTravelogueEdit(
@@ -247,6 +248,7 @@ const TravelogueEditPage = () => {
 
       <ModalBottomSheet
         isOpen={isOpen}
+        isPending={isPuttingTraveloguePending}
         mainText="여행기를 수정할까요?"
         subText="수정한 후에도 다시 여행기를 변경할 수 있어요!"
         secondaryButtonLabel="취소"

diff --git a/frontend/src/components/pages/travelogueRegister/TravelogueRegisterPage.tsx b/frontend/src/components/pages/travelogueRegister/TravelogueRegisterPage.tsx
@@ -95,7 +95,8 @@ const TravelogueRegisterPage = () => {
     setIsOpen(false);
   };
 
-  const { mutate: mutateRegisterTravelogue } = usePostTravelogue();
+  const { mutate: mutateRegisterTravelogue, isPending: isPostingTraveloguePending } =
+    usePostTravelogue();
 
   const handleRegisterTravelogue = () => {
     mutateRegisterTravelogue(
@@ -244,6 +245,7 @@ const TravelogueRegisterPage = () => {
 
       <ModalBottomSheet
         isOpen={isOpen}
+        isPending={isPostingTraveloguePending}
         mainText="여행기를 등록할까요?"
         subText="등록한 후에도 다시 여행기를 수정할 수 있어요!"
         secondaryButtonLabel="취소"

diff --git a/frontend/src/constants/debouncedTime.ts b/frontend/src/constants/debouncedTime.ts
@@ -1 +1 @@
-export const DEBOUNCED_TIME = 3000;
+export const DEBOUNCED_TIME = 10000;
diff --git a/frontend/src/hooks/pages/useTravelPlanDays.ts b/frontend/src/hooks/pages/useTravelPlanDays.ts
@@ -6,7 +6,19 @@ import type { TravelPlanDay, TravelPlanPlace } from "@type/domain/travelPlan";
 import type { TravelTransformPlaces } from "@type/domain/travelTransform";
 
 export const useTravelPlanDays = (days: TravelTransformPlaces[]) => {
-  const [travelPlanDays, setTravelPlanDays] = useState<TravelPlanDay[]>(days);
+  const transformedDetailData = [...days].map((day) => {
+    return {
+      ...day,
+      places: day.places.map((place) => {
+        return {
+          ...place,
+          todos: [],
+        };
+      }),
+    };
+  });
+
+  const [travelPlanDays, setTravelPlanDays] = useState<TravelPlanDay[]>(transformedDetailData);
 
   const onChangeTravelPlanDays = useCallback((newDays: TravelPlanDay[]) => {
     setTravelPlanDays(newDays);