refact: 이벤트 생성 첫 페이지에서만 좌측 상단에 홈버튼만 유지, 카카오맵 초기 좌표 설정

Author: xaexunxang

design-system/ui/Header.tsx

@@ -10,30 +10,42 @@ interface HeaderProps {
   leftButtonLabel?: ReactNode; // 왼쪽 콘텐츠 (버튼)
   leftButtonClick?: () => void; // 왼쪽 버튼 클릭 핸들러
   leftButtonClassName?: string; // 왼쪽 버튼 추가 스타일링 클래스
-  rightContent?: Button; // 오른쪽 콘텐츠 (버튼)
+  rightContent?: Button | null; // 오른쪽 콘텐츠 (버튼)
   color?: 'white' | 'black'; // white 또는 black 중 선택
   className?: string; // 추가 스타일링 클래스
 }
 
+// Button 타입 가드 함수 추가
+function isButtonElement(element: any): element is React.ReactElement<ButtonHTMLAttributes<HTMLButtonElement>> {
+  return (
+    React.isValidElement(element) &&
+    typeof element.type === 'string' &&
+    element.type === 'button'
+  );
+}
+
 const Header = ({
   centerContent,
   leftButtonLabel,
-  leftButtonClick = () => {},
+  leftButtonClick = () => { },
   leftButtonClassName,
   rightContent,
   color = 'black',
   className = '',
 }: HeaderProps) => {
   return (
     <header
-      className={`relative flex items-center justify-between w-full h-16 px-6 ${className} ${
-        color === 'white' ? 'text-white' : 'text-black'
-      }`}
+      className={`relative flex items-center justify-between w-full h-16 px-6 ${className} ${color === 'white' ? 'text-white' : 'text-black'
+        }`}
     >
       {/* 왼쪽 콘텐츠 */}
       <div className="flex items-center space-x-2">
         {leftButtonLabel ? (
-          <TextButton label={leftButtonLabel} onClick={leftButtonClick} className={`${leftButtonClassName} mr-6`} />
+          isButtonElement(leftButtonLabel) ? (
+            <div className="flex items-center ml-6 space-x-2">{leftButtonLabel}</div>
+          ) : (
+            <TextButton label={leftButtonLabel} onClick={leftButtonClick} className={`${leftButtonClassName} mr-6`} />
+          )
         ) : null}
       </div>
 

src/features/event/model/FunnelContext.tsx

@@ -31,8 +31,8 @@ export const FunnelProvider = ({ children }: { children: ReactNode }) => {
     onlineType: 'ONLINE',
     address: '',
     detailAddress: '',
-    locationLat: 0,
-    locationLng: 0,
+    locationLat: 37.5665,
+    locationLng: 126.9780,
     category: 'DEVELOPMENT_STUDY',
     hashtags: [],
     organizerEmail: '',

src/features/event/ui/DatePicker.tsx

@@ -99,15 +99,23 @@ const EventDatePicker = ({
       <div className="flex flex-wrap lg:flex-nowrap items-center justify-between gap-2">
         <div className="flex flex-col w-full sm:w-auto gap-2">
           {!isLabel && <span className="text-sm font-medium">시작 날짜</span>}
-          <div className="flex gap-1">
+          <div className="flex gap-1 ">
             <DatePicker
               id="startDate"
               selected={startDate}
               onChange={(date: Date | null) => setStartDate(date)}
               locale={ko}
               dateFormat="MM월 dd일"
               autoComplete="off"
-              className="w-20 h-9 md:w-24 md:h-10 border border-placeholderText text-sm md:text-md rounded-[5px] p-2"
+              onKeyDown={(e) => e.preventDefault()}
+              className="
+                w-20 h-9 md:w-24 md:h-10 
+                border border-placeholderText 
+                text-sm md:text-md 
+                rounded-[5px] 
+                p-2 cursor-pointer 
+                caret-transparent
+              "
               renderCustomHeader={({
                 date,
                 decreaseMonth,
@@ -132,7 +140,7 @@ const EventDatePicker = ({
               id="startTime"
               value={startTime}
               onChange={e => setStartTime(e.target.value)}
-              className="w-20 h-9 md:w-24 md:h-10 border border-placeholderText text-sm md:text-md rounded-[5px] p-2"
+              className="w-20 h-9 md:w-24 md:h-10 border border-placeholderText text-sm md:text-md rounded-[5px] p-2 cursor-pointer"
             >
               {timeOptions.map(time => (
                 <option key={time} value={time}>
@@ -155,7 +163,8 @@ const EventDatePicker = ({
               locale={ko}
               dateFormat="MM월 dd일"
               autoComplete="off"
-              className="w-20 h-9 md:w-24 md:h-10 border border-placeholderText text-sm md:text-md rounded-[5px] p-2"
+              onKeyDown={(e) => e.preventDefault()}
+              className="w-20 h-9 md:w-24 md:h-10 border border-placeholderText text-sm md:text-md rounded-[5px] p-2 cursor-pointer caret-transparent"
               renderCustomHeader={({
                 date,
                 decreaseMonth,
@@ -180,7 +189,7 @@ const EventDatePicker = ({
               id="endTime"
               value={endTime}
               onChange={e => setEndTime(e.target.value)}
-              className="w-20 h-9 md:w-24 md:h-10 border border-placeholderText text-sm md:text-md rounded-[5px] p-2"
+              className="w-20 h-9 md:w-24 md:h-10 border border-placeholderText text-sm md:text-md rounded-[5px] p-2 cursor-pointer"
             >
               {timeOptions.map(time => (
                 <option key={time} value={time}>

src/features/event/ui/EventFunnel.tsx

@@ -81,6 +81,7 @@ const EventFunnel = ({ onNext, onPrev, Funnel, Step, currentStep }: EventFunnelI
           title="이벤트 제목을 입력해주세요"
           onNext={() => handleNext(String(currentStep + 1))}
           onPrev={() => onPrev(String(currentStep - 1))}
+          goHome={true}
           requireValidation={true}
         >
           <EventTitlePage />

src/features/event/ui/EventType.tsx

@@ -46,7 +46,7 @@ const EventType = ({ className }: EventTypeProps) => {
       locationLng,
     }));
   };
-
+  console.log(eventState.locationLat, eventState.locationLng);
   return (
     <div className={`flex flex-col justify-center w-full ${className}`}>
       <div className="flex flex-col justify-start">

src/index.css

@@ -106,4 +106,4 @@ body {
   .clip-bottom-banner {
     clip-path: polygon(3% 0%, 0% 100%, 100% 100%, 97% 0%);
   }
-}
+}

src/shared/ui/backgrounds/EventRegisterLayout.tsx

@@ -12,6 +12,7 @@ interface EventRegisterLayoutProps {
   onNext: () => void;
   onPrev: () => void;
   requireValidation?: boolean;
+  goHome?: boolean;
 }
 
 interface ValidationChildProps {
@@ -25,6 +26,7 @@ const EventRegisterLayout = ({
   onNext,
   onPrev,
   requireValidation = false,
+  goHome = false,
 }: EventRegisterLayoutProps) => {
   const [isFormValid, setIsFormValid] = useState(false);
 
@@ -46,16 +48,22 @@ const EventRegisterLayout = ({
       <div className="absolute top-0 w-full h-36 md:h-40 bg-gradient-to-br from-[#FF5593] to-[rgb(255,117,119)] rounded-b-[60px] z-10">
         <Header
           centerContent="이벤트 등록"
-          leftButtonLabel="<"
-          leftButtonClick={onPrev}
+          leftButtonLabel={goHome ? (              <IconButton
+            iconPath={<img src={HomeButton} />}
+            onClick={() => navigate('/')}
+            iconClassName="cursor-pointer z-30 ml-auto"
+          />) : '<'}
+          leftButtonClick={goHome ? () => navigate('/') : onPrev}
           color="white"
           leftButtonClassName="text-xl z-30"
           rightContent={
-            <IconButton
-              iconPath={<img src={HomeButton} />}
-              onClick={() => navigate('/')}
-              iconClassName="cursor-pointer z-30 ml-auto"
-            />
+            goHome ? null : (
+              <IconButton
+                iconPath={<img src={HomeButton} />}
+                onClick={() => navigate('/')}
+                iconClassName="cursor-pointer z-30 ml-auto"
+              />
+            )
           }
         />
       </div>