로그인, 회원가입 페이지 이미지 추가

TripInfoWeb · Jun 28, 2024 · 1ff0694 · 1ff0694
1 parent 3c13f13
commit 1ff0694
Show file tree

Hide file tree

Showing 8 changed files with 406 additions and 57 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,6 +13,7 @@
     "@hookform/resolvers": "^3.6.0",
     "@types/uuid": "^10.0.0",
     "date-fns": "^3.6.0",
+    "lottie-react": "^2.4.0",
     "next": "14.2.3",
     "react": "^18",
     "react-date-range": "^2.0.1",
@@ -37,4 +38,4 @@
     "tailwindcss": "^3.4.1",
     "typescript": "^5"
   }
-}
+}
diff --git a/public/auth_brand_image.svg b/public/auth_brand_image.svg
diff --git a/public/lottie/solitour-intro-image.json b/public/lottie/solitour-intro-image.json
diff --git a/public/solitour-intro-image.svg b/public/solitour-intro-image.svg
diff --git a/src/app/auth/signin/page.tsx b/src/app/auth/signin/page.tsx
@@ -1,3 +1,6 @@
+
+import introLottie from "@/../public/lottie/solitour-intro-image.json";
+import LottieComponent from "@/components/common/lottie/LottieComponent";
 import { Metadata } from "next";
 import Image from "next/image";
 import Link from "next/link";
