diff --git a/src/App.js b/src/App.js
index a144ab28ef1eadd319cebe88d4a5140dfd629e0c..a827bc03fc2fa0ff02a311e9741b943555a40071 100644
--- a/src/App.js
+++ b/src/App.js
@@ -6,7 +6,7 @@ import Login from './pages/login';
import Mypage from './pages/mypage';
import Recruit from './pages/recruit';
import Subscribe from './pages/subscribe';
-//import Clientservice from './pages/clientservice';
+import Clientservice from './pages/clientservice';
import Main from './pages/main';
import Header from './components/Header';
@@ -59,7 +59,7 @@ function App() {
<Route path="/mypage" element={<Mypage />} />
<Route path='/subscribes'element={<Subscribe />}/>
- {/* Other routes */}
+ <Route path='/clientservice'element={<Clientservice />}/>
</Routes>
</BrowserRouter>
</AuthContext.Provider>
diff --git a/src/components/Header.js b/src/components/Header.js
index 0753ed5b938a04f309f1bdd30af7ed03a6335c4f..aac1118394a527e073fc94d49f96897f68252c1c 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -3,10 +3,11 @@ import { useNavigate } from "react-router-dom";
import header_styles from './Header.module.css';
import Logout from './logout';
import { AuthContext } from '../App';
+
const Header=()=>{
const { userData } = useContext(AuthContext);
-
const navigate = useNavigate();
+
const [LogoutModalOpen, setLogoutModalOpen] = useState(false);
const [showUserInfo, setShowUserInfo] = useState(false);
@@ -62,37 +63,36 @@ const Header=()=>{
return (
- <header>
+ <header className={header_styles.header}>
<div className={header_styles.header_content}>
-
- <div className={header_styles.header_logo}><a href="/"><img src="/logo.png"></img></a></div>
+ <div className={header_styles.header_logo}><img src="/logo.png" onClick={goToHome}></img></div>
<nav className={header_styles.header_nav}>
- <ul>
- <li onClick={goToHome}><a>홈</a></li>
- <li onClick={goToSearch}><a>검색</a></li>
- <li onClick={goToClientservice}><a>고객지원</a></li>
- <li onClick={goToMypage}><a>마이페이지</a></li>
+ <ul className={header_styles.list}>
+ <li onClick={goToHome}>홈</li>
+ <li onClick={goToSearch}>검색</li>
+ <li onClick={goToClientservice}>고객지원</li>
+ <li onClick={goToMypage}>마이페이지</li>
- <li><a onClick={handleimgClick}><img src="/logout_img.png"
- ></img></a>
- {showUserInfo &&(
- <div className={header_styles.user_info}>
- <div className={header_styles.profileinfo}>
- <div><img className={header_styles.circular_img} src={userData.imagePath} alt="Profile"></img></div>
- <div className={header_styles.userTextInfo}>
- <div className={header_styles.userName}>{userData.name}</div>
- <div className={header_styles.userNickname}>{userData.nickname}</div>
+ <li>
+ <a onClick={handleimgClick}><img src="/logout_img.png"></img></a>
+ {showUserInfo &&(
+ <div className={header_styles.user_info}>
+ <div className={header_styles.profileinfo}>
+ <div>
+ <img className={header_styles.circular_img} src={userData.imagePath} alt="Profile"/>
</div>
+ <div className={header_styles.userTextInfo}>
+ <div className={header_styles.userName}>{userData.name}</div>
+ <div className={header_styles.userNickname}>{userData.nickname}</div>
</div>
-
- <button className={header_styles.logout} onClick={openLogoutModal}>로그아웃</button>
</div>
- )}
+
+ <button className={header_styles.logout} onClick={openLogoutModal}>로그아웃</button>
+ </div>
+ )}
</li>
- {/* </div> */}
</ul>
</nav>
-
</div>
<Logout modalOpen={LogoutModalOpen} closeModal={closeLogoutModal} handleLogout={handleLogout} />
diff --git a/src/components/Header.module.css b/src/components/Header.module.css
index a0fb0c3fe3129585c3ced933a3bc49ac99976aa7..8e39327659fad2932a2b1c35dbd4fc28532b20a0 100644
--- a/src/components/Header.module.css
+++ b/src/components/Header.module.css
@@ -1,64 +1,58 @@
@import url(//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css);
-header {
- background-color: white;
- color: black;
- padding: 1em;
+
+.header {
display: flex;
- justify-content: space-between;
+ justify-content: center;
align-items: center;
+
+ width: 100%;
+ height: 120px;
border-bottom: 2px solid #ddd;
+ padding: 20px;
+
+ background-color: white;
+ color: black;
+
+
font-weight: bold;
- position: sticky;
- top: 0;
+ /* top: 0; */
z-index:2;
+}
+
+.header_content{
+ display: flex;
+ justify-content: center;
+ align-items: center;
-
}
.header_logo img {
- height: 80px; /* 이미지 높이 조절 */
- margin-left: 20px;
+ height: 90px; /* 이미지 높이 조절 */
+ margin-left: 100px;
margin-right:100px;
}
-.header_nav {
- margin-top: 3px;
- display: flex; /* 로고와 네비게이션을 한 행에 배치하기 위해 추가 */
-
-}
-.header_nav ul {
- list-style: none;
+.header_nav{
display: flex;
-
+ margin-top: 3px;
}
-.header_content {
- display: flex;
- align-items: center;
- width: 100%;
-
+.list{
+ display: flex;
+ list-style: none;
}
-
.header_nav li {
- font-size: 17px;
- margin-top: 10px;
+ font-size: 19px;
cursor: pointer;
margin-right: 175px;
-
-}
-.header_nav a {
- text-decoration: none;
- color: black;
-
}
.header_nav li:last-child a img {
height: 30px;
width: auto;
-
-
}
+
.user_info{
position: absolute;
@@ -74,6 +68,7 @@ header {
font-size: 15px;
}
+
.profileinfo{
margin:10%;
align-items: center;
@@ -81,9 +76,6 @@ header {
}
-
-
-
.circular_img {
width: 50px; /* Adjust as needed */
height: 50px; /* Adjust as needed */
@@ -99,9 +91,11 @@ header {
margin-bottom:10px;
}
+
.userName{
font-size:14px;
}
+
.logout {
background-color:#9FB8AB;
@@ -119,6 +113,7 @@ header {
/* 추가적인 로그아웃 스타일 지정 */
}
+
.profileinfo{
display:flex;
diff --git a/src/components/calendar/calendar.js b/src/components/calendar/calendar.js
index bb768a9905cab6caa3f1d3a46dc52ead7c909c4d..d8b1913fbc4d2d1910289144aae994d4c154fd9a 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 72c09150a1ba06dcd29b8c078bc3dedbabee54ea..a51fca6a65aef91969d88366c55d2107479c9ed0 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/createRecruit.js b/src/components/recruit/createRecruit.js
index 295e89c62bd804cf3c6b900cef82eae403783464..2e6bcac8b19e3243165e06dd4dcff53200e3e8ee 100644
--- a/src/components/recruit/createRecruit.js
+++ b/src/components/recruit/createRecruit.js
@@ -21,9 +21,9 @@ function CreateRecruit({ isOpen, onClose }){
const [timeData, setTimeData] = useState({
startHour: null,
- startMinute: null,
+ startMinute: '00',
endHour: null,
- endMinute: null
+ endMinute: '00'
});
const handleInputChange = (e) => {
@@ -55,17 +55,24 @@ function CreateRecruit({ isOpen, onClose }){
const handleSave = (e) => {
e.preventDefault()
- if(formData.data.timeCategory === "D"){
+ if(formData.data.timeCategory === "TBD"){
handleSubmit({
...formData,
data: {
...formData.data,
- startTime: `${timeData.startHour || '00'}:${timeData.startMinute || '00'}`,
- endTime: `${timeData.endHour || '00'}:${timeData.endMinute || '00'}`,
+ startTime: null,
+ endTime: null,
}
});
}else{
- handleSubmit(formData);
+ handleSubmit({
+ ...formData,
+ data: {
+ ...formData.data,
+ startTime: `${timeData.startHour}:${timeData.startMinute || '00'}`,
+ endTime: `${timeData.endHour}:${timeData.endMinute || '00'}`,
+ }
+ });
}
};
diff --git a/src/components/recruit/recruitDetail.js b/src/components/recruit/recruitDetail.js
index 39c789e5fb4c5a7c09eb310cb463b3103d3e21c2..3cfe0ce4789e7b3f85ea5cd48b34066a44f88034 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 ff7bd9b7c2966baa7180c3c5c56d151462c4ccec..84cf7a537bec2f4880e15bc007060b3f6464b1b1 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 3a627effeedc357cad086ce44b37975da49080c2..202b27b4e3bfb7e06d56f7ef5b169718d7bd58c8 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 73c3d1cc5e63a41a408cf321f2105c0d5d589ec0..5e21966ff9c0d354624872f4ef3736ddb2d26ca8 100644
--- a/src/components/search.js
+++ b/src/components/search.js
@@ -4,8 +4,8 @@ import searchStyles from './search.module.css';
import CreateRecruit from './recruit/createRecruit';
import MyChannelModal from './channel/myChannelModal';
import ExistingChannel from './channel/existingChannel';
-
-function Search({ currentPage, onUrlGenerated, onFirstQueryString, onSecondQueryString , fetchCount, setfetchCount}){
+export const SearchContext = createContext();
+function Search({ currentPage, onUrlGenerated, onFirstQueryString, onSecondQueryString }){
const [isModalOpen, setIsModalOpen] = useState(false);
const [ischannelOpen, setchannelModalOpen] = useState(false);
const [searchTerm, setSearchTerm] = useState('');
@@ -13,8 +13,12 @@ function Search({ currentPage, onUrlGenerated, onFirstQueryString, onSecondQuery
const [sortType, setSortType] = useState('');
const [haveChannel, sethaveChannel]=useState(true);
const [myChannelData, setmyChannelData]=useState('');
+ const [fetchCount, setfetchCount] = useState(0);
+ const searchValue = {
+ fetchCount,
+ setfetchCount,
+ };
-
const navigate = useNavigate();
const openModal = () => {
@@ -55,6 +59,7 @@ function Search({ currentPage, onUrlGenerated, onFirstQueryString, onSecondQuery
console.error('Error fetching weekly schedules:', error);
}
};
+
useEffect(() => {
if (fetchCount !== 0) {
fetchChannelData();
diff --git a/src/pages/clientservice.js b/src/pages/clientservice.js
new file mode 100644
index 0000000000000000000000000000000000000000..0806b7f62eb754bc010df508f94f60ab169e6fd9
--- /dev/null
+++ b/src/pages/clientservice.js
@@ -0,0 +1,20 @@
+import mypage_styles from "./mypage.module.css";
+import Header from "../components/Header";
+import React from "react";
+import clientservice_style from "./clientservice.module.css";
+
+function ClientService() {
+ return (
+ <div>
+ <div className={mypage_styles.mypageHeader}><Header></Header></div>
+ <div>
+ <h1 className={clientservice_style.h1}>연락처: 010-7209-1404</h1>
+ <h1 className={clientservice_style.h2}>이메일: sangjun1389@ajou.ac.kr </h1>
+ <h1 className={clientservice_style.h3}>주소: 경기도 수원시 영통구 원천동 월드컵로 206</h1>
+ </div>
+ </div>
+ );
+}
+
+
+export default ClientService;
\ No newline at end of file
diff --git a/src/pages/clientservice.module.css b/src/pages/clientservice.module.css
new file mode 100644
index 0000000000000000000000000000000000000000..c76121ad0ed0ce0756387625c7a9811d0884ff09
--- /dev/null
+++ b/src/pages/clientservice.module.css
@@ -0,0 +1,10 @@
+
+h1 {
+ text-align: center;
+ margin: 60px 0;
+}
+
+h2 {
+ text-align: center;
+ margin: 30px 0;
+}
diff --git a/src/pages/main.js b/src/pages/main.js
index 3ce1b6daf2f142ebe20e35299d6df0369e117939..c78fc8b90aa945b0a5a21d9b88deb4784d993db5 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>
)
}