20250206_V2배포

app/(auth)/login/page.tsx

@@ -11,15 +11,15 @@ export default function LoginPage() {
     if(localStorage.getItem('googleLoginToken')) {
       localStorage.removeItem('googleLoginToken');
     }
+
     window.location.href = googleAuthUrl;
   };
 
   return (
 
     <div className="auth-container flex flex-1 gap-2">
-
-
-      <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100">
+      <div className="flex flex-col items-center justify-center min-h-screen"
+      style={{backgroundColor:'white'}}>
         {/* 로고 */}
         <div className="flex-1 flex justify-center items-center">
           <span className="text-3xl font-bold login-logo">MUKPIC</span>

app/(auth)/login/withGoogle/success/page.tsx

@@ -4,6 +4,7 @@ import { useEffect } from "react";
 import { useSearchParams, useRouter } from "next/navigation";
 import axios from "axios";
 import { Suspense } from "react";
+import { addUserKey, createAuthCookie } from "@/app/components/auth/authFunctions";
 
 function GoogleLoginContent() {
   const searchParams = useSearchParams();
@@ -32,19 +33,25 @@ function GoogleLoginContent() {
           if (accessToken) {
             // 로컬 스토리지에 토큰 저장
             localStorage.setItem("Authorization", accessToken);
-            console.log("Access token stored successfully:", accessToken);
+
+            // 미들웨어를 위한 쿠키 설정
+            createAuthCookie(accessToken);
+
+            //userKey 저장
+            const userKey = response.data.userKey;
+            addUserKey(userKey);
 
             // 메인 페이지로 리디렉션
             router.push("/");
           } else {
             console.error("Authorization token is missing in the response headers.");
-            alert("로그인 토큰을 가져오지 못했습니다. 다시 시도해주세요.");
+            alert("login error please try again");
             router.push("/login");
           }
         }
       } catch (error) {
         console.error("Error fetching tokens:", error);
-        alert("로그인 중 오류가 발생했습니다. 다시 시도해주세요.");
+        alert("login error please try again");
         router.push("/login");
       }
     };

app/(auth)/signup/google/page.tsx

@@ -3,10 +3,12 @@
 import { useEffect, Suspense } from "react";
 import { useSearchParams, useRouter } from "next/navigation";
 import axios from "axios";
