[style] Develop loading, eventcreate page (#57)

* Refactor: 코드 리팩토링 및 스타일 정리 * [style] page.tsx and eventcreate-page components
Team-pingping · Nov 5, 2024 · 4f91fd9 · 4f91fd9
1 parent 8c0fba7
commit 4f91fd9
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 49 deletions.
diff --git a/fe/src/app/eventcreate-page/components/EventNameInput.tsx b/fe/src/app/eventcreate-page/components/EventNameInput.tsx
@@ -2,31 +2,21 @@ import React, { useEffect, useState, useCallback } from "react";
 import Image from "next/image";
 import { EventNameInputProps } from "@/app/eventcreate-page/types/types";
 
-const getCurrentDate = () => {
-  const today = new Date();
-  const month = String(today.getMonth() + 1).padStart(2, "0");
-  const day = String(today.getDate()).padStart(2, "0");
-  return `${month}.${day}`;
-};
-
 function EventNameInput({
   className,
   selectedLocation,
   onChange,
   value,
 }: EventNameInputProps) {
   const [hasUserEdited, setHasUserEdited] = useState(false);
-  const currentDate = getCurrentDate();
   const showWarning = hasUserEdited && value.trim().length < 1;
 
   useEffect(() => {
     if (!hasUserEdited) {
-      const newEventName = selectedLocation
-        ? `${currentDate} ${selectedLocation} 모임`
-        : "";
+      const newEventName = selectedLocation ? `${selectedLocation} 모임` : "";
       onChange(newEventName);
     }
-  }, [selectedLocation, currentDate, onChange, hasUserEdited]);
+  }, [selectedLocation, onChange, hasUserEdited]);
 
   const handleInputChange = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -44,7 +34,7 @@ function EventNameInput({
   return (
     <div className={`relative flex flex-col mt-4 ${className}`}>
       <label className="text-[#2c2c2c] text-lg font-semibold leading-relaxed mb-2">
-        이벤트 이름
+        우리의 모임 이름은?
       </label>
 
       <div
@@ -56,7 +46,7 @@ function EventNameInput({
           type="text"
           value={value}
           onChange={handleInputChange}
-          placeholder={`${currentDate} 모임`}
+          placeholder="모임"
           className="bg-transparent text-[#2c2c2c] text-base font-medium outline-none flex-grow"
           aria-label="이벤트 이름 입력"
         />

diff --git a/fe/src/app/eventcreate-page/components/LocationInput.tsx b/fe/src/app/eventcreate-page/components/LocationInput.tsx
@@ -4,7 +4,7 @@ import React, { useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
 import Image from "next/image";
 import { useLocationStore } from "@/app/eventcreate-page/stores/useLocationStore";
-import { LocationInputProps } from "@/app/eventcreate-page/types/types"; // 'Place'를 삭제
+import { LocationInputProps } from "@/app/eventcreate-page/types/types";
 
 function LocationInput({
   className,
@@ -25,7 +25,7 @@ function LocationInput({
   return (
     <div className={`relative flex flex-col ${className} mt-4`}>
       <label className="text-[#2c2c2c] text-xl font-semibold font-['Pretendard'] leading-loose mb-4">
-        어떤 공간을 찾고 계신가요?
+        어디서 모여요?
       </label>
       <button
         type="button"

diff --git a/fe/src/app/eventcreate-page/types/types.tsx b/fe/src/app/eventcreate-page/types/types.tsx
@@ -1,3 +1,11 @@
+export interface Place {
+  id?: string;
+  name: string;
+  address: string;
+  px?: number;
+  py?: number;
+}
+
 export interface EventNameInputProps {
   value: string;
   onChange: (name: string) => void;
@@ -13,14 +21,6 @@ export interface LocationState {
   moveToLocation: (latitude: number, longitude: number) => void;
 }
 
-export interface Place {
-  id?: string;
-  name: string;
-  address: string;
-  px?: number;
-  py?: number;
-}
-
 export interface LocationInputProps {
   className?: string;
   value: string;

diff --git a/fe/src/app/page.tsx b/fe/src/app/page.tsx
@@ -13,40 +13,37 @@ function LoadingPage() {
   };
 
   return (
-    <div className="bg-primary-50 h-screen w-full flex flex-col items-center relative">
-      <div className="w-full sticky top-0 z-10 flex justify-center bg-primary-50">
-        <div className="w-full h-[89px] flex justify-center">
+    <div className="w-full h-screen bg-[#1d1d1d] flex flex-col items-center relative">
+      {/* 중앙 로고 */}
+      <div className="flex flex-col items-center absolute inset-x-0 top-[152px]">
+        <Image
+          src="/images/mopinglogo.svg"
+          alt="Moping Logo"
+          width={150}
+          height={169}
+          className="object-cover"
+          priority
+        />
+
+        {/* MOPING 텍스트 */}
+        <div className="mt-[27px]">
           <Image
-            src="/images/loadinglogo.svg"
-            alt="MMMM Logo"
-            width={623}
-            height={89}
-            className="object-cover w-full h-full"
-            priority
+            src="/images/MOPING.svg" // MOPING 텍스트 이미지
+            alt="Moping Text"
+            width={193}
+            height={27}
+            className="object-cover"
           />
         </div>
       </div>
-      <div className="flex flex-col items-center absolute inset-x-0 top-[327px] text-center">
-        <h1 className="text-text-default text-[62px] leading-[62px] font-black font-pretendard text-shadow-lg">
-          MOPING
-        </h1>
-        <div className="w-full mt-2">
-          <p className="text-grayscale-0 text-xl font-black font-pretendard">
-            MIX
-            <span className="text-text-default"> OUR PINS,</span>
-            <br />
-            SHARE
-            <span className="text-text-default"> OUR PLACES</span>
-          </p>
-        </div>
-      </div>
 
+      {/* 시작하기 버튼 */}
       <div className="fixed bottom-[45px] w-full flex justify-center px-4">
         <Button
-          label="시작하기"
+          label="모핑 시작하기"
           onClick={handleStartClick}
           type="start"
-          className="w-full max-w-[328px] h-[60px] py-[17px] rounded-lg bg-darkGray text-grayscale-0"
+          className="w-full max-w-[328px] h-[60px] py-[17px] rounded-lg bg-[#F73A2C] text-white"
         />
       </div>
     </div>