[Feature] - touroot v1.2.0

frontend/__tests__/utils/createInfiniteTravelogueHook.tsx

@@ -17,6 +17,14 @@ export const wrapper = ({ children }: React.PropsWithChildren) => (
 );
 
 export const createInfiniteTravelogueHook = () =>
-  renderHook(() => useInfiniteTravelogues([]), {
-    wrapper,
-  });
+  renderHook(
+    () =>
+      useInfiniteTravelogues({
+        selectedTagIDs: [],
+        selectedSortingOption: "likeCount",
+        selectedTravelPeriodOption: "",
+      }),
+    {
+      wrapper,
+    },
+  );

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "2024-touroot",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "to your route, 투룻!",
   "repository": "https://github.com/woowacourse-teams/2024-touroot",
   "scripts": {

frontend/src/apis/interceptor.ts

@@ -12,15 +12,17 @@ import { HTTP_STATUS_CODE_MAP } from "@constants/httpStatusCode";
 import { ROUTE_PATHS_MAP } from "@constants/route";
 import { STORAGE_KEYS_MAP } from "@constants/storage";
 
+let isRedirecting = false;
+
 export const checkAccessToken = (
   config: InternalAxiosRequestConfig,
   accessToken: string | null,
 ) => {
-  if (!accessToken) {
+  if (!accessToken && !isRedirecting) {
+    isRedirecting = true;
     alert(ERROR_MESSAGE_MAP.api.login);
     window.location.href = ROUTE_PATHS_MAP.login;
   }
-
   return config;
 };
 

frontend/src/components/common/Chip/Chip.styled.ts

@@ -1,34 +1,44 @@
-import { css } from "@emotion/react";
+import { css, keyframes } from "@emotion/react";
 import styled from "@emotion/styled";
 
 import theme from "@styles/theme";
 import { PRIMITIVE_COLORS } from "@styles/tokens";
 
 const getButtonColorStyling = (isSelected: boolean) => {
-  if (isSelected) {
-    return css`
-      border: 0.1rem solid ${PRIMITIVE_COLORS.blue[200]};
+  return css`
+    border: 0.1rem solid ${isSelected ? PRIMITIVE_COLORS.blue[200] : theme.colors.border};
 
-      background-color: ${PRIMITIVE_COLORS.blue[50]};
+    background-color: ${isSelected ? PRIMITIVE_COLORS.blue[50] : PRIMITIVE_COLORS.white};
 
-      color: ${theme.colors.primary};
-    `;
-  } else {
-    return css`
-      border: 0.1rem solid ${theme.colors.border};
+    color: ${isSelected ? theme.colors.primary : theme.colors.text.secondary};
+  `;
+};
 
-      background-color: ${PRIMITIVE_COLORS.white};
+const fadeInMove = keyframes`
+  from {
+    opacity: 0;
+    transform: translateY(1rem);
+  }
 
-      color: ${theme.colors.text.secondary};
-    `;
+  to {
+    opacity: 1;
+    transform: translateY(0);
   }
-};
+`;
+
+export const Layout = styled.li<{ $isSelected: boolean; $index?: number }>`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: ${({ theme }) => theme.spacing.xs};
 
-export const Chip = styled.li<{ $isSelected: boolean }>`
-  padding: 0.8rem 1.6rem;
+  padding: ${({ theme }) => theme.spacing.s} ${({ theme }) => theme.spacing.m};
   border-radius: 1rem;
 
   line-height: 1;
 
-  ${({ $isSelected }) => getButtonColorStyling($isSelected)};
+  ${({ $isSelected }) => getButtonColorStyling($isSelected)}
+
+  animation: ${fadeInMove} 0.3s ease-out both;
+  animation-delay: ${({ $index }) => `${($index ?? 0) * 50}ms`};
 `;

frontend/src/components/common/Chip/Chip.tsx

@@ -6,23 +6,22 @@ import Text from "../Text/Text";
 import * as S from "./Chip.styled";
 
 interface ChipProps extends ComponentPropsWithoutRef<"li"> {
-  isSelected?: boolean;
   label: string;
+  isSelected?: boolean;
+  index?: number;
 }
 
-const Chip = ({ isSelected = false, label, ...props }: ChipProps) => {
+const Chip = ({ label, isSelected = false, index, children, ...props }: ChipProps) => {
   return (
-    <S.Chip
+    <S.Layout
       $isSelected={isSelected}
+      $index={index}
       data-cy={isSelected ? `selected-${CYPRESS_DATA_MAP.chip}` : CYPRESS_DATA_MAP.chip}
       {...props}
     >
-      {isSelected ? (
-        <Text textType="detailBold">{label}</Text>
-      ) : (
-        <Text textType="detail">{label}</Text>
-      )}
-    </S.Chip>
+      <Text textType={isSelected ? "detailBold" : "detail"}>{label}</Text>
+      {children}
+    </S.Layout>
   );
 };
 

frontend/src/components/common/FloatingButton/FloatingButton.styled.ts

@@ -10,28 +10,38 @@ export const FloatingButtonContainer = styled.div`
   position: fixed;
   right: max(0vw + 2rem, calc(50vw - 22rem));
   bottom: 2rem;
-  z-index: ${({ theme }) => theme.zIndex.floatingButton};
+  z-index: ${({ theme }) => theme.zIndex.floating};
+`;
+
+export const BackdropLayout = styled.div`
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  inset: 0;
 
-  gap: ${({ theme }) => theme.spacing.s};
+  background-color: ${({ theme }) => theme.colors.dimmed};
+  cursor: pointer;
 `;
 
 export const SubButtonContainer = styled.div<{ $isOpen: boolean }>`
   display: flex;
   flex-direction: column;
+  position: absolute;
+  bottom: 100%;
+  gap: ${({ theme }) => theme.spacing.l};
 
   width: 16rem;
   padding: ${({ theme }) => theme.spacing.l} ${({ theme }) => theme.spacing.m};
   border-radius: ${({ theme }) => theme.spacing.s};
 
   background-color: ${PRIMITIVE_COLORS.gray[700]};
-  gap: ${({ theme }) => theme.spacing.l};
 
   transition: all 0.3s ease-out;
 
   ${({ $isOpen }) => css`
     opacity: ${$isOpen ? 1 : 0};
-    transform: translateY(${$isOpen ? 0 : 2}rem);
-    pointer-events: ${$isOpen ? "auto" : "none"};
+    visibility: ${$isOpen ? "visible" : "hidden"};
+    transform: translateY(${$isOpen ? -0.8 : 2}rem);
   `}
 `;
 

frontend/src/components/common/FloatingButton/FloatingButton.tsx

@@ -1,12 +1,13 @@
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 
+import useModalControl from "@hooks/useModalControl";
+
 import { ROUTE_PATHS_MAP } from "@constants/route";
 
 import { PRIMITIVE_COLORS } from "@styles/tokens";
 
 import IconButton from "../IconButton/IconButton";
-import Modal from "../Modal/Modal";
 import Text from "../Text/Text";
 import * as S from "./FloatingButton.styled";
 
@@ -26,9 +27,11 @@ const FloatingButton = () => {
     navigate(ROUTE_PATHS_MAP.travelPlanRegister);
   };
 
+  useModalControl(isOpen, handleToggleButton);
+
   return (
     <S.FloatingButtonContainer>
-      {isOpen && <Modal isOpen={isOpen} onCloseModal={handleToggleButton} />}
+      {isOpen && <S.BackdropLayout onClick={handleToggleButton} />}
       <S.SubButtonContainer $isOpen={isOpen}>
         <S.SubButton onClick={handleClickTravelPlanRegister}>
           <Text textType="body" css={S.subButtonTextStyle}>

frontend/src/components/common/GoogleMapView/GoogleMapView.tsx

@@ -26,7 +26,7 @@ interface GoogleMapViewProps {
 const GoogleMapView = ({ places }: GoogleMapViewProps) => {
   const center = calculateCenter(places);
 
-  const { onLoad, onUnmount, onBoundsChanged } = useGoogleMap(places);
+  const { onLoad, onUnmount } = useGoogleMap(places);
 
   /**
    * 컴포넌트 내부에 위치시키지 않으면 "Uncaught TypeError: Cannot read properties of undefined (reading 'maps')"
@@ -46,7 +46,6 @@ const GoogleMapView = ({ places }: GoogleMapViewProps) => {
         center={center}
         onLoad={onLoad}
         onUnmount={onUnmount}
-        onBoundsChanged={onBoundsChanged}
       >
         {places.map((position, index) => (
           <MarkerF

frontend/src/components/common/Header/Header.stories.tsx

@@ -15,7 +15,7 @@ const rightContentOptions = {
       <S.FormWrapper>
         <Input
           autoFocus
-          placeholder="검색해주세요"
+          placeholder="제목 또는 작성자명으로 검색해 주세요."
           style={{ height: "4rem", marginBottom: "-1rem" }}
         />
         <S.ButtonContainer>

frontend/src/components/common/Header/Header.tsx

@@ -1,5 +1,6 @@
 import { useLocation, useNavigate } from "react-router-dom";
 
+import usePreviousPage from "@hooks/usePreviousPage";
 import useUser from "@hooks/useUser";
 
 import { ROUTE_PATHS_MAP } from "@constants/route";
@@ -44,6 +45,7 @@ const Header = ({
   };
 
   const handleClickMyPage = () => navigate(ROUTE_PATHS_MAP.my);
+  const goBack = usePreviousPage();
 
   return (
     <Drawer>
@@ -52,11 +54,7 @@ const Header = ({
           <IconButton
             color={isLogoUsed ? theme.colors.primary : PRIMITIVE_COLORS.black}
             iconType={isLogoUsed ? "korean-logo" : "back-icon"}
-            onClick={
-              isLogoUsed
-                ? () => navigate(ROUTE_PATHS_MAP.root)
-                : () => navigate(ROUTE_PATHS_MAP.back)
-            }
+            onClick={isLogoUsed ? () => navigate(ROUTE_PATHS_MAP.root) : () => goBack()}
           />
         </S.LeftWrapper>
 

frontend/src/components/common/Header/SearchHeader/SearchHeader.tsx

@@ -40,7 +40,7 @@ const SearchHeader = () => {
   const handleClickSearchButton = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     if (keyword.trim().length < MIN_KEYWORD_LENGTH) {
-      alert(`${MIN_KEYWORD_LENGTH}글자 이상 검색해주세요.`);
+      alert(`${MIN_KEYWORD_LENGTH}글자 이상 검색해 주세요.`);
       setKeyword(keyword.trim());
     } else {
       navigate(ROUTE_PATHS_MAP.search(keyword));
@@ -72,7 +72,7 @@ const SearchHeader = () => {
               }
               autoFocus
               maxLength={20}
-              placeholder="검색해주세요"
+              placeholder="제목 또는 작성자명으로 검색해 주세요."
               css={css`
                 height: 4rem;
                 padding-right: 7.8rem;

frontend/src/components/pages/travelPlanDetail/TravelPlanDeleteModal/TravelPlanDeleteModal.styled.ts → frontend/src/components/common/Modal/DeleteModal/DeleteModal.styled.ts

@@ -13,7 +13,6 @@ export const TextContainer = styled.div`
 
 export const modalBodyStyle = css`
   gap: ${theme.spacing.m};
-  padding: "2.6rem 0";
 `;
 
 export const subTextStyle = css`

frontend/src/components/common/Modal/DeleteModal/DeleteModal.tsx

@@ -0,0 +1,52 @@
+import { Button, IconButton, Modal, Spinner, Text } from "@components/common";
+
+import { Tturi } from "@assets/svg";
+
+import * as S from "./DeleteModal.styled";
+
+type TravelContent = "travelogue" | "travelPlan";
+
+interface DeleteModalProps {
+  isOpen: boolean;
+  isPending: boolean;
+  travelContent: TravelContent;
+  onCloseModal: () => void;
+  onClickDeleteButton: () => void;
+}
+
+const DeleteModal = ({
+  isOpen,
+  isPending,
+  travelContent,
+  onCloseModal,
+  onClickDeleteButton,
+}: DeleteModalProps) => {
+  const travelContentLabel = travelContent === "travelogue" ? "여행기를" : "여행 계획을";
+
+  const MAIN_TEXT = `${travelContentLabel} 삭제할까요?`;
+  const SUB_TEXT = `삭제한 후에는 ${travelContentLabel} 다시 복구할 수 없어요.`;
+
+  return (
+    <Modal isOpen={isOpen} onCloseModal={onCloseModal} boxLayoutGap="l">
+      <Modal.Header>
+        <IconButton onClick={onCloseModal} size="12" iconType="x-icon" />
+      </Modal.Header>
+      <Modal.Body direction="column" css={S.modalBodyStyle}>
+        <Tturi />
+        <S.TextContainer>
+          <Text textType="bodyBold">{MAIN_TEXT}</Text>
+          <Text textType="detail" css={S.subTextStyle}>
+            {SUB_TEXT}
+          </Text>
+        </S.TextContainer>
+      </Modal.Body>
+      <Modal.Footer>
+        <Button variants="primary" onClick={onClickDeleteButton} disabled={isPending}>
+          {isPending ? <Spinner variants="circle" size={20} /> : "삭제"}
+        </Button>
+      </Modal.Footer>
+    </Modal>
+  );
+};
+
+export default DeleteModal;

frontend/src/components/pages/travelogueDetail/TravelogueDeleteModal/TravelogueDeleteModal.styled.ts → frontend/src/components/common/Modal/EditRegisterModalBottomSheet/EditRegisterModalBottomSheet.styled.ts

@@ -11,9 +11,18 @@ export const TextContainer = styled.div`
   align-items: center;
 `;
 
+export const HandleBar = styled.div`
+  width: 5.4rem;
+  height: 0.3rem;
+  border-radius: 4px;
+
+  background-color: ${({ theme }) => theme.colors.border};
+
+  cursor: pointer;
+`;
+
 export const modalBodyStyle = css`
   gap: ${theme.spacing.m};
-  padding: 2.6rem 0;
 `;
 
 export const subTextStyle = css`