.gitignore
package-lock.json
package.json
public
README.md
src
tailwind.config.js
===========================================================
\src\api\cartApi.js
===========================================================
import {API_SERVER_HOST} from "./todoApi";
import jwtAxios from "../util/jwtUtil";
const host = `${API_SERVER_HOST}/api/cart`
export const getCartItems = async () => {
const res = await jwtAxios.get(`${host}/items`)
return res.data
}
export const postChangeCart = async (cartItem) => {
const res = await jwtAxios.post(`${host}/change`, cartItem)
return res.data
}
===========================================================
\src\api\kakaoApi.js
===========================================================
import axios from "axios";
import { API_SERVER_HOST } from "./todoApi";
const rest_api_key =`15ad2f01de3b217534d2eb44217f51eb` //REST키값
const redirect_uri =`http://localhost:3000/member/kakao`
const auth_code_path = `https://kauth.kakao.com/oauth/authorize`
const access_token_url =`https://kauth.kakao.com/oauth/token` //추가
export const getKakaoLoginLink = () => {
const kakaoURL = `${auth_code_path}?client_id=${rest_api_key}&redirect_uri=${redirect_uri}&response_type=code`;
return kakaoURL
}
export const getAccessToken = async (authCode) => {
const header = {
headers: {
"Content-Type": "application/x-www-form-urlencoded",
}
}
const params = {
grant_type: "authorization_code",
client_id: rest_api_key,
redirect_uri: redirect_uri,
code:authCode
}
const res = await axios.post(access_token_url, params , header)
const accessToken = res.data.access_token
return accessToken
}
export const getMemberWithAccessToken = async(accessToken) => {
const res = await axios.get(`${API_SERVER_HOST}/api/member/kakao?accessToken=${accessToken}`)
return res.data
}
===========================================================
\src\api\memberApi.js
===========================================================
import axios from "axios"
import { API_SERVER_HOST } from "./todoApi"
import jwtAxios from "../util/jwtUtil"
const host = `${API_SERVER_HOST}/api/member`
export const loginPost = async (loginParam) => {
const header = {headers: {"Content-Type": "x-www-form-urlencoded"}}
const form = new FormData()
form.append('username', loginParam.email)
form.append('password', loginParam.pw)
const res = await axios.post(`${host}/login`, form, header)
return res.data
}
export const modifyMember = async (member) => {
const res = await jwtAxios.put(`${host}/modify`, member)
return res.data
}
===========================================================
\src\api\productsApi.js
===========================================================
import axios from "axios"
import { API_SERVER_HOST } from "./todoApi"
import jwtAxios from "../util/jwtUtil"
const host = `${API_SERVER_HOST}/api/products`
export const postAdd = async (product) => {
const header = {headers: {"Content-Type": "multipart/form-data"}}
// 경로 뒤 '/' 주의
const res = await jwtAxios.post(`${host}/`, product, header)
return res.data
}
export const getList = async ( pageParam ) => {
const {page,size} = pageParam
const res = await jwtAxios.get(`${host}/list`, {params: {page:page,size:size }})
return res.data
}
export const getOne = async (tno) => {
const res = await jwtAxios.get(`${host}/${tno}` )
return res.data
}
export const putOne = async (pno, product) => {
const header = {headers: {"Content-Type": "multipart/form-data"}}
const res = await jwtAxios.put(`${host}/${pno}`, product, header)
return res.data
}
export const deleteOne = async (pno) => {
const res = await jwtAxios.delete(`${host}/${pno}`)
return res.data
}
===========================================================
\src\api\todoApi.js
===========================================================
import axios from "axios"
import jwtAxios from "../util/jwtUtil"
export const API_SERVER_HOST = 'http://localhost:8080'
const prefix = `${API_SERVER_HOST}/api/todo`
export const getOne = async (tno) => {
const res = await jwtAxios.get(`${prefix}/${tno}` )
return res.data
}
export const getList = async ( pageParam ) => {
const {page,size} = pageParam
const res = await jwtAxios.get(`${prefix}/list`, {params: {page:page,size:size }})
return res.data
}
export const postAdd = async (todoObj) => {
const res = await jwtAxios.post(`${prefix}/` , todoObj)
return res.data
}
export const deleteOne = async (tno) => {
const res = await jwtAxios.delete(`${prefix}/${tno}` )
return res.data
}
export const putOne = async (todo) => {
const res = await jwtAxios.put(`${prefix}/${todo.tno}`, todo)
return res.data
}
===========================================================
\src\App.css
===========================================================
.App {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
===========================================================
\src\App.js
===========================================================
import {RouterProvider} from "react-router-dom";
import root from "./router/root";
import {QueryClient, QueryClientProvider} from "@tanstack/react-query";
import {ReactQueryDevtools} from "@tanstack/react-query-devtools";
const queryClient = new QueryClient()
function App() {
return (
);
}
export default App;
===========================================================
\src\App.test.js
===========================================================
import { render, screen } from '@testing-library/react';
import App from './App';
test('renders learn react link', () => {
render();
const linkElement = screen.getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();
});
===========================================================
\src\atoms\cartState.js
===========================================================
import {atom, selector} from "recoil";
export const cartState = atom({
key:'cartState',
default:[]
})
export const cartTotalState = selector( {
key: "cartTotalState",
get: ( {get} ) => {
const arr = get(cartState)
const initialValue = 0
const total = arr.reduce((total , current) => total + current.price * current.qty , initialValue)
return total
}
})
===========================================================
\src\atoms\signinState.js
===========================================================
import { atom } from "recoil";
import { getCookie } from "../util/cookieUtil";
const initState = {
email:'',
nickname:'',
social: false,
accessToken:'',
refreshToken:''
}
const loadMemberCookie = () => { //쿠키에서 체크
const memberInfo = getCookie("member")
//닉네임 처리
if(memberInfo && memberInfo.nickname) {
memberInfo.nickname = decodeURIComponent(memberInfo.nickname)
}
return memberInfo
}
const signinState = atom({
key:'signinState',
default: loadMemberCookie() || initState
})
export default signinState
===========================================================
\src\components\cart\CartItemComponent.js
===========================================================
import React from 'react';
import {API_SERVER_HOST} from "../../api/todoApi";
const host = API_SERVER_HOST
function CartItemComponent({cino, pname, price, pno, qty, imageFile,changeCart, email}) {
const handleClickQty = (amount) => {
changeCart({email:email, cino:cino, pno: pno, qty: qty + amount})
}
return (
Cart Item No: {cino}
Pno: {pno}
Name: {pname}
Price: {price}
Qty: {qty}
{qty * price} 원
);
}
export default CartItemComponent;
===========================================================
\src\components\common\FetchingModal.js
===========================================================
const FetchingModal = ( ) => {
return (
);
}
export default FetchingModal;
===========================================================
\src\components\common\PageComponent.js
===========================================================
const PageComponent = ({serverData, movePage,handleClickPage}) => {
return (
{serverData.prev ?
movePage({page:serverData.prevPage} )}>
Prev
: <>}
{serverData.pageNumList.map(pageNum =>
movePage( {page:pageNum})}>
{pageNum}
)}
{serverData.next ?
movePage( {page:serverData.nextPage})}>
Next
: <>}
{
if(callbackFn) {
callbackFn()
}
}}>
{title}
{content}
{isLogin ?
{loginState.nickname}'s Cart
{cartItems.length}
{cartItems.map( item =>
)}
TOTAL: {totalValue}
:
}
{addMutation.isPending ?
:<>}
{addMutation.isSuccess?
: <>
}
{serverData.dtoList.map(product =>
moveToRead(product.pno)}
>
{product.pno}
이름: {product.pname}
가격: {product.price}
)}
);
}
export default ListComponent;
===========================================================
\src\components\products\ModifyComponent.js
===========================================================
import { useEffect, useRef, useState } from "react";
import {deleteOne, getOne, putOne} from "../../api/productsApi";
import { API_SERVER_HOST } from "../../api/todoApi";
import useCustomMove from "../../hooks/useCustomMove";
import {useMutation, useQuery, useQueryClient} from "@tanstack/react-query";
import FetchingModal from "../common/FetchingModal";
import ResultModal from "../common/ResultModal";
const initState = {
pno:0,
pname: '',
pdesc: '',
price: 0,
delFlag:false,
uploadFileNames:[]
}
const host = API_SERVER_HOST
const ModifyComponent = ({pno}) => {
const queryClient = useQueryClient()
const delMutation = useMutation({mutationFn: (pno) => deleteOne(pno)})
const modMutation = useMutation({mutationFn: (product) => putOne(pno, product)})
//이동용 함수
const {moveToRead, moveToList} = useCustomMove()
const [product, setProduct] = useState(initState)
const [fetching, setFetching] = useState(false)
const [result, setResult] = useState()
const uploadRef = useRef()
const query = useQuery({
queryKey: ['products', pno],
queryFn: () => getOne(pno),
staleTime: Infinity,
})
useEffect(() => {
if(query.isSuccess) {
setProduct(query.data)
}
}, [pno, query.data, query.isSuccess]);
const handleChangeProduct = (e) => {
product[e.target.name] = e.target.value
setProduct({...product})
}
const deleteOldImages = (imageName) => {
const resultFileNames = product.uploadFileNames.filter( fileName => fileName !== imageName)
product.uploadFileNames = resultFileNames
setProduct({...product})
}
const handleClickModify = () => {
const files = uploadRef.current.files
const formData = new FormData()
for (let i = 0; i < files.length; i++) {
formData.append("files", files[i]);
}
//other data
formData.append("pname", product.pname)
formData.append("pdesc", product.pdesc)
formData.append("price", product.price)
formData.append("delFlag", product.delFlag)
for( let i = 0; i < product.uploadFileNames.length ; i++){
formData.append("uploadFileNames", product.uploadFileNames[i])
}
modMutation.mutate(formData)
}
const handleClickDelete = () => {
delMutation.mutate(pno)
}
const closeModal = () => {
if(delMutation.isSuccess) {
queryClient.invalidateQueries(['products', pno])
queryClient.invalidateQueries(['products/list'])
moveToList()
}
if(modMutation.isSuccess) {
queryClient.invalidateQueries(['products', pno])
queryClient.invalidateQueries(['products/list'])
moveToRead(pno)
}
}
return (
{query.isFetching || delMutation.isPending || modMutation.isPending ?
:<>}
{
delMutation.isSuccess || modMutation.isSuccess?
:
<>
}
Images
{product.uploadFileNames.map( (imgFile, i) =>
)}
{product.uploadFileNames.map( (imgFile, i) =>
)}
)
}
export default ReadComponent
===========================================================
\src\components\todo\AddComponent.js
===========================================================
import { useState } from "react";
import { postAdd } from "../../api/todoApi";
import ResultModal from "../common/ResultModal";
import useCustomMove from "../../hooks/useCustomMove";
const initState = {
title:'',
writer: '',
dueDate: ''
}
const AddComponent = () => {
const [todo, setTodo] = useState({...initState})
const [result, setResult] = useState(null) //결과 상태
const {moveToList} = useCustomMove() //useCustomMove 활용
const handleChangeTodo = (e) => {
todo[e.target.name] = e.target.value
setTodo({...todo})
}
const handleClickAdd = () => {
//console.log(todo)
postAdd(todo)
.then(result => {
console.log(result)
setResult(result.TNO) //결과 데이터 변경
setTodo({...initState})
}).catch(e => {
console.error(e)
})
}
const closeModal = () => {
setResult(null)
moveToList() //moveToList( )호출
}
return (
{/* 모달 처리 */}
{result ?
: <>}
{serverData.dtoList.map(todo =>
moveToRead(todo.tno)} //이벤트 처리 추가
>
{todo.tno}
{todo.title}
{todo.dueDate}
)}
);
}
export default ListComponent;
===========================================================
\src\components\todo\ModifyComponent.js
===========================================================
import { useCallback, useEffect, useState } from "react";
import { deleteOne, getOne, putOne } from "../../api/todoApi";
import ResultModal from "../common/ResultModal";
import useCustomMove from "../../hooks/useCustomMove";
const initState = {
tno:0,
title:'',
writer: '',
dueDate: '',
complete: false
}
const ModifyComponent = ({tno, moveList, moveRead}) => {
const [todo, setTodo] = useState({...initState})
//모달 창을 위한 상태
const [result, setResult] = useState(null)
//이동을 위한 기능들
const {moveToList, moveToRead} = useCustomMove()
const handleClickModify = () => { //버튼 클릭시
//console.log(todo)
putOne(todo).then(data => {
console.log("modify result: " + data)
setResult('Modified')
})
}
const handleClickDelete = () => { //버튼 클릭시
deleteOne(tno).then( data => {
console.log("delete result: " + data)
setResult('Deleted')
})
}
//모달 창이 close될때
const closeModal = () => {
if(result ==='Deleted') {
moveToList()
}else {
moveToRead(tno)
}
}
useEffect(() => {
getOne(tno).then(data => setTodo(data))
},[tno])
const handleChangeTodo = (e) => {
todo[e.target.name] = e.target.value
setTodo({...todo})
}
const handleChangeTodoComplete = (e) => {
const value = e.target.value
todo.complete = (value === 'Y')
setTodo({...todo})
}
return (
{result ?
:<>}
COMPLETE
{makeDiv('Tno', todo.tno)}
{makeDiv('Writer', todo.writer)}
{makeDiv('Title', todo.title)}
{makeDiv('Due Date', todo.dueDate)}
{makeDiv('Complete', todo.complete ? 'Completed' : 'Not Yet')}
{/* buttons.........start */}
{/* 상단 여백 py-40 변경 flex 제거 */}
{children}
);
}
export default BasicLayout;
===========================================================
\src\logo.svg
===========================================================
===========================================================
\src\pages\AboutPage.js
===========================================================
import useCustomLogin from "../hooks/useCustomLogin";
import BasicLayout from "../layouts/BasicLayout";
const AboutPage = () => {
const {isLogin, moveToLoginReturn} = useCustomLogin()
if(!isLogin){
return moveToLoginReturn()
}
return (
About Page
);
}
export default AboutPage;
===========================================================
\src\pages\MainPage.js
===========================================================
import BasicLayout from "../layouts/BasicLayout";
const MainPage = () => {
return (
Main Page
);
}
export default MainPage;
===========================================================
\src\pages\member\KakaoRedirectPage.js
===========================================================
import { useEffect } from "react";
import { useSearchParams } from "react-router-dom";
import { getAccessToken, getMemberWithAccessToken } from "../../api/kakaoApi";
import { useDispatch } from "react-redux";
import { login } from "../../slices/loginSlice";
import useCustomLogin from "../../hooks/useCustomLogin";
const KakaoRedirectPage = () => {
const [searchParams] = useSearchParams()
const {moveToPath, saveAsCookie} = useCustomLogin()
const authCode = searchParams.get("code")
useEffect(() => {
getAccessToken(authCode).then(accessToken => {
console.log(accessToken)
getMemberWithAccessToken(accessToken).then(memberInfo => {
console.log("-------------------")
console.log(memberInfo)
saveAsCookie(memberInfo)
//소셜 회원이 아니라면
if(memberInfo && !memberInfo.social){
moveToPath("/")
}else {
moveToPath("/member/modify")
}
})
})
}, [authCode])
return (
Kakao Login Redirect
{authCode}
)
}
export default KakaoRedirectPage;
===========================================================
\src\pages\member\LoginPage.js
===========================================================
import LoginComponent from "../../components/member/LoginComponent";
import BasicMenu from "../../components/menus/BasicMenu";
const LoginPage = () => {
return (
);
}
export default LoginPage;
===========================================================
\src\pages\member\LogoutPage.js
===========================================================
import LogoutComponent from "../../components/member/LogoutComponent";
import BasicMenu from "../../components/menus/BasicMenu";
const LogoutPage = () => {
return (
);
}
export default LogoutPage;
===========================================================
\src\pages\member\ModifyPage.js
===========================================================
import ModifyComponent from "../../components/member/ModifyComponent";
import BasicLayout from "../../layouts/BasicLayout";
const ModfyPage = () => {
return (
Member Modify Page
);
}
export default ModfyPage;
===========================================================
\src\pages\products\AddPage.js
===========================================================
import AddComponent from "../../components/products/AddComponent";
const AddPage = () => {
return (
);
}
export default AddPage;
===========================================================
\src\pages\products\IndexPage.js
===========================================================
import { Outlet, useNavigate } from "react-router-dom";
import BasicLayout from "../../layouts/BasicLayout";
import { useCallback } from "react";
const IndexPage = () => {
const navigate = useNavigate()
const handleClickList = useCallback(() => {
navigate({ pathname:'list' })
})
const handleClickAdd = useCallback(() => {
navigate({ pathname:'add' })
})
return (
Products Menus
);
}
export default IndexPage;
===========================================================
\src\pages\products\ListPage.js
===========================================================
import ListComponent from "../../components/products/ListComponent";
const ListPage = () => {
return (
);
}
export default ListPage;
===========================================================
\src\pages\products\ModifyPage.js
===========================================================
import { useParams } from "react-router-dom";
import ModifyComponent from "../../components/products/ModifyComponent";
const ModifyPage = () => {
const {pno} = useParams()
return (
);
}
export default ModifyPage;
===========================================================
\src\pages\products\ReadPage.js
===========================================================
import { useParams } from "react-router-dom";
import ReadComponent from "../../components/products/ReadComponent";
const ReadPage = () => {
const {pno} = useParams()
return (
);
}
export default ReadPage;
===========================================================
\src\pages\todo\AddPage.js
===========================================================
import AddComponent from "../../components/todo/AddComponent";
const AddPage = () => {
return (
);
}
export default AddPage;
===========================================================
\src\pages\todo\IndexPage.js
===========================================================
import { Outlet, useNavigate } from "react-router-dom";
import BasicLayout from "../../layouts/BasicLayout";
import { useCallback } from "react";
const IndexPage = () => {
const navigate = useNavigate()
const handleClickList = useCallback(() => {
navigate({ pathname:'list' })
})
const handleClickAdd = useCallback(() => {
navigate({ pathname:'add' })
})
return (
);
}
export default IndexPage;
===========================================================
\src\pages\todo\ListPage.js
===========================================================
import ListComponent from "../../components/todo/ListComponent";
const ListPage = () => {
return (
);
}
export default ListPage;
===========================================================
\src\pages\todo\ModifyPage.js
===========================================================
import { useParams } from "react-router-dom";
import ModifyComponent from "../../components/todo/ModifyComponent";
const ModifyPage = () => {
const {tno} = useParams()
return (
);
}
export default ModifyPage;
===========================================================
\src\pages\todo\ReadPage.js
===========================================================
import { useParams } from "react-router-dom";
import ReadComponent from "../../components/todo/ReadComponent";
const ReadPage = () => {
const {tno} = useParams()
return (
Todo Read Page Component {tno}
);
}
export default ReadPage;
===========================================================
\src\reportWebVitals.js
===========================================================
const reportWebVitals = onPerfEntry => {
if (onPerfEntry && onPerfEntry instanceof Function) {
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
getCLS(onPerfEntry);
getFID(onPerfEntry);
getFCP(onPerfEntry);
getLCP(onPerfEntry);
getTTFB(onPerfEntry);
});
}
};
export default reportWebVitals;
===========================================================
\src\router\memberRouter.js
===========================================================
import { Suspense, lazy } from "react";
const Loading = Loading....
const Login = lazy(() => import("../pages/member/LoginPage"))
const LogoutPage = lazy(() => import("../pages/member/LogoutPage"))
const KakaoRedirect = lazy(() => import("../pages/member/KakaoRedirectPage"))
const MemberModify = lazy(() => import("../pages/member/ModifyPage"))
const memberRouter = () => {
return [
{
path:"login",
element:
},
{
path:"logout",
element: ,
},
{
path:"kakao",
element: ,
},
{
path:"modify",
element: ,
},
]
}
export default memberRouter
===========================================================
\src\router\productsRouter.js
===========================================================
import { Suspense, lazy } from "react";
import { Navigate } from "react-router-dom";
const Loading = Loading....
const ProductsList = lazy(() => import("../pages/products/ListPage"))
const ProductsAdd = lazy(() => import("../pages/products/AddPage"))
const ProductRead = lazy(() => import("../pages/products/ReadPage"))
const ProductModify = lazy(() => import("../pages/products/ModifyPage"))
const productsRouter = () => {
return [
{
path: "list",
element:
},
{
path: "",
element:
},
{
path: "add",
element:
},
{
path: "read/:pno",
element:
},
{
path: "modify/:pno",
element:
}
]
}
export default productsRouter;
===========================================================
\src\router\root.js
===========================================================
import { Suspense, lazy } from "react";
import todoRouter from "./todoRouter";
import productsRouter from "./productsRouter";
import memberRouter from "./memberRouter";
const { createBrowserRouter } = require("react-router-dom");
const Loading = Loading....
const Main = lazy(() => import("../pages/MainPage"))
const About = lazy(() => import("../pages/AboutPage"))
const TodoIndex = lazy(() => import("../pages/todo/IndexPage"))
const ProductsIndex = lazy(() => import("../pages/products/IndexPage"))
const root = createBrowserRouter([
{
path: "",
element:
},
{
path: "about",
element:
},
{
path: "todo",
element: ,
children: todoRouter()
},
{
path: "products",
element: ,
children: productsRouter()
},
{
path: "member",
children: memberRouter()
}
])
export default root;
===========================================================
\src\router\todoRouter.js
===========================================================
import { Suspense, lazy } from "react";
import { Navigate } from "react-router-dom";
const Loading = Loading....
const TodoList = lazy(() => import("../pages/todo/ListPage"))
const TodoRead = lazy(() => import("../pages/todo/ReadPage"))
const TodoAdd = lazy(() => import("../pages/todo/AddPage"))
const TodoModify = lazy(() => import("../pages/todo/ModifyPage"))
const todoRouter = () => {
return [
{
path: "list",
element:
},
{
path: "",
element:
},
{
path: "read/:tno",
element:
},
{
path: "add",
element:
},
{
path: "modify/:tno",
element:
}
]
}
export default todoRouter;
===========================================================
\src\setupTests.js
===========================================================
// jest-dom adds custom jest matchers for asserting on DOM nodes.
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom';
===========================================================
\src\slices\cartSlice.js
===========================================================
import {createAsyncThunk, createSlice} from "@reduxjs/toolkit";
import {getCartItems, postChangeCart} from "../api/cartApi";
export const getCartItemsAsync = createAsyncThunk('getCartItemsAsync', () => {
return getCartItems()
})
export const postChangeCartAsync = createAsyncThunk('postChangeCartAsync', (param)=>{
return postChangeCart(param)
})
const initState = []
const cartSlice = createSlice({
name:'cartSlice',
initialState: initState,
extraReducers: (builder) => {
builder.addCase(getCartItemsAsync.fulfilled, (state, action) => {
console.log("getCartItemsAsync.fulfilled")
console.log(action.payload)
if(action.payload.error){
}
return action.payload
})
.addCase(postChangeCartAsync.fulfilled, (state, action) => {
console.log("postChangeCartAsync.fulfilled")
console.log(action)
return action.payload
})
}
})
export default cartSlice.reducer
===========================================================
\src\slices\loginSlice.js
===========================================================
import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
import { loginPost } from "../api/memberApi";
import { getCookie, setCookie, removeCookie } from "../util/cookieUtil";
const initState = {
email:''
}
export const loginPostAsync = createAsyncThunk('loginPostAsync', (param) => {
return loginPost(param)
})
const loadMemberCookie = () => { //쿠키에서 로그인 정보 로딩
const memberInfo = getCookie("member")
//닉네임 처리
if(memberInfo && memberInfo.nickname) {
memberInfo.nickname = decodeURIComponent(memberInfo.nickname)
}
return memberInfo
}
const loginSlice = createSlice({
name: 'LoginSlice',
initialState: loadMemberCookie()|| initState, //쿠키가 없다면 초깃값사용
reducers: {
login: (state, action) => {
console.log("login.....")
//{소셜로그인 회원이 사용}
const payload = action.payload
setCookie("member",JSON.stringify(payload), 1) //1일
return payload
},
logout: (state, action) => {
console.log("logout....")
removeCookie("member")
return {...initState}
}
},
extraReducers: (builder) => {
builder.addCase( loginPostAsync.fulfilled, (state, action) => {
console.log("fulfilled")
const payload = action.payload
//닉네임 한글 처리
if(payload.nickname){
payload.nickname = encodeURIComponent(payload.nickname)
}
//정상적인 로그인시에만 저장
if(!payload.error){
setCookie("member",JSON.stringify(payload), 1) //1일
}
return payload
})
.addCase(loginPostAsync.pending, (state,action) => {
console.log("pending")
})
.addCase(loginPostAsync.rejected, (state,action) => {
console.log("rejected")
})
}
})
export const {login,logout} = loginSlice.actions
export default loginSlice.reducer
===========================================================
\src\store.js
===========================================================
import { configureStore } from '@reduxjs/toolkit'
import loginSlice from './slices/loginSlice'
import cartSlice from "./slices/cartSlice";
export default configureStore({
reducer: {
"loginSlice": loginSlice,
"cartSlice": cartSlice
}
})
===========================================================
\src\util\cookieUtil.js
===========================================================
import { Cookies } from "react-cookie";
const cookies = new Cookies()
export const setCookie = (name, value, days) => {
const expires = new Date()
expires.setUTCDate(expires.getUTCDate() + days ) //보관기한
return cookies.set(name, value, {path:'/', expires:expires})
}
export const getCookie = (name) => {
return cookies.get(name)
}
export const removeCookie = (name , path="/") => {
cookies.remove(name, {path} )
}
===========================================================
\src\util\jwtUtil.js
===========================================================
import axios from "axios";
import { getCookie, setCookie } from "./cookieUtil";
import { API_SERVER_HOST } from "../api/todoApi";
const jwtAxios = axios.create()
const refreshJWT = async (accessToken, refreshToken) => {
const host = API_SERVER_HOST
const header = {headers: {"Authorization":`Bearer ${accessToken}`}}
const res = await axios.get(`${host}/api/member/refresh?refreshToken=${refreshToken}`, header)
console.log("----------------------")
console.log(res.data)
return res.data
}
//before request
const beforeReq = (config) => {
console.log("before request.............")
const memberInfo = getCookie("member")
if( !memberInfo ) {
console.log("Member NOT FOUND")
return Promise.reject(
{response:
{data:
{error:"REQUIRE_LOGIN"}
}
}
)
}
const {accessToken} = memberInfo
// Authorization 헤더 처리
config.headers.Authorization = `Bearer ${accessToken}`
return config
}
//fail request
const requestFail = (err) => {
console.log("request error............")
return Promise.reject(err)
}
//before return response
const beforeRes = async (res) => {
console.log("before return response...........")
//console.log(res)
//'ERROR_ACCESS_TOKEN'
const data = res.data
if(data && data.error ==='ERROR_ACCESS_TOKEN'){
const memberCookieValue = getCookie("member")
const result = await refreshJWT( memberCookieValue.accessToken, memberCookieValue.refreshToken )
console.log("refreshJWT RESULT", result)
memberCookieValue.accessToken = result.accessToken
memberCookieValue.refreshToken = result.refreshToken
setCookie("member", JSON.stringify(memberCookieValue), 1)
//원래의 호출
const originalRequest = res.config
originalRequest.headers.Authorization = `Bearer ${result.accessToken}`
return await axios(originalRequest)
}
return res
}
//fail response
const responseFail = (err) => {
console.log("response fail error.............")
return Promise.reject(err);
}
jwtAxios.interceptors.request.use( beforeReq, requestFail )
jwtAxios.interceptors.response.use( beforeRes, responseFail)
export default jwtAxios