[feat] : 공고상세페이지 분기, 마이페이지

src/App.js

@@ -7,8 +7,8 @@ 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 PostDetailWriterPage from './pages/PostDetailWriterPage';
+import ErrorPage from './pages/ErrorPage';
 import ProtectedRoute from './components/templates/ProtectedRoute';
 import routes from './constant/routes';
 
@@ -31,7 +31,6 @@ function App() {
         />
         <Route path={routes.post} element={<PostListPage />} />
         <Route path={routes.detailPost} element={<PostDetailPage />} />
-        <Route path={routes.postWriter} element={<PostDetailWriterPage />} />
         <Route path={routes.postWriteIntro} element={<PostWriteIntroPage />} />
         <Route path={routes.postWrite} element={<PostWritePage />} />
         <Route path={routes.error} element={<ErrorPage />} />

src/apis/postDetail.js

@@ -0,0 +1,7 @@
+import instance from './index';
+
+export const postDetail = (boardId = '') => {
+  return instance.get(`/articles/before/${boardId}`);
+};
+
+export default postDetail;

src/components/organisms/Info.jsx

@@ -0,0 +1,33 @@
+/* eslint-disable */
+const Info = () => {
+  return (
+    <div className="px-8 pt-6">
+      {/* 주문정보 */}
+      <div>
+        <div className="text-xl font-bold text-blue py-2">주문 정보</div>
+        <div>아이스 아메리카노 1잔</div>
+      </div>
+      {/* 요청사항 */}
+      <div className="my-12">
+        <div className="text-xl font-bold text-blue py-2">요청 사항</div>
+        <div>
+          <div className="flex">
+            <div className="text-zinc-400">픽업팁</div>
+            <div className="ml-8">3000원</div>
+          </div>
+          <div className="flex">
+            <div className="text-zinc-400">요청사항</div>
+            <div className="ml-5">1층 도착하시면 연락주세요!</div>
+          </div>
+        </div>
+      </div>
+      {/* 마감기한 */}
+      <div className="my-12">
+        <div className="text-xl font-bold text-blue py-2">마감기한</div>
+        <div>오늘 14시 10분까지</div>
+      </div>
+    </div>
+  );
+};
+
+export default Info;

src/components/organisms/Location.jsx

@@ -0,0 +1,20 @@
+import { BsArrowDown } from 'react-icons/bs';
+import { MdLocationPin, MdOutlineLocationOn } from 'react-icons/md';
+
+const Location = () => {
+  return (
+    <div className="p-4">
+      <div className="flex items-center">
+        <MdOutlineLocationOn className="mr-1" size="30" style={{ color: 'white' }} />
+        <span className="text-white">스타벅스 전대후문점</span>
+      </div>
+      <BsArrowDown className="ml-2 my-1" style={{ color: 'white' }} />
+      <div className="flex items-center">
+        <MdLocationPin className="mr-1" size="30" style={{ color: 'white' }} />
+        <span className="text-white">공과대학 7호관</span>
+      </div>
+    </div>
+  );
+};
+
+export default Location;

src/components/organisms/PickerTime.jsx

@@ -0,0 +1,47 @@
+import Swal from 'sweetalert2';
+import Button from '../atoms/Button';
+
+const PickerTime = ({ setPage, setIsMatch }) => {
+  // 픽업하기 눌렀다가 취소할 때
+  const pickUpCancel = () => {
+    setPage(0);
+  };
+
+  // 입력완료 버튼
+  const doneWrite = () => {
+    setPage(0);
+    setIsMatch(true);
+    return Swal.fire({
+      icon: 'success',
+      title: '매칭이 완료 되었어요!',
+      showConfirmButton: false,
+      timer: 3000,
+    });
+  };
+  return (
+    <div className="px-8">
+      <div className="mt-12 mb-3">
+        <div className="font-bold text-blue text-xl py-2">예상 도착 시간은 언제인가요?</div>
+        <div className=" text-sm">오더의 장소에 도착할 시간을 알려주세요.</div>
+      </div>
+      <div className="mt-6">
+        <input
+          className="text-center w-28 h-10 border-2 border-zinc-700 rounded-lg mr-3"
+          type="number"
+          placeholder="15"
+        />
+        분 후 도착
+      </div>
+      <div className="mt-72 flex justify-between px-3">
+        <Button onClick={pickUpCancel} width="w-32" textColor="text-black" bgColor="bg-zinc-300">
+          취소
+        </Button>
+        <Button onClick={doneWrite} width="w-32">
+          입력완료
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default PickerTime;

src/components/templates/AdminMyPage.jsx

@@ -0,0 +1,39 @@
+import { CiEdit } from 'react-icons/ci';
+import { PiCaretRightLight, PiReadCvLogoThin, PiCheckSquareLight } from 'react-icons/pi';
+import { RiAdminLine } from 'react-icons/ri';
+
+const AdminMyPage = () => {
+  return (
+    <div>
+      <div className="h-24 p-5">
+        <div className="text-xl font-bold">닉네임</div>
+        <div>관리자</div>
+      </div>
+      <div className="w-full h-1 bg-zinc-200" />
+      <div className="px-5 mt-5">
+        <div className="py-3 text-lg">
+          <RiAdminLine className="mx-2 inline-block" size={25} />
+          <div className="inline-block">관리자 페이지</div>
+          <PiCaretRightLight className="float-right" size={30} />
+        </div>
+        <div className="py-3 text-lg">
+          <PiReadCvLogoThin className="mx-2 inline-block" size={25} />
+          <div className="inline-block">작성한 공고글</div>
+          <PiCaretRightLight className="float-right" size={30} />
+        </div>
+        <div className="py-3 text-lg">
+          <PiCheckSquareLight className="mx-2 inline-block" size={25} />
+          <div className="inline-block">수락한 공고글</div>
+          <PiCaretRightLight className="float-right" size={30} />
+        </div>
+        <div className="py-3 text-lg">
+          <CiEdit className="mx-2 inline-block" size={25} />
+          <div className="inline-block">개인정보 수정</div>
+          <PiCaretRightLight className="float-right" size={30} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AdminMyPage;

src/components/templates/GuestMyPage.jsx

@@ -0,0 +1,28 @@
+import { CiEdit } from 'react-icons/ci';
+import { PiGraduationCapLight, PiCaretRightLight } from 'react-icons/pi';
+
+const GuestMyPage = () => {
+  return (
+    <div>
+      <div className="h-24 p-5">
+        <div className="text-xl font-bold">닉네임</div>
+        <div>학생 미인증</div>
+      </div>
+      <div className="w-full h-1 bg-zinc-200" />
+      <div className="px-5 mt-5">
+        <div className="py-3 text-lg">
+          <PiGraduationCapLight className="mx-2 inline-block" size={25} />
+          <div className="inline-block">학생증 인증</div>
+          <PiCaretRightLight className="float-right" size={30} />
+        </div>
+        <div className="py-3 text-lg">
+          <CiEdit className="mx-2 inline-block" size={25} />
+          <div className="inline-block">개인정보 수정</div>
+          <PiCaretRightLight className="float-right" size={30} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default GuestMyPage;

src/components/templates/MyPageTemplate.jsx

@@ -1,12 +1,27 @@
 import React from 'react';
 import OtherNav from '../atoms/OtherNav';
+import AdminMyPage from './AdminMyPage';
+import GuestMyPage from './GuestMyPage';
+import StudentMyPage from './StudentMyPage';
 import Footer from '../atoms/Footer';
 
 const MyPageTemplate = () => {
+  const authority = 3;
+
+  const certification = (author) => {
+    /* eslint no-else-return: "error" */
+    if (author === 1) {
+      return <AdminMyPage />;
+    } else if (author === 2) {
+      return <StudentMyPage />;
+    }
+    return <GuestMyPage />;
+  };
+
   return (
     <div className="page--layout">
       <OtherNav />
-      <div className="text-center">임시 마이페이지입니다</div>
+      <div>{certification(authority)}</div>
       <Footer />
     </div>
   );

src/components/templates/PickerMatch.jsx

@@ -0,0 +1,28 @@
+import Button from '../atoms/Button';
+import OtherNav from '../atoms/OtherNav';
+import Info from '../organisms/Info';
+import Location from '../organisms/Location';
+
+const PickerMatch = () => {
+  return (
+    <>
+      {/* 파란색 부분 */}
+      <div className="bg-sky-blue h-60 rounded-b-3xl">
+        <OtherNav iconColor="#fff" bgColor="#000" />
+        <div className="px-5">
+          <div className="mt-1 text-white text-xl">내가 픽업할 공고입니다.</div>
+          <Location />
+        </div>
+      </div>
+      {/* 하얀색 부분 */}
+      <Info />
+      <div className="flex justify-center">
+        <Button bgColor="bg-zinc-300" disabled>
+          이미 매칭된 공고
+        </Button>
+      </div>
+    </>
+  );
+};
+
+export default PickerMatch;

src/components/templates/PickerNoMatch.jsx

@@ -0,0 +1,62 @@
+import { useState } from 'react';
+import Swal from 'sweetalert2';
+import Button from '../atoms/Button';
+import OtherNav from '../atoms/OtherNav';
+import Info from '../organisms/Info';
+import Location from '../organisms/Location';
+import '../../styles/DeleteSpin.css';
+import PickerTime from '../organisms/PickerTime';
+
+const PickerNoMatch = ({ setIsMatch }) => {
+  const [page, setPage] = useState(0);
+
+  // 이 음료 픽업하기 버튼을 눌렀을 때 뜨는 모달창
+  const pickUpBtnModal = () => {
+    return Swal.fire({
+      title: '이 음료를 픽업하시겠습니까?',
+      showCancelButton: true,
+      cancelButtonText: '취소',
+      confirmButtonText: '수락',
+      confirmButtonColor: '#0075ff',
+      heightAuto: true,
+    }).then((result) => {
+      if (result.isConfirmed) {
+        setPage(1);
+      }
+    });
+  };
+
+  // 페이지가 0이면 상세페이지 처음, 1이면 예상도착시간
+  const nowPage = (pageNum) => {
+    if (pageNum === 1) {
+      return <PickerTime setPage={setPage} setIsMatch={setIsMatch} />;
+    }
+    return (
+      <>
+        <Info />
+        <div className="flex justify-center">
+          <Button onClick={pickUpBtnModal} bgColor="bg-blue">
+            이 음료 픽업하기
+          </Button>
+        </div>
+      </>
+    );
+  };
+
+  return (
+    <>
+      {/* 파란색 부분 */}
+      <div className="bg-sky-blue h-60 rounded-b-3xl">
+        <OtherNav iconColor="#fff" bgColor="#000" />
+        <div className="px-5">
+          <div className="mt-1 text-white text-xl">매칭을 기다리고 있어요.</div>
+          <Location />
+        </div>
+      </div>
+      {/* 하얀색 부분 */}
+      {nowPage(page)}
+    </>
+  );
+};
+
+export default PickerNoMatch;

src/components/templates/StudentMyPage.jsx

@@ -0,0 +1,33 @@
+import { CiEdit } from 'react-icons/ci';
+import { PiCaretRightLight, PiReadCvLogoThin, PiCheckSquareLight } from 'react-icons/pi';
+
+const StudentMyPage = () => {
+  return (
+    <div>
+      <div className="h-24 p-5">
+        <div className="text-xl font-bold">닉네임</div>
+        <div>전남대학교</div>
+      </div>
+      <div className="w-full h-1 bg-zinc-200" />
+      <div className="px-5 mt-5">
+        <div className="py-3 text-lg">
+          <PiReadCvLogoThin className="mx-2 inline-block" size={25} />
+          <div className="inline-block">작성한 공고글</div>
+          <PiCaretRightLight className="float-right" size={30} />
+        </div>
+        <div className="py-3 text-lg">
+          <PiCheckSquareLight className="mx-2 inline-block" size={25} />
+          <div className="inline-block">수락한 공고글</div>
+          <PiCaretRightLight className="float-right" size={30} />
+        </div>
+        <div className="py-3 text-lg">
+          <CiEdit className="mx-2 inline-block" size={25} />
+          <div className="inline-block">개인정보 수정</div>
+          <PiCaretRightLight className="float-right" size={30} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default StudentMyPage;

src/components/templates/WriterMatch.jsx

@@ -0,0 +1,37 @@
+import OtherNav from '../atoms/OtherNav';
+import Info from '../organisms/Info';
+import Location from '../organisms/Location';
+
+const WriterMatch = () => {
+  return (
+    <>
+      {/* 파란색 부분 */}
+      <div className="bg-sky-blue h-60 rounded-b-3xl">
+        <OtherNav iconColor="#fff" bgColor="#000" />
+        <div className="px-5">
+          <div className="mt-1 text-white text-xl">매칭을 기다리고 있어요.</div>
+          <Location />
+        </div>
+      </div>
+      {/* 하얀색 부분 */}
+      <Info />
+      <div className="my-8 px-8">
+        <div className="text-xl font-bold text-blue py-2">피커정보</div>
+        <div className="flex">
+          <div className="text-zinc-400">도착시간</div>
+          <div className="ml-5">3000원</div>
+        </div>
+        <div className="flex my-1">
+          <div className="text-zinc-400">계좌정보</div>
+          <div className="ml-5">농협 01010101010101010101</div>
+        </div>
+        <div className="flex my-1">
+          <div className="text-zinc-400">계좌정보</div>
+          <div className="ml-5">010-1234-5678</div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default WriterMatch;