From 5f126e9a99aca8abc8111b852fe2d3dbb21e4257 Mon Sep 17 00:00:00 2001 From: ChanghyeonO Date: Wed, 17 Jan 2024 11:47:47 +0900 Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=EB=B6=84=EC=96=91=ED=9B=84?= =?UTF-8?q?=EA=B8=B0=20=EB=B2=84=ED=8A=BC=20=EA=B0=84=EA=B2=A9=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../AdopterTable/AdopterTableComp.tsx | 29 ++++++++++--------- 1 file changed, 16 insertions(+), 13 deletions(-) diff --git a/src/component/MyPage/AdoptList/Component/TableComponent/AdopterTable/AdopterTableComp.tsx b/src/component/MyPage/AdoptList/Component/TableComponent/AdopterTable/AdopterTableComp.tsx index 0d10f83..cdb847f 100644 --- 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 = ({ > 상세보기 - ) : cell.column.id === "state" && - cell.value === "분양승인" ? ( + ) : cell.column.id === "state" ? ( <> - {cell.render("Cell")} - + + {cell.render("Cell")} + + {cell.value === "분양승인" && ( + + )} ) : ( cell.render("Cell") From a06e9daecf746c160cf17620b5362c88fc85339f Mon Sep 17 00:00:00 2001 From: ChanghyeonO Date: Sun, 21 Jan 2024 13:00:53 +0900 Subject: [PATCH 2/2] =?UTF-8?q?fix:=20=ED=86=A0=ED=81=B0=20=EC=A0=80?= =?UTF-8?q?=EC=9E=A5=EC=9C=84=EC=B9=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/token.ts | 6 +- src/component/Answer/Answer.tsx | 22 ++--- src/component/BasicTest/BasicTest.tsx | 92 +++++++++---------- src/component/Certify/CertifyComp.tsx | 2 +- src/component/Dropdown/NavDropdown.tsx | 4 +- src/component/Header/Header.tsx | 4 +- src/component/KakaoCallback/KakaoCallback.tsx | 4 +- src/component/LoginContent/LoginContent.tsx | 12 +-- src/component/Modal/LoginModal.tsx | 7 +- .../RemoveAccountContent.tsx | 2 +- src/component/PrivateRoute/PrivateRoute.tsx | 2 +- src/component/Result/Result.tsx | 18 ++-- .../TestDescription/TestDescription.tsx | 2 +- src/redux/store.ts | 1 - src/utils/DecodeJWT/DecodeJWT.tsx | 2 +- 15 files changed, 88 insertions(+), 92 deletions(-) diff --git a/src/api/token.ts b/src/api/token.ts index 6123e77..f08886a 100644 --- 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 index db0f029..5e46540 100644 --- 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() { {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 ( diff --git a/src/component/BasicTest/BasicTest.tsx b/src/component/BasicTest/BasicTest.tsx index d56adfd..fcbbbfd 100644 --- 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(null); @@ -35,29 +35,29 @@ const BasicTest: React.FC = () => { const [selectedExample, setSelectedExample] = useState(null); const [isLoggedIn, setIsLoggedIn] = useState(false); // 로그인 상태를 관리하는 상태 변수 const [showLoginModal, setShowLoginModal] = useState(false); // 로그인 모달을 보여줄지 여부를 결정하는 상태 변수 - const [errorMessage, setErrorMessage] = useState(''); // 에러 메시지를 관리하는 상태 변수 + const [errorMessage, setErrorMessage] = useState(""); // 에러 메시지를 관리하는 상태 변수 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('/basic-test/start'); + const response = await get("/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('/basic-test/submit', { + const response = await post("/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 && ( { setIsLoggedIn(true); - setErrorMessage(''); // 로그인에 성공하면 에러 메시지 초기화 + setErrorMessage(""); // 로그인에 성공하면 에러 메시지 초기화 }} onClose={() => setShowLoginModal(false)} errorMessage={errorMessage} // 에러 메시지 prop 전달 @@ -205,10 +205,10 @@ const BasicTest: React.FC = () => { {currentQuestion && ( <> choice.choiceText + choice => choice.choiceText, )} onAnswer={handleAnswer} selectedExample={selectedExample} @@ -220,7 +220,7 @@ const BasicTest: React.FC = () => { 다음 ) : ( - + 다음 )} diff --git a/src/component/Certify/CertifyComp.tsx b/src/component/Certify/CertifyComp.tsx index 5c40293..8b09dfb 100644 --- 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 index 67e173f..c9eac07 100644 --- 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("/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 index 7b9eaaf..f724839 100644 --- 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 index e79c863..1d8ca61 100644 --- 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 index 881913c..52ccb28 100644 --- 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 index 699759f..e055d68 100644 --- a/src/component/Modal/LoginModal.tsx +++ b/src/component/Modal/LoginModal.tsx @@ -49,8 +49,8 @@ const LoginModal: React.FC = ({ 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 = ({ }; const isLoggedIn = - localStorage.getItem("accessToken") && localStorage.getItem("refreshToken"); + sessionStorage.getItem("accessToken") && + sessionStorage.getItem("refreshToken"); return ( diff --git a/src/component/MyPage/RemoveAccountContent/RemoveAccountContent.tsx b/src/component/MyPage/RemoveAccountContent/RemoveAccountContent.tsx index 696e039..2db80d3 100644 --- a/src/component/MyPage/RemoveAccountContent/RemoveAccountContent.tsx +++ b/src/component/MyPage/RemoveAccountContent/RemoveAccountContent.tsx @@ -48,7 +48,7 @@ const RemoveAccountContent = () => { if (response.data.status === "SUCCESS") { Swal.fire(alertList.successMessage("회원탈퇴가 완료되었습니다.")); - localStorage.clear(); + sessionStorage.clear(); navigation("/"); } else { Swal.fire(alertList.errorMessage(response.data.data)); diff --git a/src/component/PrivateRoute/PrivateRoute.tsx b/src/component/PrivateRoute/PrivateRoute.tsx index 65d955d..38d7333 100644 --- a/src/component/PrivateRoute/PrivateRoute.tsx +++ b/src/component/PrivateRoute/PrivateRoute.tsx @@ -1,7 +1,7 @@ import { Outlet, Navigate } from "react-router-dom"; const PrivateRoute = () => { - return localStorage.getItem("accessToken") ? ( + return sessionStorage.getItem("accessToken") ? ( ) : ( diff --git a/src/component/Result/Result.tsx b/src/component/Result/Result.tsx index 940704a..9e6a3e6 100644 --- a/src/component/Result/Result.tsx +++ b/src/component/Result/Result.tsx @@ -1,7 +1,7 @@ -import React, { useEffect, useState } from 'react'; -import { post } from '../../api/api'; -import Result1 from '../../assets/images/Result1.png'; -import Badge from '../../assets/images/Badge.png'; +import React, { useEffect, useState } from "react"; +import { post } from "../../api/api"; +import Result1 from "../../assets/images/Result1.png"; +import Badge from "../../assets/images/Badge.png"; import { Wrapper, @@ -18,7 +18,7 @@ import { AnswerBtn, ResultFailed, ResultAcceptance, -} from './ResultStyle'; +} from "./ResultStyle"; // type ResultResponse = { // status: string; @@ -33,7 +33,7 @@ export default function ResultComp() { const [score, setScore] = useState(0); const [passed, setPassed] = useState(false); useEffect(() => { - const storedResult = JSON.parse(localStorage.getItem('result') || '[]'); + const storedResult = JSON.parse(sessionStorage.getItem("result") || "[]"); setScore(storedResult.score); setPassed(storedResult.passed); }, []); @@ -59,7 +59,7 @@ export default function ResultComp() { {score === 100 ? ( - + 해설보기 ) : ( @@ -94,12 +94,12 @@ export default function ResultComp() { // const submitAnswers = async () => { // try { // const userAnswers = JSON.parse( -// localStorage.getItem('userAnswers') || '[]' +// sessionStorage.getItem('userAnswers') || '[]' // ); // const response = await post('/api/basic-test/submit', { // answers: userAnswers, // }); -// localStorage.setItem('result', JSON.stringify(response.data)); +// sessionStorage.setItem('result', JSON.stringify(response.data)); // console.log('결과 받아오기!!!!', response.data); // setScore(response.data.score); // setPassed(response.data.passed); diff --git a/src/component/TestDescription/TestDescription.tsx b/src/component/TestDescription/TestDescription.tsx index db4c307..894d51d 100644 --- a/src/component/TestDescription/TestDescription.tsx +++ b/src/component/TestDescription/TestDescription.tsx @@ -101,7 +101,7 @@ function TestDescription() { }, [currentIndex]); useEffect(() => { - const accessToken = localStorage.getItem("accessToken"); + const accessToken = sessionStorage.getItem("accessToken"); setIsLoggedIn(!!accessToken); }, []); diff --git a/src/redux/store.ts b/src/redux/store.ts index 6751a09..702c10f 100644 --- a/src/redux/store.ts +++ b/src/redux/store.ts @@ -19,7 +19,6 @@ import ChangeAvatarSlice from "./Mypage1/ChangeAvatarSlice1"; export const store = configureStore({ reducer: { - // Add the generated reducer as a specific top-level slice [apiSlice.reducerPath]: apiSlice.reducer, breeder: breederSlice, dog_searchfilter: dog_searchfilterSlice, diff --git a/src/utils/DecodeJWT/DecodeJWT.tsx b/src/utils/DecodeJWT/DecodeJWT.tsx index e665b76..b9f62df 100644 --- a/src/utils/DecodeJWT/DecodeJWT.tsx +++ b/src/utils/DecodeJWT/DecodeJWT.tsx @@ -1,6 +1,6 @@ export default function DecodeToken() { // accessToken 가져오기 - const token = localStorage.getItem("accessToken")?.replace("Bearer ", ""); + const token = sessionStorage.getItem("accessToken")?.replace("Bearer ", ""); // token이 없으면 알림 표시 if (!token) { // console.log("토큰이 없습니다.");