Merge pull request #13 from b-and-it/9/feat

9/feat Completed Form Page

package.json

@@ -3,31 +3,38 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@hookform/resolvers": "^3.4.2",
+    "@hookform/resolvers": "^3.6.0",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.5.2",
     "@types/js-cookie": "^3.0.6",
-    "@types/node": "^16.18.97",
+    "@types/node": "^16.18.101",
     "@types/react": "^18.3.3",
+    "@types/react-beautiful-dnd": "^13.1.8",
+    "@types/react-datepicker": "^6.2.0",
     "@types/react-dom": "^18.3.0",
     "@types/react-modal": "^3.16.3",
     "axios": "^1.7.2",
+    "formik": "^2.4.6",
+    "http-proxy-middleware": "^3.0.0",
     "js-cookie": "^3.0.5",
     "qr-code-styling": "1.6.0-rc.1",
     "react": "^18.3.1",
+    "react-beautiful-dnd": "^13.1.1",
+    "react-calendar": "^5.0.0",
+    "react-datepicker": "^7.2.0",
     "react-dom": "^18.3.1",
-    "react-hook-form": "^7.51.5",
+    "react-hook-form": "^7.52.0",
     "react-modal": "^3.16.1",
-    "react-router-dom": "^6.23.1",
+    "react-router-dom": "^6.24.0",
     "react-scripts": "5.0.1",
     "react-textarea-autosize": "^8.5.3",
-    "tailwindcss": "^3.4.3",
+    "tailwindcss": "^3.4.4",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4",
     "yup": "^1.4.0",
-    "zustand": "^4.5.2"
+    "zustand": "^4.5.4"
   },
   "scripts": {
     "start": "react-scripts start",

src/axios/index.ts

@@ -1,8 +1,75 @@
 import axios from 'axios'
+import store from '../store/store'
+import { parseKSTDate } from '../utils/time';
+
+const { useAuthStorePersist } = store;
 
 export const BASE_URL = process.env.REACT_APP_API_URL
 
+export const axiosSecureAPI = axios.create({
+    baseURL: BASE_URL,
+    headers: { 'Content-Type': 'application/json' },
+});
+
 export const axiosAPI = axios.create({
     baseURL: BASE_URL,
     headers: { 'Content-Type': 'application/json' },
-});
+});
+
+axiosSecureAPI.interceptors.request.use(config => {
+
+  const { accessToken } = useAuthStorePersist.getState();
+
+  if (accessToken !== null) {
+    config.headers.Authorization = `Bearer ${accessToken}`;
+  }
+  return config;
+}, error => {
+  return Promise.reject(error);
+});
+
+// 응답 인터셉터 추가
+axiosSecureAPI.interceptors.response.use(
+  response => response, // 정상 응답이면 그대로 반환
+  async error => {
+    const originalRequest = error.config;
+    if (error.response.status === 400 && !originalRequest._retry) {
+        const { refreshToken, refreshTokenExpireTime } = useAuthStorePersist.getState();
+        const currentTime = new Date().getTime();
+
+        // if (refreshTokenExpireTime !== null && currentTime > refreshTokenExpireTime.getTime()){
+        //     useAuthStorePersist.getState().setTokens(null, null,null,null);
+        //     window.location.href = '/'
+        //     alert('토큰이 만료되었습니다. 다시 로그인해 주세요.')
+        //     return Promise.reject(error);
+        // }
+        if(refreshToken === null || refreshTokenExpireTime === null){
+          useAuthStorePersist.getState().setTokens(null, null,null,null);
+          window.location.href = '/'
+          alert('토큰이 없습니다. 다시 로그인해 주세요.')
+        }
+        originalRequest._retry = true;
+        try {
+
+            const tokenResponse = await axiosAPI.post('/api/tokens/reissue', null, {
+              params : {
+                refresh: refreshToken
+              }
+            } );
+            const result = tokenResponse.data.result;
+            const accessToken = result.accessToken;
+            const newrefreshToken = result.refreshToken;
+            const accessTokenExpireTime = parseKSTDate(result.code_expire);
+            const refreshTokenExpireTime = parseKSTDate(result.refresh_expire);
+            useAuthStorePersist.getState().setTokens(accessToken, newrefreshToken, accessTokenExpireTime, refreshTokenExpireTime);
+            originalRequest.headers.Authorization = `Bearer ${accessToken}`;
+            return axiosSecureAPI(originalRequest);
+        } catch (refreshError) {
+            return Promise.reject(refreshError);
+        }
+    }
+    return Promise.reject(error);
+  }
+);
+
+export default axiosSecureAPI;

