[FE] 바뀐 포스트 api 의 포맷에 맞게 로직을 수정한다.

frontend/src/apis/checklist.ts

@@ -30,7 +30,7 @@ export const getChecklists = async () => {
 export const postChecklist = async (checklist: ChecklistPostForm) => {
   checklist.room.structure = checklist.room.structure === 'NONE' ? undefined : checklist.room.structure;
   checklist.room = mapObjUndefinedToNull(checklist.room);
-  const response = await fetcher.post({ url: BASE_URL + ENDPOINT.CHECKLISTS, body: checklist });
+  const response = await fetcher.post({ url: BASE_URL + ENDPOINT.CHECKLISTS_V1, body: checklist });
   return response;
 };
 

frontend/src/apis/url.ts

@@ -6,6 +6,7 @@ export const BASE_URL = API_URL;
 export const ENDPOINT = {
   // checklist
   CHECKLISTS: '/checklists',
+  CHECKLISTS_V1: '/v1/checklists',
   CHECKLIST_QUESTION: '/checklists/questions',
   CHECKLIST_ALL_QUESTION: '/custom-checklist/all',
   CHECKLIST_CUSTOM: '/custom-checklist',
@@ -23,5 +24,5 @@ export const ENDPOINT = {
   LOGOUT: '/oauth/logout',
   USER_INFO: '/user/me',
   //subway
-  SUBWAY: (position: Position) => `/stations/nearest?latitude=${position.lat}&longitude=${position.lon}`,
+  SUBWAY: (position: Position) => `/stations/nearest?latitude=${position.latitude}&longitude=${position.longitude}`,
 };

frontend/src/components/NewChecklist/AddressModal/RealTimeAddressModal.tsx

@@ -14,7 +14,7 @@ import { title4 } from '@/styles/common';
 import { Position } from '@/types/address';
 
 const RealTimeAddressModal = () => {
-  const DEFAULT_POSITION = { lat: 0, lon: 0 };
+  const DEFAULT_POSITION = { latitude: 0, longitude: 0 };
 
   const roomInfoUnvalidatedActions = useStore(roomInfoNonValidatedStore, state => state.actions);
 
@@ -28,9 +28,10 @@ const RealTimeAddressModal = () => {
   const { searchSubwayStationsByPosition } = useRoomInfoNonValidated();
 
   const handleSubmitAddress = () => {
-    if (position.lat && position.lon) {
+    if (position.latitude && position.longitude) {
       roomInfoUnvalidatedActions.set('address', currentAddress);
       roomInfoUnvalidatedActions.set('buildingName', currentBuildingName);
+      roomInfoUnvalidatedActions.set('position', position);
 
       searchSubwayStationsByPosition(position);
       closeModal();

frontend/src/components/_common/Map/AddressMap.tsx

@@ -23,7 +23,7 @@ const AddressMap = ({ location }: { location: string }) => {
       kakao.maps.load(() => {
         if (!mapContainerRef.current) return;
         const mapOption = {
-          center: new kakao.maps.LatLng(DEFAULT_POSITION.lat, DEFAULT_POSITION.lon),
+          center: new kakao.maps.LatLng(DEFAULT_POSITION.latitude, DEFAULT_POSITION.longitude),
           level: 3,
         };
         // 지도 생성

frontend/src/components/_common/Map/RealTimeMap.tsx

@@ -44,7 +44,7 @@ const RealTimeMap = ({
       mapRef.current = map;
 
       /*마커 생성*/
-      const marker = createMarker(kakao, map, new kakao.maps.LatLng(position.lat, position.lon));
+      const marker = createMarker(kakao, map, new kakao.maps.LatLng(position.latitude, position.longitude));
       markerRef.current = marker;
 
       /*인포윈도우 생성*/
@@ -55,7 +55,7 @@ const RealTimeMap = ({
       kakao.maps.event.addListener(map, 'click', (mouseEvent: any) => {
         const latlng = mouseEvent.latLng;
         map.setCenter(latlng);
-        setPosition({ lat: latlng.getLat(), lon: latlng.getLng() });
+        setPosition({ latitude: latlng.getLat(), longitude: latlng.getLng() });
 
         if (markerRef.current) {
           markerRef.current.setPosition(latlng);
@@ -66,13 +66,13 @@ const RealTimeMap = ({
 
       /* 실시간 위치 찾기 */
       const successGeolocation = (position: GeolocationPosition) => {
-        const lat = position.coords.latitude;
-        const lon = position.coords.longitude;
+        const latitude = position.coords.latitude;
+        const longitude = position.coords.longitude;
 
-        const locPosition = new kakao.maps.LatLng(lat, lon);
+        const locPosition = new kakao.maps.LatLng(latitude, longitude);
         const message = `<span id="info-title">이 위치가 맞나요?</span>`;
 
-        setPosition({ lat, lon });
+        setPosition({ latitude, longitude });
         map.setCenter(locPosition);
         setRealTimeLocationState('success');
 
@@ -121,7 +121,7 @@ const RealTimeMap = ({
     if (markerRef.current && mapRef.current && realTimeLocationState !== 'loading') {
       const { kakao } = window as any;
 
-      const locPosition = new kakao.maps.LatLng(position.lat, position.lon);
+      const locPosition = new kakao.maps.LatLng(position.latitude, position.longitude);
       markerRef.current.setPosition(locPosition);
       mapRef.current.setCenter(locPosition);
 

frontend/src/constants/map.ts

@@ -1,4 +1,6 @@
-export const DEFAULT_POSITION = {
-  lat: 37.51524850249633,
-  lon: 127.10305696808169,
+import { Position } from '@/types/address';
+
+export const DEFAULT_POSITION: Position = {
+  latitude: 37.5061912,
+  longitude: 127.0508228,
 };

frontend/src/hooks/useMoveSection.ts

@@ -32,9 +32,10 @@ const useMoveSection = (sectionRefs: React.MutableRefObject<(HTMLElement | null)
     const sectionHeight = sectionElement.offsetHeight;
     const clickYPosition = event.clientY - sectionElement.getBoundingClientRect().top;
 
-    if (clickYPosition < sectionHeight / 2) {
+    if (clickYPosition < sectionHeight * 0.2) {
       scrollToPrevSection(index);
-    } else {
+    }
+    if (clickYPosition > sectionHeight * 0.8) {
       scrollToNextSection(index);
     }
   };

frontend/src/hooks/useMutateChecklist.ts

@@ -33,36 +33,14 @@ const useMutateChecklist = (
   // 체크리스트 답변
   const checklistCategoryQnA = useChecklistStore(state => state.checklistCategoryQnA);
 
-  //스토어에서 actions을 제외한 values 만 꺼내오는 함수
-  const roomInfoUnvalidatedValues = () => {
-    const { actions, ...values } = roomInfoUnvalidated;
-    void actions;
-    return values;
-  };
-
-  const roomInfoUnvalidatedAnswer = roomInfoUnvalidatedValues();
-
-  function removeKey<T extends object, K extends keyof T>(obj: T, key: K): Omit<T, K> {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { [key]: _, ...rest } = obj;
-    return rest;
-  }
-
-  //TODO: 나중에 해당 키 이름 수정
-  const roomInfoUnvalidatedAnswerWithoutSubway = removeKey(roomInfoUnvalidatedAnswer, 'nearSubwayStation');
-
-  const formattedUnvalidatedValues = {
-    station: roomInfoUnvalidatedAnswer.nearSubwayStation[0]?.stationName,
-    walkingTime: roomInfoUnvalidatedAnswer.nearSubwayStation[0]?.walkingTime,
-  };
-
   const postData = {
     room: {
       ...roomInfoAnswer,
-      ...{ ...roomInfoUnvalidatedAnswerWithoutSubway, ...formattedUnvalidatedValues },
+      ...roomInfoUnvalidatedActions.getFormValues(),
     },
     options: selectedOptions,
     questions: transformQuestions(checklistCategoryQnA),
+    geolocation: roomInfoUnvalidated.position,
   };
 
   const putData = {
@@ -82,7 +60,6 @@ const useMutateChecklist = (
           if (onSuccessCallback) {
             onSuccessCallback();
           }
-
           const location = res.headers.get('location');
           if (location) navigate(location);
         },

frontend/src/hooks/useRoomInfoNonValidated.ts

@@ -2,6 +2,7 @@ import { useStore } from 'zustand';
 
 import { getNearSubways } from '@/apis/subway';
 import roomInfoNonValidatedStore from '@/store/roomInfoNonValidatedStore';
+import { Position } from '@/types/address';
 /** 
 useRoomInfoNonValidated : 방 기본정보에서 인풋 형식이 아니고, 검증이 필요없는 필드에 대한
 함수를 모아놓은 훅입니다. (주소, 지하철, 관리비, 방구조)
@@ -12,9 +13,10 @@ useRoomInfoNonValidated : 방 기본정보에서 인풋 형식이 아니고, 검
 const useRoomInfoNonValidated = () => {
   const roomInfoNonValidated = useStore(roomInfoNonValidatedStore, state => state.actions);
 
-  const searchSubwayStationsByPosition = async ({ lat, lon }: { lat: number; lon: number }) => {
-    const nearSubways = await getNearSubways({ lat, lon });
-    roomInfoNonValidated.set('nearSubwayStation', nearSubways);
+  const searchSubwayStationsByPosition = async ({ latitude, longitude }: Position) => {
+    const nearSubways = await getNearSubways({ latitude, longitude });
+    roomInfoNonValidated.set('position', { latitude, longitude });
+    roomInfoNonValidated.set('nearSubwayStation', nearSubways.stations);
     return nearSubways;
   };
 
@@ -28,7 +30,7 @@ const useRoomInfoNonValidated = () => {
       geocoder.addressSearch(address, function (result: any, status: any) {
         /* 정상적으로 검색이 완료됐으면*/
         if (status === kakao.maps.services.Status.OK) {
-          return searchSubwayStationsByPosition({ lat: result[0].y, lon: result[0].x });
+          return searchSubwayStationsByPosition({ latitude: result[0].y, longitude: result[0].x });
         }
       });
     });

frontend/src/mocks/handlers/subway.ts

@@ -4,7 +4,7 @@ import { BASE_URL, ENDPOINT } from '@/apis/url';
 import { nearSubway } from '@/mocks/fixtures/subway';
 
 export const SubwayHandlers = [
-  http.get(BASE_URL + ENDPOINT.SUBWAY({ lat: 0, lon: 0 }), () => {
+  http.get(BASE_URL + ENDPOINT.SUBWAY({ latitude: 0, longitude: 0 }), () => {
     return HttpResponse.json(nearSubway, { status: 200 });
   }),
 ];

frontend/src/pages/ChecklistDetailPage.tsx

@@ -47,7 +47,7 @@ const ChecklistDetailPage = () => {
             /* 정상적으로 검색이 완료됐으면*/
             if (status === kakao.maps.services.Status.OK) {
               const findSubway = async () => {
-                const nearSubways = await getNearSubways({ lat: result[0].y, lon: result[0].x });
+                const nearSubways = await getNearSubways({ latitude: result[0].y, longitude: result[0].x });
                 setNearSubways(nearSubways);
               };
               findSubway();

frontend/src/pages/NewChecklistPage.tsx

@@ -1,4 +1,3 @@
-import { useNavigate } from 'react-router-dom';
 import { useStore } from 'zustand';
 
 import Button from '@/components/_common/Button/Button';
@@ -11,7 +10,6 @@ import MemoButton from '@/components/NewChecklist/MemoModal/MemoButton';
 import MemoModal from '@/components/NewChecklist/MemoModal/MemoModal';
 import NewChecklistContent from '@/components/NewChecklist/NewChecklistContent';
 import SubmitModalWithSummary from '@/components/NewChecklist/SubmitModalWithSummary/SubmitModalWithSummary';
-import { ROUTE_PATH } from '@/constants/routePath';
 import { DEFAULT_CHECKLIST_TAB_PAGE } from '@/constants/system';
 import useChecklistTabs from '@/hooks/useChecklistTabs';
 import useHandleTip from '@/hooks/useHandleTip';
@@ -23,7 +21,6 @@ import useChecklistStore from '@/store/useChecklistStore';
 import useSelectedOptionStore from '@/store/useSelectedOptionStore';
 
 const NewChecklistPage = () => {
-  const navigate = useNavigate();
   useChecklistTemplate(); // 체크리스트 질문 가져오기 및 준비
   const { tabs } = useChecklistTabs();
 
@@ -45,13 +42,12 @@ const NewChecklistPage = () => {
   // 로그인 요청 모달
   const { isModalOpen: isLoginModalOpen, openModal: openLoginModal, closeModal: closeLoginModal } = useModal();
 
-  const resetAndGoHome = () => {
+  const resetChecklist = () => {
     roomInfoActions.resetAll();
     roomInfoNonValidatedActions.resetAll();
     checklistActions.reset();
     selectedOptionActions.reset();
     resetShowTip(); // 옵션의 팁박스 다시표시
-    navigate(ROUTE_PATH.checklistList);
   };
 
   return (
@@ -75,7 +71,7 @@ const NewChecklistPage = () => {
       <SubmitModalWithSummary
         isModalOpen={isSubmitModalOpen}
         modalClose={closeSummaryModal}
-        onConfirm={resetAndGoHome}
+        onConfirm={resetChecklist}
         onError={openLoginModal}
         mutateType="add"
       />
@@ -90,7 +86,7 @@ const NewChecklistPage = () => {
         }
         isOpen={isAlertModalOpen}
         onClose={closeAlertModal}
-        handleApprove={resetAndGoHome}
+        handleApprove={resetChecklist}
         approveButtonName="나가기"
       />
 

frontend/src/store/roomInfoNonValidatedStore.ts

@@ -1,29 +1,40 @@
 import { createStore } from 'zustand';
 
+import { DEFAULT_POSITION } from '@/constants/map';
+import { Position } from '@/types/address';
 import { SubwayStation } from '@/types/subway';
 
 interface States {
   nearSubwayStation: SubwayStation[];
   address: string;
   buildingName: string;
+  position: Position;
 }
 
 interface Actions {
   set: <T extends keyof States>(name: T, value: States[T]) => void;
   resetAll: () => void;
+  getFormValues: () => { address: string; buildingName: string };
 }
 
 const defaultStates = {
   nearSubwayStation: [],
   address: '',
   buildingName: '',
+  position: DEFAULT_POSITION,
 };
 
-const roomInfoNonValidatedStore = createStore<States & { actions: Actions }>()(set => ({
+const roomInfoNonValidatedStore = createStore<States & { actions: Actions }>()((set, get) => ({
   ...defaultStates,
   actions: {
     set: (name, value) => set({ [name]: value }),
     resetAll: () => set(defaultStates),
+    getFormValues: () => {
+      return {
+        address: get().address,
+        buildingName: get().buildingName,
+      };
+    },
   },
 }));
 

frontend/src/types/address.ts

@@ -5,8 +5,8 @@ export interface Address {
 }
 
 export interface Position {
-  lat: number;
-  lon: number;
+  latitude: number;
+  longitude: number;
 }
 
 export interface OpenOptions {

frontend/src/types/checklist.ts

@@ -1,3 +1,4 @@
+import { Position } from '@/types/address';
 import { AnswerType } from '@/types/answer';
 import { Category } from '@/types/category';
 import { Option } from '@/types/option';
@@ -76,6 +77,7 @@ export interface ChecklistPostForm {
   room: RoomInfo;
   options: number[];
   questions: AnswerPostForm[];
+  geolocation?: Position; //TODO: 나중에 지우기
 }
 
 export type MutateType = 'add' | 'edit';

frontend/src/utils/createKakaoMapElements.ts

@@ -1,12 +1,13 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
+
 import { DEFAULT_POSITION } from '@/constants/map';
 
 const createKakaoMapElements = () => {
   const createMap = (kakao: any) => {
     const container = document.getElementById('map');
     if (!container) return;
 
-    const center = new kakao.maps.LatLng(DEFAULT_POSITION.lat, DEFAULT_POSITION.lon);
+    const center = new kakao.maps.LatLng(DEFAULT_POSITION.latitude, DEFAULT_POSITION.longitude);
 
     const options = {
       center,