Style/loding page (#68)

* [feature] Develop event create page and load mappin page * [fix] Add react-swipeable to project dependencies * [fix] Add classnames to project dependencies * [Style] loding page * [fix] Updated button styles and layout adjustments * [Style] loding page * [fix] Updated button styles and layout adjustments
Team-pingping · Nov 24, 2024 · 491b03f · 491b03f
1 parent b06a3af
commit 491b03f
Show file tree

Hide file tree

Showing 9 changed files with 109 additions and 587 deletions.
diff --git a/fe/public/svg/loding2.svg b/fe/public/svg/loding2.svg
diff --git a/fe/public/svg/loding3.svg b/fe/public/svg/loding3.svg
diff --git a/fe/public/svg/loding4.svg b/fe/public/svg/loding4.svg
diff --git a/fe/public/svg/logo.svg b/fe/public/svg/logo.svg
diff --git a/fe/src/app/event-maps/[id]/[nonMemberId]/load-mappin-edit/page.tsx b/fe/src/app/event-maps/[id]/[nonMemberId]/load-mappin-edit/page.tsx
@@ -168,14 +168,21 @@ export default function LinkEditPage() {
       </div>
 
       {/* 하단 저장 버튼 */}
-      <div className="w-full px-[16px] bg-white sticky bottom-0 border-t border-[#f0f0f0]">
+      <div
+        className="w-full px-[16px] bg-white fixed bottom-0 left-0 border-t border-[#f0f0f0]"
+        style={{ zIndex: 50 }}
+      >
         <Button
           label="저장"
-          className="w-fix h-[60px] py-[17px] rounded-lg bg-black text-white disabled:bg-[#e0e0e0]"
+          className={`w-fixl h-[60px] py-[17px] rounded-lg text-base font-medium text-white ${
+            isSaveButtonEnabled ? "bg-black" : "bg-[#e0e0e0] cursor-not-allowed"
+          }`}
           onClick={handleSubmit}
           disabled={!isSaveButtonEnabled}
         />
       </div>
+
+      {/* Exit Modal */}
       {showExitModal && (
         <ExitModal onCancel={handleCancel} onExit={handleExit} />
       )}

diff --git a/fe/src/app/event-maps/[id]/load-mappin/forms/links/page.tsx b/fe/src/app/event-maps/[id]/load-mappin/forms/links/page.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import React, { useState, useEffect } from "react";
-import { useRouter, useParams } from "next/navigation"; // Moved to the correct order
+import { useRouter, useParams } from "next/navigation"; // Correct order
 import Navigation from "@/app/components/common/Navigation";
 import Button from "@/app/components/common/Button";
 import LinkField from "./components/LinkField";
@@ -84,7 +84,7 @@ export default function LinksPage() {
     <div className="w-[360px] h-screen bg-white mx-auto flex flex-col">
       <Navigation onBack={handleBack} />
       {/* Scrollable Content */}
-      <div className="flex-1 mt-[16px] px-[16px] pt-[72px] w-full overflow-y-auto pb-[80px]">
+      <div className="flex-1 mt-[16px] px-[16px] pt-[72px] w-full overflow-y-auto pb-[100px]">
         <div className="text-[#2c2c2c] text-[22px] font-semibold leading-[30px] font-['Pretendard']">
           마음에 쏙 든 공간을 불러와요
         </div>
@@ -109,7 +109,7 @@ export default function LinksPage() {
           />
 
           {/* CheckBox Section */}
-          <div className="flex items-center mt-[83px] mb-[18px] w-full">
+          <div className="flex items-center mb-[18px] w-full">
             <CheckBox isChecked={isChecked} onChange={handleCheckboxChange} />
             <span className="ml-2 text-[#8e8e8e] text-xs font-medium font-['Pretendard'] leading-none">
               내 공간 정보를 모핑에서 활용하는 것에 동의합니다
@@ -118,8 +118,11 @@ export default function LinksPage() {
         </form>
       </div>
 
-      {/* Sticky Save Button */}
-      <div className="w-full px-[16px] bg-white sticky bottom-0 border-t border-[#f0f0f0]">
+      {/* Fixed Save Button */}
+      <div
+        className="w-full px-[16px] bg-white fixed bottom-0 left-0 border-t border-[#f0f0f0]"
+        style={{ zIndex: 50 }}
+      >
         <Button
           label="저장"
           onClick={handleSubmit}

diff --git a/fe/src/app/event-maps/[id]/load-mappin/forms/tooltip/page.tsx b/fe/src/app/event-maps/[id]/load-mappin/forms/tooltip/page.tsx
@@ -69,7 +69,7 @@ export default function ToolTipPage() {
       <Navigation />
 
       {/* Title Section */}
-      <div className="w-[328px] mt-16 mb-[48px]">
+      <div className="w-full px-4 mt-16 mb-[48px]">
         <h1 className="text-[#2c2c2c] text-[22px] font-semibold font-['Pretendard'] leading-[30px]">
           이렇게 공유 버튼이 안 보이나요?
           <br />
@@ -78,7 +78,7 @@ export default function ToolTipPage() {
       </div>
 
       {/* Slide Content */}
-      <div className="w-[328px] h-[406px] mb-[20px]">
+      <div className="w-full px-4 mb-[20px]">
         <div className="bg-[#F8F8F8] rounded-xl border border-[#F0F0F0] p-[20px]">
           {slides[currentSlide].step && (
             <div className="flex items-center gap-2 mb-2">
@@ -123,13 +123,15 @@ export default function ToolTipPage() {
       </div>
 
       {/* Button Section */}
-      <Button
-        label="네이버 지도 바로 열기"
-        onClick={() => {
-          window.location.href = "https://m.map.naver.com/";
-        }}
-        className="w-[328px] h-[60px] text-lg font-medium font-['Pretendard'] rounded-lg flex justify-center items-center"
-      />
+      <div className="w-full px-4">
+        <Button
+          label="네이버 지도 바로 열기"
+          onClick={() => {
+            window.location.href = "https://m.map.naver.com/";
+          }}
+          className="w-full h-[60px] text-lg font-medium font-['Pretendard'] rounded-lg flex justify-center items-center"
+        />
+      </div>
     </div>
   );
 }
diff --git a/fe/src/app/eventcreate-page/components/EventNameInput.tsx b/fe/src/app/eventcreate-page/components/EventNameInput.tsx
@@ -12,7 +12,7 @@ function EventNameInput({
   value,
 }: EventNameInputProps) {
   const [hasUserEdited, setHasUserEdited] = useState(false);
-  const [isTyping, setIsTyping] = useState(false); // 타이핑 상태 추가
+  const [isTyping, setIsTyping] = useState(false);
   const showWarning = hasUserEdited && value.trim().length < 1;
 
   useEffect(() => {

diff --git a/fe/src/app/page.tsx b/fe/src/app/page.tsx
@@ -13,31 +13,68 @@ function LoadingPage() {
   };
 
   return (
-    <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]">
+    <div className="flex flex-col items-center min-h-screen bg-black text-white px-[14.17px]">
+      {/* 상단 여백 */}
+      <div className="mt-[32px]" />
+
+      {/* 위 선 */}
+      <div className="w-full h-[0px] border-t-[1px] border-white mb-[16px]" />
+
+      {/* 로고 */}
+      <div className="w-full flex">
         <Image
-          src="/images/mopinglogo.svg"
+          src="/svg/logo.svg"
           alt="Moping Logo"
-          width={150}
-          height={169}
-          className="object-cover"
-          priority
+          width={170}
+          height={24}
+          className="h-auto"
         />
+      </div>
+
+      {/* 아래 선 */}
+      <div className="w-full h-[0px] border-t-[1px] border-white mt-[16px] mb-[32px]" />
 
-        {/* MOPING 텍스트 */}
-        <div className="mt-[27px]">
+      {/* 아이콘들 */}
+      <div className="grid grid-cols-2 gap-y-[28.69px] gap-x-[28.69px] mb-auto">
+        <div className="flex items-center justify-center">
+          <Image
+            src="/svg/loding1.svg"
+            alt="Loading Icon 1"
+            width={169}
+            height={169}
+            className="h-auto"
+          />
+        </div>
+        <div className="flex items-center justify-center">
+          <Image
+            src="/svg/loding2.svg"
+            alt="Loading Icon 2"
+            width={169}
+            height={169}
+            className="h-auto"
+          />
+        </div>
+        <div className="flex items-center justify-center">
+          <Image
+            src="/svg/loding3.svg"
+            alt="Loading Icon 3"
+            width={169}
+            height={169}
+            className="h-auto"
+          />
+        </div>
+        <div className="flex items-center justify-center">
           <Image
-            src="/images/MOPING.svg"
-            alt="Moping Text"
-            width={193}
-            height={27}
-            className="object-cover"
+            src="/svg/loding4.svg"
+            alt="Loading Icon 4"
+            width={169}
+            height={169}
+            className="h-auto"
           />
         </div>
       </div>
 
-      {/* 시작하기 버튼 */}
+      {/* 모핑 시작하기 버튼 */}
       <div className="fixed bottom-[45px] w-full flex justify-center px-4">
         <Button
           label="모핑 시작하기"