diff --git a/frontend/src/apis/checklist.ts b/frontend/src/apis/checklist.ts
index 7281f2210..406787323 100644
--- a/frontend/src/apis/checklist.ts
+++ b/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;
};
diff --git a/frontend/src/apis/url.ts b/frontend/src/apis/url.ts
index 42ff91089..22b406f25 100644
--- a/frontend/src/apis/url.ts
+++ b/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',
@@ -24,5 +25,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}`,
};
diff --git a/frontend/src/components/NewChecklist/AddressModal/RealTimeAddressModal.tsx b/frontend/src/components/NewChecklist/AddressModal/RealTimeAddressModal.tsx
index 2918ed58f..79884478d 100644
--- a/frontend/src/components/NewChecklist/AddressModal/RealTimeAddressModal.tsx
+++ b/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();
diff --git a/frontend/src/components/_common/Map/AddressMap.tsx b/frontend/src/components/_common/Map/AddressMap.tsx
index e2cd3a519..e8530ec6a 100644
--- a/frontend/src/components/_common/Map/AddressMap.tsx
+++ b/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,
};
// 지도 생성
diff --git a/frontend/src/components/_common/Map/RealTimeMap.tsx b/frontend/src/components/_common/Map/RealTimeMap.tsx
index 5a35205bb..c90817e83 100644
--- a/frontend/src/components/_common/Map/RealTimeMap.tsx
+++ b/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 = `이 위치가 맞나요?`;
- 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);
diff --git a/frontend/src/constants/map.ts b/frontend/src/constants/map.ts
index 921b48b8a..b97497122 100644
--- a/frontend/src/constants/map.ts
+++ b/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,
};
diff --git a/frontend/src/hooks/useMoveSection.ts b/frontend/src/hooks/useMoveSection.ts
index aace102e8..b861c16da 100644
--- a/frontend/src/hooks/useMoveSection.ts
+++ b/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);
}
};
diff --git a/frontend/src/hooks/useMutateChecklist.ts b/frontend/src/hooks/useMutateChecklist.ts
index 147cdad31..bf3dd5b48 100644
--- a/frontend/src/hooks/useMutateChecklist.ts
+++ b/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(obj: T, key: K): Omit {
- // 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);
},
diff --git a/frontend/src/hooks/useRoomInfoNonValidated.ts b/frontend/src/hooks/useRoomInfoNonValidated.ts
index be7c57066..b338e166b 100644
--- a/frontend/src/hooks/useRoomInfoNonValidated.ts
+++ b/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 });
}
});
});
diff --git a/frontend/src/mocks/handlers/subway.ts b/frontend/src/mocks/handlers/subway.ts
index 971f5a687..fe036fefe 100644
--- a/frontend/src/mocks/handlers/subway.ts
+++ b/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 });
}),
];
diff --git a/frontend/src/pages/NewChecklistPage.tsx b/frontend/src/pages/NewChecklistPage.tsx
index ae6287a2b..c7fdd9a3c 100644
--- a/frontend/src/pages/NewChecklistPage.tsx
+++ b/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 = () => {
@@ -90,7 +86,7 @@ const NewChecklistPage = () => {
}
isOpen={isAlertModalOpen}
onClose={closeAlertModal}
- handleApprove={resetAndGoHome}
+ handleApprove={resetChecklist}
approveButtonName="나가기"
/>
diff --git a/frontend/src/store/roomInfoNonValidatedStore.ts b/frontend/src/store/roomInfoNonValidatedStore.ts
index 1c635f530..77e93ee31 100644
--- a/frontend/src/store/roomInfoNonValidatedStore.ts
+++ b/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: (name: T, value: States[T]) => void;
resetAll: () => void;
+ getFormValues: () => { address: string; buildingName: string };
}
const defaultStates = {
nearSubwayStation: [],
address: '',
buildingName: '',
+ position: DEFAULT_POSITION,
};
-const roomInfoNonValidatedStore = createStore()(set => ({
+const roomInfoNonValidatedStore = createStore()((set, get) => ({
...defaultStates,
actions: {
set: (name, value) => set({ [name]: value }),
resetAll: () => set(defaultStates),
+ getFormValues: () => {
+ return {
+ address: get().address,
+ buildingName: get().buildingName,
+ };
+ },
},
}));
diff --git a/frontend/src/types/address.ts b/frontend/src/types/address.ts
index ecf96b46d..fdc842894 100644
--- a/frontend/src/types/address.ts
+++ b/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 {
diff --git a/frontend/src/types/checklist.ts b/frontend/src/types/checklist.ts
index 91cbe69f0..ffeddabce 100644
--- a/frontend/src/types/checklist.ts
+++ b/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';
@@ -78,6 +79,7 @@ export interface ChecklistPostForm {
room: RoomInfo;
options: number[];
questions: AnswerPostForm[];
+ geolocation?: Position; //TODO: 나중에 지우기
}
export type MutateType = 'add' | 'edit';
diff --git a/frontend/src/utils/createKakaoMapElements.ts b/frontend/src/utils/createKakaoMapElements.ts
index 090835254..068af9982 100644
--- a/frontend/src/utils/createKakaoMapElements.ts
+++ b/frontend/src/utils/createKakaoMapElements.ts
@@ -1,4 +1,5 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
+
import { DEFAULT_POSITION } from '@/constants/map';
const createKakaoMapElements = () => {
@@ -6,7 +7,7 @@ const createKakaoMapElements = () => {
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,