Merge pull request #98 from next-petree/feat_login

Feat login
next-petree · Jan 21, 2024 · fea6e2d · fea6e2d
2 parents 877aef3 + a06e9da
commit fea6e2d
Show file tree

Hide file tree

Showing 16 changed files with 104 additions and 105 deletions.
diff --git a/src/api/token.ts b/src/api/token.ts
@@ -1,9 +1,9 @@
 export const setToken = (token: string, value: string) => {
-  localStorage.setItem(token, value);
+  sessionStorage.setItem(token, value);
 };
 export const getToken = (token: string) => {
-  return localStorage.getItem(token);
+  return sessionStorage.getItem(token);
 };
 export const removeToken = (token: string) => {
-  localStorage.removeItem(token);
+  sessionStorage.removeItem(token);
 };
diff --git a/src/component/Answer/Answer.tsx b/src/component/Answer/Answer.tsx
@@ -1,25 +1,25 @@
-import React, { useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
+import React, { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
 import {
   Wrapper,
   AnswerTitle,
   SubTitle,
   AnswerWrapper,
   Btn,
-} from './AnswerStyle';
-import AnswerComp1 from './AnswerComp1/AnswerComp1';
-import { QuestionType, AnswersType, ResultType } from '../../types/index';
+} from "./AnswerStyle";
+import AnswerComp1 from "./AnswerComp1/AnswerComp1";
+import { QuestionType, AnswersType, ResultType } from "../../types/index";
 
 export default function AnswerComp() {
   const navigate = useNavigate();
   const storedQuestions: QuestionType = JSON.parse(
-    localStorage.getItem('questions') || '[]'
+    sessionStorage.getItem("questions") || "[]",
   );
   const storedUserAnswers: AnswersType = JSON.parse(
-    localStorage.getItem('userAnswers') || '[]'
+    sessionStorage.getItem("userAnswers") || "[]",
   );
   const storedResult: ResultType = JSON.parse(
-    localStorage.getItem('result') || '{}'
+    sessionStorage.getItem("result") || "{}",
   );
 
   function moveBack() {
@@ -33,10 +33,10 @@ export default function AnswerComp() {
       <AnswerWrapper>
         {storedQuestions.map((question, index) => {
           const result = storedResult.explanations.find(
-            (res) => res.questionId === question.id
+            res => res.questionId === question.id,
           );
           const userAnswer = storedUserAnswers.find(
-            (answer) => answer.questionId === question.id
+            answer => answer.questionId === question.id,
           );
           return (
             <AnswerComp1
@@ -46,7 +46,7 @@ export default function AnswerComp() {
               num={index}
               question={question.questionText}
               choices={question.choices}
-              solution={result?.explanationText || ''}
+              solution={result?.explanationText || ""}
               correctChoiceId={result?.correctChoiceId}
               selectedChoiceId={userAnswer?.selectedChoiceId} // selectedChoiceId를 props로 전달
             />

diff --git a/src/component/BasicTest/BasicTest.tsx b/src/component/BasicTest/BasicTest.tsx
@@ -1,17 +1,17 @@
-import React, { useState, useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { get, post } from '../../api/api';
-import TestComp from './BasicTestComp/TestComp';
-import petfoot from '../../assets/icons/test_pets_black_24dp.png';
-import petree from '../../assets/images/test_petree.png';
-import TestBG from '../../assets/images/TestBG.png';
-import LoginModal from '../Modal/LoginModal';
+import React, { useState, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import { get, post } from "../../api/api";
+import TestComp from "./BasicTestComp/TestComp";
+import petfoot from "../../assets/icons/test_pets_black_24dp.png";
+import petree from "../../assets/images/test_petree.png";
+import TestBG from "../../assets/images/TestBG.png";
+import LoginModal from "../Modal/LoginModal";
 import {
   Choice,
   Question,
   TestResponse,
   ResultResponse,
-} from '../../types/index';
+} from "../../types/index";
 
 import {
   Wrapper,
@@ -23,7 +23,7 @@ import {
   MoveBtnWrap,
   PreBtn,
   NextBtn,
-} from './BasicTestStyle';
+} from "./BasicTestStyle";
 
 const BasicTest: React.FC = () => {
   const [testData, setTestData] = useState<Question[] | null>(null);
@@ -35,29 +35,29 @@ const BasicTest: React.FC = () => {
   const [selectedExample, setSelectedExample] = useState<number | null>(null);
   const [isLoggedIn, setIsLoggedIn] = useState(false); // 로그인 상태를 관리하는 상태 변수
   const [showLoginModal, setShowLoginModal] = useState(false); // 로그인 모달을 보여줄지 여부를 결정하는 상태 변수
-  const [errorMessage, setErrorMessage] = useState<string>(''); // 에러 메시지를 관리하는 상태 변수
+  const [errorMessage, setErrorMessage] = useState<string>(""); // 에러 메시지를 관리하는 상태 변수
   const navigate = useNavigate();
 
   useEffect(() => {
-    localStorage.setItem('userAnswers', JSON.stringify(userAnswers));
+    sessionStorage.setItem("userAnswers", JSON.stringify(userAnswers));
   }, [userAnswers]);
 
   useEffect(() => {
-    const accessToken = localStorage.getItem('accessToken');
+    const accessToken = sessionStorage.getItem("accessToken");
     setIsLoggedIn(!!accessToken);
     // 로컬 스토리지에서 데이터 불러오기
     const getTest = async () => {
       try {
-        const response = await get<TestResponse>('/basic-test/start');
+        const response = await get<TestResponse>("/basic-test/start");
 
-        if (response.data.status === 'SUCCESS') {
+        if (response.data.status === "SUCCESS") {
           // 로컬 스토리지에 문제 데이터 저장
-          localStorage.setItem(
-            'questions',
-            JSON.stringify(response.data.data.questions)
+          sessionStorage.setItem(
+            "questions",
+            JSON.stringify(response.data.data.questions),
           );
           const storedQuestions = JSON.parse(
-            localStorage.getItem('questions') || '[]'
+            sessionStorage.getItem("questions") || "[]",
           );
           setTestData(storedQuestions);
         }
@@ -66,14 +66,14 @@ const BasicTest: React.FC = () => {
           {
             id: 1,
             questionText:
-              '개를 크게 소형견, 중형견, 대형견으로 나눌때 소형견에 해당하는 성견의 체중과 체고는 무엇인가?',
+              "개를 크게 소형견, 중형견, 대형견으로 나눌때 소형견에 해당하는 성견의 체중과 체고는 무엇인가?",
             TestNum: 1,
             choices: [
-              { id: 1, choiceText: '체중 10kg이하, 체고 40cm 미만' },
-              { id: 2, choiceText: '체중 20kg이하, 체고 40cm 미만' },
-              { id: 3, choiceText: '체중 30kg이하, 체고 40cm 미만' },
-              { id: 4, choiceText: '체중 40kg이하, 체고 40cm 미만' },
-              { id: 5, choiceText: '체중 50kg이하, 체고 40cm 미만' },
+              { id: 1, choiceText: "체중 10kg이하, 체고 40cm 미만" },
+              { id: 2, choiceText: "체중 20kg이하, 체고 40cm 미만" },
+              { id: 3, choiceText: "체중 30kg이하, 체고 40cm 미만" },
+              { id: 4, choiceText: "체중 40kg이하, 체고 40cm 미만" },
+              { id: 5, choiceText: "체중 50kg이하, 체고 40cm 미만" },
             ],
           },
         ]);
@@ -85,21 +85,21 @@ const BasicTest: React.FC = () => {
 
   useEffect(() => {
     if (!isLoggedIn) {
-      setErrorMessage('서비스 이용을 위해 로그인을 하세요.');
+      setErrorMessage("서비스 이용을 위해 로그인을 하세요.");
     } else {
-      setErrorMessage('');
+      setErrorMessage("");
     }
   }, [isLoggedIn]);
 
   const handleAnswer = (answer: string) => {
     if (testData) {
       const selectedChoice = testData[currentQuestionIndex].choices.find(
-        (choice) => choice.choiceText === answer
+        choice => choice.choiceText === answer,
       );
 
       if (selectedChoice) {
         setSelectedAnswer(selectedChoice.id);
-        setSelectedExample(selectedChoice.id); // 선택한 Example 업데이트
+        setSelectedExample(selectedChoice.id);
       }
     }
   };
@@ -112,7 +112,7 @@ const BasicTest: React.FC = () => {
     if (selectedAnswer !== null && testData) {
       const currentQuestionId = testData[currentQuestionIndex].id;
       const existingAnswerIndex = userAnswers.findIndex(
-        (answer) => answer.questionId === currentQuestionId
+        answer => answer.questionId === currentQuestionId,
       );
       let newUserAnswers;
       if (existingAnswerIndex !== -1) {
@@ -131,32 +131,32 @@ const BasicTest: React.FC = () => {
       }
 
       setUserAnswers(newUserAnswers);
-      localStorage.setItem('userAnswers', JSON.stringify(newUserAnswers));
+      sessionStorage.setItem("userAnswers", JSON.stringify(newUserAnswers));
 
       if (currentQuestionIndex + 1 >= testData.length) {
         try {
-          const response = await post<ResultResponse>('/basic-test/submit', {
+          const response = await post<ResultResponse>("/basic-test/submit", {
             answers: newUserAnswers,
           });
-          localStorage.setItem('result', JSON.stringify(response.data));
-          navigate('/result');
+          sessionStorage.setItem("result", JSON.stringify(response.data));
+          navigate("/result");
         } catch (error: any) {
-          console.log('error', error);
+          console.log("error", error);
           if (
             error.response &&
             error.response?.data &&
-            error.response?.data?.data === '분양희망자 회원이 아닙니다.'
+            error.response?.data?.data === "분양희망자 회원이 아닙니다."
           ) {
-            window.scroll({ top: 0, behavior: 'smooth' }); // 스크롤을 페이지 상단으로 이동
-            setErrorMessage('분양 희망자 회원이 아닙니다.'); // 에러 메시지 설정
+            window.scroll({ top: 0, behavior: "smooth" }); // 스크롤을 페이지 상단으로 이동
+            setErrorMessage("분양 희망자 회원이 아닙니다."); // 에러 메시지 설정
             setShowLoginModal(true); // 로그인 모달 보여주기
           } else if (
-            error.response?.data?.data === '해당 회원을 찾을 수 없습니다.'
+            error.response?.data?.data === "해당 회원을 찾을 수 없습니다."
           ) {
-            setErrorMessage('해당 회원을 찾을 수 없습니다.'); // 에러 메시지 설정
+            setErrorMessage("해당 회원을 찾을 수 없습니다."); // 에러 메시지 설정
             setShowLoginModal(true); // 로그인 모달 보여주기
           } else {
-            setErrorMessage('답변 제출 과정에서 오류가 발생했습니다.'); // 기본 에러 메시지 설정
+            setErrorMessage("답변 제출 과정에서 오류가 발생했습니다."); // 기본 에러 메시지 설정
           }
         }
       } else {
@@ -185,10 +185,10 @@ const BasicTest: React.FC = () => {
       {/* 로그인 모달 추가 */}
       {errorMessage && (
         <LoginModal
-          top={'8'}
+          top={"8"}
           onLogin={() => {
             setIsLoggedIn(true);
-            setErrorMessage(''); // 로그인에 성공하면 에러 메시지 초기화
+            setErrorMessage(""); // 로그인에 성공하면 에러 메시지 초기화
           }}
           onClose={() => setShowLoginModal(false)}
           errorMessage={errorMessage} // 에러 메시지 prop 전달
@@ -205,10 +205,10 @@ const BasicTest: React.FC = () => {
           {currentQuestion && (
             <>
               <TestComp
-                TestNum={(currentQuestionIndex + 1).toString().padStart(2, '0')}
+                TestNum={(currentQuestionIndex + 1).toString().padStart(2, "0")}
                 Question={currentQuestion.questionText}
                 Example={currentQuestion.choices.map(
-                  (choice) => choice.choiceText
+                  choice => choice.choiceText,
                 )}
                 onAnswer={handleAnswer}
                 selectedExample={selectedExample}
@@ -220,7 +220,7 @@ const BasicTest: React.FC = () => {
                     <NextBtn onClick={handleNext}>다음</NextBtn>
                   </>
                 ) : (
-                  <NextBtn style={{ width: '100%' }} onClick={handleNext}>
+                  <NextBtn style={{ width: "100%" }} onClick={handleNext}>
                     다음
                   </NextBtn>
                 )}

diff --git a/src/component/Certify/CertifyComp.tsx b/src/component/Certify/CertifyComp.tsx
@@ -92,7 +92,7 @@ export default function CertifyComp() {
     }
   };
   useEffect(() => {
-    const accessToken = localStorage.getItem("accessToken");
+    const accessToken = sessionStorage.getItem("accessToken");
     setIsLoggedIn(!!accessToken);
   }, []);
 

diff --git a/src/component/Dropdown/NavDropdown.tsx b/src/component/Dropdown/NavDropdown.tsx
@@ -25,8 +25,8 @@ const NavDropdown = ({ loggedIn }: IDropdownProps) => {
   const handleLogoutClick = async () => {
     try {
       const res = await get<ILogoutResponse>("/logout");
-      localStorage.removeItem("accessToken");
-      localStorage.removeItem("refreshToken");
+      sessionStorage.removeItem("accessToken");
+      sessionStorage.removeItem("refreshToken");
       if (res.data.status === "SUCCESS") {
         await Swal.fire({
           ...alertList.successMessage(res.data.data),

diff --git a/src/component/Header/Header.tsx b/src/component/Header/Header.tsx
@@ -39,8 +39,8 @@ const Header = () => {
 
   useEffect(() => {
     if (
-      localStorage.getItem("accessToken") &&
-      localStorage.getItem("refreshToken")
+      sessionStorage.getItem("accessToken") &&
+      sessionStorage.getItem("refreshToken")
     ) {
       setIsLoggedIn(true);
       dispath(setProfileImg(localStorage.getItem("profileImg")!))

diff --git a/src/component/KakaoCallback/KakaoCallback.tsx b/src/component/KakaoCallback/KakaoCallback.tsx
@@ -45,8 +45,8 @@ const KakaoCallback = () => {
       );
 
       if (response.data.status === "SUCCESS") {
-        localStorage.setItem("accessToken", response.data.data.accessToken);
-        localStorage.setItem("refreshToken", response.data.data.refreshToken);
+        sessionStorage.setItem("accessToken", response.data.data.accessToken);
+        sessionStorage.setItem("refreshToken", response.data.data.refreshToken);
         navigate("/");
       } else if (response.data.status === "FAIL") {
         Swal.fire(alertList.errorMessage("카카오에 연동된 계정이 없습니다."));

diff --git a/src/component/LoginContent/LoginContent.tsx b/src/component/LoginContent/LoginContent.tsx
@@ -56,14 +56,10 @@ const LoginContent = () => {
       if (response.data.status === "SUCCESS") {
         await Swal.fire(alertList.successMessage("로그인에 성공했습니다."));
 
-        localStorage.setItem("accessToken", response.data.data.accessToken);
-        localStorage.setItem("refreshToken", response.data.data.refreshToken);
-        if(response.data.data.profileImgUrl) {
-          localStorage.setItem("profileImg", response.data.data.profileImgUrl);
-        }
-        else {
-          localStorage.setItem("profileImg", "")
-        }
+        sessionStorage.setItem("accessToken", response.data.data.accessToken);
+        sessionStorage.setItem("refreshToken", response.data.data.refreshToken);
+
+        dispath(setProfileImg(response.data.data.profileImgUrl!));
         navigate("/");
       } else if (response.data.status === "FAIL") {
         await Swal.fire(alertList.errorMessage(`${response.data.data}`));

diff --git a/src/component/Modal/LoginModal.tsx b/src/component/Modal/LoginModal.tsx
@@ -49,8 +49,8 @@ const LoginModal: React.FC<LoginModalProps> = ({
 
         if (response.data.status === "SUCCESS") {
           console.log("로그아웃!", response.data);
-          localStorage.removeItem("accessToken");
-          localStorage.removeItem("refreshToken");
+          sessionStorage.removeItem("accessToken");
+          sessionStorage.removeItem("refreshToken");
         }
       } catch (error: any) {
         console.log(error);
@@ -62,7 +62,8 @@ const LoginModal: React.FC<LoginModalProps> = ({
   };
 
   const isLoggedIn =
-    localStorage.getItem("accessToken") && localStorage.getItem("refreshToken");
+    sessionStorage.getItem("accessToken") &&
+    sessionStorage.getItem("refreshToken");
 
   return (
     <Modal ref={modalRef} style={{ top: `${top}%` }}>

diff --git a/src/component/MyPage/AdoptList/Component/TableComponent/AdopterTable/AdopterTableComp.tsx b/src/component/MyPage/AdoptList/Component/TableComponent/AdopterTable/AdopterTableComp.tsx
@@ -95,20 +95,23 @@ const TableComp = ({
                       >
                         상세보기
                       </Button>
-                    ) : cell.column.id === "state" &&
-                      cell.value === "분양승인" ? (
+                    ) : cell.column.id === "state" ? (
                       <>
-                        {cell.render("Cell")}
-                        <Button
-                          bgcolor="#4EC1BF"
-                          buttonwidth="70px;"
-                          buttonheight="40px;"
-                          onClick={() => {
-                            console.log("후기 작성!!");
-                          }}
-                        >
-                          후기작성
-                        </Button>
+                        <span style={{ marginRight: "10px" }}>
+                          {cell.render("Cell")}
+                        </span>
+                        {cell.value === "분양승인" && (
+                          <Button
+                            bgcolor="#4EC1BF"
+                            buttonwidth="70px;"
+                            buttonheight="40px;"
+                            onClick={() => {
+                              console.log("후기 작성!!");
+                            }}
+                          >
+                            후기작성
+                          </Button>
+                        )}
                       </>
                     ) : (
                       cell.render("Cell")