Merge pull request #37 from rktdnjs/develop

[5주차] : 5주차 개발 코드 Merge 및 일부 리팩토링

package.json

@@ -17,6 +17,7 @@
     "react-scripts": "5.0.1",
     "react-toastify": "^9.1.3",
     "redux": "^4.2.1",
+    "shortid": "^2.2.16",
     "sweetalert2": "^11.7.28",
     "tailwind-scrollbar-hide": "^1.1.7",
     "web-vitals": "^2.1.4"

src/App.js

@@ -2,11 +2,12 @@ import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import HomePage from './pages/HomePage';
 import LoginPage from './pages/LoginPage';
 import KakaoOuathPage from './pages/KakaoOuathPage';
-import StartPostPage from './pages/StartPostPage';
+import MyPage from './pages/MyPage';
+import PostListPage from './pages/PostListPage';
+import PostDetailPage from './pages/PostDetailPage';
+import PostWriteIntroPage from './pages/PostWriteIntroPage';
 import PostWritePage from './pages/PostWritePage';
 import ErrorPage from './pages/ErrorPage';
-import PostListPage from './pages/PostListPage';
-import DetailPostPage from './pages/DetailPostPage';
 
 import './global.css';
 
@@ -17,10 +18,11 @@ function App() {
         <Route path="/" element={<HomePage />} />
         <Route path="/login" element={<LoginPage />} />
         <Route path="/login/kakao" element={<KakaoOuathPage />} />
-        <Route path="/articles" element={<PostListPage />} />
-        <Route path="/start-post" element={<StartPostPage />} />
+        <Route path="/mypage" element={<MyPage />} />
+        <Route path="/post" element={<PostListPage />} />
+        <Route path="/post/:id" element={<PostDetailPage />} />
+        <Route path="/post-write-intro" element={<PostWriteIntroPage />} />
         <Route path="/post-write" element={<PostWritePage />} />
-        <Route path="/detail-post" element={<DetailPostPage />} />
         <Route path="/*" element={<ErrorPage />} />
       </Routes>
     </BrowserRouter>

src/apis/index.js

@@ -1,5 +1,8 @@
 import axios from 'axios';
 import Swal from 'sweetalert2';
+import { useNavigate } from 'react-router-dom';
+
+const navigate = useNavigate();
 
 // 프론트에서 API를 활용하기 위한 기본 axios 인스턴스
 const instance = axios.create({
@@ -40,7 +43,8 @@ instance.interceptors.response.use(
         text: error.response.data.error.message,
         confirmButtonText: '확인',
       }).then(() => {
-        window.location.href = '/login';
+        navigate('/login');
+        // window.location.href = '/login';
       });
       return Promise.reject(error);
     }
@@ -54,7 +58,8 @@ instance.interceptors.response.use(
         text: error.response.data.error.message,
         confirmButtonText: '확인',
       }).then(() => {
-        window.location.href = '/errorPage';
+        navigate('/errorPage');
+        // window.location.href = '/errorPage';
       });
       return Promise.reject(error);
     }

src/components/atoms/Button.jsx

