feat: 슬랙 로그인 기능 (#77)

* feat: 로그인 버튼 구현

* feat: code를 추출하고 서버로 보내는 로직 구현

* feat: 로그인 버튼 클릭시 slack으로 이동하는 로직 추가

* feat: 슬랙 리다이렉션 코드 생성 기능 추가

* feat: 슬랙로그인 기능 추가

FE/error/src/components/EconoCalendar.jsx

@@ -85,6 +85,12 @@ const EconoCalendar = () => {
                 setCreateModalIsOpen(true);
               },
             },
+            loginButtons: {
+              text: "로그인",
+              click: function () {
+                window.location.href = "/login";
+              },
+            },
           }}
           views={{
             timeGrid: {
@@ -94,7 +100,7 @@ const EconoCalendar = () => {
           headerToolbar={{
             left: "today prev title next",
             center: "",
-            right: "createDateButton",
+            right: "loginButtons,createDateButton",
           }}
           events={events}
           eventDisplay={"block"}
@@ -243,4 +249,11 @@ const CalendarContainer = styled.div`
     color: #595959;
     margin-right: 1rem;
   }
+
+  .fc-loginButtons-button {
+    background-color: #fff;
+    border-color: #cbcbcb;
+    color: #595959;
+    margin-right: 0.7rem;
+  }
 `;

FE/error/src/components/SlackRedirectHandler.jsx

@@ -0,0 +1,42 @@
+import { useEffect } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+
+const SlackRedirectHandler = () => {
+  const location = useLocation();
+
+  const urlParams = new URLSearchParams();
+  const code = urlParams.get("code");
+  console.log(code);
+  useEffect(() => {
+    const getQueryParam = (code) => {
+      return urlParams.get("code");
+    };
+
+    const authorizationCode = getQueryParam("code");
+
+    if (authorizationCode) {
+      const sendCodeToServer = async () => {
+        try {
+          const response = await fetch("/api/auth/login/slack", {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({ code: authorizationCode }),
+          });
+          const data = await response.json();
+          console.log(data);
+          // 로그인 성공 후 처리 (예: 토큰 저장, 메인 페이지로 리다이렉트)
+        } catch (error) {
+          console.error("Error:", error);
+          // 에러 처리 (예: 에러 페이지로 리다이렉트)
+        }
+      };
+      sendCodeToServer();
+    }
+  }, [location]);
+
+  return <div>로그인 처리 중...</div>;
+};
+
+export default SlackRedirectHandler;

FE/error/src/pages/LoginPage.jsx

@@ -1,6 +1,26 @@
+import React, { useEffect } from "react";
 import styled from "styled-components";
+import { useNavigate, useSearchParams } from "react-router-dom";
 
 const LoginPage = () => {
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const code = searchParams.get("code");
+
+  useEffect(() => {
+    if (code) {
+      // code를 이용한 처리 로직
+      console.log("Received code:", code);
+      // 여기에 code를 사용하는 추가 로직을 구현할 수 있습니다.
+      // 예: API 호출, 상태 업데이트 등
+    }
+  }, [code]);
+
+  const handleOnLogin = () => {
+    const slackAuthUrl = `https://econovation-2018.slack.com/oauth?client_id=437291124342.7141431332214&scope=incoming-webhook&user_scope=&redirect_uri=&state=&granular_bot_scope=0&single_channel=0&install_redirect=&tracked=1&team=`;
+    window.location.href = slackAuthUrl;
+  };
+
   return (
     <>
       <StyledTextArea>
@@ -13,12 +33,13 @@ const LoginPage = () => {
           <br />
           공식 일정만 조회 가능합니다.
         </StyledSubTitle>
-        <StyledSlackButton>
-          <StyledSlackImage src="Slack.png"></StyledSlackImage>슬랙으로 로그인
+        <StyledSlackButton onClick={handleOnLogin}>
+          <StyledSlackImage src="Slack.png" alt="Slack logo" />
+          슬랙으로 로그인
         </StyledSlackButton>
       </StyledTextArea>
-      <StyledBackground src="Background.png" />
-      <StyledCharacter src="Picture.png" />
+      <StyledBackground src="Background.png" alt="Background" />
+      <StyledCharacter src="Picture.png" alt="Character" />
     </>
   );
 };
@@ -67,6 +88,7 @@ const StyledSubTitle = styled.h3`
 const StyledBackground = styled.img`
   margin-left: 48%;
   margin-top: 8%;
+
   height: 35rem;
 `;