From 058338923d78c1558882ca511082d60ccc2ce8d0 Mon Sep 17 00:00:00 2001
From: chaerin <dbcofls6961@ajou.ac.kr>
Date: Sun, 10 Dec 2023 17:23:54 +0900
Subject: [PATCH] fix: delete AppContext and add props

---
 src/components/calendar/calendar.js           |  7 ++---
 src/components/mainAside.js                   |  6 ++--
 src/components/recruit/recruitDetail.js       |  3 +-
 .../recruit/recruitDetail.module.css          |  8 ++++--
 src/components/recruit/recruitList.module.css |  6 ++--
 src/components/search.js                      |  9 ++++--
 src/pages/main.js                             | 28 +++++++------------
 7 files changed, 30 insertions(+), 37 deletions(-)

diff --git a/src/components/calendar/calendar.js b/src/components/calendar/calendar.js
index bb768a9..d8b1913 100644
--- a/src/components/calendar/calendar.js
+++ b/src/components/calendar/calendar.js
@@ -3,7 +3,6 @@ import "@progress/kendo-theme-default/dist/all.css";
 import React, {useEffect, useState, useContext} from 'react';
 import '@progress/kendo-react-intl';
 import '@progress/kendo-react-scheduler';
-import { AppContext } from '../../pages/main';
 import { Scheduler, WeekView, DayView, MonthView, SchedulerEditItem} from '@progress/kendo-react-scheduler';
 
 import calendar_styles from './calendar.module.css'
@@ -14,7 +13,7 @@ import ScheduleListModal from './inquiryListModal';
 //import Header from '../Header'
 const defaultDate=new Date();
 
