여행 정보(이름, 날짜, 도시, 설명, 대표사진) 수정 모달 구현

frontend/src/api/trip/putTrip.ts

@@ -0,0 +1,16 @@
+import { END_POINTS } from '@constants/api';
+import { TripPutData } from '@type/trip';
+
+import { axiosInstance } from '@api/axiosInstance';
+
+export interface PutTripParams extends TripPutData {
+  tripId: number;
+}
+
+export const putTrip =
+  () =>
+  ({ tripId, ...tripInformation }: PutTripParams) => {
+    return axiosInstance.put<TripPutData>(END_POINTS.TRIP(tripId), {
+      ...tripInformation,
+    });
+  };

frontend/src/components/common/CitySearchBar/CitySearchBar.tsx

@@ -19,18 +19,19 @@ import {
 import CitySuggestion from '@components/common/CitySuggestion/CitySuggestion';
 
 interface CitySearchBarProps {
-  initialCityTags?: CityData[];
-  setCityData: (cities: CityData[]) => void;
+  initialCities?: CityData[];
+  updateCityInfo: (cities: CityData[]) => void;
+  required?: boolean;
 }
 
-const CitySearchBar = ({ initialCityTags, setCityData }: CitySearchBarProps) => {
+const CitySearchBar = ({ initialCities, updateCityInfo, required = false }: CitySearchBarProps) => {
   const [queryWord, setQueryWord] = useState('');
-  const { cityTags, addCityTag, deleteCityTag } = useCityTags(initialCityTags ?? []);
+  const { cityTags, addCityTag, deleteCityTag } = useCityTags(initialCities ?? []);
   const { isOpen: isSuggestionOpen, open: openSuggestion, close: closeSuggestion } = useOverlay();
   const inputRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
-    setCityData(cityTags);
+    updateCityInfo(cityTags);
   }, [cityTags]);
 
   const handleInputChange = (event: FormEvent<HTMLInputElement>) => {
@@ -88,7 +89,7 @@ const CitySearchBar = ({ initialCityTags, setCityData }: CitySearchBarProps) =>
   return (
     <Menu closeMenu={closeSuggestion}>
       <div css={containerStyling} onClick={focusInput}>
-        <Label>방문 도시</Label>
+        <Label required={required}>방문 도시</Label>
         <div css={wrapperStyling}>
           <SearchPinIcon aria-label="지도표시 아이콘" css={searchPinIconStyling} />
           <div css={tagListStyling}>

frontend/src/components/common/DateInput/DateInput.tsx

@@ -13,19 +13,21 @@ import {
 
 interface DateInputProps {
   initialDateRange?: DateRangeData;
-  setDateData: (dateRange: DateRangeData) => void;
+  updateDateInfo: (dateRange: DateRangeData) => void;
+  required?: boolean;
 }
 
 const DateInput = ({
   initialDateRange = { start: null, end: null },
-  setDateData,
+  updateDateInfo,
+  required = false,
 }: DateInputProps) => {
   const [inputValue, setInputValue] = useState(dateRangeToString(initialDateRange));
   const [selectedDateRange, setSelectedDateRange] = useState(initialDateRange);
   const { isOpen: isCalendarOpen, close: closeCalendar, toggle: toggleCalendar } = useOverlay();
 
   useEffect(() => {
-    setDateData(selectedDateRange);
+    updateDateInfo(selectedDateRange);
   }, [selectedDateRange]);
 
   const handleDateClick = (dateRange: DateRangeData) => {
@@ -37,7 +39,7 @@ const DateInput = ({
 
   return (
     <Flex styles={{ direction: 'column', width: '400px', margin: '0 auto', align: 'flex-start' }}>
-      <Label>방문 기간</Label>
+      <Label required={required}>방문 기간</Label>
       <Menu closeMenu={closeCalendar} css={containerStyling}>
         <Box onClick={toggleCalendar} css={getInputStyling(isCalendarOpen)}>
           <Input

frontend/src/components/common/TripInformation/TripInformation.tsx

@@ -1,6 +1,6 @@
 import DefaultThumbnail from '@assets/png/trip-information_default-thumbnail.png';
 import type { TripData } from '@type/trip';
-import { Badge, Box, Button, Flex, Heading, Text, Theme } from 'hang-log-design-system';
+import { Badge, Box, Button, Flex, Heading, Text, Theme, useOverlay } from 'hang-log-design-system';
 
 import { formatDate } from '@utils/formatter';
 
@@ -12,42 +12,48 @@ import {
   sectionStyling,
   titleStyling,
 } from '@components/common/TripInformation/TripInformation.style';
+import TripInfoEditModal from '@components/trip/TripInfoEditModal/TripInfoEditModal';
 
 type TripInformationProps = Omit<TripData, 'dayLogs'>;
 
 const TripInformation = ({ ...information }: TripInformationProps) => {
+  const { isOpen: isEditModalOpen, close: closeEditModal, open: openEditModal } = useOverlay();
+
   return (
-    <section css={sectionStyling}>
-      <Box css={imageWrapperStyling}>
-        <div />
-        <img src={information.imageUrl ?? DefaultThumbnail} alt="여행 대표 이미지" />
-      </Box>
-      <Box>
-        <Flex styles={{ gap: Theme.spacer.spacing1 }}>
-          {information.cities.map(({ id, name }) => (
-            <Badge key={id}>{name}</Badge>
-          ))}
-        </Flex>
-        <Heading css={titleStyling} size="large">
-          {information.title}
-        </Heading>
-        <Text>
-          {formatDate(information.startDate)} - {formatDate(information.endDate)}
-        </Text>
-        <Text css={descriptionStyling} size="small">
-          {information.description}
-        </Text>
-      </Box>
-      <Box css={buttonContainerStyling}>
-        {/* 수정 모드일 때만 보인다 */}
-        <Button css={editButtonStyling} variant="outline" size="small">
-          여행 정보 수정
-        </Button>
-        <Button variant="primary" size="small">
-          저장
-        </Button>
-      </Box>
-    </section>
+    <>
+      <section css={sectionStyling}>
+        <Box css={imageWrapperStyling}>
+          <div />
+          <img src={information.imageUrl ?? DefaultThumbnail} alt="여행 대표 이미지" />
+        </Box>
+        <Box>
+          <Flex styles={{ gap: Theme.spacer.spacing1 }}>
+            {information.cities.map(({ id, name }) => (
+              <Badge key={id}>{name}</Badge>
+            ))}
+          </Flex>
+          <Heading css={titleStyling} size="large">
+            {information.title}
+          </Heading>
+          <Text>
+            {formatDate(information.startDate)} - {formatDate(information.endDate)}
+          </Text>
+          <Text css={descriptionStyling} size="small">
+            {information.description}
+          </Text>
+        </Box>
+        <Box css={buttonContainerStyling}>
+          {/* 수정 모드일 때만 보인다 */}
+          <Button onClick={openEditModal} css={editButtonStyling} variant="outline" size="small">
+            여행 정보 수정
+          </Button>
+          <Button variant="primary" size="small">
+            저장
+          </Button>
+        </Box>
+      </section>
+      <TripInfoEditModal isOpen={isEditModalOpen} onClose={closeEditModal} {...information} />
+    </>
   );
 };
 

frontend/src/components/newTrip/NewTripForm/NewTripForm.tsx

@@ -1,24 +1,24 @@
+import { useCityDateForm } from '@/hooks/common/useCityDateForm';
 import { PATH } from '@constants/path';
 import { Button } from 'hang-log-design-system';
 import type { FormEvent } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { useNewTripMutation } from '@hooks/api/useNewTripMutation';
-import { useNewTripForm } from '@hooks/newTrip/useNewTripForm';
 
 import CitySearchBar from '@components/common/CitySearchBar/CitySearchBar';
 import DateInput from '@components/common/DateInput/DateInput';
 import { formStyling } from '@components/newTrip/NewTripForm/NewTripForm.style';
 
-const NewTripForm = () => {
-  const { newTripData, setCityData, setDateData, isAllInputFilled } = useNewTripForm();
+const TripAddForm = () => {
+  const { cityDateInfo, updateCityInfo, updateDateInfo, isCityDateValid } = useCityDateForm();
   const newTripMutation = useNewTripMutation();
   const navigate = useNavigate();
 
   const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
-    newTripMutation.mutate(newTripData, {
+    newTripMutation.mutate(cityDateInfo, {
       onSuccess: goToTripEditPageWithId,
     });
   };
@@ -30,13 +30,13 @@ const NewTripForm = () => {
 
   return (
     <form css={formStyling} onSubmit={handleSubmit}>
-      <CitySearchBar setCityData={setCityData} />
-      <DateInput setDateData={setDateData} />
-      <Button variant="primary" disabled={!isAllInputFilled}>
+      <CitySearchBar updateCityInfo={updateCityInfo} />
+      <DateInput updateDateInfo={updateDateInfo} />
+      <Button variant="primary" disabled={!isCityDateValid}>
         기록하기
       </Button>
     </form>
   );
 };
 
-export default NewTripForm;
+export default TripAddForm;

frontend/src/components/trip/TripInfoEditModal/TripInfoEditModal.style.ts

@@ -0,0 +1,21 @@
+import { css } from '@emotion/react';
+import { Theme } from 'hang-log-design-system';
+
+export const formStyling = css({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: Theme.spacer.spacing3,
+
+  '> button': {
+    width: '400px',
+  },
+});
+
+export const cityInputErrorTextStyling = css({
+  lineHeight: 0,
+  color: Theme.color.red200,
+});
+
+export const dateInputTextStyling = css({
+  maxWidth: '400px',
+});

frontend/src/components/trip/TripInfoEditModal/TripInfoEditModal.tsx

@@ -0,0 +1,88 @@
+import { useTripInfoForm } from '@/hooks/trip/useTripInfoForm';
+import type { TripData, TripPutData } from '@type/trip';
+import {
+  Button,
+  Flex,
+  ImageUploadInput,
+  Input,
+  Modal,
+  SupportingText,
+} from 'hang-log-design-system';
+import type { ChangeEvent, FormEvent } from 'react';
+
+import CitySearchBar from '@components/common/CitySearchBar/CitySearchBar';
+import DateInput from '@components/common/DateInput/DateInput';
+import {
+  cityInputErrorTextStyling,
+  dateInputTextStyling,
+  formStyling,
+} from '@components/trip/TripInfoEditModal/TripInfoEditModal.style';
+
+interface TripInfoEditModalProps extends Omit<TripData, 'dayLogs'> {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+const TripInfoEditModal = ({ isOpen, onClose, ...information }: TripInfoEditModalProps) => {
+  const {
+    tripInfo,
+    isCityInputError,
+    updateInputValue,
+    updateCityInfo,
+    updateDateInfo,
+    handleSubmit,
+  } = useTripInfoForm(information, onClose);
+
+  const handleChangeValue = (key: keyof TripPutData) => (e: ChangeEvent<HTMLInputElement>) => {
+    updateInputValue(key, e.currentTarget.value);
+  };
+
+  return (
+    <Modal isOpen={isOpen} closeModal={onClose} hasCloseButton>
+      <form onSubmit={handleSubmit} css={formStyling}>
+        <CitySearchBar
+          required
+          initialCities={information.cities}
+          updateCityInfo={updateCityInfo}
+        />
+        {isCityInputError && (
+          <SupportingText css={cityInputErrorTextStyling}>
+            방문 도시는 최소 한개 이상 선택해야 합니다
+          </SupportingText>
+        )}
+        <DateInput
+          required
+          initialDateRange={{ start: tripInfo.startDate, end: tripInfo.endDate }}
+          updateDateInfo={updateDateInfo}
+        />
+        <SupportingText css={dateInputTextStyling}>
+          ⚠︎ 방문 기간을 단축하면 마지막 날짜부터 작성한 기록들이 <br />
+          삭제됩니다.
+        </SupportingText>
+        <Input
+          label="여행 제목"
+          value={tripInfo.title}
+          required
+          onChange={handleChangeValue('title')}
+        />
+        <Input
+          label="여행 설명"
+          value={tripInfo.description ?? ''}
+          onChange={handleChangeValue('description')}
+        />
+        <ImageUploadInput
+          label="대표 이미지 업로드"
+          imageUrls={tripInfo.imageUrl === null ? null : [tripInfo.imageUrl]}
+          imageAltText="여행 대표 이미지 업로드"
+          maxUploadCount={1}
+          onRemove={() => {}}
+        />
+        <Button variant="primary" type="submit">
+          여행 정보 수정
+        </Button>
+      </form>
+    </Modal>
+  );
+};
+
+export default TripInfoEditModal;

frontend/src/hooks/api/useEditTripMutation.ts

@@ -0,0 +1,19 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import { putTrip } from '@api/trip/putTrip';
+
+export const useEditTripMutation = () => {
+  const queryClient = useQueryClient();
+
+  const tripMutation = useMutation(putTrip(), {
+    onSuccess: () => {
+      // 여행 정보 수정 성공시 Trip 정보 재요청
+      queryClient.invalidateQueries({ queryKey: ['trip'] });
+    },
+    onError: (err, _, context) => {
+      alert('오류가 발생했습니다. 잠시 후 다시 시도해주세요.');
+    },
+  });
+
+  return tripMutation;
+};

frontend/src/hooks/api/useNewTripMutation.ts

@@ -1,8 +1,7 @@
+import { postNewTrip } from '@/api/trips/postNewTrip';
 import { NETWORK } from '@constants/api';
 import { useMutation } from '@tanstack/react-query';
 
-import { postNewTrip } from '@api/trips/newTrip';
-
 export const useNewTripMutation = () => {
   const newTripMutation = useMutation(postNewTrip(), {
     onError: (err, _, context) => {

frontend/src/hooks/common/useCityDateForm.ts

@@ -0,0 +1,38 @@
+import type { CityData } from '@type/city';
+import type { DateRangeData, NewTripData } from '@type/trips';
+import { useEffect, useState } from 'react';
+
+const defaultTripData = {
+  startDate: null,
+  endDate: null,
+  cityIds: [],
+};
+
+export const useCityDateForm = (initialTripData?: NewTripData) => {
+  const [cityDateInfo, setCityDateInfo] = useState<NewTripData>(initialTripData ?? defaultTripData);
+  const [isCityDateValid, setIsCityDateValid] = useState(false);
+
+  useEffect(() => {
+    validateInputs();
+  }, [cityDateInfo]);
+
+  const updateCityInfo = (cities: CityData[]) => {
+    const cityIds = cities.map((city) => city.id);
+
+    setCityDateInfo((prev) => ({ ...prev, cityIds }));
+  };
+
+  const updateDateInfo = (dateRange: DateRangeData) => {
+    const { start: startDate, end: endDate } = dateRange;
+
+    setCityDateInfo((prev) => ({ ...prev, startDate, endDate }));
+  };
+
+  const validateInputs = () => {
+    const { startDate, endDate, cityIds } = cityDateInfo;
+
+    setIsCityDateValid(!!startDate && !!endDate && !!cityIds.length);
+  };
+
+  return { cityDateInfo, updateCityInfo, updateDateInfo, isCityDateValid };
+};