From 5b2c57939f3fb06fcc9b7bdc94ee5f9d6442b462 Mon Sep 17 00:00:00 2001
From: Tory <88531407+1two13@users.noreply.github.com>
Date: Wed, 28 Jun 2023 15:42:48 +0900
Subject: [PATCH 1/3] =?UTF-8?q?style:=20class=20=3D>=20className=EC=9C=BC?=
 =?UTF-8?q?=EB=A1=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/MyProfile.jsx                  | 12 ++++++------
 src/components/common/SearchedOutput.jsx             | 12 ++++++------
 src/components/common/SearchedOutputLists.jsx        |  2 +-
 src/components/common/navBar/SearchBar.jsx           |  4 ++--
 src/components/myPage/MyPageCategory.jsx             |  4 ++--
 src/components/permissionPage/OptionalPermission.jsx | 10 +++++-----
 .../registerLocationPage/NearLoacation.jsx           |  2 +-
 src/components/writingPage/Input.jsx                 |  4 ++--
 src/pages/CategoryPage.jsx                           |  2 +-
 src/pages/RegisterLocationPage.jsx                   |  6 +++---
 src/pages/SearchPage.jsx                             |  8 ++++----
 11 files changed, 33 insertions(+), 33 deletions(-)

diff --git a/src/components/common/MyProfile.jsx b/src/components/common/MyProfile.jsx
index e8ac77d..a1c6238 100644
--- a/src/components/common/MyProfile.jsx
+++ b/src/components/common/MyProfile.jsx
@@ -2,14 +2,14 @@ import React from 'react';
 
 function MyProfile({ cameraSvg = '', writingSvg }) {
   return (
-    <div class="flex flex-col items-center w-[100%] relative">
-      <button class="mt-[25px] w-[105px] h-[105px] mb-[18px] rounded-full bg-mainColor">{cameraSvg}</button>
+    <div className="flex flex-col items-center w-[100%] relative">
+      <button className="mt-[25px] w-[105px] h-[105px] mb-[18px] rounded-full bg-mainColor">{cameraSvg}</button>
 
-      <div class="w-[100%]">
-        <div class="flex flex-col items-center mx-[16px] mb-[20px] pb-[9px] border-b-[0.5px] border-gray">
-          <div class="text-[16px] font-bold">{'우리동네'}</div>
+      <div className="w-[100%]">
+        <div className="flex flex-col items-center mx-[16px] mb-[20px] pb-[9px] border-b-[0.5px] border-gray">
+          <div className="text-[16px] font-bold">{'우리동네'}</div>
         </div>
-        <button class="float-right mt-[10px] absolute top-[140px] right-[4%]">{writingSvg}</button>
+        <button className="float-right mt-[10px] absolute top-[140px] right-[4%]">{writingSvg}</button>
       </div>
     </div>
   );
diff --git a/src/components/common/SearchedOutput.jsx b/src/components/common/SearchedOutput.jsx
index 7bc2dff..a103f60 100644
--- a/src/components/common/SearchedOutput.jsx
+++ b/src/components/common/SearchedOutput.jsx
@@ -4,14 +4,14 @@ import { BEFORE, TEMPORARY_SRC, WON } from '../../static/constants';
 // TODO: 하드코딩되어 있는 값들 모두 수정 필요
 function SearchedOutput() {
   return (
-    <div class="flex">
-      <img alt={'searchedImage'} src={TEMPORARY_SRC} class="w-[100px] rounded-[10px]" />
-      <div class="ml-[15px] flex flex-col justify-between">
+    <div className="flex">
+      <img alt={'searchedImage'} src={TEMPORARY_SRC} className="w-[100px] rounded-[10px]" />
+      <div className="ml-[15px] flex flex-col justify-between">
         <div>
-          <div class="text-[13px] font-semibold">{'프로틴 바/ 다크 초코씨솔트&카라멜넛, 마이프로틴 바'}</div>
-          <div class="text-[10px] text-smokeGray">{`${'서울시 서초구 서초대로'} | ${'20분'} ${BEFORE}`}</div>
+          <div className="text-[13px] font-semibold">{'프로틴 바/ 다크 초코씨솔트&카라멜넛, 마이프로틴 바'}</div>
+          <div className="text-[10px] text-smokeGray">{`${'서울시 서초구 서초대로'} | ${'20분'} ${BEFORE}`}</div>
         </div>
-        <div class="text-[16px] font-bold">{`${'20,000'}${WON}`}</div>
+        <div className="text-[16px] font-bold">{`${'20,000'}${WON}`}</div>
       </div>
     </div>
   );
diff --git a/src/components/common/SearchedOutputLists.jsx b/src/components/common/SearchedOutputLists.jsx
index 27761de..6ff0a21 100644
--- a/src/components/common/SearchedOutputLists.jsx
+++ b/src/components/common/SearchedOutputLists.jsx
@@ -3,7 +3,7 @@ import SearchedOutput from './SearchedOutput';
 
 function SearchedOutputList() {
   return (
-    <div class="flex flex-col mx-[15px] mb-[27px] overflow-scroll gap-[20px] h-[520px]">
+    <div className="flex flex-col mx-[15px] mb-[27px] overflow-scroll gap-[20px] h-[520px]">
       <SearchedOutput />
       <SearchedOutput />
       <SearchedOutput />
diff --git a/src/components/common/navBar/SearchBar.jsx b/src/components/common/navBar/SearchBar.jsx
index 64d2952..87afd0d 100644
--- a/src/components/common/navBar/SearchBar.jsx
+++ b/src/components/common/navBar/SearchBar.jsx
@@ -5,11 +5,11 @@ function SearchBar({ placeholder }) {
   const moveToPermissionPage = () => {};
 
   return (
-    <div class="flex h-[44px] mt-[47px]">
+    <div className="flex h-[44px] mt-[47px]">
       <BackButton onClickHandler={moveToPermissionPage} />
       <input
         placeholder={placeholder}
-        class="w-[100%] mr-[15px] px-[27px] rounded-[5px] bg-lightGray placeholder-deepGray text-[13px]"
+        className="w-[100%] mr-[15px] px-[27px] rounded-[5px] bg-lightGray placeholder-deepGray text-[13px]"
       />
     </div>
   );
diff --git a/src/components/myPage/MyPageCategory.jsx b/src/components/myPage/MyPageCategory.jsx
index c1fb1a5..59772f4 100644
--- a/src/components/myPage/MyPageCategory.jsx
+++ b/src/components/myPage/MyPageCategory.jsx
@@ -7,8 +7,8 @@ const Button = styled.button`
 
 function MyPageCategory({ name, color }) {
   return (
-    <div class="flex mb-[29px]">
-      <div class="w-[30px] h-[30px] ml-[15px] mr-[26px] bg-gray">
+    <div className="flex mb-[29px]">
+      <div className="w-[30px] h-[30px] ml-[15px] mr-[26px] bg-gray">
         {/* <img alt="myPageCategory" src={TEMPORARY_SRC} /> */}
       </div>
       <Button className="text-[16px] text-medium" color={color}>
diff --git a/src/components/permissionPage/OptionalPermission.jsx b/src/components/permissionPage/OptionalPermission.jsx
index f6b010d..1ee1c0a 100644
--- a/src/components/permissionPage/OptionalPermission.jsx
+++ b/src/components/permissionPage/OptionalPermission.jsx
@@ -2,11 +2,11 @@ import React from 'react';
 
 function OptionalPermission({ svg, title, description }) {
   return (
-    <div class="flex">
-      <div class="flex items-center justify-center w-[44px] h-[44px] mr-[26px] rounded-full bg-gray">{svg}</div>
-      <div class="flex flex-col justify-around">
-        <div class="text-[13px]">{title}</div>
-        <div class="text-[10px] text-deepGray">{description}</div>
+    <div className="flex">
+      <div className="flex items-center justify-center w-[44px] h-[44px] mr-[26px] rounded-full bg-gray">{svg}</div>
+      <div className="flex flex-col justify-around">
+        <div className="text-[13px]">{title}</div>
+        <div className="text-[10px] text-deepGray">{description}</div>
       </div>
     </div>
   );
diff --git a/src/components/registerLocationPage/NearLoacation.jsx b/src/components/registerLocationPage/NearLoacation.jsx
index dffef85..cf77731 100644
--- a/src/components/registerLocationPage/NearLoacation.jsx
+++ b/src/components/registerLocationPage/NearLoacation.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 function NearLoacation({ location }) {
-  return <div class="w-[360px] h-[42px] border-b-[0.5px] pb-[13px]">{location}</div>;
+  return <div className="w-[360px] h-[42px] border-b-[0.5px] pb-[13px]">{location}</div>;
 }
 
 export default NearLoacation;
diff --git a/src/components/writingPage/Input.jsx b/src/components/writingPage/Input.jsx
index 9cc5f33..ef5c19d 100644
--- a/src/components/writingPage/Input.jsx
+++ b/src/components/writingPage/Input.jsx
@@ -2,8 +2,8 @@ import React from 'react';
 
 function Input({ placeholder, onChange }) {
   return (
-    <div class="mx-[15px] text-[13px] text-darkGray border-b-[0.5px] border-gray">
-      <input placeholder={placeholder} onChange={onChange} class="h-[54px] w-[100%] outline-0" />
+    <div className="mx-[15px] text-[13px] text-darkGray border-b-[0.5px] border-gray">
+      <input placeholder={placeholder} onChange={onChange} className="h-[54px] w-[100%] outline-0" />
     </div>
   );
 }
diff --git a/src/pages/CategoryPage.jsx b/src/pages/CategoryPage.jsx
index 7d754ff..788ff64 100644
--- a/src/pages/CategoryPage.jsx
+++ b/src/pages/CategoryPage.jsx
@@ -9,7 +9,7 @@ function CategoryPage() {
   return (
     <div>
       <SearchBar placeholder={ENTER_INPUT} placeholderColor={'white'} />
-      <div class="h-[39px] mx-[15px] mt-[20px] border-b-[0.5px] text-[13px]">카테고리</div>
+      <div className="h-[39px] mx-[15px] mt-[20px] border-b-[0.5px] text-[13px]">카테고리</div>
       <CategoryList />
       {/* TODO: 하단 NavBar 추가 예정 */}
     </div>
diff --git a/src/pages/RegisterLocationPage.jsx b/src/pages/RegisterLocationPage.jsx
index 3bb0f59..b8bbcc8 100644
--- a/src/pages/RegisterLocationPage.jsx
+++ b/src/pages/RegisterLocationPage.jsx
@@ -7,12 +7,12 @@ import { SEARCH_LOCATION, NEAR_LOCATION } from '../static/constants';
 
 function RegisterLocationPage() {
   return (
-    <div class="flex flex-col">
+    <div className="flex flex-col">
       <SearchBar placeholder={SEARCH_LOCATION} />
 
-      <div class="flex items-center h-[29px] my-[20px] ml-[15px] font-semibold text-[12px]">{NEAR_LOCATION}</div>
+      <div className="flex items-center h-[29px] my-[20px] ml-[15px] font-semibold text-[12px]">{NEAR_LOCATION}</div>
 
-      <div class="flex flex-col items-center h-[600px] overflow-scroll gap-[13px]">
+      <div className="flex flex-col items-center h-[600px] overflow-scroll gap-[13px]">
         <NearLoacation location={'서울특별시 서초구 역삼동'} />
         <NearLoacation location={'서울특별시 서초구 역삼동'} />
         <NearLoacation location={'서울특별시 서초구 역삼동'} />
diff --git a/src/pages/SearchPage.jsx b/src/pages/SearchPage.jsx
index 7d7d547..7ad26c2 100644
--- a/src/pages/SearchPage.jsx
+++ b/src/pages/SearchPage.jsx
@@ -19,18 +19,18 @@ function SearchPage() {
   const [selectedCategory, setSelectedCategory] = useState(TOTAL_SEARCHED_OUTPUT);
 
   return (
-    <div class="flex flex-col">
+    <div className="flex flex-col">
       <SearchBar placeholder={ENTER_INPUT} placeholderColor={'white'} />
 
-      <div class="flex mx-[15px] mt-[15px] mb-[25px] justify-between items-center">
+      <div className="flex mx-[15px] mt-[15px] mb-[25px] justify-between items-center">
         {/* FIXME: height 상의 필요 */}
-        <div class="flex w-[152px] h-[30px] items-center justify-center rounded-[5px] bg-orange text-white text-[13px]">
+        <div className="flex w-[152px] h-[30px] items-center justify-center rounded-[5px] bg-orange text-white text-[13px]">
           {selectedCategory}
         </div>
         <Select defaultValue={selectedOption} options={options} onchange={setSelectedOption} />
       </div>
 
-      <div class="mx-[16px] mb-[15px] text-[13px]">총 {'280,787'}개</div>
+      <div className="mx-[16px] mb-[15px] text-[13px]">총 {'280,787'}개</div>
       <SearchedOutputList />
     </div>
   );

From 85e0cfe2b0f6eff8a6a21b2da5d6ed4c2f4ca98b Mon Sep 17 00:00:00 2001
From: Tory <88531407+1two13@users.noreply.github.com>
Date: Wed, 28 Jun 2023 17:25:35 +0900
Subject: [PATCH 2/3] =?UTF-8?q?design:=20=EC=99=80=EC=9D=B4=EC=96=B4?=
 =?UTF-8?q?=ED=94=84=EB=A0=88=EC=9E=84=20=EB=B3=80=EA=B2=BD=EB=90=98?=
 =?UTF-8?q?=EC=96=B4=20CSS=20=EC=88=98=EC=A0=95=20=EB=B0=8F=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.js                                    | 45 ++++++++++++-------
 src/components/common/Input.jsx               |  6 ++-
 src/components/common/navBar/BackButton.jsx   |  8 +++-
 src/components/common/navBar/SearchBar.jsx    |  7 ++-
 src/components/common/navBar/TabBar.jsx       |  2 +-
 .../common/navBar/TextAndBackBar.jsx          |  5 +--
 .../registerLocationPage/NearLoacation.jsx    |  2 +-
 src/pages/CategoryListPage.jsx                |  9 ++--
 src/pages/CategoryPage.jsx                    |  3 +-
 src/pages/MyPage.jsx                          | 13 +++---
 src/pages/PermissionPage.jsx                  | 32 ++++++++++---
 src/pages/RegisterLocationCompletePage.jsx    | 26 +++++++++++
 src/pages/SearchPage.jsx                      |  2 +
 src/static/constants.js                       |  6 +++
 14 files changed, 119 insertions(+), 47 deletions(-)
 create mode 100644 src/pages/RegisterLocationCompletePage.jsx

diff --git a/src/App.js b/src/App.js
index 434fea0..192479b 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,4 +1,4 @@
-import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import { Routes, Route } from 'react-router-dom';
 import './styles/App.css';
 import 'tailwindcss/tailwind.css';
 
@@ -10,30 +10,41 @@ import SignIn from './pages/SignInPage';
 import SplashScreen from './pages/SplashScreenPage';
 import Walkthrough from './pages/WalkthroughPage';
 import RegisterComplete from './pages/RegisterCompletePage';
-
 import WritingPage from './pages/WritingPage';
 import CategoryListPage from './pages/CategoryListPage';
 import PostsPage from './pages/PostsPage';
+import PermissionPage from './pages/PermissionPage';
+import RegisterLocationPage from './pages/RegisterLocationPage';
+import RegisterLocationCompletePage from './pages/RegisterLocationCompletePage';
+import CategoryPage from './pages/CategoryPage';
+import SearchPage from './pages/SearchPage';
+import MyPage from './pages/MyPage';
+import ProfileEditPage from './pages/ProfileEditPage';
 
 function App() {
   return (
     <div className="App">
       <div className="page-wrapper">
-        <BrowserRouter>
-          <Routes>
-            <Route path="/" element={<Home />} />
-            <Route path="/register" element={<Register />} />
-            <Route path="/register-complete" element={<RegisterComplete />} />
-            <Route path="/signin" element={<SignIn />} />
-            <Route path="/splashscreen" element={<SplashScreen />} />
-            <Route path="/walkthrough" element={<Walkthrough />} />
-            <Route path="/chat" element={<Chat />} />
-            <Route path="/chatlist" element={<ChatList />} />
-            <Route path="/writingPage" element={<WritingPage />} />
-            <Route path="/categoryListPage" element={<CategoryListPage />} />
-            <Route path="/postsPage" element={<PostsPage />} />
-          </Routes>
-        </BrowserRouter>
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/register" element={<Register />} />
+          <Route path="/register-complete" element={<RegisterComplete />} />
+          <Route path="/signin" element={<SignIn />} />
+          <Route path="/splashscreen" element={<SplashScreen />} />
+          <Route path="/walkthrough" element={<Walkthrough />} />
+          <Route path="/chat" element={<Chat />} />
+          <Route path="/chatlist" element={<ChatList />} />
+          <Route path="/permission" element={<PermissionPage />} />
+          <Route path="/registerLocation" element={<RegisterLocationPage />} />
+          <Route path="/registerLocationComplete" element={<RegisterLocationCompletePage />} />
+          <Route path="/categoryList" element={<CategoryListPage />} />
+          <Route path="/search" element={<SearchPage />} />
+          <Route path="/category" element={<CategoryPage />} />
+          <Route path="/writing" element={<WritingPage />} />
+          <Route path="/posts" element={<PostsPage />} />
+          <Route path="/myPage" element={<MyPage />} />
+          <Route path="/profileEdit" element={<ProfileEditPage />} />
+        </Routes>
       </div>
     </div>
   );
diff --git a/src/components/common/Input.jsx b/src/components/common/Input.jsx
index 7e1e783..89fcdf8 100644
--- a/src/components/common/Input.jsx
+++ b/src/components/common/Input.jsx
@@ -5,12 +5,13 @@ const StyledInput = styled.input`
   width: ${(props) => props.width || '360px'};
   margin-bottom: ${(props) => props.mb || 0};
   border-color: ${(props) => props.color};
+  disabled: ${(props) => props.disabled};
 `;
 
-function Input({ type, onChange, placeholder, name, width, mb, color, autoComplete }) {
+function Input({ type, onChange, placeholder, name, width, mb, color, autoComplete, disabled }) {
   return (
     <StyledInput
-      className="h-[48px] border-[1px] border-solid border-gray rounded-[10px] text-[14px] indent-[20px] placeholder-[#d9d9d9]"
+      className={`h-[48px] border-[1px] border-solid border-gray rounded-[10px] text-[14px] indent-[20px] placeholder-[#d9d9d9]`}
       width={width}
       mb={mb}
       type={type}
@@ -19,6 +20,7 @@ function Input({ type, onChange, placeholder, name, width, mb, color, autoComple
       autoComplete={autoComplete}
       onChange={onChange}
       color={color}
+      disabled={disabled}
     />
   );
 }
diff --git a/src/components/common/navBar/BackButton.jsx b/src/components/common/navBar/BackButton.jsx
index dbde33f..e230d4f 100644
--- a/src/components/common/navBar/BackButton.jsx
+++ b/src/components/common/navBar/BackButton.jsx
@@ -1,8 +1,12 @@
 import React from 'react';
+import { useNavigate } from 'react-router-dom';
+
+function BackButton() {
+  const navigate = useNavigate();
+  const handleMoveBack = () => navigate(-1);
 
-function BackButton({ onClick }) {
   return (
-    <button className="flex justify-center items-center w-[44px] h-[44px]" onClick={onClick}>
+    <button className="flex justify-center items-center w-[44px] h-[44px]" onClick={handleMoveBack}>
       <svg width="13" height="22" viewBox="0 0 13 22" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M11.5 21L1.5 11L11.5 1" stroke="black" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
       </svg>
diff --git a/src/components/common/navBar/SearchBar.jsx b/src/components/common/navBar/SearchBar.jsx
index 87afd0d..9f89039 100644
--- a/src/components/common/navBar/SearchBar.jsx
+++ b/src/components/common/navBar/SearchBar.jsx
@@ -1,12 +1,15 @@
 import React from 'react';
+import { useNavigate } from 'react-router-dom';
+
 import BackButton from './BackButton';
 
 function SearchBar({ placeholder }) {
-  const moveToPermissionPage = () => {};
+  const navigate = useNavigate();
+  const handleMoveBack = () => navigate(-1);
 
   return (
     <div className="flex h-[44px] mt-[47px]">
-      <BackButton onClickHandler={moveToPermissionPage} />
+      <BackButton onClick={handleMoveBack} />
       <input
         placeholder={placeholder}
         className="w-[100%] mr-[15px] px-[27px] rounded-[5px] bg-lightGray placeholder-deepGray text-[13px]"
diff --git a/src/components/common/navBar/TabBar.jsx b/src/components/common/navBar/TabBar.jsx
index f291f7e..b9075e3 100644
--- a/src/components/common/navBar/TabBar.jsx
+++ b/src/components/common/navBar/TabBar.jsx
@@ -91,7 +91,7 @@ const TabBar = () => {
   ];
 
   return (
-    <div className="fixed bottom-0 z-50 h-[85px] w-full border-t-[1px] border-solid border-[#A4A4A4]">
+    <div className="fixed px-[15px] bottom-0 z-50 h-[85px] w-full border-t-[0.5px] border-solid border-[#A4A4A4]">
       <ul className="flex justify-between">
         {Tabs.map((tab) => (
           <li
diff --git a/src/components/common/navBar/TextAndBackBar.jsx b/src/components/common/navBar/TextAndBackBar.jsx
index 77d6f4a..2ccdcd2 100644
--- a/src/components/common/navBar/TextAndBackBar.jsx
+++ b/src/components/common/navBar/TextAndBackBar.jsx
@@ -4,9 +4,8 @@ import BackButton from './BackButton';
 
 function TextAndBackBar({ title }) {
   const navigate = useNavigate();
-  const handleMoveBack = () => {
-    navigate(-1);
-  };
+  const handleMoveBack = () => navigate(-1);
+
   return (
     <>
       <div className="mt-[47px] bg-white z-10">
diff --git a/src/components/registerLocationPage/NearLoacation.jsx b/src/components/registerLocationPage/NearLoacation.jsx
index cf77731..c5c368a 100644
--- a/src/components/registerLocationPage/NearLoacation.jsx
+++ b/src/components/registerLocationPage/NearLoacation.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 function NearLoacation({ location }) {
-  return <div className="w-[360px] h-[42px] border-b-[0.5px] pb-[13px]">{location}</div>;
+  return <div className="w-[360px] h-[42px] pb-[13px] border-b-[0.5px] border-gray">{location}</div>;
 }
 
 export default NearLoacation;
diff --git a/src/pages/CategoryListPage.jsx b/src/pages/CategoryListPage.jsx
index 669563c..968c8ad 100644
--- a/src/pages/CategoryListPage.jsx
+++ b/src/pages/CategoryListPage.jsx
@@ -2,17 +2,16 @@ import React from 'react';
 
 import CategoryList from '../components/common/CategoryList';
 import LongButton from '../components/common/LongButton';
-import TextBar from '../components/common/navBar/TextBar';
+import TextAndBackBar from '../components/common/navBar/TextAndBackBar';
 
-import { SELECT } from '../static/constants';
+import { CATEGORY, SELECT } from '../static/constants';
 
 function CategoryListPage() {
   return (
     <div>
-      {/* TODO: 공통 컴포넌트로 추후 생성되면 추가 예정, < 버튼 클릭시 useNavigate 적용 */}
-      <TextBar />
+      <TextAndBackBar title={CATEGORY} />
       <CategoryList />
-      {/* TODO: 원하는 카테고리 선택 후 버튼 클릭 했을 때 */}
+      {/* TODO: 원하는 카테고리 선택 후 버튼 클릭 했을 때 즐겨찾기에 추가 */}
       <LongButton contents={SELECT} />
     </div>
   );
diff --git a/src/pages/CategoryPage.jsx b/src/pages/CategoryPage.jsx
index 788ff64..16ffab6 100644
--- a/src/pages/CategoryPage.jsx
+++ b/src/pages/CategoryPage.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 
 import SearchBar from '../components/common/navBar/SearchBar';
 import CategoryList from '../components/common/CategoryList';
+import TabBar from '../components/common/navBar/TabBar';
 
 import { ENTER_INPUT } from '../static/constants';
 
@@ -11,7 +12,7 @@ function CategoryPage() {
       <SearchBar placeholder={ENTER_INPUT} placeholderColor={'white'} />
       <div className="h-[39px] mx-[15px] mt-[20px] border-b-[0.5px] text-[13px]">카테고리</div>
       <CategoryList />
-      {/* TODO: 하단 NavBar 추가 예정 */}
+      <TabBar />
     </div>
   );
 }
diff --git a/src/pages/MyPage.jsx b/src/pages/MyPage.jsx
index a2cedbc..d7bd7f8 100644
--- a/src/pages/MyPage.jsx
+++ b/src/pages/MyPage.jsx
@@ -2,25 +2,26 @@ import React from 'react';
 
 import MyPageCategory from '../components/myPage/MyPageCategory';
 import MyProfile from '../components/common/MyProfile';
+import TabBar from '../components/common/navBar/TabBar';
 
 import { MY_PAGE, SETTING_LOCATION, CHANGE_INFO, LOGOUT } from '../static/constants';
 
 function MyPage() {
   return (
-    <div class="mt-[47px]">
-      <div class="flex flex-col justify-center items-center">
-        <div class="text-[16px] font-medium">{MY_PAGE}</div>
+    <div className="mt-[47px]">
+      <div className="flex flex-col justify-center items-center">
+        <div className="text-[16px] font-medium">{MY_PAGE}</div>
         <MyProfile
           cameraSvg={
             <svg
-              class="absolute top-[100px] right-[142px]"
+              className="absolute top-[100px] right-[142px]"
               width="31"
               height="31"
               viewBox="0 0 31 31"
               fill="none"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <rect width="31" height="31" rx="15.5" fill="black" fill-opacity="0.6" />
+              <rect width="31" height="31" rx="15.5" fill="black" fillOpacity="0.6" />
               <path
                 d="M9.5 11.3333H11.75L13.25 10H17.75L19.25 11.3333H21.5C21.8978 11.3333 22.2794 11.4738 22.5607 11.7239C22.842 11.9739 23 12.313 23 12.6667V20.6667C23 21.0203 22.842 21.3594 22.5607 21.6095C22.2794 21.8595 21.8978 22 21.5 22H9.5C9.10218 22 8.72064 21.8595 8.43934 21.6095C8.15804 21.3594 8 21.0203 8 20.6667V12.6667C8 12.313 8.15804 11.9739 8.43934 11.7239C8.72064 11.4738 9.10218 11.3333 9.5 11.3333ZM15.5 13.3333C14.5054 13.3333 13.5516 13.6845 12.8483 14.3096C12.1451 14.9348 11.75 15.7826 11.75 16.6667C11.75 17.5507 12.1451 18.3986 12.8483 19.0237C13.5516 19.6488 14.5054 20 15.5 20C16.4946 20 17.4484 19.6488 18.1517 19.0237C18.8549 18.3986 19.25 17.5507 19.25 16.6667C19.25 15.7826 18.8549 14.9348 18.1517 14.3096C17.4484 13.6845 16.4946 13.3333 15.5 13.3333ZM15.5 14.6667C16.0967 14.6667 16.669 14.8774 17.091 15.2525C17.5129 15.6275 17.75 16.1362 17.75 16.6667C17.75 17.1971 17.5129 17.7058 17.091 18.0809C16.669 18.456 16.0967 18.6667 15.5 18.6667C14.9033 18.6667 14.331 18.456 13.909 18.0809C13.4871 17.7058 13.25 17.1971 13.25 16.6667C13.25 16.1362 13.4871 15.6275 13.909 15.2525C14.331 14.8774 14.9033 14.6667 15.5 14.6667Z"
                 fill="white"
@@ -44,7 +45,7 @@ function MyPage() {
         <MyPageCategory name={LOGOUT} color={'#EE0707'} />
       </div>
 
-      {/* TODO: 하단 NavBar 추가 예정 */}
+      <TabBar />
     </div>
   );
 }
diff --git a/src/pages/PermissionPage.jsx b/src/pages/PermissionPage.jsx
index a59b27c..e291dab 100644
--- a/src/pages/PermissionPage.jsx
+++ b/src/pages/PermissionPage.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { useNavigate } from 'react-router-dom';
 
 import OptionalPermission from '../components/permissionPage/OptionalPermission';
 import LongButton from '../components/common/LongButton';
@@ -22,9 +23,12 @@ import {
 } from '../static/constants';
 
 function PermissionPage() {
+  const navigate = useNavigate();
+  const moveToRegisterLocationPage = () => navigate('/registerLocation');
+
   return (
-    <div class="pt-[136px] relative">
-      <div class="h-[50px] pl-[16px] text-[16px] font-semibold">
+    <div className="pt-[136px] relative">
+      <div className="h-[50px] pl-[16px] text-[16px] font-semibold">
         <div>
           {PERMISSION_FIRST_TITLE}
           <br />
@@ -32,11 +36,11 @@ function PermissionPage() {
         </div>
       </div>
 
-      <div class="flex items-center h-[26px] mt-[26px] mb-[14px] pl-[15px] text-deepGray text-[10px]">
+      <div className="flex items-center h-[26px] mt-[26px] mb-[14px] pl-[15px] text-deepGray text-[10px]">
         {SELECT_PERMISSION}
       </div>
 
-      <div class="flex flex-col h-[280px] pl-[15px] justify-between">
+      <div className="flex flex-col h-[280px] pl-[15px] justify-between">
         <OptionalPermission
           svg={
             <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -94,17 +98,31 @@ function PermissionPage() {
               />
             </svg>
           }
+          title={MIKE}
+          description={MIKE_DESCRIPTION}
+        />
+        <OptionalPermission
+          svg={
+            <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path
+                d="M19.3441 2.91332C19.1932 2.76243 19.014 2.64275 18.8168 2.56111C18.6197 2.47947 18.4083 2.43747 18.1949 2.4375H4.78461C4.47636 2.43743 4.17113 2.4981 3.88633 2.61603C3.60154 2.73396 3.34277 2.90684 3.1248 3.1248C2.90684 3.34277 2.73396 3.60154 2.61603 3.88633C2.4981 4.17113 2.43743 4.47636 2.4375 4.78461V21.2154C2.43743 21.5236 2.4981 21.8289 2.61603 22.1137C2.73396 22.3985 2.90684 22.6572 3.1248 22.8752C3.34277 23.0932 3.60154 23.266 3.88633 23.384C4.17113 23.5019 4.47636 23.5626 4.78461 23.5625H21.2154C21.8373 23.5606 22.4332 23.3127 22.873 22.873C23.3127 22.4332 23.5606 21.8373 23.5625 21.2154V7.80508C23.5625 7.59167 23.5205 7.38034 23.4389 7.18316C23.3572 6.98598 23.2376 6.80682 23.0867 6.6559L19.3441 2.91332ZM13 21.125C12.3572 21.125 11.7289 20.9344 11.1944 20.5773C10.6599 20.2202 10.2434 19.7126 9.99739 19.1187C9.75141 18.5249 9.68705 17.8714 9.81245 17.241C9.93785 16.6105 10.2474 16.0314 10.7019 15.5769C11.1564 15.1224 11.7355 14.8128 12.366 14.6874C12.9964 14.562 13.6499 14.6264 14.2437 14.8724C14.8376 15.1184 15.3452 15.5349 15.7023 16.0694C16.0594 16.6039 16.25 17.2322 16.25 17.875C16.2505 18.3019 16.1668 18.7248 16.0037 19.1194C15.8406 19.5139 15.6012 19.8724 15.2993 20.1743C14.9974 20.4762 14.6389 20.7156 14.2444 20.8787C13.8498 21.0418 13.4269 21.1255 13 21.125ZM15.4375 9.75H5.6875C5.47201 9.75 5.26535 9.6644 5.11298 9.51202C4.9606 9.35965 4.875 9.15299 4.875 8.9375V5.6875C4.875 5.47201 4.9606 5.26535 5.11298 5.11298C5.26535 4.9606 5.47201 4.875 5.6875 4.875H15.4375C15.653 4.875 15.8597 4.9606 16.012 5.11298C16.1644 5.26535 16.25 5.47201 16.25 5.6875V8.9375C16.25 9.15299 16.1644 9.35965 16.012 9.51202C15.8597 9.6644 15.653 9.75 15.4375 9.75Z"
+                stroke="white"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          }
           title={STORAGE}
           description={STORAGE_DESCRIPTION}
         />
-        <OptionalPermission svg={''} title={MIKE} description={MIKE_DESCRIPTION} />
       </div>
 
-      <div class="flex items-center w-[360px] h-[50px] mt-[26px] ml-[15px] px-[27px] rounded-[10px] bg-lightGray text-[10px] text-deepGray">
+      <div className="flex items-center w-[360px] h-[50px] mt-[26px] ml-[15px] px-[27px] rounded-[10px] bg-lightGray text-[10px] text-deepGray">
         {PERMISSION_MESSAGE}
       </div>
 
-      <LongButton className="start-button" contents={CONFIRM} />
+      <LongButton classNameName="start-button" contents={CONFIRM} onClick={moveToRegisterLocationPage} />
     </div>
   );
 }
diff --git a/src/pages/RegisterLocationCompletePage.jsx b/src/pages/RegisterLocationCompletePage.jsx
new file mode 100644
index 0000000..3490ffe
--- /dev/null
+++ b/src/pages/RegisterLocationCompletePage.jsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import TextAndBackBar from '../components/common/navBar/TextAndBackBar';
+import LongButton from '../components/common/LongButton';
+import ImageAndMessage from '../components/common/ImageAndMessage';
+
+import { MOVE_TO_HOME, REGISTER_LOCATION_COMPLETE } from '../static/constants';
+
+const RegisterLocationCompletePage = () => {
+  const navigate = useNavigate();
+  const moveToHomePage = () => navigate('/');
+
+  return (
+    <div className="relative w-[390px] overflow-hidden">
+      <TextAndBackBar title={'위치등록'} />
+      <div className="mt-[-21px]">
+        <ImageAndMessage mainMessage={REGISTER_LOCATION_COMPLETE} color={'#2572e5'} />
+      </div>
+
+      <LongButton type={'button'} contents={MOVE_TO_HOME} onClick={moveToHomePage} />
+    </div>
+  );
+};
+
+export default RegisterLocationCompletePage;
diff --git a/src/pages/SearchPage.jsx b/src/pages/SearchPage.jsx
index 7ad26c2..ddfc3bf 100644
--- a/src/pages/SearchPage.jsx
+++ b/src/pages/SearchPage.jsx
@@ -3,6 +3,7 @@ import Select from 'react-select';
 
 import SearchBar from '../components/common/navBar/SearchBar';
 import SearchedOutputList from '../components/common/SearchedOutputLists';
+import TabBar from '../components/common/navBar/TabBar';
 
 import { ENTER_INPUT, TOTAL_SEARCHED_OUTPUT } from '../static/constants';
 
@@ -32,6 +33,7 @@ function SearchPage() {
 
       <div className="mx-[16px] mb-[15px] text-[13px]">총 {'280,787'}개</div>
       <SearchedOutputList />
+      <TabBar />
     </div>
   );
 }
diff --git a/src/static/constants.js b/src/static/constants.js
index 7450d5c..d721c87 100644
--- a/src/static/constants.js
+++ b/src/static/constants.js
@@ -21,6 +21,10 @@ const CONFIRM = '확인';
 const SEARCH_LOCATION = '내 동네 이름(동,읍,면)으로 검색';
 const NEAR_LOCATION = '근처 동네';
 
+// RegisterLocationCompletePage
+const MOVE_TO_HOME = '홈으로 가기';
+const REGISTER_LOCATION_COMPLETE = '위치등록 완료';
+
 // SearchPage
 const ENTER_INPUT = '검색어를 입력하세요';
 const TOTAL_SEARCHED_OUTPUT = '전체글';
@@ -98,4 +102,6 @@ export {
   ACTUAL_PAYMENT_AMOUNT,
   JOIN,
   EDIT,
+  MOVE_TO_HOME,
+  REGISTER_LOCATION_COMPLETE,
 };

From 2d5b3bbbe73648005d852cfaa4fa9704114b5dcb Mon Sep 17 00:00:00 2001
From: Tory <88531407+1two13@users.noreply.github.com>
Date: Wed, 28 Jun 2023 17:34:55 +0900
Subject: [PATCH 3/3] =?UTF-8?q?feat:=20writingPage=20=EA=B8=B0=EB=8A=A5=20?=
 =?UTF-8?q?=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/WritingPage.jsx | 201 ++++++++++++++++++++++++++++----------
 1 file changed, 147 insertions(+), 54 deletions(-)

diff --git a/src/pages/WritingPage.jsx b/src/pages/WritingPage.jsx
index 04d4879..7c3945c 100644
--- a/src/pages/WritingPage.jsx
+++ b/src/pages/WritingPage.jsx
@@ -1,70 +1,159 @@
 import React, { useRef, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useNavigate } from 'react-router-dom';
+import Select from 'react-select';
 
 import LongButton from '../components/common/LongButton';
 import Input from '../components/writingPage/Input';
+import BackButton from '../components/common/navBar/BackButton';
+import { writingSlice } from '../redux/slices/writingSlice';
 
-import {
-  ADD_IMAGE,
-  ARTICLE_TITLE,
-  CATEGORY,
-  TOTAL_AMOUNT,
-  MAXIMUM_PEOPLE,
-  DESIRED_PLACE,
-  PLEASE_WRITE_TEXT,
-  DONE,
-} from '../static/constants';
+import { ADD_IMAGE, ARTICLE_TITLE, TOTAL_AMOUNT, MAXIMUM_PEOPLE, PLEASE_WRITE_TEXT, DONE } from '../static/constants';
 
 function WritingPage() {
+  const options = [
+    // TODO: 하드코딩된 값 constants로 추후 변경 예정
+    { value: '전체', label: '전체' },
+    { value: '과일', label: '과일' },
+    { value: '채소', label: '채소' },
+    { value: '쌀/잡곡/견과', label: '쌀/잡곡/견과' },
+    { value: '정육/계란류', label: '정육/계란류' },
+    { value: '수산물/건해산', label: '수산물/건해산' },
+    { value: '우유/유제품', label: '우유/유제품' },
+    { value: '김치/반찬/델리', label: '김치/반찬/델리' },
+    { value: '생수/음료/주류', label: '생수/음료/주류' },
+    { value: '정육/계란류', label: '정육/계란류' },
+    { value: '커피/차/원두', label: '커피/차/원두' },
+    { value: '면류/통조림', label: '면류/통조림' },
+    { value: '양념/오일', label: '양념/오일' },
+    { value: '과자/간식', label: '과자/간식' },
+    { value: '베이커리/잼', label: '베이커리/잼' },
+    { value: '친환경/유기농', label: '친환경/유기농' },
+  ];
+  const min = 1;
+  const max = 4;
+
   const imgRef = useRef(null);
-  const [count, setCount] = useState(1);
+  const navigate = useNavigate();
+  const dispatch = useDispatch();
+  const title = useSelector((state) => state.writing.title);
+  const imageUrl = useSelector((state) => state.writing.imageUrl);
+  const totalAmount = useSelector((state) => state.writing.totalAmount);
+  const textarea = useSelector((state) => state.writing.textarea);
+
+  const [count, setCount] = useState(min);
+  const [selectedCategory, setSelectedCategory] = useState(options[0]);
 
   const addImages = () => imgRef.current?.click();
-  const addImagesHandler = (e) => {};
+  const removeImage = () => dispatch(writingSlice.actions.setImageUrl(null));
+  const onChangeImage = (e) => {
+    const files = e.target.files[0];
+    const reader = new FileReader();
+
+    if (files === undefined) return;
+
+    reader.readAsDataURL(files);
+    reader.onload = () => {
+      dispatch(writingSlice.actions.setImageUrl(reader.result));
+    };
+  };
+
+  const onChangeTitle = (e) => {
+    dispatch(writingSlice.actions.setTitle(e.target.value));
+  };
+
+  const onChangeCategory = (e) => {
+    const selectedValue = e.value;
+    setSelectedCategory(selectedValue);
+    dispatch(writingSlice.actions.setCategory(selectedValue));
+  };
+
+  const onChangeTotalAmount = (e) => {
+    const totalAmount = e.target.value;
+
+    if (!/^[0-9]*$/.test(totalAmount)) e.target.value = '';
+    else dispatch(writingSlice.actions.setTotalAmount(totalAmount));
+  };
+
+  const decreaseCount = () => {
+    const newCount = Math.max(count - 1, min);
+    setCount(newCount);
+    dispatch(writingSlice.actions.setMaxPeople(newCount));
+  };
+  const increaseCount = () => {
+    const newCount = Math.min(count + 1, max);
+    setCount(newCount);
+    dispatch(writingSlice.actions.setMaxPeople(newCount));
+  };
+
+  const onChangeTextarea = (e) => {
+    dispatch(writingSlice.actions.setTextarea(e.target.value));
+  };
+
+  const onclickDoneButton = () => navigate('/posts');
 
   return (
-    <div>
-      <div class="flex items-center justify-center w-[100%] h-[340px] bg-gray cursor-pointer" onClick={addImages}>
-        <button class="flex flex-col items-center text-[13px] text-darkGray">
-          <input type="file" class="hidden" multiple accept="image/png, image/jpg, image/jpeg" ref={imgRef} />
-          <img alt="" class="w-[390px] h-[340px] z-[50]" />
-          <div class="flex flex-col absolute top-[142px]">
-            <svg
-              width="76"
-              height="68"
-              viewBox="0 0 76 68"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-              class="mb-[20px]"
-            >
+    <div className="mt-[47px]">
+      <BackButton />
+      <div className="flex justify-center">
+        <div
+          className="flex items-center justify-center w-[360px] h-[238px] mt-[11px] bg-gray rounded-[15px] cursor-pointer"
+          onClick={addImages}
+          onChange={onChangeImage}
+        >
+          <button className="flex flex-col items-center text-[13px] text-darkGray">
+            <input type="file" className="hidden" multiple accept="image/png, image/jpg, image/jpeg" ref={imgRef} />
+            {imageUrl && <img alt="" src={imageUrl} className="w-[360px] h-[238px] rounded-[15px] z-[50]" />}
+            <div className="flex flex-col top-[177px] absolute">
+              <svg
+                width="76"
+                height="68"
+                viewBox="0 0 76 68"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+                className="mb-[20px]"
+              >
+                <path
+                  d="M8 8H19.25L26.75 0.5H49.25L56.75 8H68C69.9891 8 71.8968 8.79018 73.3033 10.1967C74.7098 11.6032 75.5 13.5109 75.5 15.5V60.5C75.5 62.4891 74.7098 64.3968 73.3033 65.8033C71.8968 67.2098 69.9891 68 68 68H8C6.01088 68 4.10322 67.2098 2.6967 65.8033C1.29018 64.3968 0.5 62.4891 0.5 60.5V15.5C0.5 13.5109 1.29018 11.6032 2.6967 10.1967C4.10322 8.79018 6.01088 8 8 8ZM38 19.25C33.0272 19.25 28.2581 21.2254 24.7417 24.7417C21.2254 28.2581 19.25 33.0272 19.25 38C19.25 42.9728 21.2254 47.7419 24.7417 51.2583C28.2581 54.7746 33.0272 56.75 38 56.75C42.9728 56.75 47.7419 54.7746 51.2583 51.2583C54.7746 47.7419 56.75 42.9728 56.75 38C56.75 33.0272 54.7746 28.2581 51.2583 24.7417C47.7419 21.2254 42.9728 19.25 38 19.25ZM38 26.75C40.9837 26.75 43.8452 27.9353 45.955 30.045C48.0647 32.1548 49.25 35.0163 49.25 38C49.25 40.9837 48.0647 43.8452 45.955 45.955C43.8452 48.0647 40.9837 49.25 38 49.25C35.0163 49.25 32.1548 48.0647 30.045 45.955C27.9353 43.8452 26.75 40.9837 26.75 38C26.75 35.0163 27.9353 32.1548 30.045 30.045C32.1548 27.9353 35.0163 26.75 38 26.75Z"
+                  fill="#9D9D9D"
+                />
+              </svg>
+              {ADD_IMAGE}
+            </div>
+          </button>
+        </div>
+      </div>
+
+      <div>
+        {imageUrl ? (
+          <button
+            onClick={removeImage}
+            className="flex items-center justify-center h-[32px] w-[32px] top-[114px] ml-[331px] rounded-full bg-[black] opacity-[60%] absolute z-[999]"
+          >
+            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
               <path
-                d="M8 8H19.25L26.75 0.5H49.25L56.75 8H68C69.9891 8 71.8968 8.79018 73.3033 10.1967C74.7098 11.6032 75.5 13.5109 75.5 15.5V60.5C75.5 62.4891 74.7098 64.3968 73.3033 65.8033C71.8968 67.2098 69.9891 68 68 68H8C6.01088 68 4.10322 67.2098 2.6967 65.8033C1.29018 64.3968 0.5 62.4891 0.5 60.5V15.5C0.5 13.5109 1.29018 11.6032 2.6967 10.1967C4.10322 8.79018 6.01088 8 8 8ZM38 19.25C33.0272 19.25 28.2581 21.2254 24.7417 24.7417C21.2254 28.2581 19.25 33.0272 19.25 38C19.25 42.9728 21.2254 47.7419 24.7417 51.2583C28.2581 54.7746 33.0272 56.75 38 56.75C42.9728 56.75 47.7419 54.7746 51.2583 51.2583C54.7746 47.7419 56.75 42.9728 56.75 38C56.75 33.0272 54.7746 28.2581 51.2583 24.7417C47.7419 21.2254 42.9728 19.25 38 19.25ZM38 26.75C40.9837 26.75 43.8452 27.9353 45.955 30.045C48.0647 32.1548 49.25 35.0163 49.25 38C49.25 40.9837 48.0647 43.8452 45.955 45.955C43.8452 48.0647 40.9837 49.25 38 49.25C35.0163 49.25 32.1548 48.0647 30.045 45.955C27.9353 43.8452 26.75 40.9837 26.75 38C26.75 35.0163 27.9353 32.1548 30.045 30.045C32.1548 27.9353 35.0163 26.75 38 26.75Z"
-                fill="#9D9D9D"
+                d="M13.6857 12.6573L8.02886 7.00048L13.6857 1.34362C13.8221 1.20723 13.8987 1.02225 13.8987 0.829365C13.8987 0.63648 13.8221 0.451495 13.6857 0.315104C13.5493 0.178715 13.3643 0.102091 13.1715 0.102091C12.9786 0.102091 12.7936 0.178715 12.6572 0.315105L7.00034 5.97196L1.34348 0.315104C1.20709 0.178714 1.02211 0.102091 0.829224 0.102091C0.636339 0.102091 0.451354 0.178714 0.314964 0.315104C0.245591 0.379402 0.190806 0.457824 0.154302 0.545084C0.117798 0.632344 0.100422 0.726415 0.103345 0.820958C0.10627 0.915501 0.129426 1.00832 0.171253 1.09316C0.21308 1.17799 0.272605 1.25288 0.34582 1.31277L6.00267 6.96962L0.314964 12.6573C0.178574 12.7937 0.101951 12.9787 0.101951 13.1716C0.10195 13.3645 0.178574 13.5495 0.314964 13.6859C0.451355 13.8222 0.636339 13.8989 0.829224 13.8989C1.02211 13.8989 1.20709 13.8222 1.34348 13.6859L7.00034 8.029L12.6572 13.6859C12.7936 13.8222 12.9786 13.8989 13.1715 13.8989C13.3643 13.8989 13.5493 13.8222 13.6857 13.6859C13.8221 13.5495 13.8987 13.3645 13.8987 13.1716C13.8987 12.9787 13.8221 12.7937 13.6857 12.6573Z"
+                fill="white"
               />
             </svg>
-            {ADD_IMAGE}
-          </div>
-        </button>
+          </button>
+        ) : (
+          ''
+        )}
       </div>
-      {/* TODO: X 버튼 클릭했을 때 사진 제거 */}
-      <button class="flex items-center justify-center h-[44px] w-[44px] top-[47px] ml-[15px] rounded-full bg-white drop-shadow-md absolute z-[999]">
-        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path
-            d="M19.193 17.7784L11.4148 10.0002L19.193 2.22206C19.3805 2.03452 19.4859 1.78017 19.4859 1.51495C19.4859 1.24973 19.3805 0.995378 19.193 0.807842C19.0054 0.620305 18.7511 0.514948 18.4859 0.514948C18.2206 0.514948 17.9663 0.620305 17.7788 0.807842L10.0006 8.58602L2.22241 0.807842C2.03487 0.620305 1.78052 0.514948 1.5153 0.514948C1.25009 0.514948 0.995734 0.620305 0.808197 0.807842C0.712809 0.896251 0.63748 1.00408 0.587287 1.12406C0.537093 1.24405 0.513201 1.37339 0.517222 1.50339C0.521242 1.63339 0.553082 1.76101 0.610594 1.87766C0.668106 1.99431 0.749954 2.09728 0.850623 2.17963L8.6288 9.9578L0.808197 17.7784C0.620661 17.9659 0.515303 18.2203 0.515303 18.4855C0.515303 18.7507 0.620661 19.0051 0.808197 19.1926C0.995734 19.3802 1.25009 19.4855 1.5153 19.4855C1.78052 19.4855 2.03487 19.3802 2.22241 19.1926L10.0006 11.4144L17.7788 19.1926C17.9663 19.3802 18.2207 19.4855 18.4859 19.4855C18.7511 19.4855 19.0054 19.3802 19.193 19.1926C19.3805 19.0051 19.4859 18.7507 19.4859 18.4855C19.4859 18.2203 19.3805 17.9659 19.193 17.7784Z"
-            fill="black"
-          />
-        </svg>
-      </button>
-
-      <Input placeholder={ARTICLE_TITLE} />
-      <div class="py-[15px] mx-[15px] text-[13px] text-darkGray border-b-[0.5px] border-gray">
-        <button>{CATEGORY}</button>
+
+      <Input placeholder={ARTICLE_TITLE} onChange={onChangeTitle} />
+
+      <div className="mx-[15px] py-[15px] text-red border-b-[0.5px] border-gray">
+        <Select defaultValue={selectedCategory} options={options} onChange={onChangeCategory} />
       </div>
-      <Input placeholder={TOTAL_AMOUNT} />
 
-      <div class="flex justify-between py-[15px] mx-[15px] text-[13px] text-darkGray border-b-[0.5px] border-gray">
-        <div>{MAXIMUM_PEOPLE}</div>
-        <div class="flex">
-          <button>
+      <Input placeholder={TOTAL_AMOUNT} onChange={onChangeTotalAmount} />
+
+      <div className="flex justify-between py-[15px] mx-[15px] text-[13px] text-darkGray border-b-[0.5px] border-gray">
+        <div className="flex items-center">{MAXIMUM_PEOPLE}</div>
+        <div className="flex">
+          <button onClick={decreaseCount}>
             <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
               <path
                 d="M22.9167 0H2.08333C1.5308 0 1.00089 0.219493 0.610194 0.610194C0.219493 1.00089 0 1.5308 0 2.08333V22.9167C0 23.4692 0.219493 23.9991 0.610194 24.3898C1.00089 24.7805 1.5308 25 2.08333 25H22.9167C23.4692 25 23.9991 24.7805 24.3898 24.3898C24.7805 23.9991 25 23.4692 25 22.9167V2.08333C25 1.5308 24.7805 1.00089 24.3898 0.610194C23.9991 0.219493 23.4692 0 22.9167 0ZM19.7917 13.5417H5.20833C4.93207 13.5417 4.66711 13.4319 4.47176 13.2366C4.27641 13.0412 4.16667 12.7763 4.16667 12.5C4.16667 12.2237 4.27641 11.9588 4.47176 11.7634C4.66711 11.5681 4.93207 11.4583 5.20833 11.4583H19.7917C20.0679 11.4583 20.3329 11.5681 20.5282 11.7634C20.7236 11.9588 20.8333 12.2237 20.8333 12.5C20.8333 12.7763 20.7236 13.0412 20.5282 13.2366C20.3329 13.4319 20.0679 13.5417 19.7917 13.5417Z"
@@ -72,8 +161,8 @@ function WritingPage() {
               />
             </svg>
           </button>
-          <div class="flex justify-center items-center w-[63px] mx-[10px]">{count}</div>
-          <button>
+          <div className="flex justify-center items-center w-[63px] mx-[10px]">{count}</div>
+          <button onClick={increaseCount}>
             <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
               <path
                 d="M22.9167 0H2.08333C1.5308 0 1.00089 0.219493 0.610194 0.610194C0.219493 1.00089 0 1.5308 0 2.08333V22.9167C0 23.4692 0.219493 23.9991 0.610194 24.3898C1.00089 24.7805 1.5308 25 2.08333 25H22.9167C23.4692 25 23.9991 24.7805 24.3898 24.3898C24.7805 23.9991 25 23.4692 25 22.9167V2.08333C25 1.5308 24.7805 1.00089 24.3898 0.610194C23.9991 0.219493 23.4692 0 22.9167 0ZM19.7917 13.5417H13.5417V19.7917C13.5417 20.0679 13.4319 20.3329 13.2366 20.5282C13.0412 20.7236 12.7763 20.8333 12.5 20.8333C12.2237 20.8333 11.9588 20.7236 11.7634 20.5282C11.5681 20.3329 11.4583 20.0679 11.4583 19.7917V13.5417H5.20833C4.93207 13.5417 4.66711 13.4319 4.47176 13.2366C4.27641 13.0412 4.16667 12.7763 4.16667 12.5C4.16667 12.2237 4.27641 11.9588 4.47176 11.7634C4.66711 11.5681 4.93207 11.4583 5.20833 11.4583H11.4583V5.20833C11.4583 4.93207 11.5681 4.66711 11.7634 4.47176C11.9588 4.27641 12.2237 4.16667 12.5 4.16667C12.7763 4.16667 13.0412 4.27641 13.2366 4.47176C13.4319 4.66711 13.5417 4.93207 13.5417 5.20833V11.4583H19.7917C20.0679 11.4583 20.3329 11.5681 20.5282 11.7634C20.7236 11.9588 20.8333 12.2237 20.8333 12.5C20.8333 12.7763 20.7236 13.0412 20.5282 13.2366C20.3329 13.4319 20.0679 13.5417 19.7917 13.5417Z"
@@ -84,13 +173,17 @@ function WritingPage() {
         </div>
       </div>
 
-      <Input placeholder={DESIRED_PLACE} />
       <textarea
         placeholder={PLEASE_WRITE_TEXT}
-        class="w-[92%] h-[140px] py-[20px] mx-[15px] focus:outline-none text-[13px] text-darkGray"
+        onChange={onChangeTextarea}
+        className="w-[92%] h-[150px] py-[20px] mx-[15px] focus:outline-none text-[13px] text-darkGray"
       />
 
-      <LongButton contents={DONE} />
+      {!title || totalAmount === 0 || !textarea ? (
+        <LongButton contents={DONE} className="disabled" background={'#CCCCCC'} customStyle={'disabled'} />
+      ) : (
+        <LongButton contents={DONE} onClick={onclickDoneButton} />
+      )}
     </div>
   );
 }