diff --git a/package-lock.json b/package-lock.json
index eaa6e469..2bfbd6eb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "pickup-shuttle",
       "version": "0.1.0",
       "dependencies": {
+        "@hookform/error-message": "^2.0.1",
         "@tanstack/react-query": "^4.35.3",
         "@tanstack/react-query-devtools": "^4.35.3",
         "@testing-library/jest-dom": "^5.17.0",
@@ -2413,6 +2414,16 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@hookform/error-message": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@hookform/error-message/-/error-message-2.0.1.tgz",
+      "integrity": "sha512-U410sAr92xgxT1idlu9WWOVjndxLdgPUHEB8Schr27C9eh7/xUnITWpCMF93s+lGiG++D4JnbSnrb5A21AdSNg==",
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0",
+        "react-hook-form": "^7.0.0"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.11",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.11.tgz",
diff --git a/package.json b/package.json
index 5f768108..f7afd652 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@hookform/error-message": "^2.0.1",
     "@tanstack/react-query": "^4.35.3",
     "@tanstack/react-query-devtools": "^4.35.3",
     "@testing-library/jest-dom": "^5.17.0",
diff --git a/src/App.js b/src/App.js
index c005d69e..792b51ce 100644
--- a/src/App.js
+++ b/src/App.js
@@ -11,7 +11,7 @@ import MyPage from './pages/MyPage';
 import AdminPage from './pages/AdminPage';
 import AdminAuthPage from './pages/AdminAuthPage';
 import ErrorPage from './pages/ErrorPage';
-import ProtectedRoute from './components/templates/ProtectedRoute';
+import ProtectedRoute from './components/layout/ProtectedRoute';
 import UploadStudentCardPage from './pages/UploadStudentCardPage';
 import routes from './constant/routes';
 
@@ -27,6 +27,11 @@ function App() {
         <Route path={routes.login} element={<LoginPage />} />
         <Route path={routes.loginKakao} element={<KakaoOuathPage />} />
         <Route path={routes.registerBank} element={<RegisterBankPage />} />
+        <Route path={routes.post} element={<PostListPage />} />
+        <Route path={routes.detailPost} element={<PostDetailPage />} />
+        {/* 아래 각 페이지들에 대해 requiedAuth 추가 필요 */}
+        <Route path={routes.postWriteIntro} element={<PostWriteIntroPage />} />
+        <Route path={routes.postWrite} element={<PostWritePage />} />
         <Route
           path={routes.mypage}
           element={
@@ -36,13 +41,9 @@ function App() {
           }
         />
         <Route path={routes.uploadStudentCard} element={<UploadStudentCardPage />} />
-        <Route path={routes.post} element={<PostListPage />} />
-        <Route path={routes.detailPost} element={<PostDetailPage />} />
-        <Route path={routes.postWriteIntro} element={<PostWriteIntroPage />} />
-        <Route path={routes.postWrite} element={<PostWritePage />} />
-        <Route path={routes.error} element={<ErrorPage />} />
         <Route path={routes.admin} element={<AdminPage />} />
         <Route path={routes.adminAuth} element={<AdminAuthPage />} />
+        <Route path={routes.error} element={<ErrorPage />} />
       </Routes>
     </BrowserRouter>
   );
diff --git a/src/apis/admin.js b/src/apis/admin.js
index 7ed65e5d..828b9005 100644
--- a/src/apis/admin.js
+++ b/src/apis/admin.js
@@ -5,7 +5,7 @@ export const adminAuth = () => {
 };
 
 export const adminAuthDetail = (id = 1) => {
-  return instance.get(`/admin/list/${id}`);
+  return instance.get(`/admin/auth/list/${id}`);
 };
 
 export const adminAuthList = () => {
diff --git a/src/components/organisms/Info.jsx b/src/components/atoms/Info.jsx
similarity index 93%
rename from src/components/organisms/Info.jsx
rename to src/components/atoms/Info.jsx
index 32567dd0..b86aa61f 100644
--- a/src/components/organisms/Info.jsx
+++ b/src/components/atoms/Info.jsx
@@ -1,4 +1,4 @@
-import Time from '../atoms/Time';
+import time from '../../utils/time';
 
 /* eslint-disable */
 const Info = ({ response }) => {
@@ -36,7 +36,7 @@ const Info = ({ response }) => {
       {/* 마감기한 */}
       <div className="my-12">
         <div className="text-xl font-bold text-blue py-2">마감기한</div>
-        <div>{<Time date={finishTime} />}</div>
+        <div>{time(finishTime)}</div>
       </div>
     </div>
   );
diff --git a/src/components/atoms/Button.jsx b/src/components/atoms/button/Button.jsx
similarity index 100%
rename from src/components/atoms/Button.jsx
rename to src/components/atoms/button/Button.jsx
diff --git a/src/components/atoms/FilterBtn.jsx b/src/components/atoms/button/FilterBtn.jsx
similarity index 100%
rename from src/components/atoms/FilterBtn.jsx
rename to src/components/atoms/button/FilterBtn.jsx
diff --git a/src/components/atoms/MinusBtn.jsx b/src/components/atoms/button/MinusBtn.jsx
similarity index 100%
rename from src/components/atoms/MinusBtn.jsx
rename to src/components/atoms/button/MinusBtn.jsx
diff --git a/src/components/atoms/PlusBtn.jsx b/src/components/atoms/button/PlusBtn.jsx
similarity index 100%
rename from src/components/atoms/PlusBtn.jsx
rename to src/components/atoms/button/PlusBtn.jsx
diff --git a/src/components/atoms/Input.jsx b/src/components/atoms/input/Input.jsx
similarity index 100%
rename from src/components/atoms/Input.jsx
rename to src/components/atoms/input/Input.jsx
diff --git a/src/components/atoms/RangeInput.jsx b/src/components/atoms/input/RangeInput.jsx
similarity index 89%
rename from src/components/atoms/RangeInput.jsx
rename to src/components/atoms/input/RangeInput.jsx
index f28c753c..a34cb1bf 100644
--- a/src/components/atoms/RangeInput.jsx
+++ b/src/components/atoms/input/RangeInput.jsx
@@ -1,4 +1,4 @@
-import '../../styles/thumb.css';
+import '../../../styles/thumb.css';
 
 const RangeInput = ({ name, register }) => {
   return (
diff --git a/src/components/atoms/SelectInput.jsx b/src/components/atoms/input/SelectInput.jsx
similarity index 93%
rename from src/components/atoms/SelectInput.jsx
rename to src/components/atoms/input/SelectInput.jsx
index 7628f46b..f53653c2 100644
--- a/src/components/atoms/SelectInput.jsx
+++ b/src/components/atoms/input/SelectInput.jsx
@@ -1,4 +1,4 @@
-import cafe from '../../constant/cafe';
+import cafe from '../../../constant/cafe';
 
 const SelectInput = ({
   register,
diff --git a/src/components/atoms/Label.jsx b/src/components/atoms/label/Label.jsx
similarity index 100%
rename from src/components/atoms/Label.jsx
rename to src/components/atoms/label/Label.jsx
diff --git a/src/components/atoms/SubLabel.jsx b/src/components/atoms/label/SubLabel.jsx
similarity index 100%
rename from src/components/atoms/SubLabel.jsx
rename to src/components/atoms/label/SubLabel.jsx
diff --git a/src/components/atoms/LoginNav.jsx b/src/components/atoms/nav/LoginNav.jsx
similarity index 92%
rename from src/components/atoms/LoginNav.jsx
rename to src/components/atoms/nav/LoginNav.jsx
index 29d03824..3924f607 100644
--- a/src/components/atoms/LoginNav.jsx
+++ b/src/components/atoms/nav/LoginNav.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { BsArrowLeft } from 'react-icons/bs';
 import { MdHome } from 'react-icons/md';
 import { Link, useNavigate } from 'react-router-dom';
-import routes from '../../constant/routes';
+import routes from '../../../constant/routes';
 
 const LoginNav = () => {
   const navigate = useNavigate();
diff --git a/src/components/atoms/Nav.jsx b/src/components/atoms/nav/Nav.jsx
similarity index 90%
rename from src/components/atoms/Nav.jsx
rename to src/components/atoms/nav/Nav.jsx
index fc48ae46..475f0ab5 100644
--- a/src/components/atoms/Nav.jsx
+++ b/src/components/atoms/nav/Nav.jsx
@@ -2,8 +2,8 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { BiSolidUser } from 'react-icons/bi';
-import logo from '../../assets/images/logo.png';
-import routes from '../../constant/routes';
+import logo from '../../../assets/images/logo.png';
+import routes from '../../../constant/routes';
 
 const Nav = () => {
   return (
diff --git a/src/components/atoms/OtherNav.jsx b/src/components/atoms/nav/OtherNav.jsx
similarity index 95%
rename from src/components/atoms/OtherNav.jsx
rename to src/components/atoms/nav/OtherNav.jsx
index cd94cf78..3a3df9a7 100644
--- a/src/components/atoms/OtherNav.jsx
+++ b/src/components/atoms/nav/OtherNav.jsx
@@ -3,7 +3,7 @@ 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';
-import routes from '../../constant/routes';
+import routes from '../../../constant/routes';
 
 const OtherNav = ({ iconColor = '#000', bgColor = 'bg-[#FFF]' }) => {
   const navigate = useNavigate();
diff --git a/src/components/templates/ProtectedRoute.jsx b/src/components/layout/ProtectedRoute.jsx
similarity index 100%
rename from src/components/templates/ProtectedRoute.jsx
rename to src/components/layout/ProtectedRoute.jsx
diff --git a/src/components/molecules/BankForm.jsx b/src/components/molecules/BankForm.jsx
index 8fc808a2..c25b41fe 100644
--- a/src/components/molecules/BankForm.jsx
+++ b/src/components/molecules/BankForm.jsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import Swal from 'sweetalert2';
 import { useMutation } from '@tanstack/react-query';
-import Button from '../atoms/Button';
+import Button from '../atoms/button/Button';
 import banks from '../../constant/bank';
 import routes from '../../constant/routes';
 import registerBank from '../../apis/register';
diff --git a/src/components/molecules/BtnNavigate.jsx b/src/components/molecules/BtnNavigate.jsx
index 2663f2ea..f110f415 100644
--- a/src/components/molecules/BtnNavigate.jsx
+++ b/src/components/molecules/BtnNavigate.jsx
@@ -1,5 +1,5 @@
 import { IoIosArrowBack, IoIosArrowForward } from 'react-icons/io';
-import Button from '../atoms/Button';
+import Button from '../atoms/button/Button';
 
 const BtnNavigate = ({ handlePrev, handleNext }) => {
   const btnWidth = 'w-[8rem]';
diff --git a/src/components/molecules/CircleBtn.jsx b/src/components/molecules/CircleBtn.jsx
index 7ed9cbf0..da1cf041 100644
--- a/src/components/molecules/CircleBtn.jsx
+++ b/src/components/molecules/CircleBtn.jsx
@@ -1,4 +1,4 @@
-import Button from '../atoms/Button';
+import Button from '../atoms/button/Button';
 
 const CircleBtn = ({ num, children, active }) => {
   const bgColor = active ? 'bg-blue' : 'bg-gray-400';
diff --git a/src/components/molecules/FilterForm.jsx b/src/components/molecules/FilterForm.jsx
index c7cd0bc4..045fa5b8 100644
--- a/src/components/molecules/FilterForm.jsx
+++ b/src/components/molecules/FilterForm.jsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import FilterBtn from '../atoms/FilterBtn';
+import FilterBtn from '../atoms/button/FilterBtn';
 
 const FilterForm = ({ getFilter }) => {
   const [filter, setFilter] = useState('All');
diff --git a/src/components/molecules/Labels.jsx b/src/components/molecules/Labels.jsx
index 26e944dc..5f4eba65 100644
--- a/src/components/molecules/Labels.jsx
+++ b/src/components/molecules/Labels.jsx
@@ -1,5 +1,5 @@
-import Label from '../atoms/Label';
-import SubLabel from '../atoms/SubLabel';
+import Label from '../atoms/label/Label';
+import SubLabel from '../atoms/label/SubLabel';
 
 const Labels = ({ htmlFor, label, subLabel }) => {
   return (
diff --git a/src/components/organisms/AuthRequest.jsx b/src/components/organisms/AuthRequest.jsx
index f842b94f..254503e6 100644
--- a/src/components/organisms/AuthRequest.jsx
+++ b/src/components/organisms/AuthRequest.jsx
@@ -4,7 +4,7 @@ import { PiCaretRightLight } from 'react-icons/pi';
 const AuthRequest = ({ user }) => {
   return (
     <div className="h-10 rounded-lg border-gray-300 border-2 my-5">
-      <Link to={`/admin/auth/${user.userId}`}>
+      <Link to={`/mypage/admin/auth/${user.userId}`}>
         <div className="p-[0.4rem] pl-4 flex items-center justify-between">
           {user.nickname}
           <PiCaretRightLight size={20} />
diff --git a/src/components/organisms/PickerTime.jsx b/src/components/organisms/PickerTime.jsx
index 96ca2ffa..1a0046a2 100644
--- a/src/components/organisms/PickerTime.jsx
+++ b/src/components/organisms/PickerTime.jsx
@@ -3,7 +3,7 @@ import { useState } from 'react';
 import { useMutation } from '@tanstack/react-query';
 import { useParams } from 'react-router-dom';
 import { postDetailPicker } from '../../apis/postDetail';
-import Button from '../atoms/Button';
+import Button from '../atoms/button/Button';
 
 const PickerTime = ({ setPage, setIsMatch }) => {
   const { id } = useParams();
diff --git a/src/components/templates/MyPageTemplate.jsx b/src/components/templates/MyPageTemplate.jsx
index ec4ce306..7ddd4c6a 100644
--- a/src/components/templates/MyPageTemplate.jsx
+++ b/src/components/templates/MyPageTemplate.jsx
@@ -1,9 +1,9 @@
 import React from 'react';
 // import { useQuery } from '@tanstack/react-query';
-import OtherNav from '../atoms/OtherNav';
-import AdminMyPage from './AdminMyPage';
-import GuestMyPage from './GuestMyPage';
-import StudentMyPage from './StudentMyPage';
+import OtherNav from '../atoms/nav/OtherNav';
+import AdminMyPage from './mypage/AdminMyPageTemplate';
+import GuestMyPage from './mypage/GuestMyPageTemplate';
+import StudentMyPage from './mypage/StudentMyPageTemplate';
 import Footer from '../atoms/Footer';
 // import { getMyPage } from '../../apis/myPage';
 
diff --git a/src/components/templates/AdminMyPage.jsx b/src/components/templates/mypage/AdminMyPageTemplate.jsx
similarity index 93%
rename from src/components/templates/AdminMyPage.jsx
rename to src/components/templates/mypage/AdminMyPageTemplate.jsx
index 099037cc..17810134 100644
--- a/src/components/templates/AdminMyPage.jsx
+++ b/src/components/templates/mypage/AdminMyPageTemplate.jsx
@@ -2,9 +2,9 @@ import { CiEdit } from 'react-icons/ci';
 import { PiCaretRightLight, PiReadCvLogoThin, PiCheckSquareLight } from 'react-icons/pi';
 import { RiAdminLine } from 'react-icons/ri';
 import { useNavigate } from 'react-router-dom';
-import routes from '../../constant/routes';
+import routes from '../../../constant/routes';
 
-const AdminMyPage = () => {
+const AdminMyPageTemplate = () => {
   const navigate = useNavigate();
   const navigateAdmin = () => {
     return navigate(routes.admin);
@@ -42,4 +42,4 @@ const AdminMyPage = () => {
   );
 };
 
-export default AdminMyPage;
+export default AdminMyPageTemplate;
diff --git a/src/components/templates/GuestMyPage.jsx b/src/components/templates/mypage/GuestMyPageTemplate.jsx
similarity index 90%
rename from src/components/templates/GuestMyPage.jsx
rename to src/components/templates/mypage/GuestMyPageTemplate.jsx
index 12b8f740..b4f9d0da 100644
--- a/src/components/templates/GuestMyPage.jsx
+++ b/src/components/templates/mypage/GuestMyPageTemplate.jsx
@@ -1,9 +1,9 @@
 import { CiEdit } from 'react-icons/ci';
 import { PiGraduationCapLight, PiCaretRightLight } from 'react-icons/pi';
 import { useNavigate } from 'react-router-dom';
-import routes from '../../constant/routes';
+import routes from '../../../constant/routes';
 
-const GuestMyPage = () => {
+const GuestMyPageTemplate = () => {
   const navigate = useNavigate();
   const uploadStudentIdCard = () => {
     return navigate(routes.uploadStudentCard);
@@ -31,4 +31,4 @@ const GuestMyPage = () => {
   );
 };
 
-export default GuestMyPage;
+export default GuestMyPageTemplate;
diff --git a/src/components/templates/StudentMyPage.jsx b/src/components/templates/mypage/StudentMyPageTemplate.jsx
similarity index 93%
rename from src/components/templates/StudentMyPage.jsx
rename to src/components/templates/mypage/StudentMyPageTemplate.jsx
index 431945cb..80719348 100644
--- a/src/components/templates/StudentMyPage.jsx
+++ b/src/components/templates/mypage/StudentMyPageTemplate.jsx
@@ -1,7 +1,7 @@
 import { CiEdit } from 'react-icons/ci';
 import { PiCaretRightLight, PiReadCvLogoThin, PiCheckSquareLight } from 'react-icons/pi';
 
-const StudentMyPage = () => {
+const StudentMyPageTemplate = () => {
   return (
     <div>
       <div className="w-full h-1 bg-zinc-200" />
@@ -26,4 +26,4 @@ const StudentMyPage = () => {
   );
 };
 
-export default StudentMyPage;
+export default StudentMyPageTemplate;
diff --git a/src/components/templates/PickerMatch.jsx b/src/components/templates/postDetail/PickerMatchTemplate.jsx
similarity index 68%
rename from src/components/templates/PickerMatch.jsx
rename to src/components/templates/postDetail/PickerMatchTemplate.jsx
index 3dada448..73f1f658 100644
--- a/src/components/templates/PickerMatch.jsx
+++ b/src/components/templates/postDetail/PickerMatchTemplate.jsx
@@ -1,9 +1,9 @@
-import Button from '../atoms/Button';
-import OtherNav from '../atoms/OtherNav';
-import Info from '../organisms/Info';
-import Location from '../organisms/Location';
+import Button from '../../atoms/button/Button';
+import OtherNav from '../../atoms/nav/OtherNav';
+import Info from '../../atoms/Info';
+import Location from '../../organisms/Location';
 
-const PickerMatch = ({ response }) => {
+const PickerMatchTemplate = ({ response }) => {
   return (
     <>
       {/* 파란색 부분 */}
@@ -25,4 +25,4 @@ const PickerMatch = ({ response }) => {
   );
 };
 
-export default PickerMatch;
+export default PickerMatchTemplate;
diff --git a/src/components/templates/PickerNoMatch.jsx b/src/components/templates/postDetail/PickerNoMatchTemplate.jsx
similarity index 82%
rename from src/components/templates/PickerNoMatch.jsx
rename to src/components/templates/postDetail/PickerNoMatchTemplate.jsx
index 49df3286..ac10858c 100644
--- a/src/components/templates/PickerNoMatch.jsx
+++ b/src/components/templates/postDetail/PickerNoMatchTemplate.jsx
@@ -1,13 +1,13 @@
 import { useEffect, 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';
+import Button from '../../atoms/button/Button';
+import OtherNav from '../../atoms/nav/OtherNav';
+import Info from '../../atoms/Info';
+import Location from '../../organisms/Location';
+import '../../../styles/DeleteSpin.css';
+import PickerTime from '../../organisms/PickerTime';
 
-const PickerNoMatch = ({ response }) => {
+const PickerNoMatchTemplate = ({ response }) => {
   const [page, setPage] = useState(0);
   const [isMatch, setIsMatch] = useState(false);
 
@@ -66,4 +66,4 @@ const PickerNoMatch = ({ response }) => {
   );
 };
 
-export default PickerNoMatch;
+export default PickerNoMatchTemplate;
diff --git a/src/components/templates/WriterMatch.jsx b/src/components/templates/postDetail/WriterMatchTemplate.jsx
similarity index 83%
rename from src/components/templates/WriterMatch.jsx
rename to src/components/templates/postDetail/WriterMatchTemplate.jsx
index 5a8c479e..09a25f9f 100644
--- a/src/components/templates/WriterMatch.jsx
+++ b/src/components/templates/postDetail/WriterMatchTemplate.jsx
@@ -1,8 +1,8 @@
-import OtherNav from '../atoms/OtherNav';
-import Info from '../organisms/Info';
-import Location from '../organisms/Location';
+import OtherNav from '../../atoms/nav/OtherNav';
+import Info from '../../atoms/Info';
+import Location from '../../organisms/Location';
 
-const WriterMatch = ({ response }) => {
+const WriterMatchTemplate = ({ response }) => {
   return (
     <>
       {/* 파란색 부분 */}
@@ -36,4 +36,4 @@ const WriterMatch = ({ response }) => {
   );
 };
 
-export default WriterMatch;
+export default WriterMatchTemplate;
diff --git a/src/components/templates/WriterNoMatch.jsx b/src/components/templates/postDetail/WriterNoMatchTemplate.jsx
similarity index 89%
rename from src/components/templates/WriterNoMatch.jsx
rename to src/components/templates/postDetail/WriterNoMatchTemplate.jsx
index e1ac3fbc..c3f738a9 100644
--- a/src/components/templates/WriterNoMatch.jsx
+++ b/src/components/templates/postDetail/WriterNoMatchTemplate.jsx
@@ -1,11 +1,11 @@
 import { BsThreeDotsVertical } from 'react-icons/bs';
 import Swal from 'sweetalert2';
 import { useNavigate } from 'react-router-dom';
-import OtherNav from '../atoms/OtherNav';
-import Info from '../organisms/Info';
-import Location from '../organisms/Location';
+import OtherNav from '../../atoms/nav/OtherNav';
+import Info from '../../atoms/Info';
+import Location from '../../organisms/Location';
 
-const WriterNoMatch = ({ response }) => {
+const WriterNoMatchTemplate = ({ response }) => {
   const navigate = useNavigate();
 
   // 삭제 버튼 눌렀을 때
@@ -64,4 +64,4 @@ const WriterNoMatch = ({ response }) => {
   );
 };
 
-export default WriterNoMatch;
+export default WriterNoMatchTemplate;
diff --git a/src/components/templates/OrderDeadLine.jsx b/src/components/templates/postWrite/OrderDeadLineTemplate.jsx
similarity index 74%
rename from src/components/templates/OrderDeadLine.jsx
rename to src/components/templates/postWrite/OrderDeadLineTemplate.jsx
index e6827c30..6f1c910a 100644
--- a/src/components/templates/OrderDeadLine.jsx
+++ b/src/components/templates/postWrite/OrderDeadLineTemplate.jsx
@@ -1,12 +1,12 @@
 /* eslint-disable */
-import Labels from '../molecules/Labels';
-import Input from '../atoms/Input';
-import ErrorMsg from '../atoms/ErrorMsg';
-import { ORDER_DEADLINE, HOUR, MINUTE } from '../../constant/postWrite/orderDeadLine';
-import validateInputMsg from '../../constant/validateInputMsg';
+import Labels from '../../molecules/Labels';
+import Input from '../../atoms/input/Input';
+import ErrorMsg from '../../atoms/ErrorMsg';
+import { ORDER_DEADLINE, HOUR, MINUTE } from '../../../constant/postWrite/orderDeadLine';
+import validateInputMsg from '../../../constant/validateInputMsg';
 import { useFormContext } from 'react-hook-form';
 
-const OrderDeadLine = () => {
+const OrderDeadLineTemplate = () => {
   const {
     register,
     handleSubmit,
@@ -45,4 +45,4 @@ const OrderDeadLine = () => {
   );
 };
 
-export default OrderDeadLine;
+export default OrderDeadLineTemplate;
diff --git a/src/components/templates/OrderInfo.jsx b/src/components/templates/postWrite/OrderInfoTemplate.jsx
similarity index 81%
rename from src/components/templates/OrderInfo.jsx
rename to src/components/templates/postWrite/OrderInfoTemplate.jsx
index a85dfacf..18d562b8 100644
--- a/src/components/templates/OrderInfo.jsx
+++ b/src/components/templates/postWrite/OrderInfoTemplate.jsx
@@ -1,15 +1,15 @@
 /*eslint-disable*/
 import { useFieldArray, useFormContext } from 'react-hook-form';
-import Labels from '../molecules/Labels';
-import SelectInput from '../atoms/SelectInput';
-import Input from '../atoms/Input';
-import ErrorMsg from '../atoms/ErrorMsg';
-import PlusBtn from '../atoms/PlusBtn';
-import MinusBtn from '../atoms/MinusBtn';
-import { ORDER_INFO_STORE, ORDER_INFO_BEVERAGE, STORE, BEVERAGE } from '../../constant/postWrite/orderInfo';
-import validateInputMsg from '../../constant/validateInputMsg';
+import Labels from '../../molecules/Labels';
+import SelectInput from '../../atoms/input/SelectInput';
+import Input from '../../atoms/input/Input';
+import ErrorMsg from '../../atoms/ErrorMsg';
+import PlusBtn from '../../atoms/button/PlusBtn';
+import MinusBtn from '../../atoms/button/MinusBtn';
+import { ORDER_INFO_STORE, ORDER_INFO_BEVERAGE, STORE, BEVERAGE } from '../../../constant/postWrite/orderInfo';
+import validateInputMsg from '../../../constant/validateInputMsg';
 
-const OrderInfo = () => {
+const OrderInfoTemplate = () => {
   const {
     register,
     formState: { errors },
@@ -69,4 +69,4 @@ const OrderInfo = () => {
   );
 };
 
-export default OrderInfo;
+export default OrderInfoTemplate;
diff --git a/src/components/templates/OrderRequest.jsx b/src/components/templates/postWrite/OrderRequestTemplate.jsx
similarity index 79%
rename from src/components/templates/OrderRequest.jsx
rename to src/components/templates/postWrite/OrderRequestTemplate.jsx
index 2c5bf044..fbd89446 100644
--- a/src/components/templates/OrderRequest.jsx
+++ b/src/components/templates/postWrite/OrderRequestTemplate.jsx
@@ -1,15 +1,15 @@
 /*eslint-disable*/
-import Labels from '../molecules/Labels';
-import Input from '../atoms/Input';
-import TextArea from '../atoms/TextArea';
-import RangeInput from '../atoms/RangeInput';
-import ErrorMsg from '../atoms/ErrorMsg';
-import price from '../../constant/price';
-import { DESTINATION, TIP, REQUEST, ORDER_REQUEST } from '../../constant/postWrite/orderRequest';
-import validateInputMsg from '../../constant/validateInputMsg';
+import Labels from '../../molecules/Labels';
+import Input from '../../atoms/input/Input';
+import TextArea from '../../atoms/TextArea';
+import RangeInput from '../../atoms/input/RangeInput';
+import ErrorMsg from '../../atoms/ErrorMsg';
+import price from '../../../constant/price';
+import { DESTINATION, TIP, REQUEST, ORDER_REQUEST } from '../../../constant/postWrite/orderRequest';
+import validateInputMsg from '../../../constant/validateInputMsg';
 import { useFormContext } from 'react-hook-form';
 
-const OrderRequest = () => {
+const OrderRequestTemplate = () => {
   const {
     register,
     formState: { errors },
@@ -61,4 +61,4 @@ const OrderRequest = () => {
   );
 };
 
-export default OrderRequest;
+export default OrderRequestTemplate;
diff --git a/src/constant/routes.js b/src/constant/routes.js
index fed4842b..caa2f9b6 100644
--- a/src/constant/routes.js
+++ b/src/constant/routes.js
@@ -4,15 +4,14 @@ const routes = {
   loginKakao: '/login/kakao',
   registerBank: '/register/bank',
   mypage: '/mypage',
+  admin: '/mypage/admin',
+  adminAuth: '/mypage/admin/auth/:id',
+  uploadStudentCard: '/mypage/uploadStudentCard',
   post: '/post',
   detailPost: '/post/:id',
   postWriteIntro: '/post-write-intro',
-  postWriter: '/post/writer',
   postWrite: '/post-write',
   error: '/*',
-  admin: '/admin',
-  adminAuth: '/admin/auth/:id',
-  uploadStudentCard: '/uploadStudentCard',
 };
 
 export default routes;
diff --git a/src/hooks/.keep b/src/hooks/.keep
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/mocks/handlers/admin.js b/src/mocks/handlers/admin.js
index 6b435b35..d83b894f 100644
--- a/src/mocks/handlers/admin.js
+++ b/src/mocks/handlers/admin.js
@@ -2,11 +2,11 @@ import { http, HttpResponse } from 'msw';
 import { REQUEST_LIST, REQUEST_DETAIL } from '../data/adminData';
 
 const adminHandlers = [
-  http.get('/admin', () => {
+  http.get('/admin/auth/list', () => {
     return HttpResponse.json(REQUEST_LIST);
   }),
 
-  http.get('/admin/auth/1', () => {
+  http.get('/admin/auth/list/:id', () => {
     return HttpResponse.json(REQUEST_DETAIL);
   }),
 ];
diff --git a/src/pages/AdminAuthPage.jsx b/src/pages/AdminAuthPage.jsx
index 47741bd2..8a6b14e8 100644
--- a/src/pages/AdminAuthPage.jsx
+++ b/src/pages/AdminAuthPage.jsx
@@ -1,11 +1,12 @@
 import { useEffect, useState } from 'react';
 import { useMutation, useQuery } from '@tanstack/react-query';
 import { useParams, useNavigate } from 'react-router-dom';
-import OtherNav from '../components/atoms/OtherNav';
+import OtherNav from '../components/atoms/nav/OtherNav';
 import AuthDetail from '../components/organisms/AuthDetail';
-import Button from '../components/atoms/Button';
+import Button from '../components/atoms/button/Button';
 import { REJECT, APPROVE } from '../constant/auth';
 import { adminAuth } from '../apis/admin';
+import routes from '../constant/routes';
 
 const AdminAuthPage = () => {
   const { id } = useParams();
@@ -15,7 +16,7 @@ const AdminAuthPage = () => {
   const btnHeight = 'h-[2.2rem]';
 
   useEffect(() => {
-    fetch(`/admin/auth/${id}`)
+    fetch(`/admin/auth/list/${id}`)
       .then((response) => response.json())
       .then((data) => {
         setUserInfo(data.response);
@@ -27,22 +28,25 @@ const AdminAuthPage = () => {
     select: (data) => data?.response,
   });
 
+  // 학생증 인증 요청 성공 & 에러에 따른 useMutation 정의
   const { mutate: handleAuth } = useMutation({
     mutationFn: adminAuth,
     onSuccess: () => {
-      navigate('/admin');
+      navigate(routes.admin);
     },
     onError: (error) => {
       console.error(error);
     },
   });
 
+  // 학생증 인증 승인
   const handleApprove = () => {
     handleAuth({ user_id: id });
   };
 
+  // 학생증 인증 거절
   const handleReject = () => {
-    navigate('/admin');
+    navigate(routes.admin);
   };
 
   return (
diff --git a/src/pages/AdminPage.jsx b/src/pages/AdminPage.jsx
index d4d679fd..a5f9a0d5 100644
--- a/src/pages/AdminPage.jsx
+++ b/src/pages/AdminPage.jsx
@@ -1,7 +1,7 @@
 /* eslint-disable */
 import { useEffect, useState } from 'react';
 import AuthRequest from '../components/organisms/AuthRequest';
-import OtherNav from '../components/atoms/OtherNav';
+import OtherNav from '../components/atoms/nav/OtherNav';
 import { adminAuthList } from '../apis/admin';
 import { useInView } from 'react-intersection-observer';
 import { useInfiniteQuery } from '@tanstack/react-query';
@@ -12,7 +12,7 @@ const AdminPage = () => {
 
   // msw
   useEffect(() => {
-    fetch('/admin')
+    fetch('/admin/auth/list')
       .then((response) => response.json())
       .then((data) => {
         const userArray = data.response.user;
@@ -40,7 +40,7 @@ const AdminPage = () => {
   }, [inView]);
 
   return (
-    <djiv className="page--layout">
+    <div className="page--layout">
       <OtherNav />
       <div className="pt-[25px] p-[35px]">
         <div className="text-center text-xl text-blue mb-10">학생 인증 요청</div>
@@ -49,7 +49,7 @@ const AdminPage = () => {
         })}
         {isLoading && <div>로딩중</div>}
       </div>
-    </djiv>
+    </div>
   );
 };
 
diff --git a/src/pages/ErrorPage.jsx b/src/pages/ErrorPage.jsx
index e85c1d79..bbad306d 100644
--- a/src/pages/ErrorPage.jsx
+++ b/src/pages/ErrorPage.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import Loader from '../components/atoms/Loader';
 import Footer from '../components/atoms/Footer';
-import Button from '../components/atoms/Button';
+import Button from '../components/atoms/button/Button';
 import routes from '../constant/routes';
 
 const ErrorPage = () => {
diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx
index 26d80fa9..05cf5a75 100644
--- a/src/pages/HomePage.jsx
+++ b/src/pages/HomePage.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import Footer from '../components/atoms/Footer';
-import Nav from '../components/atoms/Nav';
+import Nav from '../components/atoms/nav/Nav';
 import Card from '../components/atoms/Card';
 import routes from '../constant/routes';
 
diff --git a/src/pages/LoginPage.jsx b/src/pages/LoginPage.jsx
index 0242ba24..28be64dd 100644
--- a/src/pages/LoginPage.jsx
+++ b/src/pages/LoginPage.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import loginIcon from '../assets/images/kakao_login_medium_wide.png';
-import LoginNav from '../components/atoms/LoginNav';
+import LoginNav from '../components/atoms/nav/LoginNav';
 
 // 버튼을 눌러 개인정보 동의 후 계속하기를 하면 REDIRECT_URI로 리다이렉트 된다.
 // 이후 주소에 카카오에서 보낸 인가 코드가 있는데, 이를 파싱해서 백엔드로 전송
@@ -17,10 +17,9 @@ const LoginPage = () => {
     <div className="page--layout">
       <LoginNav />
       <section className="grid mt-[80px]">
-        <div className="text-blue text-lg ml-[30px]">
-          이제 편리하게
-          <br />
-          음료를 픽업하고, 픽업받아요!
+        <div className="text-blue text-xl ml-[30px]">
+          <p className="animate-fade-in-move-right">이제 편리하게</p>
+          <p className="opacity-0 animate-fade-in-move-right-delayed">음료를 픽업하고, 픽업받아요!</p>
         </div>
         <img
           onClick={loginHandler}
diff --git a/src/pages/PostDetailPage.jsx b/src/pages/PostDetailPage.jsx
index e9539262..6f3aad9f 100644
--- a/src/pages/PostDetailPage.jsx
+++ b/src/pages/PostDetailPage.jsx
@@ -1,9 +1,9 @@
 /* eslint-disable */
 import { useEffect, useState } from 'react';
-import WriterMatch from '../components/templates/WriterMatch';
-import WriterNoMatch from '../components/templates/WriterNoMatch';
-import PickerMatch from '../components/templates/PickerMatch';
-import PickerNoMatch from '../components/templates/PickerNoMatch';
+import WriterMatch from '../components/templates/postDetail/WriterMatchTemplate';
+import WriterNoMatch from '../components/templates/postDetail/WriterNoMatchTemplate';
+import PickerMatch from '../components/templates/postDetail/PickerMatchTemplate';
+import PickerNoMatch from '../components/templates/postDetail/PickerNoMatchTemplate.jsx';
 import { useParams } from 'react-router-dom';
 import { useQuery } from '@tanstack/react-query';
 import { getPostById } from '../apis/post';
diff --git a/src/pages/PostListPage.jsx b/src/pages/PostListPage.jsx
index 61b4443a..1e0f6396 100644
--- a/src/pages/PostListPage.jsx
+++ b/src/pages/PostListPage.jsx
@@ -4,7 +4,7 @@ import { useInView } from 'react-intersection-observer';
 import { useInfiniteQuery } from '@tanstack/react-query';
 import { getPosts } from '../apis/post';
 import routes from '../constant/routes';
-import OtherNav from '../components/atoms/OtherNav';
+import OtherNav from '../components/atoms/nav/OtherNav';
 import Cards from '../components/molecules/Cards';
 import FilterForm from '../components/molecules/FilterForm';
 import WritePostIcon from '../assets/images/postWrite.png';
@@ -85,7 +85,12 @@ const PostListPage = () => {
         <div ref={ref} className="w-[100%] h-[10px]" />
       </div>
       <div className="flex flex-row-reverse h-[84px] items-center px-[22px]">
-        <img className="cursor-pointer" onClick={goWritePost} src={WritePostIcon} alt="공고 쓰기" />
+        <img
+          className="cursor-pointer transition-transform duration-1000 ease-in-out transform hover:scale-110"
+          onClick={goWritePost}
+          src={WritePostIcon}
+          alt="공고 쓰기"
+        />
       </div>
     </div>
   );
diff --git a/src/pages/PostWriteIntroPage.jsx b/src/pages/PostWriteIntroPage.jsx
index dab27c35..5881599f 100644
--- a/src/pages/PostWriteIntroPage.jsx
+++ b/src/pages/PostWriteIntroPage.jsx
@@ -1,6 +1,6 @@
 import { Link } from 'react-router-dom';
-import Button from '../components/atoms/Button';
-import OtherNav from '../components/atoms/OtherNav';
+import Button from '../components/atoms/button/Button';
+import OtherNav from '../components/atoms/nav/OtherNav';
 import routes from '../constant/routes';
 import intro from '../constant/postWrite/intro';
 
@@ -10,8 +10,8 @@ const PostWriteIntroPage = () => {
       <OtherNav iconColor="#fff" bgColor="#000" />
       <div>
         <div className="text-white p-8">
-          <div className="font-bold text-xl">{intro.TITLE}</div>
-          <div>{intro.SUB_TITLE}</div>
+          <div className="font-bold text-xl animate-fade-in-move-right">{intro.TITLE}</div>
+          <div className="opacity-0 animate-fade-in-move-right-delayed">{intro.SUB_TITLE}</div>
         </div>
         <div className="flex justify-center mb-14">
           <Link to={routes.postWrite}>
diff --git a/src/pages/PostWritePage.jsx b/src/pages/PostWritePage.jsx
index 9b0ad89f..386c65d4 100644
--- a/src/pages/PostWritePage.jsx
+++ b/src/pages/PostWritePage.jsx
@@ -3,11 +3,11 @@ import { useNavigate } from 'react-router-dom';
 import { useForm, FormProvider } from 'react-hook-form';
 import { useMutation } from '@tanstack/react-query';
 import Swal from 'sweetalert2';
-import OtherNav from '../components/atoms/OtherNav';
+import OtherNav from '../components/atoms/nav/OtherNav';
 import BtnNavigate from '../components/molecules/BtnNavigate';
-import OrderInfo from '../components/templates/OrderInfo';
-import OrderRequest from '../components/templates/OrderRequest';
-import OrderDeadLine from '../components/templates/OrderDeadLine';
+import OrderInfo from '../components/templates/postWrite/OrderInfoTemplate';
+import OrderRequest from '../components/templates/postWrite/OrderRequestTemplate';
+import OrderDeadLine from '../components/templates/postWrite/OrderDeadLineTemplate';
 import CircleNavigate from '../components/organisms/CircleNavigate';
 import { STORE, BEVERAGE } from '../constant/postWrite/orderInfo';
 import { DESTINATION } from '../constant/postWrite/orderRequest';
diff --git a/src/pages/RegisterBankPage.jsx b/src/pages/RegisterBankPage.jsx
index 124728b9..720e04fe 100644
--- a/src/pages/RegisterBankPage.jsx
+++ b/src/pages/RegisterBankPage.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import LoginNav from '../components/atoms/LoginNav';
+import LoginNav from '../components/atoms/nav/LoginNav';
 import BankForm from '../components/molecules/BankForm';
 
 const RegisterBankPage = () => {
diff --git a/src/pages/UploadStudentCardPage.jsx b/src/pages/UploadStudentCardPage.jsx
index 3d666943..f57cfc54 100644
--- a/src/pages/UploadStudentCardPage.jsx
+++ b/src/pages/UploadStudentCardPage.jsx
@@ -4,8 +4,8 @@ import { BsUpload } from 'react-icons/bs';
 import Swal from 'sweetalert2';
 import { useMutation, useQuery } from '@tanstack/react-query';
 import { getUserAuth } from '../apis/myPage';
-import OtherNav from '../components/atoms/OtherNav';
-import Button from '../components/atoms/Button';
+import OtherNav from '../components/atoms/nav/OtherNav';
+import Button from '../components/atoms/button/Button';
 import { useNavigate } from 'react-router-dom';
 import routes from '../constant/routes';
 import uploadCard from '../apis/uploadCard';
@@ -40,19 +40,11 @@ const CheckStudentCardPage = () => {
 
   // 입력완료 누를 때 나타나는 모달창
   const requestCardModal = () => {
-    return Swal.fire({
-      requestCardModalMessage,
-    }).then((result) => {
+    return Swal.fire(requestCardModalMessage).then((result) => {
       if (result.isConfirmed && imageSrc) {
-        Swal.fire({
-          successRequestCardMessage,
-        }).then(mutate(imageSrc));
+        Swal.fire(successRequestCardMessage).then(mutate(imageSrc));
         // 그리고 사진 보내고 기다림
         mutate(formData);
-      } else {
-        Swal.fire({
-          errorRequestCardMessage,
-        });
       }
     });
   };
diff --git a/src/utils/alert.js b/src/utils/alert.js
index 6a7815b4..d7778efa 100644
--- a/src/utils/alert.js
+++ b/src/utils/alert.js
@@ -44,6 +44,7 @@ export const unknownErrorMessage = {
 };
 export const requestCardModalMessage = {
   title: '인증을 요청 하시겠습니까?',
+  icon: 'question',
   showCancelButton: true,
   cancelButtonText: '취소',
   confirmButtonText: '확인',
diff --git a/src/components/atoms/Time.jsx b/src/utils/time.js
similarity index 65%
rename from src/components/atoms/Time.jsx
rename to src/utils/time.js
index 2f8411da..d8f38e56 100644
--- a/src/components/atoms/Time.jsx
+++ b/src/utils/time.js
@@ -1,8 +1,3 @@
-// Time.jsx
-// Figma 내용의 오늘 ~시 ~분까지를 띄우기 위한 코드
-// arrow function 으로 변경해 보았습니다!
-// * ms 단위이기 때문에 1000을 곱해주어야 합니다
-
 const Time = (timestamp) => {
   const time = timestamp;
   const myDate = new Date(time * 1000);
diff --git a/tailwind.config.js b/tailwind.config.js
index 072097a3..e8d6f9c5 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -8,6 +8,16 @@ module.exports = {
         blue: '#0075FF',
       },
     },
+    keyframes: {
+      fadeInMoveRight: {
+        '0%': { opacity: '0', transform: 'translateX(-10px)' },
+        '100%': { opacity: '1', transform: 'translateX(0)' },
+      },
+    },
+    animation: {
+      'fade-in-move-right': 'fadeInMoveRight 1s ease-out forwards',
+      'fade-in-move-right-delayed': 'fadeInMoveRight 1s ease-out 1s forwards',
+    },
   },
   // eslint-disable-next-line global-require
   plugins: [require('tailwind-scrollbar-hide')],