Feature/detail fixes

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: {

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<HTMLInputElement>) => {
     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 (
     <div className={`relative flex flex-col ${className}`}>
-      <div className="text-text-default text-xl font-semibold leading-loose mb-[12px]">
+      <div className="text-black text-xl font-semibold leading-loose mb-[12px]">
         이벤트 이름
       </div>
 
@@ -72,14 +69,14 @@ function EventNameInput({
       >
         <input
           type="text"
-          value={eventName}
+          value={value}
           onChange={handleInputChange}
           className={`bg-transparent border-none grow shrink basis-0 ${textColorClass} text-base font-medium font-['Pretendard'] leading-normal outline-none flex-1`}
           onFocus={() => setIsFocused(true)}
           onBlur={() => setIsFocused(false)}
         />
 
-        {eventName && !isDefaultValue && (
+        {value && !isDefaultValue && (
           <div
             role="button"
             tabIndex={0}
@@ -92,8 +89,8 @@ function EventNameInput({
             <Image
               src="/images/Cancel.svg"
               alt="삭제 아이콘"
-              layout="fill"
-              objectFit="cover"
+              width={24}
+              height={24}
             />
           </div>
         )}

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<string>("");
-  const [results, setResults] = useState<Place[]>([]);
+  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 (
     <div className={`relative flex flex-col ${className}`}>
-      <div className="text-text-default text-xl font-semibold leading-loose mb-[12px]">
+      <div className="text-black text-xl font-semibold leading-loose mb-[12px]">
         어떤 공간을 찾고 계신가요?
       </div>
       <div className="relative w-[328px] h-14 p-4 bg-background-light rounded-lg flex justify-between items-center">
@@ -117,15 +127,17 @@ 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']"
           />
         </div>
         <div
           role="button"
           tabIndex={0}
           className="w-[38px] h-[38px] bg-darkGray rounded flex items-center justify-center cursor-pointer"
           onClick={handleCurrentLocation}
-          onKeyDown={handleKeyDown}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") handleCurrentLocation();
+          }}
         >
           <Image
             src="/images/Location.svg"

fe/src/app/eventcreate-page/components/SearchResultsItem.tsx

@@ -57,7 +57,7 @@ function SearchResultItem({
         height={24}
         className="text-gray-600"
       />
-      <div className="text-base font-pretendard">
+      <div className="text-base font-medium font-['Pretendard'] leading-normal">
         {highlightText(place.name, searchTerm)}
       </div>
     </button>

fe/src/app/eventcreate-page/page.tsx

@@ -18,14 +18,15 @@ function EventCreatePage() {
   const [uuid, setUuid] = useState<string | null>(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;
 
   useEffect(() => {
     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}
       />
     </div>