diff --git a/fe/src/app/event-maps/[id]/load-mappin/components/Form.tsx b/fe/src/app/event-maps/[id]/load-mappin/components/Form.tsx index 1d080b6..741f6ff 100644 --- a/fe/src/app/event-maps/[id]/load-mappin/components/Form.tsx +++ b/fe/src/app/event-maps/[id]/load-mappin/components/Form.tsx @@ -36,7 +36,7 @@ export default function Form({ uuid }: FormProps) { try { const response = await fetch( - "http://110.165.17.236:8081/api/v1/nonmembers/pings", + `${process.env.NEXT_PUBLIC_API_BASE_URL}/nonmembers/pings`, { method: "POST", headers: { diff --git a/fe/src/app/eventcreate-page/components/EventNameInput.tsx b/fe/src/app/eventcreate-page/components/EventNameInput.tsx index c6409e8..314e12a 100644 --- a/fe/src/app/eventcreate-page/components/EventNameInput.tsx +++ b/fe/src/app/eventcreate-page/components/EventNameInput.tsx @@ -15,8 +15,8 @@ function EventNameInput({ className, selectedLocation, onChange, + value, }: EventNameInputProps) { - const [eventName, setEventName] = useState(""); const [isFocused, setIsFocused] = useState(false); const [hasUserEdited, setHasUserEdited] = useState(false); const [isLoading, setIsLoading] = useState(true); @@ -27,41 +27,38 @@ function EventNameInput({ const newEventName = selectedLocation ? `${currentDate} ${selectedLocation} 모임` : `${currentDate} 모임`; - setEventName(newEventName); onChange(newEventName); } - setIsLoading(false); // 로딩 완료 상태로 변경 + setIsLoading(false); }, [selectedLocation, currentDate, onChange, hasUserEdited]); const handleInputChange = (e: React.ChangeEvent) => { const newValue = e.target.value; - setEventName(newValue); setHasUserEdited(true); onChange(newValue); }; const handleClear = () => { - setEventName(""); setHasUserEdited(true); onChange(""); }; const borderClass = isFocused ? "border-[#2C2C2C]" : "border-transparent"; const textColorClass = - eventName === `${currentDate} 모임` || - eventName === `${currentDate} ${selectedLocation} 모임` + value === `${currentDate} 모임` || + value === `${currentDate} ${selectedLocation} 모임` ? "text-mediumGray" - : "text-text-default"; + : "text-[#8e8e8e]"; - const charCount = eventName.length; + const charCount = value.length; const showWarning = charCount < 1 || charCount > 20; const isDefaultValue = - eventName === `${currentDate} 모임` || - eventName === `${currentDate} ${selectedLocation} 모임`; + value === `${currentDate} 모임` || + value === `${currentDate} ${selectedLocation} 모임`; return (
-
+
이벤트 이름
@@ -72,14 +69,14 @@ function EventNameInput({ > setIsFocused(true)} onBlur={() => setIsFocused(false)} /> - {eventName && !isDefaultValue && ( + {value && !isDefaultValue && (
)} diff --git a/fe/src/app/eventcreate-page/components/LocationInput.tsx b/fe/src/app/eventcreate-page/components/LocationInput.tsx index a4a58a4..f945338 100644 --- a/fe/src/app/eventcreate-page/components/LocationInput.tsx +++ b/fe/src/app/eventcreate-page/components/LocationInput.tsx @@ -1,13 +1,24 @@ "use client"; import React, { useState } from "react"; -import { LocationInputProps, Place } from "@/app/eventcreate-page/types/types"; // 최상단으로 이동 import Image from "next/image"; import SearchResults from "./SearchResults"; +interface LocationInputProps { + className?: string; + onSelect: (place: { + name: string; + address: string; + px?: number; + py?: number; + }) => void; +} + function LocationInput({ className, onSelect }: LocationInputProps) { const [location, setLocation] = useState(""); - const [results, setResults] = useState([]); + const [results, setResults] = useState< + { name: string; address: string; px?: number; py?: number }[] + >([]); const [isFetching, setIsFetching] = useState(false); const fetchPlacesBySearch = async (query: string) => { @@ -45,7 +56,12 @@ function LocationInput({ className, onSelect }: LocationInputProps) { } }; - const handleSelectPlace = (place: Place) => { + const handleSelectPlace = (place: { + name: string; + address: string; + px?: number; + py?: number; + }) => { setLocation(place.name); setResults([]); onSelect(place); @@ -73,7 +89,7 @@ function LocationInput({ className, onSelect }: LocationInputProps) { const data = await response.json(); if (data.data && data.data.length > 0) { - const selectedPlace: Place = { ...data.data[0], px, py }; + const selectedPlace = { ...data.data[0], px, py }; setResults(data.data); setLocation(selectedPlace.name); handleSelectPlace(selectedPlace); @@ -93,15 +109,9 @@ function LocationInput({ className, onSelect }: LocationInputProps) { ); }; - const handleKeyDown = (e: React.KeyboardEvent) => { - if (e.key === "Enter" || e.key === " ") { - handleCurrentLocation(); - } - }; - return (
-
+
어떤 공간을 찾고 계신가요?
@@ -117,7 +127,7 @@ function LocationInput({ className, onSelect }: LocationInputProps) { value={location} onChange={handleSearch} placeholder="장소를 입력해주세요" - className="bg-transparent border-none grow text-base placeholder-mediumGray outline-none" + className="bg-transparent border-none grow text-base text-[#8e8e8e] placeholder-[#8e8e8e] outline-none font-['Pretendard']" />
{ + if (e.key === "Enter") handleCurrentLocation(); + }} > -
+
{highlightText(place.name, searchTerm)}
diff --git a/fe/src/app/eventcreate-page/page.tsx b/fe/src/app/eventcreate-page/page.tsx index e8a38d7..e5d4e1e 100644 --- a/fe/src/app/eventcreate-page/page.tsx +++ b/fe/src/app/eventcreate-page/page.tsx @@ -18,7 +18,6 @@ function EventCreatePage() { const [uuid, setUuid] = useState(null); const router = useRouter(); - // Adjust coordinates by dividing by 10^7 to match standard map coordinates const adjustedPx = px ? px / 1e7 : null; const adjustedPy = py ? py / 1e7 : null; @@ -26,6 +25,8 @@ function EventCreatePage() { setIsFormComplete( selectedLocation.trim() !== "" && eventName.trim() !== "" && + eventName.length >= 1 && + eventName.length <= 20 && adjustedPx !== null && adjustedPy !== null ); @@ -109,7 +110,7 @@ function EventCreatePage() { label={isSubmitting ? "처리 중..." : "다음"} type="start" onClick={createEvent} - className="w-[328px] h-[60px] py-[17px] rounded-lg" + className="w-[328px] h-[60px] py-[17px] rounded-lg text-base font-medium font-['Pretendard']" disabled={!isFormComplete || isSubmitting} />