Merge pull request #6 from HaruDamda/feature/#5-액세스-토큰-저장-및-프레임-불러오기

Feature/#5 액세스 토큰 저장 및 프레임 불러오기
HaruDamda · Nov 19, 2023 · d5d49c2 · d5d49c2
2 parents 4d503db + dc997ac
commit d5d49c2
Show file tree

Hide file tree

Showing 17 changed files with 1,009 additions and 718 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -14,6 +14,8 @@
  "axios": "^1.6.1",
  "crypto-js": "^4.2.0",
  "html2canvas": "^1.4.1",
+ "jotai": "^2.5.1",
+ "html2canvas": "^1.4.1",
  "node-sass": "^9.0.0",
  "path": "^0.12.7",
  "react": "^18.2.0",

diff --git a/src/App.css b/src/App.css
@@ -1,7 +1,8 @@
 :root {
  font-family: "SUIT Variable", sans-serif;
- max-width: 390px;
- --vh: 100%;
- margin: 0 auto;
+ width: 100vw;
+ height: 100vh;
+ margin: 0;
+ max-width: 1280px;
  text-align: center;
 }
diff --git a/src/App.jsx b/src/App.jsx
@@ -6,7 +6,11 @@ import Main from "./pages/Main/Main";
 import Frame from "./pages/Frame/Frame";
 import MakeFrame from "./pages/Frame/MakeFrame";
 import Photobook from "./pages/Photobook/Photobook";