+import { useSignupStore } from "@/app/types/signupStore";
 
 function SignUpContent() {
   const searchParams = useSearchParams();
   const router = useRouter();
+  const setEmail = useSignupStore((state) => state.setemail);
 
   useEffect(() => {
     const email = searchParams.get("email");
@@ -25,6 +27,7 @@ function SignUpContent() {
         );
 
         if (response.status === 200) {
+          setEmail(email);
           const accessToken = response.headers["authorization"];
 
           if (accessToken) {
@@ -47,7 +50,7 @@ function SignUpContent() {
     };
 
     fetchTokens();
-  }, [searchParams, router]);
+  }, [searchParams, router, setEmail]);
 
   return (
     <div className="flex justify-center items-center logo-box">

app/(auth)/signup/layout.tsx

@@ -1,5 +1,6 @@
 'use client';
 import "@/app/globals.css";
+import '@/app/(css)/auth.css';
 import { ReactNode, useEffect } from "react";
 import { SvgButtonForNav } from "@/app/components/button";
 import TopNav from "@/app/components/TopNav";
@@ -27,7 +28,7 @@ export default function SignupLayout({ children }: LayoutProps) {
         leftButton={<SvgButtonForNav
           onClick={() => { router.back(); }}>
           <svg width="24" height="24" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <g clip-path="url(#clip0_112_3051)">
+            <g clipPath="url(#clip0_112_3051)">
               <path d="M19.6934 3.36002C19.1217 2.78836 18.2 2.78836 17.6284 3.36002L7.81671 13.1717C7.36171 13.6267 7.36171 14.3617 7.81671 14.8167L17.6284 24.6284C18.2 25.2 19.1217 25.2 19.6934 24.6284C20.265 24.0567 20.265 23.135 19.6934 22.5634L11.13 14L19.705 5.42502C20.265 4.85336 20.265 3.93169 19.6934 3.36002Z" fill="black" />
             </g>
             <defs>
@@ -41,7 +42,7 @@ export default function SignupLayout({ children }: LayoutProps) {
           onClick={() => { router.push('/login');}}
         >
           <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <g clip-path="url(#clip0_112_3048)">
+            <g clipPath="url(#clip0_112_3048)">
               <path d="M18.3 5.70997C17.91 5.31997 17.28 5.31997 16.89 5.70997L12 10.59L7.10997 5.69997C6.71997 5.30997 6.08997 5.30997 5.69997 5.69997C5.30997 6.08997 5.30997 6.71997 5.69997 7.10997L10.59 12L5.69997 16.89C5.30997 17.28 5.30997 17.91 5.69997 18.3C6.08997 18.69 6.71997 18.69 7.10997 18.3L12 13.41L16.89 18.3C17.28 18.69 17.91 18.69 18.3 18.3C18.69 17.91 18.69 17.28 18.3 16.89L13.41 12L18.3 7.10997C18.68 6.72997 18.68 6.08997 18.3 5.70997Z" fill="black" />
             </g>
             <defs>
@@ -52,7 +53,7 @@ export default function SignupLayout({ children }: LayoutProps) {
           </svg>
         </SvgButtonForNav>}
       />
-      <div className="auth-container bg-white rounded-lg shadow-md">
+      <div className="auth-container bg-white">
         {children}
       </div>
     </div>

app/(css)/auth.css

@@ -11,6 +11,7 @@ input {
   line-height: 1.375rem; /* 137.5% */
   letter-spacing: -0.01875rem;
   background: #f1f3f6;
+  width:100%;
 }
 
 input:-webkit-autofill {
@@ -75,7 +76,7 @@ input:focus::placeholder {
   height: 3.375rem;
   flex-shrink: 0;
   border-radius: 6.25rem;
-  padding: 1.25rem;
+  padding: 0.75rem 1.25rem;
   background: #f1f3f6;
   color: #0b0b0b;
   font-feature-settings: "liga" off, "clig" off;
@@ -143,7 +144,7 @@ input.auth-placeholder::placeholder {
 .dropdown-item {
   display: flex;
   align-items: center; /* 세로 방향 가운데 정렬 */
-  justify-content: flex-start; /* 가로 방향 왼쪽 정렬 */
+  justify-content: space-between; /* 가로 방향 왼쪽 정렬 */
   padding-left: 1.53rem;
   width: 100%;
   height: 3.125rem;
@@ -184,7 +185,7 @@ input.auth-placeholder::placeholder {
 }
 .dropdown-badge-green {
   background: #cff7ca;
-  padding-right: 0.5rem;
+  padding-right: 1rem;
 }
 .dropdown-badge-red {
   background: #ffc4b3;
@@ -280,12 +281,11 @@ input.auth-placeholder::placeholder {
 }
 
 .validate-error-text {
-  padding-left:1.25rem;
+  padding-left: 1.25rem;
   color: #fa0c38;
-  font-size: 0.75rem;
-  font-weight: 500;
-  line-height: 0.875rem; /* 116.667% */
-  letter-spacing: -0.01875rem;
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 400;
   text-align: left;
 }
 
@@ -294,6 +294,7 @@ input.auth-placeholder::placeholder {
   font-size: 0.875rem;
   font-style: normal;
   font-weight: 400;
+  text-align: right;
 }
 
 input[type="checkbox"] {
@@ -333,7 +334,7 @@ input[type="checkbox"]:active {
 }
 
 .dropdown-checkbox {
-  margin-right: 1.5rem !important;
+  padding-right:1rem;
 }
 
 .camera-circle {
@@ -342,13 +343,41 @@ input[type="checkbox"]:active {
   flex-shrink: 0;
   position: absolute;
   right: 0rem;
-  bottom:0.25rem;
+  bottom: 0.25rem;
   overflow: visible;
 }
 .camera-icon {
   width: 1rem;
   height: 1rem;
   flex-shrink: 0;
   overflow: visible;
-  transform: translate(-50%, -50%); ;
+  transform: translate(-50%, -50%);
+}
+
+.label-text {
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 1.375rem; /* 137.5% */
+  letter-spacing: -0.01875rem;
+}
+
+.terms-h2 {
+  font-size: 1.25rem;
+  font-weight: 700;
+  font-style: initial;
+}
+.terms-wrapper {
+  color: black;
+  text-align: left;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+.privacy-policy {
+  max-height: 0;
+  overflow-y: auto;
+  transition: height 0.5s ease-in-out;
+}
+.privacy-policy.open {
+  max-height: 25rem;
 }