-const MySchedulerApp = () => {
+const MySchedulerApp = ({ setCount }) => {
 
   useEffect(() => {
     // 페이지가 로드되면 실행될 코드
@@ -57,9 +56,7 @@ const MySchedulerApp = () => {
   const [updateCounter, setUpdateCounter] = useState(0);
   const[scheduleListModalOpen, setScheduleListModalOpen]=useState(false);
   //const [isContent, setIsContent]=useState(' 상세 내용이 없습니다. ');
-  const [date, setDate]=useState(defaultDate);
-  const { setCount } = useContext(AppContext);
-  
+  const [date, setDate]=useState(defaultDate);  
 
   const openInModal=()=>{
     //일정 조회 모달 열기
diff --git a/src/components/mainAside.js b/src/components/mainAside.js
index 72c0915..a51fca6 100644
--- a/src/components/mainAside.js
+++ b/src/components/mainAside.js
@@ -1,6 +1,5 @@
-import React, { useState, useEffect, useContext } from 'react';
+import React, { useState, useEffect } from 'react';
 import styles from './mainAside.module.css';
-import { AppContext } from '../pages/main';
 
 function NextSchedule(props) {
     const { nextSchedules } = props.data;
@@ -49,9 +48,8 @@ function Notice(props){
     );
 }
 
-function Schedule(){
+function Schedule({ count }){
     const [fulldata, setFulldata] = useState(null);
-    const { count } = useContext(AppContext);
 
     const getFulldata = async ()=>{
         try{
diff --git a/src/components/recruit/recruitDetail.js b/src/components/recruit/recruitDetail.js
index 39c789e..3cfe0ce 100644
--- a/src/components/recruit/recruitDetail.js
+++ b/src/components/recruit/recruitDetail.js
@@ -2,11 +2,12 @@ import React, { useState, useContext } from "react";
 import recruitDetailStyles from './recruitDetail.module.css';
 import Comment from './comment';
 import MyScheduleApp from '../calendar/calendar';
-import { AuthContext } from '../../App';
 import ModifyRecruit from "./modifyRecruit";
 import DeleteRecruit from "./deleteRecruit";
 import StateRecruit from "./stateRecruit";
 
+import { AuthContext } from '../../App';
+
 const RecruitDetail = ({ isOpen, onClose, data }) => {
   const [isCalendarVisible, setIsCalendarVisible] = useState(false);
   const [isModifyOpen, setIsModifyOpen] = useState(false);
diff --git a/src/components/recruit/recruitDetail.module.css b/src/components/recruit/recruitDetail.module.css
index ff7bd9b..84cf7a5 100644
--- a/src/components/recruit/recruitDetail.module.css
+++ b/src/components/recruit/recruitDetail.module.css
@@ -57,6 +57,8 @@
 .imgContainer{
     width: 258px;
     height: 338px;
+
+    margin-left: -10px;
 }
 
 .notImgContainer{
@@ -82,7 +84,7 @@
     height: 35px;
 
     font-weight: 600;
-    font-size: 27px;
+    font-size: 25px;
     line-height: 30x;
     
     margin-left: 10px;
@@ -202,7 +204,7 @@
     width: 490px;
     height: 200px;
 
-    font-size: 22px;
+    font-size: 20px;
     line-height: 33px;
 
     margin-left: 10px;
@@ -242,7 +244,7 @@
 
 .date, .time{
     font-weight: 600;
-    font-size: 20px;
+    font-size: 18px;
 
     color: #000000;
 }
diff --git a/src/components/recruit/recruitList.module.css b/src/components/recruit/recruitList.module.css
index 3a627ef..202b27b 100644
--- a/src/components/recruit/recruitList.module.css
+++ b/src/components/recruit/recruitList.module.css
@@ -161,16 +161,16 @@
 }
 
 .dateContainer{
-    width: 250px;
+    width: 270px;
 }
 
 .timeContainer{
-    width: 240px;
+    width: 219px;
 }
 
 .date, .time{
     font-weight: 600;
-    font-size: 20px;
+    font-size: 18px;
     line-height: 33px;
 
     color: #000000;
diff --git a/src/components/search.js b/src/components/search.js
index ba52d51..1ca6d5c 100644
--- a/src/components/search.js
+++ b/src/components/search.js
@@ -4,7 +4,9 @@ import searchStyles from './search.module.css';
 import CreateRecruit from './recruit/createRecruit';
 import MyChannelModal from './channel/myChannelModal';
 import ExistingChannel from './channel/existingChannel';
+
 export const SearchContext = createContext();
+
 function Search({ currentPage, onUrlGenerated, onFirstQueryString, onSecondQueryString }){
     const [isModalOpen, setIsModalOpen] = useState(false);
     const [searchTerm, setSearchTerm] = useState('');
@@ -13,6 +15,7 @@ function Search({ currentPage, onUrlGenerated, onFirstQueryString, onSecondQuery
     const [haveChannel, sethaveChannel]=useState(true);
     const [myChannelData, setmyChannelData]=useState('');
     const [fetchCount, setfetchCount] = useState(0);
+
     const searchValue = {
         fetchCount,
         setfetchCount,
@@ -43,7 +46,6 @@ function Search({ currentPage, onUrlGenerated, onFirstQueryString, onSecondQuery
           const backendData = await response.json();
           console.log(backendData);
           
-          
           if (backendData.data ) {
             sethaveChannel(true);
             // openModal();
@@ -56,10 +58,11 @@ function Search({ currentPage, onUrlGenerated, onFirstQueryString, onSecondQuery
             console.error('Error fetching weekly schedules:', error);
         }
     };
-    useEffect(() => {
-        
+
+    useEffect(() => {  
         fetchChannelData();
     }, [fetchCount]);
+
     const handleSearch = () => {
         let searchURL = `${currentPage}/search`;
         let firstQueryString = '?';
diff --git a/src/pages/main.js b/src/pages/main.js
index 3ce1b6d..c78fc8b 100644
--- a/src/pages/main.js
+++ b/src/pages/main.js
@@ -5,34 +5,26 @@ import main_styles from './main.module.css';
 import Header from '../components/Header';
 import { AuthContext } from '../App';
 
-export const AppContext = createContext();
-
 const Main=()=>{
   const{ userData } = useContext(AuthContext);
   const [count, setCount] = useState(0);
 
-  const contextValue = {
-    count,
-    setCount,
-  };
-
   return(
-    <AppContext.Provider value={contextValue}>
       <div className={main_styles.main}>
-      <div className={main_styles.main_header}>
-        <Header userData={userData}/></div>
-      
-      <div className={main_styles.content}>
-        <div className={main_styles.section}>
-          <MySchedulerApp></MySchedulerApp>
+        <div className={main_styles.main_header}>
+          <Header userData={userData}/>
         </div>
+        
+        <div className={main_styles.content}>
+          <div className={main_styles.section}>
+            <MySchedulerApp setCount={setCount}/>
+          </div>
 
-        <div className={main_styles.aside}>
-          <Schedule></Schedule>
+          <div className={main_styles.aside}>
+            <Schedule count={count}/>
+          </div>
         </div>
       </div>
-      </div>
-    </AppContext.Provider>
   )
 }
 
-- 
GitLab