-import { BrowserView, MobileView } from "react-device-detect";
+import {
+ BrowserView,
+ MobileView,
+} from "react-device-detect";
+import FrameList from "./component/AllFrameCpn/FrameList";
 
 function App() {
  function setScreenSize() {
@@ -20,34 +24,36 @@ function App() {
 
  return (
  <>
- <div className="App">
- <header className="App-header">
- <BrowserView>
- <BrowserRouter>
- <Routes>
- <Route path="/" element={<Main />} />
- <Route path="/login" element={<Login />} />
- <Route path="/join" element={<Join />} />
- <Route path="/frame" element={<Frame />} />
- <Route path="/makeframe" element={<MakeFrame />} />
- <Route path="/photobook" element={<Photobook />} />
- </Routes>
- </BrowserRouter>
- </BrowserView>
- <MobileView>
- <BrowserRouter>
- <Routes>
- <Route path="/" element={<Main />} />
- <Route path="/login" element={<Login />} />
- <Route path="/join" element={<Join />} />
- <Route path="/frame" element={<Frame />} />
- <Route path="/makeframe" element={<MakeFrame />} />
- <Route path="/photobook" element={<Photobook />} />
- </Routes>
- </BrowserRouter>
- </MobileView>
- </header>
- </div>
+ <div className="App">
+ <header className="App-header">
+ <BrowserView>
+ <BrowserRouter>
+ <Routes>
+ <Route path="/" element={<Main />} />
+ <Route path="/login" element={<Login />} />
+ <Route path="/join" element={<Join />} />
+ <Route path="/frame" element={<Frame />} />
+ <Route path="/makeframe" element={<MakeFrame />} />
+ <Route path="/photobook" element={<Photobook />} />
+ <Route path="/framelist" element={<FrameList />} />
+ </Routes>
+ </BrowserRouter>
+ </BrowserView>
+ <MobileView>
+ <BrowserRouter>
+ <Routes>
+ <Route path="/" element={<Main />} />
+ <Route path="/login" element={<Login />} />
+ <Route path="/join" element={<Join />} />
+ <Route path="/frame" element={<Frame />} />
+ <Route path="/makeframe" element={<MakeFrame />} />
+ <Route path="/photobook" element={<Photobook />} />
+ <Route path="/framelist" element={<FrameList />} />
+ </Routes>
+ </BrowserRouter>
+ </MobileView>
+ </header>
+ </div>
  </>
  );
 }

diff --git a/src/apis/onLogin.js b/src/apis/onLogin.js
@@ -1,81 +1,6 @@
-import axios from "axios";
-import { setAccessToken } from "../store/userSlice";
-// import { login, getToken } from "../store/userSlice";
-// import crypto from "crypto";
+// import axios from 'axios';
+// import { accessTokenAtom } from '../store/jotaiAtoms';
+// import { useAtomValue, useSetAtom } from 'jotai';
 
-/*
-const JWT_EXPIRE_TIME = 60 * 60 * 1000; // JWT 만료 시간을 1시간으로 설정
-export function onLogin(requestBody, dispatch) {
- let newRequestBody = {
- ...requestBody,
- // 비밀번호 암호화 로직
- password: crypto
- .createHash("sha256")
- .update(requestBody.password)
- .digest("hex"),
- };
- axios
- .post("/user/login", newRequestBody)
- .then((res) => {
- console.log(res);
- dispatch(login(res.data)); // 로그인 시 userSlice의 login 리듀서로 res.data에서 이메일, 이름, 닉네임을 넘겨줌
- dispatch(getToken(res.headers.authorization)); // accessToken은 이후 silentRefresh를 위해 리듀서를 분리함
- // 로그인 후 대시보드에서 새로고침 시 onLogin 함수는 이미 실행 완료된 상황이므로 onLoginSuccess 함수 또한 실행되지 않음
- // onLoginSuccess 삭제 -> 내비게이터에서 reissueToken으로 silent Refresh 수행하도록 변경
- })
- .catch((err) => {
- console.log(err);
- });
-}
-
-const onSilentRefresh = async () => {
- await axios
- .get("/api/auth/refresh")
- .then((res) => {
- axios.defaults.headers.common["authorization"] =
- res.headers.authorization;
- setTimeout(onSilentRefresh, JWT_EXPIRE_TIME - 10000); // JWT가 만료되기 10초 전에 accessToken을 재발급
- })
- .catch((err) => {
- console.log(err);
- });
-};
-
-export const reissueToken = (accessToken) => {
- // 로그인 후 새로고침하면 silentRefresh가 일어나지 않음,
- // -> reissueToken을 네비게이터에서 실행하여 토큰 재발급 실행
- if (accessToken !== null && accessToken.slice(0, 6) === "Bearer") {
- axios.defaults.headers.common["Authorization"] = accessToken;
- onSilentRefresh();
- } else {
- console.log("Access Token not defined");
- }
-};
-*/
-
-export function onLogin(email, password, dispatch, router) {
- const data = {
- email,
- password,
- };
- axios
- .post(
- "http://ec2-3-35-208-177.ap-northeast-2.compute.amazonaws.com:8080/user/login",
- data
- )
- .then((res) => {
- const { accessToken } = res.data;
- // 액세스 토큰을 Redux 스토어에 저장
- dispatch(setAccessToken(accessToken));
-
- // API 요청하는 콜마다 헤더에 accessToken 담아 보내도록 설정
- axios.defaults.headers.common["Authorization"] = `Bearer ${accessToken}`;
- // accessToken을 localStorage, cookie 등에 저장하지 않는다!
-
- router("/frame");
- console.log(res.data);
- })
- .catch((err) => {
- console.log(err);
- });
-}
+export default function onLogin() {
+}
diff --git a/src/component/AllFrameCpn/FrameList.jsx b/src/component/AllFrameCpn/FrameList.jsx
@@ -1,19 +1,26 @@
-import React, { useState, useEffect, useSelector } from "react";
+import { useState, useEffect } from "react";
 import styles from "./FrameList.module.css";
-import { Link } from "react-router-dom";
 import axios from "axios";
+import { Link } from "react-router-dom";
 // import { getAllFrames } from "../../apis/getFrame";
+import { useAtomValue } from 'jotai';
+import { accessTokenAtom } from '../../store/jotaiAtoms';
 
 const FrameList = () => {
  const [frames, setFrames] = useState([]);
-
+ const [accessToken, setAccessToken] = useAtomValue(accessTokenAtom);
  useEffect(() => {
  async function fetchFrames() {
  try {
  const apiURL =
  "http://ec2-3-35-208-177.ap-northeast-2.compute.amazonaws.com:8080/frame/get/frame";
 
- const res = await axios.get(apiURL);
+ // 토큰을 헤더에 추가하여 이미지 리스트 요청
+ const res = await axios.get(apiURL, {
+ headers: {
+ Authorization: `Bearer ${accessToken}`,
+ },
+ });
 
  if (res.status === 200) {
  setFrames(res.data); // 가져온 프레임 데이터를 상태에 설정

diff --git a/src/component/AllFrameCpn/Photobook.module.css b/src/component/AllFrameCpn/Photobook.module.css
diff --git a/src/component/MakeFrameCpn/AddPhoto.jsx b/src/component/MakeFrameCpn/AddPhoto.jsx
@@ -12,10 +12,10 @@ const AddPhoto = ({ handleUploadedImage }) => {
  const handleChange = (e) => {
  const selectedFile = e.target.files[0];
 
- // FileReader를 사용하여 선택된 파일을 읽습니다.
+ // FileReader를 사용하여 선택된 파일을 읽어 옴
  const reader = new FileReader();
  reader.onloadend = () => {
- // 이미지 데이터를 MakeFrame 컴포넌트로 전달합니다.
+ // 이미지 데이터를 MakeFrame 컴포넌트로 전달
  handleUploadedImage(reader.result);
  };
  if (selectedFile) {
@@ -40,4 +40,4 @@ const AddPhoto = ({ handleUploadedImage }) => {
  );
 };
 
-export default AddPhoto;
+export default AddPhoto;
diff --git a/src/main.jsx b/src/main.jsx
@@ -3,17 +3,12 @@ import ReactDOM from "react-dom/client";
 import axios from "axios";
 import App from "./App.jsx";
 import "./index.css";
-import { Provider } from 'react-redux';
-import { store, persistor } from "./store/store.js";
-import { PersistGate } from "redux-persist/integration/react";
+// import { Provider } from 'jotai';
+// import { accessTokenAtom } from './store/jotaiAtoms.js';
 
 ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
- <Provider store={store}>
- <PersistGate persistor={persistor}>
- <App />
- </PersistGate>
- </Provider>
+ <App />
  </React.StrictMode>
 )