feat: 브랜치 최신화 (#80)

* style: 필터 디자인 수정 * chore: 파일 경로 업데이트 * feat: 필터 생성 모달 추가 * style: 모달 css 추가 * style: 필터추가모달 스타일 수정 * feat: 필터 생성 모달 추가 * chore: 컴포넌트 이름 변경 * feat: 그룹 필터 컴포넌트 내부에 베이직 모달 추가 * chore: 컴포넌트 이름 변경 후 파일 경로 수정 * feat: 그룹 모달 추가 * chore: 필터 색상 선택 컴포넌트 분리 * chore: 경로변경 * style: 제목입력칸 css 수정 * chore: 컴포넌트 분리에 따른 경로 변경 * feat: 그룹내 유저 추가 모달 추가 * feat: 상태값에 따른 모달 내용 변경 * feat: 상위 컴포넌트에서 받은 상태값에 따른 렌더링 * feat: 필터 색상 추가 * feat: 특정 캘린더에 따라 프롭스 다르게 보내주는 코드 수정 * stylde: 스타일드 컴포넌트에 <Styled 접두사 추가 * feat: 필터 제목 및 색상 상태 추가 * feat: 필터 제목 및 색상 선택 시 filterList 함수에 추가 * feat: 필터 색상 선택시 반영되게끔 로직 추가 * feat: 색상 및 제목 필터 리스트에 나열 기능 추가 * feat: 필터 색상 및 색상 선택기능 추가 * chore: 폴더 변경 및 경로 재설정 * feat: 필터리스트 상태 상위컴포넌트로 이동 * feat: 생성 모달 필터 선택 기능 추가 (#63) * feat: cors 설정 추가 * feat: 1차 스프린트 기능 개발 캘린더 기능 개발, 일정 리스트, 수정, 생성, 삭제 기능 개발 * feat: 프로필 선택 페이지 마크업 (#61) * style: 로그인 페이지 CSS 수정 * feat: 프로필 선택 페이지 마크업 * fix: 중복 파일 제거 * chore: .env테스트 * feat: .gitignore 경로 추가 * chore: .gitignore 경로 수정 * chore: 캐시 삭제 * feat: 버튼 컴포넌트 생성 * feat: 생성 모달 필터 선택 영역 추가 * style: 생성 모달 CSS 수정 * style: 버튼 컴포넌트 내부 토글 아이콘 추가 * feat: 생성 모달 필터 선택 드롭다운 기능 추가 * feat: 선택된 필터 백엔드 전송 부분 추가 --------- Co-authored-by: capDoYeonLee <[email protected]> Co-authored-by: LimSumi <[email protected]> Co-authored-by: LimSoomi <[email protected]> Co-authored-by: kanghaeun <[email protected]> * feat: 그룹,개인 필터 리스트 분리 기능 추가 * style: 필터 기준 margin값 변경 * style: 필터 삭제 및 편집 아이콘 마우스 호버기능 추가 * feat: 체크 모양 아이콘 변경 (#66) * feat: cors 설정 추가 * feat: 1차 스프린트 기능 개발 캘린더 기능 개발, 일정 리스트, 수정, 생성, 삭제 기능 개발 * feat: 프로필 선택 페이지 마크업 (#61) * style: 로그인 페이지 CSS 수정 * feat: 프로필 선택 페이지 마크업 * fix: 중복 파일 제거 * chore: .env테스트 * feat: .gitignore 경로 추가 * chore: .gitignore 경로 수정 * chore: 캐시 삭제 * style: 체크 모양 아이콘 svg 이미지 변경 --------- Co-authored-by: capDoYeonLee <[email protected]> Co-authored-by: LimSumi <[email protected]> Co-authored-by: LimSoomi <[email protected]> Co-authored-by: kanghaeun <[email protected]> * feat: 필터 접기 기능 추가 * style: 필터 접기 up and down 아이콘 추가 * style: 필터 삭제 및 더보기 아이콘 배치 수정 * style: 모달 수정 * feat: 필터 사이드바 보완 (#67) * style: 필터 디자인 수정 * chore: 파일 경로 업데이트 * feat: 필터 생성 모달 추가 * style: 모달 css 추가 * style: 필터추가모달 스타일 수정 * feat: 필터 생성 모달 추가 * chore: 컴포넌트 이름 변경 * feat: 그룹 필터 컴포넌트 내부에 베이직 모달 추가 * chore: 컴포넌트 이름 변경 후 파일 경로 수정 * feat: 그룹 모달 추가 * chore: 필터 색상 선택 컴포넌트 분리 * chore: 경로변경 * style: 제목입력칸 css 수정 * chore: 컴포넌트 분리에 따른 경로 변경 * feat: 그룹내 유저 추가 모달 추가 * feat: 상태값에 따른 모달 내용 변경 * feat: 상위 컴포넌트에서 받은 상태값에 따른 렌더링 * feat: 필터 색상 추가 * feat: 특정 캘린더에 따라 프롭스 다르게 보내주는 코드 수정 * stylde: 스타일드 컴포넌트에 <Styled 접두사 추가 * feat: 필터 제목 및 색상 상태 추가 * feat: 필터 제목 및 색상 선택 시 filterList 함수에 추가 * feat: 필터 색상 선택시 반영되게끔 로직 추가 * feat: 색상 및 제목 필터 리스트에 나열 기능 추가 * feat: 필터 색상 및 색상 선택기능 추가 * chore: 폴더 변경 및 경로 재설정 * feat: 필터리스트 상태 상위컴포넌트로 이동 * feat: 그룹,개인 필터 리스트 분리 기능 추가 * style: 필터 기준 margin값 변경 * style: 필터 삭제 및 편집 아이콘 마우스 호버기능 추가 * feat: 필터 접기 기능 추가 * style: 필터 접기 up and down 아이콘 추가 * style: 필터 삭제 및 더보기 아이콘 배치 수정 * style: 필터 저장 폰트 굵기 수정 * feat: 슬랙 로그인 기능 (#77) * feat: 로그인 버튼 구현 * feat: code를 추출하고 서버로 보내는 로직 구현 * feat: 로그인 버튼 클릭시 slack으로 이동하는 로직 추가 * feat: 슬랙 리다이렉션 코드 생성 기능 추가 * feat: 슬랙로그인 기능 추가 * feat: 슬랙 로그인 코드 추출 후 백엔드 전송 및 메인 페이지로 이동 (#79) * feat: 로그인 버튼 구현 * feat: code를 추출하고 서버로 보내는 로직 구현 * feat: 로그인 버튼 클릭시 slack으로 이동하는 로직 추가 * feat: 슬랙 리다이렉션 코드 생성 기능 추가 * feat: 슬랙로그인 기능 추가 * feat: 슬랙 로그인 코드 추출후 백엔드로 전송 --------- Co-authored-by: mlnwns <[email protected]> Co-authored-by: capDoYeonLee <[email protected]> Co-authored-by: LimSumi <[email protected]> Co-authored-by: LimSoomi <[email protected]>
JNU-econovation · Jul 19, 2024 · aaa5e19 · aaa5e19
1 parent 45ff777
commit aaa5e19
Showing 1 changed file with 36 additions and 6 deletions.
diff --git a/FE/error/src/pages/LoginPage.jsx b/FE/error/src/pages/LoginPage.jsx
@@ -1,26 +1,56 @@
-import React, { useEffect } from "react";
+import { useEffect, useState } from "react";
 import styled from "styled-components";
 import { useNavigate, useSearchParams } from "react-router-dom";
+import axios from "axios";
+
+// Axios 기본 설정
+axios.defaults.baseURL = import.meta.env.VITE_ERROR_API;
+axios.defaults.headers.common["Content-Type"] = "application/json";
+axios.defaults.withCredentials = true;
 
 const LoginPage = () => {
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
   const code = searchParams.get("code");
+  const [isLoading, setIsLoading] = useState(false);
 
   useEffect(() => {
     if (code) {
-      // code를 이용한 처리 로직
-      console.log("Received code:", code);
-      // 여기에 code를 사용하는 추가 로직을 구현할 수 있습니다.
-      // 예: API 호출, 상태 업데이트 등
+      handleSlackAuth(code);
+      localStorage.setItem("slackCode", code);
+      navigate("/");
     }
-  }, [code]);
+  }, [code, navigate]);
+
+  const handleSlackAuth = async (authCode) => {
+    setIsLoading(true);
+    try {
+      const response = await axios.post("/slack/auth", { code: authCode });
+
+      if (response.data.success) {
+        localStorage.setItem("slackToken", response.data.token);
+        navigate("/dashboard");
+      } else {
+        console.error("Login failed:", response.data.message);
+        // 여기에 에러 처리 로직 추가 (예: 사용자에게 알림)
+      }
+    } catch (error) {
+      console.error("Error during Slack authentication:", error);
+      // 여기에 에러 처리 로직 추가 (예: 사용자에게 알림)
+    } finally {
+      setIsLoading(false);
+    }
+  };
 
   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;
   };
 
+  if (isLoading) {
+    return <div>로그인 중...</div>;
+  }
+
   return (
     <>
       <StyledTextArea>