From 546751cf9827cbf656f24476039d7b4da432081a Mon Sep 17 00:00:00 2001 From: karnelll <165611407+karnelll@users.noreply.github.com> Date: Thu, 31 Oct 2024 22:06:18 +0900 Subject: [PATCH] =?UTF-8?q?[fix]=20=ED=85=8D=EC=8A=A4=ED=8A=B8=20=EC=8A=A4?= =?UTF-8?q?=ED=83=80=EC=9D=BC,=20=ED=98=84=EC=9E=AC=20=EC=9C=84=EC=B9=98?= =?UTF-8?q?=20API=20=EC=9E=84=EC=8B=9C=20=EC=84=A4=EC=A0=95=20=EB=B0=8F=20?= =?UTF-8?q?=EB=8F=99=EC=9E=91=20=EB=B2=84=EA=B7=B8=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/EventNameInput.tsx | 8 +- .../components/LocationInput.tsx | 102 ++++++++---------- fe/src/app/eventcreate-page/page.tsx | 13 +-- 3 files changed, 57 insertions(+), 66 deletions(-) diff --git a/fe/src/app/eventcreate-page/components/EventNameInput.tsx b/fe/src/app/eventcreate-page/components/EventNameInput.tsx index 314e12a..c932f49 100644 --- a/fe/src/app/eventcreate-page/components/EventNameInput.tsx +++ b/fe/src/app/eventcreate-page/components/EventNameInput.tsx @@ -4,6 +4,7 @@ import React, { useEffect, useState } from "react"; import Image from "next/image"; import { EventNameInputProps } from "@/app/eventcreate-page/types/types"; +// 현재 날짜를 "MM.DD" 형식으로 반환하는 함수 const getCurrentDate = () => { const today = new Date(); const month = String(today.getMonth() + 1).padStart(2, "0"); @@ -44,11 +45,13 @@ function EventNameInput({ }; const borderClass = isFocused ? "border-[#2C2C2C]" : "border-transparent"; + + // 기본 값일 때는 #8e8e8e 색상으로, 그렇지 않을 경우 #2c2c2c 색상으로 설정 const textColorClass = value === `${currentDate} 모임` || value === `${currentDate} ${selectedLocation} 모임` - ? "text-mediumGray" - : "text-[#8e8e8e]"; + ? "text-[#8e8e8e]" + : "text-[#2c2c2c]"; const charCount = value.length; const showWarning = charCount < 1 || charCount > 20; @@ -96,7 +99,6 @@ function EventNameInput({ )} - {/* 로딩 중이 아닐 때 글자 수 검사 결과 표시 */} {!isLoading && ( <> {showWarning ? ( diff --git a/fe/src/app/eventcreate-page/components/LocationInput.tsx b/fe/src/app/eventcreate-page/components/LocationInput.tsx index f945338..4438466 100644 --- a/fe/src/app/eventcreate-page/components/LocationInput.tsx +++ b/fe/src/app/eventcreate-page/components/LocationInput.tsx @@ -4,21 +4,21 @@ import React, { useState } from "react"; import Image from "next/image"; import SearchResults from "./SearchResults"; +interface Place { + name: string; + address: string; + px?: number; + py?: number; +} + interface LocationInputProps { className?: string; - onSelect: (place: { - name: string; - address: string; - px?: number; - py?: number; - }) => void; + onSelect: (place: Place) => void; } function LocationInput({ className, onSelect }: LocationInputProps) { const [location, setLocation] = useState(""); - const [results, setResults] = useState< - { name: string; address: string; px?: number; py?: number }[] - >([]); + const [results, setResults] = useState([]); const [isFetching, setIsFetching] = useState(false); const fetchPlacesBySearch = async (query: string) => { @@ -34,7 +34,12 @@ function LocationInput({ className, onSelect }: LocationInputProps) { const data = await response.json(); if (data.code === 200) { - setResults(data.data); + const formattedResults = data.data.map((place: Place) => ({ + ...place, + px: place.px ? parseFloat((place.px / 1e7).toFixed(7)) : undefined, + py: place.py ? parseFloat((place.py / 1e7).toFixed(7)) : undefined, + })); + setResults(formattedResults); } else { setResults([]); alert(`장소 검색에 실패했습니다: ${data.message}`); @@ -49,19 +54,17 @@ function LocationInput({ className, onSelect }: LocationInputProps) { const handleSearch = (e: React.ChangeEvent) => { const inputValue = e.target.value; setLocation(inputValue); + if (inputValue.length > 0) { fetchPlacesBySearch(inputValue); } else { + // 입력이 비워질 경우 onSelect에 빈 객체 전달 setResults([]); + onSelect({ name: "", address: "", px: undefined, py: undefined }); } }; - const handleSelectPlace = (place: { - name: string; - address: string; - px?: number; - py?: number; - }) => { + const handleSelectPlace = (place: Place) => { setLocation(place.name); setResults([]); onSelect(place); @@ -78,29 +81,19 @@ function LocationInput({ className, onSelect }: LocationInputProps) { } navigator.geolocation.getCurrentPosition( - async ({ coords }) => { + ({ coords }) => { const { latitude: py, longitude: px } = coords; - const apiUrl = `${process.env.NEXT_PUBLIC_API_BASE_URL}/places/geocode?py=${py}&px=${px}`; - - try { - const response = await fetch(apiUrl, { headers: { accept: "*/*" } }); - if (!response.ok) - throw new Error(`HTTP error! status: ${response.status}`); - - const data = await response.json(); - if (data.data && data.data.length > 0) { - const selectedPlace = { ...data.data[0], px, py }; - setResults(data.data); - setLocation(selectedPlace.name); - handleSelectPlace(selectedPlace); - } else { - alert("현재 위치에 대한 장소를 찾을 수 없습니다."); - } - } catch (error) { - alert("서버에서 오류가 발생했습니다. 잠시 후 다시 시도해주세요."); - } finally { - setIsFetching(false); - } + const coordinatesString = `위도: ${py}, 경도: ${px}`; + setLocation(coordinatesString); + + onSelect({ + name: coordinatesString, + address: coordinatesString, + px, + py, + }); + + setIsFetching(false); }, () => { alert("위치 정보를 가져오는 중 오류가 발생했습니다."); @@ -114,26 +107,25 @@ function LocationInput({ className, onSelect }: LocationInputProps) {
어떤 공간을 찾고 계신가요?
-
-
- 돋보기 아이콘 - -
+
+ 돋보기 아이콘 +
{ if (e.key === "Enter") handleCurrentLocation(); diff --git a/fe/src/app/eventcreate-page/page.tsx b/fe/src/app/eventcreate-page/page.tsx index e5d4e1e..6afb129 100644 --- a/fe/src/app/eventcreate-page/page.tsx +++ b/fe/src/app/eventcreate-page/page.tsx @@ -18,19 +18,16 @@ function EventCreatePage() { const [uuid, setUuid] = useState(null); const router = useRouter(); - const adjustedPx = px ? px / 1e7 : null; - const adjustedPy = py ? py / 1e7 : null; - useEffect(() => { setIsFormComplete( selectedLocation.trim() !== "" && eventName.trim() !== "" && eventName.length >= 1 && eventName.length <= 20 && - adjustedPx !== null && - adjustedPy !== null + px !== null && + py !== null ); - }, [selectedLocation, eventName, adjustedPx, adjustedPy]); + }, [selectedLocation, eventName, px, py]); const handleLocationSelect = (place: { name: string; @@ -59,8 +56,8 @@ function EventCreatePage() { }, body: JSON.stringify({ neighborhood: selectedLocation, - px: adjustedPx, - py: adjustedPy, + px, + py, eventName, }), });