Merge pull request #32 from hhbb0081/test

Feat: 재고관리 & 마이페이지 api 연결
readyvery · Nov 26, 2023 · 22bab1d · 22bab1d
2 parents 1401944 + b1da08b
commit 22bab1d
Show file tree

Hide file tree

Showing 18 changed files with 218 additions and 204 deletions.
diff --git a/.env b/.env
@@ -4,5 +4,5 @@ WDS_SOCKET_PORT=0
 NODE_PATH=src/
 REACT_APP_API_ROOT=http://localhost:8080
 REACT_APP_HOME_URL=http://localhost:3000
-REACT_APP_API_URL=http://readyvery.com/api/v1
+REACT_APP_API_URL=http://readyvery.com
 REACT_APP_KAKAO_LOGIN=http://localhost:8080/oauth2/authorization/kakao
diff --git a/src/App.js b/src/App.js
@@ -24,12 +24,15 @@ function App() {
   const NewMyPage = Auth(Mypage, true);
 
   const expiredTime = 1000 * 60 * 60 * 24;
+  // const expiredTime = 65000;
   useInterval(() => {
-    if (
-      cookies.refreshToken !== "undefined" &&
-      cookies.refreshToken !== undefined &&
-      cookies.refreshToken
-    ) {
+    // console.log(cookies.refreshToken);
+    // if (
+    //   cookies.refreshToken !== "undefined" &&
+    //   cookies.refreshToken !== undefined &&
+    //   cookies.refreshToken
+    // ) {
+    if(cookies.accessToken){
       const config = {
         withCredentials: true,
       };
@@ -43,9 +46,12 @@ function App() {
           }
         })
         .catch((err) => {
+          console.log(err);
+          alert("토큰이 만료되었습니다. 로그인을 진행해주세요.");
           navigate("/");
         });
-    }
+      }
+    // }
   }, expiredTime - 60000);
   return (
     <div className="App">

diff --git a/src/Atom/status.jsx b/src/Atom/status.jsx
@@ -1,5 +1,6 @@
 import axios from "axios";
 import { atom, selector } from "recoil";
+import { Refresh } from "../hoc/handleRefresh";
 
 export const storeState = atom({
   key: "storeState", // 전역적으로 고유한 값
@@ -19,7 +20,10 @@ export const isAuthenticatedState = atom({
 export const getAuthenticatedSelector = selector({
   key: "auth/get",
   get: async ({ get }) => {
-    return get(isAuthenticatedState);
+    const tokenResult = Refresh();
+    if(tokenResult){
+      return "재발급 성공";
+    } else { return "토큰 유효"; }
   },
 
   set: ({ set }) => {

diff --git a/src/components/views/Chart/Chart.jsx b/src/components/views/Chart/Chart.jsx
@@ -10,7 +10,7 @@ export default function Chart ({ data }) {
         indexBy="day"
         margin={{ top: 20, right: 0, bottom: 30, left: 30 }}
         padding={0.5}
-        width={812}
+        width={710}
         height={390}
         valueScale={{ type: 'linear' }}
         indexScale={{ type: 'band', round: true }}

diff --git a/src/components/views/Header/Header.css b/src/components/views/Header/Header.css
@@ -12,8 +12,9 @@
   bottom: 0;
   left: 0;
   right: 0;
-  min-width: 73.75rem;
-  /* min-width: 64rem; */
+  /* min-width: 73.75rem; */
+  width: 64rem;
+  max-width: 64rem;
   height: 5.5rem;
   background-color: #2e2d2d;
   z-index: 101;

diff --git a/src/components/views/Inven/InvenBox.jsx b/src/components/views/Inven/InvenBox.jsx
@@ -6,7 +6,7 @@ const InvenBox = ({handleModal, invenProps: {category, name, soldOut}}) => {
             {!soldOut ? (
                 <div className="mainInven-category-checkbox" onClick={handleModal}></div>
             ) : (
-                <div className="mainInven-category-checkbox selected"></div>
+                <div className="mainInven-category-checkbox selected" onClick={handleModal}></div>
             )}
           </span>
           <span className="mainInven-category-content__span2">{category}</span>

diff --git a/src/components/views/NavBar/NavBar.css b/src/components/views/NavBar/NavBar.css
@@ -1,8 +1,8 @@
 .navbar {
   width: 8.875rem;
   /* height: 46.25rem; */
-  height: 45.75rem;
-  /* height: 42.5rem; */
+  /* height: 45.75rem; */
+  height: 42.5rem;
   background-color: #2e2d2d;
 
   display: flex;

diff --git a/src/hoc/auth.jsx b/src/hoc/auth.jsx
@@ -10,15 +10,24 @@ function Auth(SpecificComponent, option) {
     const navigate = useNavigate();
     const location = useLocation();
     const userInfo = useRecoilValue(getUserSelector);
+    // const tokenInfo = useRecoilValue(getAuthenticatedSelector);
     const setIsLoggedIn = useSetRecoilState(loginState);
     const [cookies] = useCookies(["accessToken"]);
 
     useEffect(() => {
-      const isAuth = window.localStorage.getItem("isAuthenticated");
+      console.log(userInfo);
+      // console.log(tokenInfo);
+      console.log(window.localStorage.getItem("isAuthenticated"));
+      console.log(cookies?.accessToken);
+      // const isAuth = window.localStorage.getItem("isAuthenticated");
       if (userInfo === "404" && location.pathname !== "/") {
         navigate("/");
       } else {
-        if (!isAuth && cookies?.accessToken) {
+        // if(userInfo !== "404"){
+        //   const tokenInfo = useRecoilValue(getAuthenticatedSelector);
+        //   console.log(tokenInfo);
+        // }
+        if (!window.localStorage.getItem("isAuthenticated") && cookies?.accessToken) {
           // 첫 로그인 시
           window.localStorage.setItem("isAuthenticated", true);
           setIsLoggedIn({

diff --git a/src/hoc/handleRefresh.jsx b/src/hoc/handleRefresh.jsx
@@ -1,5 +1,6 @@
 import axios from "axios";
 import moment from "moment";
+import { useCookies } from "react-cookie";
 import { useRecoilState } from 'recoil';
 import { loginState } from '../Atom/status';
 
@@ -8,6 +9,7 @@ const Refresh = async () => {
   const apiUrl = process.env.REACT_APP_API_ROOT;
   const [loginInfo, setLoginInfo] = useRecoilState(loginState);
   const expireAt = loginInfo.expiredTime;
+  const [cookies] = useCookies(["accessToken"]);
   console.log("만료확인");
 
   // 토큰이 만료되었다면
@@ -26,9 +28,12 @@ const Refresh = async () => {
     );
     console.log("재발급 성공", res);
     setLoginInfo({
+        accessToken: cookies,
         expiredTime: moment().add(1, "hour").format("yyyy-MM-DD HH:mm:ss")
     });
-  }
+
+    return true;
+  } else {return false;}
 };
 
 const refreshErrorHandle = () => {

diff --git a/src/pages/Home/Home.css b/src/pages/Home/Home.css
@@ -0,0 +1,15 @@
+.inven-wrapper{
+    display: flex;
+}
+
+nav{
+    width: 8.875rem;
+    /* height: 46.25rem; */
+    /* height: 42.5rem; */
+    height: 45.75rem;
+    z-index: 1;
+}
+
+main{
+    width: calc(100vw - 8.875rem);
+}
diff --git a/src/pages/Home/MainHome.css b/src/pages/Home/MainHome.css
@@ -1,7 +1,7 @@
 .Main-Box {
   width: 100%; /* 너비 설정 */
   height: 95%; /* 높이 설정 */
-  padding: 5% 0% 0% 0%;
+  /* padding: 5% 0% 0% 0%; */
 }
 
 .status-header {

diff --git a/src/pages/Inventory/MainInven.css b/src/pages/Inventory/MainInven.css
@@ -6,8 +6,10 @@
 .mainInven-title__wrapper{
     display: flex;
     height: 5.0625rem;
-    width: 100%;
-    min-width: calc(73.75rem - 8.875rem);
+    /* width: 100%; */
+    width: 55.125rem;
+    /* min-width: calc(73.75rem - 8.875rem); */
+    min-width: calc(64rem - 8.875rem);
     background-color: #4F4F4F;
     border-bottom: 0.5rem solid #d82356;
     position: relative;
@@ -24,38 +26,45 @@
 
 .mainInven-title__span1{
     width: 15%;
-    min-width: 8.3125rem;
+    /* min-width: 8.3125rem; */
+    min-width: 8.26875rem;
 }
 
 .mainInven-title__span2__wrapper{
     width: 25%;
-    min-width: 17.8125rem;
+    /* min-width: 17.8125rem; */
+    min-width: 13.78125rem;
     display: flex;
     justify-content: space-between;
 }
 
-.mainInven-title__span2{
-    /* width: 25%; */
-}
-
 .mainInven-title__span3{
     width: 60%;
     /* min-width: 39.625rem; */
+    min-width: 33.075rem;
+
+    white-space: nowrap;
 }
 
 .mainInven-category__modal{
     position: absolute;
-    left: calc((100vw - 8.875rem) * 0.275);
+    /* left: calc((100vw - 8.875rem) * 0.275); */
+    top: 10rem;
+    left: 17.14375rem;
+    /* left: 0; */
     display: flex;
     flex-direction: column;
-    width: 17.1875rem;
+    /* width: 17.1875rem; */
+    width: 13.78125rem;
+    height: 37.4375rem;
     border-radius: 0 0 0.625rem 0.625rem;
     background-color: #4F4F4F;
     z-index: 0;
+    overflow-y: auto;
 }
 
 .mainInven-category__modal span{
-    width: 17.1875rem;
+    width: 13.78125rem;
     height: 3.0625rem;
     line-height: 3.0625rem;
     font-size: 1.5625rem;
@@ -71,8 +80,11 @@
 }
 
 .mainInven-category-content__wrapper{
-    width: 100%;
-    height: calc(45.75rem - 5.0625rem);
+    /* width: 100%; */
+    width: calc(64rem - 8.875rem);
+    /* height: calc(48rem - 5.5rem); */
+    /* height: calc(45.75rem - 5.0625rem); */
+    height: 37.4375rem;
     /* height: calc(46.25rem - 5.0625rem); */
     /* height: calc(42.5rem - 5.0625rem); */
     overflow-y: auto;
@@ -92,7 +104,8 @@
     display: flex;
 
     width: 100%;
-    min-width: calc(73.75rem - 8.875rem);
+    /* min-width: calc(73.75rem - 8.875rem); */
+    min-width: calc(64rem - 8.875rem);
     height: 3.6875rem;
     border-bottom: #dadada solid 0.125rem;
 }
@@ -123,7 +136,7 @@
 
 .mainInven-category-content__span1{
     width: 15%;
-    min-width: 8.3125rem;
+    min-width: 8.26875rem;
 
     display: flex;
     justify-content: center;
@@ -132,20 +145,21 @@
 
 .mainInven-category-content__span2{
     width: 25%;
-    min-width: 17.8125rem;
+    min-width: 13.78125rem;
 
     white-space: nowrap;
 }
 
 .mainInven-category-content__span3{
     width: 60%;
-    min-width: 39.625rem;
+    /* min-width: 39.625rem; */
+    min-width: 33.075rem;
 
     white-space: nowrap;
 }
 
 /* 모달 */
-.modal-wrapper{
+.inven-modal-wrapper{
     position: absolute;
     top: 5.5rem;
     bottom: 0;
@@ -157,7 +171,7 @@
     display: flex;
 }
 
-.modal-box{
+.inven-modal-box{
     position: absolute;
     top: calc(50% - 12.15625rem);
     left: calc(50% - 17.1875rem);
@@ -170,32 +184,32 @@
     padding: 2.0625rem 3.25rem;
 }
 
-.modal-close__wrapper{
+.inven-modal-close__wrapper{
     display: flex;
     justify-content: flex-end;
 }
 
-.modal-box-img__wrapper{
+.inven-modal-box-img__wrapper{
     height: 30%;
 }
 
-.modal-box-txt__wrapper{
+.inven-modal-box-txt__wrapper{
     height: 30%;
 }
 
-.modal-box-txt{
+.inven-modal-box-txt{
     font-size: 1.5625rem;
     font-family: "SemiBold";
 }
 
-.modal-box-close-btn__wrapper{
+.inven-modal-box-close-btn__wrapper{
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
     height: 30%;
 }
 
-.modal-box-close-btn{
+.inven-modal-box-close-btn{
     width: 19.375rem;
     height: 3.125rem;
     margin: 0 auto;