From d39ffa40c67d3d01449e48a9452633622fb562e8 Mon Sep 17 00:00:00 2001
From: chaerin <dbcofls6961@ajou.ac.kr>
Date: Sat, 9 Dec 2023 21:24:32 +0900
Subject: [PATCH] fix: modify createRecruit and modifyRecruit

---
 src/components/infiniteScroll.js        | 54 ++++++++++++++++---------
 src/components/recruit/createRecruit.js | 29 +++++++------
 src/components/recruit/modifyRecruit.js | 20 +++++----
 src/components/recruit/recruitList.js   |  1 +
 src/pages/join.module.css               |  3 +-
 5 files changed, 66 insertions(+), 41 deletions(-)

diff --git a/src/components/infiniteScroll.js b/src/components/infiniteScroll.js
index 09fb749..756ac4e 100644
--- a/src/components/infiniteScroll.js
+++ b/src/components/infiniteScroll.js
@@ -14,20 +14,30 @@ function InfiniteScroll(props){
     const initialFetchData = async ()=>{
         try{
             const response = await fetch(`/api/${page}${queryString1}`);
-            console.log(`/api/${page}${queryString1}`);
             const jsonData = await response.json();
             
             const newData = jsonData[page];
             setMinId(jsonData['minId']);
              
             if(page==='channels'){
-                if(newData.length>0){
-                    const components=newData.map((item)=>(
-                        <ChannelItem data={item}/>
-                    ));
-                    setItems(prevItem => [...prevItem, ...components]);
+                if (newData.length > 0) {
+                  const components = [];
+                  for (let i = 0; i < newData.length; i += 2) {
+                    const component = (
+                     
+                        <div className={InfiniteScrollStyles.itemContainer}>
+                        <div className={InfiniteScrollStyles.firstitem}>
+                        <ChannelItem props={newData[i]} /></div>
+                        <div className={InfiniteScrollStyles.seconditem}>{i + 1 < newData.length && <ChannelItem props={newData[i + 1]} />}</div>
+                        </div>
+                      
+                    );
+                    components.push(component);
+                    console.log('ne', newData[i]);
+                  }
+                  setItems((prevItem) => [...prevItem, ...components]);
                 }
-            }else {
+              }else {
                 if(newData.length > 0) {    
                     const components = newData.map((item) => (
                         <PageItem data={item}/>
@@ -35,6 +45,7 @@ function InfiniteScroll(props){
     
                     setItems(prevItem => [...prevItem, ...components]);
                 }
+                console.log(`/api/${page}${queryString1}`);
             }  
 
         } catch(error){
@@ -44,6 +55,7 @@ function InfiniteScroll(props){
 
     useEffect(() => {
         initialFetchData(); // 최초 렌더링 시에 데이터 가져오기
+        console.log(`/api/${page}${queryString1}`);
     }, [page, queryString1, queryString2]);
 
     const fetchData = async ()=>{
@@ -60,18 +72,24 @@ function InfiniteScroll(props){
             setMinId(jsonData['minId']);
   
             if(page==='channels'){
-                if(newData.length>0){
-                    for (let i = 0; i < newData.length; i += 2) {
-                        const component = (
-                          <div key={i} className="channelItemRow">
-                            <ChannelItem data={newData[i]} />
-                            {i + 1 < newData.length && <ChannelItem data={newData[i + 1]} />}
-                          </div>
-                        );
-                        setItems((prevItem) => [...prevItem, component]);
-                      }
+                if (newData.length > 0) {
+                  const components = [];
+                  for (let i = 0; i < newData.length; i += 2) {
+                    const component = (
+                     
+                        <div className={InfiniteScrollStyles.itemContainer}>
+                        <div className={InfiniteScrollStyles.firstitem}>
+                        <ChannelItem props={newData[i]} /></div>
+                        <div className={InfiniteScrollStyles.seconditem}>{i + 1 < newData.length && <ChannelItem props={newData[i + 1]} />}</div>
+                        </div>
+                      
+                    );
+                    components.push(component);
+                    console.log('ne', newData[i]);
+                  }
+                  setItems((prevItem) => [...prevItem, ...components]);
                 }
-            }else {  
+              }else {  
                 if(newData.length > 0) {    
                     const components = newData.map((item) => (
                         <PageItem data={item}/>
diff --git a/src/components/recruit/createRecruit.js b/src/components/recruit/createRecruit.js
index 1621f6a..1d5e6ac 100644
--- a/src/components/recruit/createRecruit.js
+++ b/src/components/recruit/createRecruit.js
@@ -20,10 +20,10 @@ function CreateRecruit({ isOpen, onClose }){
     });
 
     const [timeData, setTimeData] = useState({
-        startHour: '',
-        startMinute: '',
-        endHour: '',
-        endMinute: ''
+        startHour: null,
+        startMinute: null,
+        endHour: null,
+        endMinute: null
     });
 
     const handleInputChange = (e) => {
@@ -54,18 +54,21 @@ function CreateRecruit({ isOpen, onClose }){
     };
 
     const handleSave = () => {
-        handleSubmit({
-            ...formData,
-            data: {
-                ...formData.data,
-                startTime: `${timeData.startHour|| '00'}:${timeData.startMinute || '00'}`,
-                endTime: `${timeData.endHour|| '00'}:${timeData.endMinute || '00'}`,
-            }
-        });
+        if(formData.data.timeCategory === "D"){
+            handleSubmit({
+                ...formData,
+                data: {
+                    ...formData.data,
+                    startTime: `${timeData.startHour}:${timeData.startMinute}`,
+                    endTime: `${timeData.endHour}:${timeData.endMinute}`,
+                }
+            });
+        }else{
+            handleSubmit(formData);
+        }
     };
 
     const handleSubmit = async (formData) => {
- 
 
         if(formData.data.title === ''){
             alert('제목을 입력해주세요.');
diff --git a/src/components/recruit/modifyRecruit.js b/src/components/recruit/modifyRecruit.js
index d4a44ee..ffdcc1f 100644
--- a/src/components/recruit/modifyRecruit.js
+++ b/src/components/recruit/modifyRecruit.js
@@ -52,14 +52,18 @@ const ModifyRecruit=({isOpen, onClose, data})=>{
     };
 
     const handleSave = () => {
-        modifyInfo({
-            ...formData,
-            info: {
-                ...formData.info,
-                startTime: `${timeData.startHour|| '00'}:${timeData.startMinute || '00'}`,
-                endTime: `${timeData.endHour|| '00'}:${timeData.endMinute || '00'}`,
-            }
-        });
+        if(formData.info.timeCategory === "D"){
+            modifyInfo({
+                ...formData,
+                info: {
+                    ...formData.info,
+                    startTime: `${timeData.startHour|| '00'}:${timeData.startMinute || '00'}`,
+                    endTime: `${timeData.endHour|| '00'}:${timeData.endMinute || '00'}`,
+                }
+            });
+        }else{
+            modifyInfo(formData);
+        }
     };
 
     const modifyInfo = async (formData)=>{
diff --git a/src/components/recruit/recruitList.js b/src/components/recruit/recruitList.js
index be23047..ab87b29 100644
--- a/src/components/recruit/recruitList.js
+++ b/src/components/recruit/recruitList.js
@@ -162,6 +162,7 @@ function RecruitList(){
 
     useEffect(() => {
         setForceRender((prev) => !prev);
+        console.log('Component has been re-rendered');
     }, [generatedUrl, firstQueryString, secondQueryString])
     
     return(
diff --git a/src/pages/join.module.css b/src/pages/join.module.css
index 0346349..4f1f6e1 100644
--- a/src/pages/join.module.css
+++ b/src/pages/join.module.css
@@ -80,8 +80,7 @@
     
     margin-left: 15px;
     margin-top:-20px;
-    margin-bottom: -30px
-
+    margin-bottom: -30px;
 }
 
 .input_with_img img{
-- 
GitLab