@@ -9,42 +12,84 @@ export const metadata: Metadata = {
 
 export default function page() {
   return (
-    <main className={"w-full flex flex-col items-center pt-[3rem] px-[.5rem] lg:px-[0rem]"} style={{ minHeight: 'calc(100vh - 30rem)' }}>
-      <div className={"pt-[6rem] pb-[8.125rem] flex flex-col max-w-[17.5rem]"}>
-        <h1 className={"text-3xl font-bold pb-[1rem]"}> 로그인 </h1>
-        <p className={"text-md pb-[3rem] text-[#666]"}> SNS로 솔리투어에 로그인하고 더 많은 서비스를 즐겨보세요! </p>
-        <button className={"w-full h-[2.875rem] bg-[#FEE500] rounded-xl mb-[0.75rem] relative"}>
-          <div
-            className="w-[1rem] aspect-square left-[1rem] absolute top-[50%] translate-y-[-50%] "
-          >
-      <Image
-        src={"/kakao-icon.svg"}
-        alt={"kakao-logo-image"}
-        fill={true}
-        /> 
+    <main
+      className={
+        "flex w-full flex-col items-center px-[.5rem] pt-[3rem] lg:px-[0rem]"
+      }
+      style={{ minHeight: "calc(100vh - 30rem)" }}
+    >
+      <div className={"flex max-w-[17.5rem] flex-col pb-[8.125rem] pt-[6rem]"}>
+        <h1 className={"pb-[1rem] text-3xl font-bold"}> 로그인 </h1>
+        <p className={"text-md pb-[3rem] text-[#666]"}>
+          SNS로 솔리투어에 로그인하고 더 많은 서비스를 즐겨보세요!
+        </p>
+        <div className={"relative h-[245px] w-[275px] py-[.75rem] "}>
+          <LottieComponent
+            lottieFile={introLottie}
+            className="h-full w-[275px]"
+          />
+          <div className="absolute top-[6.25rem] left-[4.5rem]">
+            <Image
+              src={"/solitour-intro-image.svg"}
+              alt={"kakao-logo-image"}
+              width={177}
+              height={107}
+            />
+          </div>
+        </div>
+        <button
+          className={
+            "relative mb-[0.75rem] h-[2.875rem] w-full rounded-xl bg-[#FEE500]"
+          }
+        >
+          <div className="absolute left-[1rem] top-[50%] aspect-square w-[1rem] translate-y-[-50%]">
+            <Image
+              src={"/kakao-icon.svg"}
+              alt={"kakao-logo-image"}
+              fill={true}
+            />
           </div>
-        카카오로 로그인 </button>
-        <button className={"w-full h-[2.875rem] outline outline-[#D9D9D9] outline-[1px] outline-offset-[-1px] rounded-xl mb-[3rem] relative"}>
-        <div
-            className="w-[1rem] aspect-square left-[1rem] absolute top-[50%] translate-y-[-50%] "
-          >
-          <Image
-            src={"/google-icon.svg"}
-            alt={"google-logo-image"}
-            fill={true}
-            /> 
+          카카오로 로그인
+        </button>
+        <button
+          className={
+            "relative mb-[3rem] h-[2.875rem] w-full rounded-xl outline outline-[1px] outline-offset-[-1px] outline-[#D9D9D9]"
+          }
+        >
+          <div className="absolute left-[1rem] top-[50%] aspect-square w-[1rem] translate-y-[-50%]">
+            <Image
+              src={"/google-icon.svg"}
+              alt={"google-logo-image"}
+              fill={true}
+            />
           </div>
-          구글로 로그인 </button>
-        <div className={"w-full flex justify-center relative"}>
+          구글로 로그인
+        </button>
+        <div className={"relative flex w-full justify-center"}>
           <div className={"absolute top-[-.5rem] flex flex-col items-center"}>
-            <div className={"bg-[#000] text-[#fff] text-[0.625rem] translate-y-[-100%] rounded-xl relative py-[0.5rem] px-[1rem]"}> 
+            <div
+              className={
+                "relative translate-y-[-100%] rounded-xl bg-[#000] px-[1rem] py-[0.5rem] text-[0.625rem] text-[#fff]"
+              }
+            >
               1초만의 빠른 회원가입
-            <div className={"w-0 h-0 absolute left-[50%] translate-x-[-50%] translate-y-[-50%] top-[2rem] border-l-[7px] border-r-[7px] border-t-[7px] border-t-[black] border-x-transparent"}>  </div>
+              <div
+                className={
+                  "absolute left-[50%] top-[2rem] h-0 w-0 translate-x-[-50%] translate-y-[-50%] border-l-[7px] border-r-[7px] border-t-[7px] border-x-transparent border-t-[black]"
+                }
+              ></div>
             </div>
           </div>
-                <p className={"w-full flex justify-center relative"}>
-          아직 계정이 없으신가요? <Link href={"/auth/signup"} className={"text-[#00B488] font-bold px-[0.25rem] "}> 회원가입 </Link> </p>
-      </div>
+          <p className={"relative flex w-full justify-center"}>
+            아직 계정이 없으신가요?
+            <Link
+              href={"/auth/signup"}
+              className={"px-[0.25rem] font-bold text-[#00B488]"}
+            >
+              회원가입
+            </Link>
+          </p>
+        </div>
       </div>
     </main>
   );

diff --git a/src/app/auth/signup/page.tsx b/src/app/auth/signup/page.tsx
@@ -1,3 +1,5 @@
+import introLottie from "@/../public/lottie/solitour-intro-image.json";
+import LottieComponent from "@/components/common/lottie/LottieComponent";
 import { Metadata } from "next";
 import Image from "next/image";
 import Link from "next/link";
@@ -9,34 +11,70 @@ export const metadata: Metadata = {
 
 export default function page() {
   return (
-    <main className={"w-full flex flex-col items-center pt-[3rem] px-[.5rem] lg:px-[0rem]"} style={{ minHeight: 'calc(100vh - 30rem)' }}>
-      <div className={"pt-[6rem] pb-[8.125rem] flex flex-col max-w-[17.5rem]"}>
-        <h1 className={"text-3xl font-bold pb-[1rem]"}> 회원가입 </h1>
-        <p className={"text-md pb-[3rem] text-[#666]"}> 1초 회원가입으로 입력없이 간편하게 솔리투어를 시작해보세요! </p>
-        <button className={"w-full h-[2.875rem] bg-[#FEE500] rounded-xl mb-[0.75rem] relative text-sm"}>
-          <div
-            className="w-[1rem] aspect-square left-[1rem] absolute top-[50%] translate-y-[-50%] "
-          >
-      <Image
-        src={"/kakao-icon.svg"}
-        alt={"kakao-logo-image"}
-        fill={true}
-        /> 
+    <main
+      className={
+        "flex w-full flex-col items-center px-[.5rem] pt-[3rem] lg:px-[0rem]"
+      }
+      style={{ minHeight: "calc(100vh - 30rem)" }}
+    >
+      <div className={"flex max-w-[17.5rem] flex-col pb-[8.125rem] pt-[6rem]"}>
+        <h1 className={"pb-[1rem] text-3xl font-bold"}> 회원가입 </h1>
+        <p className={"text-md pb-[3rem] text-[#666]"}>
+          {" "}
+          1초 회원가입으로 입력없이 간편하게 솔리투어를 시작해보세요!{" "}
+        </p>
+        <div className={"relative h-[245px] w-[275px] py-[.75rem]"}>
+          <LottieComponent
+            lottieFile={introLottie}
+            className="h-full w-[275px]"
+          />
+          <div className="absolute left-[4.5rem] top-[6.25rem]">
+            <Image
+              src={"/solitour-intro-image.svg"}
+              alt={"kakao-logo-image"}
+              width={177}
+              height={107}
+            />
           </div>
-        카카오로 1초만에 시작하기 </button>
-        <button className={"w-full h-[2.875rem] outline outline-[#D9D9D9] outline-[1px] outline-offset-[-1px] rounded-xl mb-[3rem] relative text-sm"}>
-        <div
-            className="w-[1rem] aspect-square left-[1rem] absolute top-[50%] translate-y-[-50%]"
-          >
-          <Image
-            src={"/google-icon.svg"}
-            alt={"google-logo-image"}
-            fill={true}
-            /> 
+        </div>
+        <button
+          className={
+            "relative mb-[0.75rem] h-[2.875rem] w-full rounded-xl bg-[#FEE500] text-sm"
+          }
+        >
+          <div className="absolute left-[1rem] top-[50%] aspect-square w-[1rem] translate-y-[-50%]">
+            <Image
+              src={"/kakao-icon.svg"}
+              alt={"kakao-logo-image"}
+              fill={true}
+            />
           </div>
-          구글로 1초만에 시작하기 </button>
-        <p className={"w-full flex justify-center relative"}>
-          이미 계정이 있으신가요? <Link href={"/auth/signin"} className={"text-[#00B488] font-bold px-[0.25rem] "}> 로그인 </Link> </p>
+          카카오로 1초만에 시작하기{" "}
+        </button>
+        <button
+          className={
+            "relative mb-[3rem] h-[2.875rem] w-full rounded-xl text-sm outline outline-[1px] outline-offset-[-1px] outline-[#D9D9D9]"
+          }
+        >
+          <div className="absolute left-[1rem] top-[50%] aspect-square w-[1rem] translate-y-[-50%]">
+            <Image
+              src={"/google-icon.svg"}
+              alt={"google-logo-image"}
+              fill={true}
+            />
+          </div>
+          구글로 1초만에 시작하기{" "}
+        </button>
+        <p className={"relative flex w-full justify-center"}>
+          이미 계정이 있으신가요?{" "}
+          <Link
+            href={"/auth/signin"}
+            className={"px-[0.25rem] font-bold text-[#00B488]"}
+          >
+            {" "}
+            로그인{" "}
+          </Link>{" "}
+        </p>
       </div>
     </main>
   );

diff --git a/src/components/common/lottie/LottieComponent.tsx b/src/components/common/lottie/LottieComponent.tsx
@@ -0,0 +1,10 @@
+"use client"
+import Lottie from "lottie-react";
+const LottieComponent = (props: {lottieFile: any, className: string}) => {
+  return (
+    <>
+      <Lottie animationData={props.lottieFile} className={props.className} style={{padding: "0px"}} />
+    </>
+  );
+};
+export default LottieComponent