src/components/nav/components/ticketbutton.tsx → src/common/components/nav/components/ticketbutton.tsx

@@ -7,7 +7,7 @@ const TicketButton = (props: Props) => {
   const navigate = useNavigate();
 
   const onClick = () => {
-    navigate('/login');
+    navigate('/ticket');
   }
   return (
     <button onClick={onClick} className='text-white'>

src/components/nav/components/userbutton.tsx → src/common/components/nav/components/userbutton.tsx

@@ -7,7 +7,7 @@ const UserButton = (props: Props) => {
   const navigate = useNavigate();
 
   const onClick = () => {
-    navigate('/login');
+    navigate('/mypage');
   }
   return (
     <button onClick={onClick} className=''>

src/components/nav.tsx → src/common/components/nav/nav.tsx

@@ -1,9 +1,5 @@
-import React from 'react'
-import LoginButton from './nav/components/loginbutton'
-import useAuthStore from '../store/store'
-import LogoutButton from './nav/components/logoutbutton'
-import UserButton from './nav/components/userbutton'
-import TicketButton from './nav/components/ticketbutton'
+import UserButton from './components/userbutton'
+import TicketButton from './components/ticketbutton'
 import { useNavigate } from 'react-router-dom'
 
 type Props = {}

src/index.tsx

@@ -3,16 +3,16 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import MainScreen from './main/mainscreen';
-// import LoginScreen from './login/loginscreen';
 import NotFound from './NotFound';
-import Register from './register/registerscreen';
 import reportWebVitals from './reportWebVitals';
 import CreateTicket from './ticket/createticket';
+import CreateQR from './ticket/createqr';
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 import Ticket from './ticket/ticketmain';
 import RedirectPage from './redirect/ticketredirectpage';
-import PromotionView from './promotion/promotionview';
-
+import PromotionView from './promotion/promotionmain';
+import PromotionCreate from './promotion/promotionscreate';
+import AuthRedirect from './redirect/authredirectpage';
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
 );
@@ -30,14 +30,19 @@ const router = createBrowserRouter(
           element : <MainScreen/>
         },
         {
-          path:"register",
-          element: <Register/>
+          path:"auth",
+          element : <AuthRedirect/>
         },
         {
           path:"promotion",
           children : [{
             path:":id", 
-            element: <PromotionView/>}]
+            element: <PromotionView/>
+          },
+          {
+            path : "create",
+            element : <PromotionCreate/>
+          }]
         },
         {
           path:"ticket",
@@ -46,10 +51,14 @@ const router = createBrowserRouter(
             element: <Ticket/>
 
           },{
-            path: "create",
-            element: <CreateTicket/>
+            path: "createqr",
+            element: <CreateQR/>
 
           },
+          {
+            path:"create",
+            element: <CreateTicket/>
+          },
           {
             path:"redirect",
             element: <RedirectPage/>
@@ -63,9 +72,8 @@ const router = createBrowserRouter(
 )
 
 root.render(
-  <React.StrictMode>
+
       <RouterProvider router = {router}/>
-  </React.StrictMode>
 );
 
 // If you want to start measuring performance in your app, pass a function

src/login/Modal.tsx

@@ -2,6 +2,8 @@ import React from 'react'
 import Modal from 'react-modal';
 import store from '../store/store';
 import kakao_login from './img/kakao_login_button.png';
+import {axiosAPI} from '../axios/index';
+import axios from 'axios';
 type Props = {}
 
 const customModalStyles: ReactModal.Styles = {
@@ -33,12 +35,11 @@ const customModalStyles: ReactModal.Styles = {
 
 
 const KakaoModal = (props: Props) => {
-    const {useModalStore, useAuthStore} = store;
-    const {setToken} = useAuthStore(state => state);
+    const {useModalStore} = store;
     const {isOpen, closeModal} = useModalStore();
-
     const onClick = () => {
-        setToken('login');
+
+        window.location.href = 'http://play-barcode.ap-northeast-2.elasticbeanstalk.com/oauth2/authorize/kakao';
         closeModal();
     }
     return (

src/components/info/infocomponent.tsx → src/main/components/info/infocomponent.tsx

@@ -1,8 +1,6 @@
-import React from 'react'
-import { Link } from 'react-router-dom'
-import store from '../../store/store';
-import { useNavigate } from 'react-router-dom';
-import KakaoModal from '../../login/Modal';
+import {useEffect, useState} from 'react'
+import {axiosSecureAPI} from '../../../axios/index';
+import store from '../../../store/store';
 type Props = {}
 
 const Title = () => {
@@ -21,13 +19,33 @@ const Title = () => {
 }
 
 const InfoComponent = (props: Props) => {
+    const { useAuthStorePersist, useUserStore, useModalStore } = store;
+    const [user, setUser] = useState(useUserStore.getState().user);
+    const { accessToken, accessTokenExpireTime } = useAuthStorePersist(state => ({
+        accessToken: state.accessToken,
+        accessTokenExpireTime: state.accessTokenExpireTime
+    }));
+    async function fetchUserData() {
+        if (accessToken!==null && accessTokenExpireTime!==null) {
+            try {
+
+                const res = await axiosSecureAPI.get('/api/members');
+                useUserStore.getState().setUser(res.data.result);
+                setUser(res.data.result);
+                console.log(res);
+            } catch (e) {
+                console.log(e);
+            }
+        }
+    }
+    useEffect(()=>{
+
+        fetchUserData();
+    },[])
 
-    const { useAuthStore,useModalStore } = store;
-    const { token } = useAuthStore(state => state);
     const { openModal } = useModalStore(state => state);
-
     return (
-        token === undefined ? 
+        user === null ? 
             <div className='flex flex-col w-full items-start'>
                 <button onClick={openModal}>
                     <div className='text-system-white mb-10px text-psm underline'>
@@ -38,7 +56,7 @@ const InfoComponent = (props: Props) => {
             </div> : 
             <div className='flex flex-col w-full'>
                 <div className='text-system-white mb-10px text-psm'>
-                    안녕하세요, 이정한님!
+                    {`${user.name}님, 안녕하세요`}
                 </div>
                 <Title/>
 

src/components/search/searchbox.tsx → src/main/components/search/searchbox.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import search_icon from './img/search_icon.png'
+import search_icon from '../../img/search_icon.png'
 type Props = {
     value:string
     onChange : (e: React.ChangeEvent<HTMLInputElement>) => void

src/components/search/searchcard.tsx → src/main/components/search/searchcard.tsx

@@ -1,11 +1,11 @@
 import React from 'react'
-import calendar_icon from './img/calendar _icon.png';
-import location_icon from './img/location_icon.png';
-import checker_img from './img/checker_img.png';
-import like_icon_true from './img/like_icon_true.png';
-import like_icon_false from './img/like_icon_false.png';
-import simple_img from './img/simple_img.png';
-import LikeButton from '../buttons/like_button';
+import calendar_icon from '../../img/calendar_icon.png';
+import location_icon from '../../img/location_icon.png';
+import checker_img from '../../img/checker_img.png';
+import like_icon_true from '../../img/like_icon_true.png';
+import like_icon_false from '../../img/like_icon_false.png';
+import simple_img from '../../img/simple_img.png';
+import LikeButton from '../../../common/components/buttons/like_button';
 import { useNavigate } from 'react-router-dom';