Merge pull request #7 from cookies-yam/feat/writingPage

[feat] 글 작성 페이지
cookies-yam · Jun 28, 2023 · c6b4027 · c6b4027
2 parents d308634 + 2d5b3bb
commit c6b4027
Show file tree

Hide file tree

Showing 22 changed files with 298 additions and 133 deletions.
diff --git 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
@@ -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/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
@@ -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
@@ -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/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
@@ -1,15 +1,18 @@
 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 class="flex h-[44px] mt-[47px]">
-      <BackButton onClickHandler={moveToPermissionPage} />
+    <div className="flex h-[44px] mt-[47px]">
+      <BackButton onClick={handleMoveBack} />
       <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/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
@@ -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/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
@@ -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
@@ -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] pb-[13px] border-b-[0.5px] border-gray">{location}</div>;
 }
 
 export default NearLoacation;
diff --git 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/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
@@ -2,16 +2,17 @@ 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';
 
 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 추가 예정 */}
+      <TabBar />
     </div>
   );
 }

diff --git 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
@@ -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,21 +23,24 @@ 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 />
           {PERMISSION_SECOND_TITLE}
         </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>
   );
 }