Merge pull request #432 from SejongPeer/feature/54

feat: [54] 모집완료시 디자인 변경, 이미지 오류 해결, 스터디 리스트 카테고리 검색
SejongPeer · Sep 3, 2024 · 95b94a6 · 95b94a6
2 parents e2d5abb + 8d51266
commit 95b94a6
Show file tree

Hide file tree

Showing 16 changed files with 158 additions and 76 deletions.
diff --git a/src/components/modal/BottomModal.module.css b/src/components/modal/BottomModal.module.css
@@ -1,13 +1,13 @@
 @media (min-width: 768px) {
   .modal {
-    width: 100vw;
+    max-width: 400px;
     height: 100vh;
     position: absolute;
     top: 0;
     left: 0;
   }
   .container {
-    width: 100vw;
+    width: 400px;
     max-height: 100px;
     background-color: #ffffff;
     border-radius: 16px 16px 0px 0px;
@@ -26,7 +26,7 @@
 
   .backdrop {
     position: fixed;
-    width: 100vw;
+    width: 400px;
     height: 100%;
     z-index: 10;
     background: rgba(0, 0, 0, 0.35);

diff --git a/src/components/studyPostWrite/PostInput.js b/src/components/studyPostWrite/PostInput.js
@@ -1,10 +1,16 @@
 import style from './PostInput.module.css';
 import usePostStore from '../../pages/study/studyPostWrite/usePostStore';
+
 const PostInput = () => {
   const { content, setContent } = usePostStore();
+
   const handleContentChange = e => {
-    setContent(e.target.value);
+    const newValue = e.target.value;
+    if (newValue.length <= 1000) {
+      setContent(newValue);
+    }
   };
+
   return (
     <div className={style.textContainer}>
       <textarea

diff --git a/src/components/studyPostWrite/studyRequirement/RecruitDate.js b/src/components/studyPostWrite/studyRequirement/RecruitDate.js
@@ -23,13 +23,6 @@ const ReucruitDate = ({ handleDatePickerFocus }) => {
     // console.log(start, ',', end);
   };
 
-  useEffect(() => {
-    console.log('Start: ', startDate);
-  }, [startDate]);
-  useEffect(() => {
-    console.log('EndDate: ', endDate);
-  }, [endDate]);
-
   const [dateRange, setDateRange] = useState({
     startDate: startDate,
     endDate: endDate,

diff --git a/src/components/studyPostWrite/studyRequirement/Title.js b/src/components/studyPostWrite/studyRequirement/Title.js
@@ -2,12 +2,17 @@ import style from '../StudyRequirement.module.css';
 import usePostStore from '../../../pages/study/studyPostWrite/usePostStore';
 const Title = () => {
   const { title, setTitle } = usePostStore();
+
   const handleChange = e => {
-    setTitle(e.target.value);
+    const newValue = e.target.value;
+    if (newValue.length <= 50) {
+      setTitle(newValue);
+    }
   };
+
   return (
     <input
-      placeholder="제목"
+      placeholder="제목(50자 이하)"
       className={style.titleInput}
       type="text"
       value={title}

diff --git a/src/pages/buddy/accept/BuddyAccept.js b/src/pages/buddy/accept/BuddyAccept.js
@@ -62,7 +62,8 @@ const BuddyAccept = () => {
       isAccept: accept,
     };
 
-    fetch(process.env.REACT_APP_BACK_SERVER + '/buddyMatching/status', {
+
+    fetch(process.env.REACT_APP_BACK_SERVER + '/buddy/matching/status', {
       method: 'POST',
       body: JSON.stringify(acceptInfo),
       headers: {
@@ -73,6 +74,7 @@ const BuddyAccept = () => {
     })
       .then(response => response.json())
       .then(data => {
+        console.log(data)
         if (accept) {
           toast.success(
             '매칭이 수락되었습니다! \n상대방이 매칭을 수락할 때까지 기다려주세요.'

diff --git a/src/pages/buddy/accept/BuddyAccept.module.css b/src/pages/buddy/accept/BuddyAccept.module.css
@@ -1,8 +1,6 @@
 .container {
-  margin-top: 8vh;
   display: flex;
   flex-direction: column;
-  height: 90%;
   background-color: #fafafa;
   align-items: center;
   justify-content: center;

diff --git a/src/pages/honbob/info/HonbobStart.module.css b/src/pages/honbob/info/HonbobStart.module.css
@@ -2,32 +2,29 @@
 @media (min-width: 768px) {
   .Container {
     width: 100vw;
-    /* height: 90vh; */
-    display: flex;
-    flex-direction: column;
   }
 
   .InnerContainer {
-    /* width: 450px; */
-    width: 28vw;
     height: 100vh;
-    /* background-color: aliceblue; */
+    width: 400px;
     background-color: transparent;
     overflow: hidden;
+    margin: auto;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
   }
 
   .top {
-    margin-top: 10vh;
-    width: 28vw;
     height: 6vh;
     display: flex;
     flex-direction: row;
-    align-items: center;
-    justify-content: end;
+    width: 100%;
+    margin-top: 30px;
   }
 
   .informBtn {
-    margin-right: 1vw;
+    margin-left: auto;
     border-radius: 24px;
     width: 20vh;
     height: 5vh;
@@ -51,7 +48,6 @@
   }
 
   .middle {
-    width: 28vw;
     height: 75vh;
     margin-top: 3vh;
     background-color: transparent;

diff --git a/src/pages/login/signUp/Agree.js b/src/pages/login/signUp/Agree.js
@@ -97,7 +97,7 @@ const Agree = () => {
           <div className={box.flex}>
             <div className={box.left}>
               <p className={box.essential}>[필수]</p>
-              <Link to={'/personalinfo2'} className={box.link} target="_blank">
+              <Link to={'/personalinfo'} className={box.link} target="_blank">
                 개인정보 수집 동의 &gt;
               </Link>
             </div>
@@ -113,7 +113,7 @@ const Agree = () => {
           <div className={box.flex}>
             <div className={box.left}>
               <p className={box.essential}>[필수]</p>
-              <Link to={'/useinfo'} className={box.link} target="_blank">
+              <Link to={'/personalinfo2'} className={box.link} target="_blank">
                 이용약관 동의 &gt;
               </Link>
             </div>

diff --git a/src/pages/myPage/modify/Modify.module.css b/src/pages/myPage/modify/Modify.module.css
@@ -170,15 +170,13 @@
 
   .ContainerBox {
     width: 100vw;
-    /* margin-top: 7.3vh; */
     padding: 1vw 2vw 0 2vw;
     background-color: #fbe4e4;
     border: 1px solid #e5e5e5;
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     align-items: center;
-    height: 100vh;
   }
 
   .container {

diff --git a/src/pages/myPage/mypage/MyPage.module.css b/src/pages/myPage/mypage/MyPage.module.css
@@ -1,25 +1,20 @@
 @media (min-width: 768px) {
   .Container {
     width: 100vw;
-    height: 112vh;
     background-color: #fbe4e4;
     display: flex;
     flex-direction: column;
     align-items: center;
   }
 
   .container {
-    width: 28vw;
-    /* background-color: #FBE4E4;
-    border: 1px solid #e5e5e5; */
+    width: 400px;
     display: flex;
     flex-direction: column;
     align-items: center;
   }
 
   .outerContainer {
-    width: 28vw;
-    margin-top: 7.7vh;
     padding: 1vw 2vw 0 2vw;
     background-color: #fbe4e4;
     border: 1px solid #e5e5e5;
@@ -31,12 +26,10 @@
 
   .container1 {
     background-color: #ffffff;
-    width: 28vw;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    margin-top: 95%;
   }
 
   .informTitleBox {
@@ -87,7 +80,7 @@
     flex-direction: column;
     align-items: self-start;
     /* justify-content: left; */
-    width: 12vw; /* 너비를 넓혔습니다 */
+    width: 80%; /* 너비를 넓혔습니다 */
     gap: 1vh;
   }
 
@@ -96,11 +89,11 @@
     font-size: 2vh;
     color: #ff4b4b;
     height: 2vh;
-    width: 7vw;
+    width: 100%;
   }
 
   .checkWord {
-    width: 12vw; /* 너비를 넓혔습니다 */
+    width: 100%;
     text-align: left;
   }
 

diff --git a/src/pages/study/studyList/Filter_Field.js b/src/pages/study/studyList/Filter_Field.js
@@ -1,10 +1,11 @@
-import { useState, useEffect } from 'react';
+import { useState, useRef, useContext } from 'react';
 import { searchHandler } from './api';
 
 //zustand
 import useTimeTableStore from './useTimetableStore';
 import useFilterStore from './useFilterStore';
 import useStudyStore from './useStudyStore';
+import { MyContext } from 'App';
 
 import style from './Filter_Field.module.css';
 import search from '../../../assets/image/search_gray.png';
@@ -13,6 +14,7 @@ import back from '../../../assets/image/back_black.png';
 const Filter_Field = ({ deleteHandler }) => {
   const {
     tableInfos,
+    setTableInfos,
     setFilteredInfos,
     showData,
     setShowData,
@@ -21,10 +23,14 @@ const Filter_Field = ({ deleteHandler }) => {
 
   const { setPosts } = useStudyStore();
 
-  const { category, setCategory } = useFilterStore();
+  const { setCategory } = useFilterStore();
   const [selectingState, setSelectingState] = useState(0); //0->단과대,1->학과,2->과목이 띄워짐
   const [college, setCollege] = useState(null);
   const [department, setDepartment] = useState(null);
+  const [isSearch, setIsSearch] = useState(false);
+
+  //모달 닫기
+  const { setModalOpen } = useContext(MyContext);
 
   //이전 값으로 초기화
   const filteringBefore = state => {
@@ -73,6 +79,13 @@ const Filter_Field = ({ deleteHandler }) => {
     } else if (state === 2) {
       const newTableInfo = tableInfos.filter(row => {
         if (
+          college === null &&
+          department === null &&
+          row[3] === item[0] &&
+          row[4] === item[1]
+        ) {
+          return row;
+        } else if (
           row[1] === college &&
           row[2] === department &&
           row[3] === item[0] &&
@@ -113,6 +126,11 @@ const Filter_Field = ({ deleteHandler }) => {
 
     //이전 단계로 돌아가기
     setSelectingState(s => s - 1);
+    if (isSearch) {
+      filteringBefore(0);
+      console.log('selectingState:', selectingState);
+      setSelectingState(0);
+    }
   };
 
   // 검색 핸들러
@@ -126,22 +144,61 @@ const Filter_Field = ({ deleteHandler }) => {
       console.error('Error during submit:', error);
     }
   };
-  const searchText = () => {};
+
+  const inputRef = useRef(null);
+
+  const handleSearchClick = () => {
+    if (inputRef.current) {
+      setCollege(null);
+      setDepartment(null);
+      const item = inputRef.current.value + '';
+      if (item) {
+        const newTableInfo = tableInfos.filter(row => {
+          return (
+            (row[3] && row[3].includes(item)) ||
+            (row[4] && row[4].includes(item))
+          );
+        });
+        setFilteredInfos(newTableInfo);
+        setShowData(
+          Array.from(
+            new Set(newTableInfo.map(row => [row[3], row[4]]).filter(Boolean))
+          )
+        );
+
+        const filteredArray = Array.from(
+          new Set(
+            newTableInfo
+              .map(row => [row[3], row[4]])
+              .filter(([value1, value2]) => value1 !== '' && value2 !== '')
+          )
+        );
+
+        setSelectingState(2);
+        setIsSearch(true);
+      }
+    }
+  };
   return (
     <div className={style.container}>
       <header className={style.header}>
         {selectingState > 0 ? (
-          <img className={style.backImg} src={back} alt="back" />
+          <img 
+          className={style.backImg} 
+          src={back} 
+          alt="back" 
+          onClick={clickBack}/>
         ) : null}
         <span>학교수업 스터디</span>
       </header>
       <div className={style.search_container}>
         <div className={style.search_wrapper}>
-          <img src={search} alt="search" onClick={searchText} />
+          <img src={search} alt="search" onClick={handleSearchClick} />
           <input
             className={style.search_input}
             type="text"
-            placeholder="과목명 입력"
+            placeholder="과목명 입력 (과목명 또는 교수명)"
+            ref={inputRef}
           />
         </div>
       </div>

diff --git a/src/pages/study/studyList/Filter_Field2.js b/src/pages/study/studyList/Filter_Field2.js
@@ -53,16 +53,6 @@ const Filter_Field2 = ({ deleteHandler }) => {
       <header className={style.header}>
         <span>스터디 선택</span>
       </header>
-      <div className={style.search_container}>
-        <div className={style.search_wrapper}>
-          <img src={search} alt="search" />
-          <input
-            className={style.search_input}
-            type="text"
-            placeholder="검색어 입력"
-          />
-        </div>
-      </div>
       <div className={style.filter_study}>
         {datas &&
           datas.map(data => (