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