네이버 소셜 로그인

미완성

frontend/src/Component/Auth/LoginPage.js

@@ -5,6 +5,7 @@ import toastr from "toastr";
 import "toastr/build/toastr.css";
 
 import GoogleLoginBtn from "../../image/googleLoginBtn.png";
+import NaverLoginBtn from "../../image/naverLoginBtn.png";
 
 const LoginPage = () => {
   const [email, setEmail] = useState("");
@@ -77,6 +78,11 @@ const LoginPage = () => {
     window.location.href = "/api/oauth2/authorization/google";
   };
 
+  // naver login 버튼 클릭 함수
+  const handleNaverLoginClick = () => {
+    window.location.href = "/api/oauth2/authorization/naver";
+  };
+
   return (
     <Container>
     <ContentWrapper>
@@ -112,16 +118,21 @@ const LoginPage = () => {
           <small>회원가입하기</small>
         </SignupBtn>
       </IsNotUser>
-      <GoogleLoginBtnContainer>
-        <GoogleLoginImg
+      <br />
+      <SocialLoginBtnContainer>
+        <SocialLoginImg
           src={GoogleLoginBtn}
           alt="Google Login Button"
           onClick={handleGoogleLoginClick} // onClick 이벤트 핸들러 설정
         />
-      </GoogleLoginBtnContainer>
+        <SocialLoginImg
+          src={NaverLoginBtn}
+          alt="handleNaverLoginClick"
+          onClick={handleNaverLoginClick} // onClick 이벤트 핸들러 설정
+        />
+      </SocialLoginBtnContainer>
     </ContentWrapper>
   </Container>
-
   );
 };
 
@@ -139,6 +150,7 @@ const ContentWrapper = styled.div`
   flex-direction: column;
   width: 350px;
   padding: 2rem;
+  padding-bottom: 1.2rem;
   align-items: center;
 
   background-color: rgba(138, 43, 226, 0.2);
@@ -235,12 +247,12 @@ const SignupBtn = styled.span`
   }
 `;
 
-const GoogleLoginBtnContainer = styled.div`
+const SocialLoginBtnContainer = styled.div`
   margin-top: 10px; // Adjust the margin as needed
+  border-radius: 10px;
 `;
 
-const GoogleLoginImg = styled.img`
-  margin-top: 10px;
+const SocialLoginImg = styled.img`
   width: 300px;
   height: auto; // Maintain the aspect ratio
   cursor: pointer; // Add cursor pointer for interaction