Merge pull request #331 from SejongPeer/feature/6

feat: [6] 버튼 컴포넌트화

src/App.js

@@ -44,6 +44,7 @@ import StudyList from '../src/pages/study/studyList/StudyList.js';
 import StudyPostDeatil from '../src/pages/study/studyPostDetail/StudyPostDetail.js';
 import StudyPostWrite from './pages/study/studyPostWrite/StudyPostWrite.js';
 import StudyFilter from '../src/pages/study/studyFilterPage/StudyFIlterPage.js';
+import StudyModify from './pages/study/studyModify/studyModify.js';
 
 // 축제
 import AnimalApply from './pages/festival/animalApply/AnimalApply.js';
@@ -196,6 +197,7 @@ const App = () => {
               <Route path="/study/post/:studyId" element={<StudyPostDeatil />} />
               <Route path="/study/post" element={<StudyPostWrite />} />
               <Route path="/study/filter" element={<StudyFilter />} />
+              <Route path="/study/modify" element={<StudyModify />} />
 
               <Route path="/fest/AnimalApply" element={<AnimalApply />} />
               <Route path="/fest/AnimalApply2" element={<AnimalApply2 />} />

src/components/button/submitButton/SubmitBtn.js

@@ -1,12 +1,16 @@
-import { Children } from 'react';
 import style from './SubmitBtn.module.css'
 
-const SubmitBtn = (props) => {
-    return (
-        <div>
-            {Children}
-        </div>
-    )
+const SubmitBtn = ({
+    name,
+    ready,
+    onClickHandler
+}) => {
+    return <button 
+        className={ready ? style.submitBtn : style.submitBtn_notReady} 
+        onClick={onClickHandler}
+    >
+        {name}
+    </button>
 }
 
 export default SubmitBtn;

src/components/button/submitButton/SubmitBtn.module.css

@@ -0,0 +1,22 @@
+.submitBtn {
+    width: 343px;
+    height: 52px;
+    background-color: #ff4b4b;
+    text-align: center;
+    color: #ffffff;
+    border: none;
+    border-radius: 28px;
+    font-size: 18px;
+    font-weight: 700;
+}
+.submitBtn_notReady {
+    width: 343px;
+    height: 52px;
+    background-color: #E5E5E5;
+    text-align: center;
+    color: #ffffff;
+    border: none;
+    border-radius: 28px;
+    font-size: 18px;
+    font-weight: 700;
+}

src/components/studyPostWrite/ImageUpload.module.css

@@ -27,6 +27,7 @@
         width: 100%;
         display: flex;
         gap: 10px; 
+        position: relative;
     }
     .imageWrapper{
         width: 100px;
@@ -35,6 +36,7 @@
         align-items: center;
         justify-content: center;
         position: relative;
+        cursor: pointer;
     }
     .imageWrapper img.upload {
         width: 100%;
@@ -46,11 +48,11 @@
         height: 24px;
         margin: 0;
         cursor: pointer;
+        position: relative;
     }   
     .uploadImg img {
         width: 100%;
         height: 100%;
-        z-index: 2;
     } 
     .hiddenInput {
         display: none;

src/pages/study/studyModify/studyModify.js

@@ -0,0 +1,7 @@
+import StudyPostWrite from "../studyPostWrite/StudyPostWrite";
+
+const StudyModify = () => {
+    return <StudyPostWrite />
+}
+
+export default StudyModify;

src/pages/study/studyPostWrite/StudyPostWrite.js

@@ -22,6 +22,7 @@ import Tag from '../../../components/studyPostWrite/studyRequirement/Tag';
 
 import style from './StudyPostWrite.module.css';
 import './StudyPostWriteBasic.css';
+import SubmitBtn from '../../../components/button/submitButton/SubmitBtn';
 
 const StudyPostWrite = () => {
   // 모집 기간, 모집 인원
@@ -131,6 +132,9 @@ const StudyPostWrite = () => {
     setImgFiles(newImgFiles);
   }
 
+  //
+  const [isFilled, setIsFilled] = useState(true);
+
   return (
     <div className={style.container}>
       <div className={style.innerConatiner}>
@@ -174,7 +178,10 @@ const StudyPostWrite = () => {
       </div>
 
       <div className={style.postConainer}>
-        <button className={style.postBtn}>모집글 올리기</button>
+        <SubmitBtn 
+          name={'모집글 올리기'}
+          ready={isFilled}
+        />
       </div>
 
       {modalOpen && (