@@ -5,9 +5,10 @@ const Button = ({
   onClick,
   disabled,
   children,
+  margin,
   width = 'w-64',
   height = 'h-8',
-  bgColor = 'bg-blue-600',
+  bgColor = 'bg-blue',
   textColor = 'text-white',
   bdRadius = 'rounded-lg',
 }) => {
@@ -16,7 +17,7 @@ const Button = ({
       type={type || 'button'}
       onClick={onClick}
       disabled={disabled}
-      className={`${width} ${height} ${textColor} ${bgColor} ${bdRadius}`}
+      className={`${width} ${height} ${textColor} ${bgColor} ${bdRadius} ${margin}`}
     >
       {children}
     </button>

src/components/atoms/Nav.jsx

@@ -7,7 +7,7 @@ import logo from '../../assets/images/logo.png';
 const Nav = () => {
   return (
     <div>
-      <nav className="absolute h-16 p-5 mt-1 top-0 left-0 right-0 flex justify-between items-center">
+      <nav className="absolute h-16 p-5 top-0 left-0 right-0 flex justify-between items-center">
         <Link to={'/'}>
           <div>
             <img src={logo} className="float-left" size={35} />
@@ -21,10 +21,10 @@ const Nav = () => {
         </Link>
       </nav>
       <div className="absolute h-12 p-5 top-16 left-0 right-0 flex items-center">
-        <Link to={'/start-post'}>
+        <Link to={'/post-write-intro'}>
           <div className="p-1">공고작성</div>
         </Link>
-        <Link to={'/articles'}>
+        <Link to={'/post'}>
           <div className="pl-3">공고현황</div>
         </Link>
       </div>

src/components/atoms/OtherNav.jsx

@@ -1,20 +1,27 @@
+import React from 'react';
 import { BsArrowLeft } from 'react-icons/bs';
 import { BiSolidUser } from 'react-icons/bi';
 import { MdHome } from 'react-icons/md';
 import { Link, useNavigate } from 'react-router-dom';
 
-const OtherNav = () => {
+const OtherNav = ({ iconColor = '#000', bgColor = 'bg-[#FFF]' }) => {
   const navigate = useNavigate();
+  const goPreviousPage = () => {
+    navigate(-1); // 바로 이전 페이지로 이동
+  };
 
   return (
-    <div className="flex justify-between p-[25px] cursor-pointer">
-      <BsArrowLeft size={25} onClick={() => navigate(-1)} />
-      <div className="flex justify-end items-center">
-        <Link to="/">
-          <MdHome size={27} />
-        </Link>
-        {/* 마이페이지 라우터 할당 후 Link 설정 예정 */}
-        <BiSolidUser size={25} className="ml-2" />
+    <div>
+      <div className={`flex justify-between p-[25px] ${bgColor}`}>
+        <BsArrowLeft className="cursor-pointer" onClick={goPreviousPage} size={25} color={iconColor} />
+        <div className="flex">
+          <Link className="mr-4" to="/">
+            <MdHome size={25} color={iconColor} />
+          </Link>
+          <Link to="/mypage">
+            <BiSolidUser size={25} color={iconColor} />
+          </Link>
+        </div>
       </div>
     </div>
   );

src/components/molecules/Cards.jsx

@@ -11,7 +11,7 @@ const Cards = ({ articles }) => {
           pickupTip={article.tip}
           deadline={article.finishedAt}
           match={article.match}
-          to={`/articles/${article.boardId}`}
+          to={`/post/${article.boardId}`}
         />
       ))}
     </div>

src/components/templates/MyPageTemplate.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import OtherNav from '../atoms/OtherNav';
+import Footer from '../atoms/Footer';
+
+const MyPageTemplate = () => {
+  return (
+    <div className="page--layout">
+      <OtherNav />
+      <div className="text-center">임시 마이페이지입니다</div>
+      <Footer />
+    </div>
+  );
+};
+
+export default MyPageTemplate;

src/pages/HomePage.jsx

@@ -21,14 +21,14 @@ const HomePage = () => {
         <div className="mt-10 px-6 flex justify-between items-center">
           <div className="text-xl text-blue">현재 픽업을 기다리고 있어요.</div>
           {/* eslint-disable-next-line */}
-          <Link to={'/articles'}>
+          <Link to={'/post'}>
             <div className="text-zinc-400">더보기</div>
           </Link>
         </div>
         <div className="mx-5">
-          <Card to="/detail-post" />
-          <Card to="/detail-post" />
-          <Card to="/detail-post" />
+          <Card to="/post/1" />
+          <Card to="/post/2" />
+          <Card to="/post/3" />
         </div>
       </div>
       <Footer />

src/pages/KakaoOuathPage.jsx

@@ -15,15 +15,17 @@ const KakaoOuathPage = () => {
   // 실제 과정은 인가 코드를 백엔드 API로 보내고 나서 토큰 정보를 발급받아 이용하게 된다.
   // 우선은 임시 토큰을 이용하여 이를 서비스 이용시 인증하는데 사용!
   useEffect(() => {
-    if (kakaoOauthCode) {
-      try {
-        // console.log('login success!');
-        localStorage.setItem('aceessToken', 'token');
-        Swal.fire(loginSuccessMessage).then(navigate('/'));
-      } catch (error) {
-        // console.log(error);
+    setTimeout(() => {
+      if (kakaoOauthCode) {
+        try {
+          // console.log('login success!');
+          localStorage.setItem('accessToken', 'token');
+          Swal.fire(loginSuccessMessage).then(navigate('/'));
+        } catch (error) {
+          // console.log(error);
+        }
       }
-    }
+    }, [2000]);
   }, []);
 
   // 백엔드로 인가 코드를 넘기고 토큰을 받아오는 코드, 이후 로그인 처리 완료

src/pages/MyPage.jsx

@@ -0,0 +1,21 @@
+import React, { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import Swal from 'sweetalert2';
+import MyPageTemplate from '../components/templates/MyPageTemplate';
+import { loginNeedMessage } from '../utils/alert';
+
+const MyPage = () => {
+  const navigate = useNavigate();
+
+  // 마이페이지 접속시 로그인 상태가 아니라면 로그인 페이지로 이동
+  useEffect(() => {
+    if (localStorage.getItem('accessToken') == null) {
+      Swal.fire(loginNeedMessage);
+      navigate('/login');
+    }
+  }, [navigate]);
+
+  return <MyPageTemplate />;
+};
+
+export default MyPage;

src/pages/DetailPostPage.jsx → src/pages/PostDetailPage.jsx

@@ -2,13 +2,14 @@ import React from 'react';
 import { MdOutlineLocationOn, MdLocationPin } from 'react-icons/md';
 import { BsArrowDown } from 'react-icons/bs';
 import Button from '../components/atoms/Button';
+import OtherNav from '../components/atoms/OtherNav';
 
-const DetailPostPage = () => {
+const PostDetailPage = () => {
   return (
     <div className="page--layout">
       {/* 파란색 부분 */}
       <div className="bg-sky-blue h-60 rounded-b-3xl">
-        <div className="h-14 bg-slate-400">네비게이션 바</div>
+        <OtherNav iconColor="#fff" bgColor="#000" />
         <div className="p-5">
           <div className="mt-1 text-white text-xl">매칭을 기다리고 있어요.</div>
           <div className="p-4">
@@ -54,4 +55,4 @@ const DetailPostPage = () => {
   );
 };
 
-export default DetailPostPage;
+export default PostDetailPage;

src/pages/PostListPage.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
-import ArticleNav from '../components/atoms/ArticleNav';
+import OtherNav from '../components/atoms/OtherNav';
 import Cards from '../components/molecules/Cards';
 import FilterForm from '../components/molecules/FilterForm';
 import WritePostIcon from '../assets/images/postWrite.png';
@@ -77,12 +77,12 @@ const PostListPage = () => {
   const navigate = useNavigate();
 
   const goWritePost = () => {
-    navigate('/start-post');
+    navigate('/post-write-intro');
   };
 
   return (
     <div className="page--layout">
-      <ArticleNav />
+      <OtherNav />
       <div className="text-center text-blue text-xl">공고 현황</div>
       <FilterForm />
       <div className="h-[550px] overflow-y-auto overflow-x-hidden scrollbar-hide">

src/pages/PostWriteIntroPage.jsx

@@ -0,0 +1,26 @@
+import { Link } from 'react-router-dom';
+import Button from '../components/atoms/Button';
+import OtherNav from '../components/atoms/OtherNav';
+
+const PostWriteIntroPage = () => {
+  return (
+    <div className="page--layout bg-sky-blue flex flex-col justify-between">
+      <OtherNav iconColor="#fff" bgColor="#000" />
+      <div>
+        <div className="text-white p-8">
+          <div className="font-bold text-xl">어떤 음료를 픽업 받으실 건가요?</div>
+          <div>픽업을 위한 정보를 입력합니다.</div>
+        </div>
+        <div className="flex justify-center mb-14">
+          <Link to="/post-write">
+            <Button width="w-[19rem]" height=" h-[2.5rem]" bgColor="bg-white" textColor="text-sky-blue">
+              공고 작성하기
+            </Button>
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PostWriteIntroPage;