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