Merge pull request #34 from modern-agile-team/feature/login/#8

로그인 모달 퍼블리싱
modern-agile-team · Dec 20, 2023 · 72e9466 · 72e9466
2 parents be6d034 + 85441bc
commit 72e9466
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 33 deletions.
diff --git a/public/Group-88.jpeg b/public/Group-88.jpeg
diff --git a/public/Group-89.jpeg b/public/Group-89.jpeg
diff --git a/public/Group-90.jpeg b/public/Group-90.jpeg
diff --git a/src/components/molecules/auth-elements/AuthProvider.tsx b/src/components/molecules/auth-elements/AuthProvider.tsx
@@ -11,21 +11,22 @@ const getRandomInt = (min: number, max: number) => {
 };
 export const Naver = () => {
   const naverLogin = () => {
-    window.location.href = `https://nid.naver.com/oauth2.0/authorize?response_type=code&client_id=${
-      process.env.NEXT_PUBLIC_NAVER_CLIENT_ID
-    }&redirect_uri=${
-      process.env.NEXT_PUBLIC_NAVER_REDIRECT_URL
-    }&state=${getRandomInt(1, 9999)}`;
+    // window.location.href = `https://nid.naver.com/oauth2.0/authorize?response_type=code&client_id=${
+    //   process.env.NEXT_PUBLIC_NAVER_CLIENT_ID
+    // }&redirect_uri=${
+    //   process.env.NEXT_PUBLIC_NAVER_REDIRECT_URL
+    // }&state=${getRandomInt(1, 9999)}`;
+    window.location.href = `https://nid.naver.com/oauth2.0/authorize?response_type=code&client_id=${process.env.NEXT_PUBLIC_NAVER_CLIENT_ID}&redirect_uri=${process.env.NEXT_PUBLIC_NAVER_REDIRECT_URL}&state=test`;
   };
 
   return (
     <div>
       <Image
-        src=""
+        src="/Group-88.jpeg"
         alt="네이버로그인"
         onClick={naverLogin}
-        height={50}
-        width={183}
+        height={126}
+        width={126}
       />
     </div>
   );
@@ -42,10 +43,10 @@ export const Kakao = () => {
   return (
     <div>
       <Image
-        src=""
+        src="/Group-90.jpeg"
         alt="카카오로그인"
-        width={183}
-        height={50}
+        width={126}
+        height={126}
         onClick={kakaoLogin}
       />
     </div>
@@ -54,20 +55,21 @@ export const Kakao = () => {
 
 export const Google = () => {
   const googleLogin = () => {
-    window.location.href = `https://accounts.google.com/o/oauth2/v2/auth?scope=https%3A//www.googleapis.com/auth/drive.metadata.readonly&access_type=offline&include_granted_scopes=true&response_type=code&state=${getRandomInt(
-      1,
-      9999,
-    )}&redirect_uri=${process.env.NEXT_PUBLIC_GOOGLE_REDIRECT_URL}&client_id=${
-      process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID
-    }`;
+    // window.location.href = `https://accounts.google.com/o/oauth2/v2/auth?scope=https%3A//www.googleapis.com/auth/drive.metadata.readonly&access_type=offline&include_granted_scopes=true&response_type=code&state=${getRandomInt(
+    //   1,
+    //   9999,
+    // )}&redirect_uri=${process.env.NEXT_PUBLIC_GOOGLE_REDIRECT_URL}&client_id=${
+    //   process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID
+    // }`;
+    window.location.href = `https://accounts.google.com/o/oauth2/v2/auth?scope=https%3A//www.googleapis.com/auth/drive.metadata.readonly&access_type=offline&include_granted_scopes=true&response_type=code&state=test&redirect_uri=${process.env.NEXT_PUBLIC_GOOGLE_REDIRECT_URL}&client_id=${process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID}`;
   };
   return (
     <div>
       <Image
-        src=""
+        src="/Group-89.jpeg"
         alt="구글로그인"
-        width={183}
-        height={50}
+        width={126}
+        height={126}
         onClick={googleLogin}
       />
     </div>

diff --git a/src/components/organisms/auth/LoginModal.tsx b/src/components/organisms/auth/LoginModal.tsx
@@ -5,6 +5,8 @@ import {
   Naver,
 } from '@/components/molecules/auth-elements/AuthProvider';
 import { useEffect } from 'react';
+import Image from 'next/image';
+import { TextBox } from '@/components/common/globalStyled/styled';
 
 interface ModalType {
   show: boolean;
@@ -24,16 +26,25 @@ const LoginModal = ({ show, hide }: ModalType) => {
   return (
     <div>
       <ModalWrapper>
-        <div>
-          <div onClick={hide}>X</div>
-        </div>
-        <div>로고</div>
-        <div>로그인</div>
-        <div>
+        <ModalHeaderBox>
+          <TextBox size={21}>로그인/회원가입</TextBox>
+          <TextBox
+            size={21}
+            style={{ marginLeft: 'auto', cursor: 'pointer' }}
+            onClick={hide}>
+            X
+          </TextBox>
+        </ModalHeaderBox>
+        <LogoBox>
+          <Image src="/LogoIcon.svg" alt="로고아이콘" width={100} height={60} />
+          <br />
+          <Image src="/LogoText.svg" alt="로고텍스트" width={168} height={60} />
+        </LogoBox>
+        <OAuthBox>
           <Naver />
-          <Kakao />
           <Google />
-        </div>
+          <Kakao />
+        </OAuthBox>
       </ModalWrapper>
       <Backdrop
         onClick={(e: React.MouseEvent) => {
@@ -55,11 +66,11 @@ export const ModalWrapper = styled.div`
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  background-color: white;
-  width: 300px;
-  padding: 20px;
-  border: 1px solid #ccc;
-  border-radius: 5px;
+  background-color: #252525;
+  width: 588px;
+  height: 455px;
+  border: 2px solid #ff9b50;
+  border-radius: 10px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
   z-index: 10000;
   text-align: center;
@@ -74,3 +85,23 @@ export const Backdrop = styled.div`
   z-index: 9999;
   background-color: rgba(0, 0, 0, 0.2);
 `;
+
+export const ModalHeaderBox = styled.div`
+  display: flex;
+  padding: 24px;
+  background-color: #ff9b50;
+  border-top-right-radius: 10px;
+  border-top-left-radius: 10px;
+`;
+
+export const LogoBox = styled.div`
+  margin: 18px;
+`;
+
+export const OAuthBox = styled.div`
+  display: flex;
+  justify-content: center;
+  & > * {
+    margin: 24px;
+  }
+`;