From 741f9f2833e324d6416b50d853682e0491b9d56b Mon Sep 17 00:00:00 2001 From: gaeon <rkdjs1104@ajou.ac.kr> Date: Sun, 10 Dec 2023 05:03:01 +0900 Subject: [PATCH] design: main, mypage css --- src/components/infiniteScroll.js | 20 +++++++------------ src/components/mainAside.js | 2 +- src/components/mainAside.module.css | 14 ++++++++++--- .../recruit/recruitDetail.module.css | 2 +- src/components/recruit/recruitList.module.css | 2 +- src/pages/mypage.module.css | 9 +-------- 6 files changed, 22 insertions(+), 27 deletions(-) diff --git a/src/components/infiniteScroll.js b/src/components/infiniteScroll.js index 28f00a7..151b2bb 100644 --- a/src/components/infiniteScroll.js +++ b/src/components/infiniteScroll.js @@ -19,10 +19,6 @@ function InfiniteScroll(props){ try{ const response = await fetch(`/api/${page}${queryString1}`); const jsonData = await response.json(); - - const newData = jsonData[page]; - setMinId(jsonData['minId']); - setMinDate(jsonData['minDate']); if(page==='channels'){ setMinDate(jsonData['minDate']); const newData = jsonData[page]; @@ -79,14 +75,9 @@ function InfiniteScroll(props){ setIsLoading(true); - try{ - const response = await fetch(`/api/${page}?minId=${minId}${queryString2}`); - console.log(`/api/${page}?minId=${minId}${queryString2}`); - const jsonData = await response.json(); - const newData = jsonData[page]; - setMinId(jsonData['minId']); - + try{ + if(page==='channels'){ const response = await fetch(`/api/${page}?${min}=${minDate}${queryString2}`); const jsonData = await response.json(); @@ -109,8 +100,11 @@ function InfiniteScroll(props){ } setItems((prevItem) => [...prevItem, ...components]); } - }else { - + }else if(page==='recruits'){ + const response = await fetch(`/api/${page}?${min}=${minId}${queryString2}`); + const jsonData = await response.json(); + setMinId(jsonData['minId']); + const newData = jsonData[page]; if(newData.length > 0) { const components = newData.map((item) => ( <PageItem data={item}/> diff --git a/src/components/mainAside.js b/src/components/mainAside.js index d029df0..72c0915 100644 --- a/src/components/mainAside.js +++ b/src/components/mainAside.js @@ -28,7 +28,6 @@ function NextSchedule(props) { function Notice(props){ const { subscribeNotices } = props.data; - if (!subscribeNotices || !Array.isArray(subscribeNotices) || subscribeNotices.length === 0) { return <p className={styles.noContent}>최근 공지가 없습니다.</p>; } @@ -36,6 +35,7 @@ function Notice(props){ const sortedNotice = subscribeNotices.sort((a, b) => a.date - b.date); const noticeComponents = sortedNotice.map((notice) => ( <p className={styles.noticeContent}> + <img className={styles.img} src={notice.channelIconImg} alt="프로필"></img> <span className={styles.channel}>{notice.channelNickname}</span> <span className={styles.noticeTitle}>{notice.title}</span> <span className={styles.content}>{notice.content}</span> diff --git a/src/components/mainAside.module.css b/src/components/mainAside.module.css index 82edede..b3edf68 100644 --- a/src/components/mainAside.module.css +++ b/src/components/mainAside.module.css @@ -32,6 +32,7 @@ flex: 1; height: 50vh; overflow-y: auto; + overflow-x:hidden; padding: 10px; margin: 10px; width:100%; @@ -54,10 +55,11 @@ display: grid; grid-template-columns: 1fr; /* 한 개의 열 */ - width: 300px; + width: 400px; height: 100px; border: 2px solid #d6d6d6; border-radius: 3px; + margin-bottom: 10px; } .title{ @@ -67,14 +69,17 @@ .channel{ + font-weight: bold; + margin-left:15px; } .noticeTitle{ - + margin-left:30px; } .content{ - + margin-left:30px; + font-size:15px; } .nextSchedule::-webkit-scrollbar, .notice::-webkit-scrollbar{ @@ -90,4 +95,7 @@ background-color: grey; border-radius: 10px; box-shadow: inset 0px 0px 5px white; +} +.img{ + width:100px; } \ No newline at end of file diff --git a/src/components/recruit/recruitDetail.module.css b/src/components/recruit/recruitDetail.module.css index 254ed07..c7d8c81 100644 --- a/src/components/recruit/recruitDetail.module.css +++ b/src/components/recruit/recruitDetail.module.css @@ -108,7 +108,7 @@ align-items: center; /* 세로 방향에서 가운데 정렬. */ justify-content: center; - width: 67px; + width: 90px; height: 33px; margin-left: auto; diff --git a/src/components/recruit/recruitList.module.css b/src/components/recruit/recruitList.module.css index c64f81f..7e6aa53 100644 --- a/src/components/recruit/recruitList.module.css +++ b/src/components/recruit/recruitList.module.css @@ -74,7 +74,7 @@ align-items: center; /* 세로 방향에서 가운데 정렬. */ justify-content: center; - width: 67px; + width: 90px; height: 33px; margin-left: auto; diff --git a/src/pages/mypage.module.css b/src/pages/mypage.module.css index 71c8ac9..efa94c9 100644 --- a/src/pages/mypage.module.css +++ b/src/pages/mypage.module.css @@ -1,17 +1,10 @@ -.myprofile_body { - display: flex; - justify-content: center; - - height: 100vh; /* 뷰포트 높이의 100%로 설정하여 전체 화면을 사용 */ - -} .profilebox{ border-radius: 0px; border: 2px solid #ccc; /* border-width, border-style, border-color를 한 번에 설정 */ padding: 20px; - height: 20%; + height: 140px; margin-bottom:8%; -- GitLab