diff --git a/src/App.js b/src/App.js
index fe86da98f942542d69f0a60c48abf6a5226317d1..caf74b1c3e9b6d7d500c24b981f94e705b8a1c61 100644
--- a/src/App.js
+++ b/src/App.js
@@ -8,6 +8,7 @@ import Recruit from './pages/recruit';
import Subscribe from './pages/subscribe';
//import Clientservice from './pages/clientservice';
import Main from './pages/main';
+
import Header from './components/Header';
export const AuthContext = createContext();
@@ -52,9 +53,11 @@ function App() {
path="/users/login"
element={<Login onLogin={handleLoginData} />}
/>
+
<Route path="/users" element={<Join />} />
<Route path="/recruits" element={<Recruit />} />
<Route path="/mypage" element={<Mypage />} />
+
<Route path='/subscribes'element={<Subscribe />}/>
{/* Other routes */}
</Routes>
diff --git a/src/components/Header.module.css b/src/components/Header.module.css
index 609b919b0a06f649db314c8318cb86ea31cd951d..bc87b6acbc9ff12a524cf56bee449b167bcc0596 100644
--- a/src/components/Header.module.css
+++ b/src/components/Header.module.css
@@ -10,6 +10,8 @@ header {
font-weight: bold;
position: sticky;
top: 0;
+ z-index:2;
+
}
@@ -33,6 +35,7 @@ header {
display: flex;
align-items: center;
width: 100%;
+
}
@@ -53,7 +56,7 @@ header {
.header_nav li:last-child a img {
height: 30px;
width: auto;
- z-index: 20 !important;
+
}
.user_info{
diff --git a/src/components/calendar/addModal.module.css b/src/components/calendar/addModal.module.css
index d96f38f948485c51f1a57fe4cd41d0abbddefbe9..3cc4e111435595af8b0e703052b1917893386164 100644
--- a/src/components/calendar/addModal.module.css
+++ b/src/components/calendar/addModal.module.css
@@ -10,11 +10,12 @@
background: rgba(0, 0, 0, 0.5); /* 반투명한 배경 */
justify-content: center;
align-items: center;
- z-index: 1000;
+ z-index: 1000 !important;
}
.modal.open{
display: flex;
+ z-index: 1000 !important;
}
.modal_content {
@@ -23,6 +24,7 @@
border-radius: 5px;
position: relative;
width: 300px;
+ z-index: 1000 !important;
}
diff --git a/src/components/calendar/deleteModal.module.css b/src/components/calendar/deleteModal.module.css
index fddf08eeb7340e4df3f790873cbe8672fdcc1463..88205de2faa122efeee02af2d7ed3792dcdd8622 100644
--- a/src/components/calendar/deleteModal.module.css
+++ b/src/components/calendar/deleteModal.module.css
@@ -10,11 +10,13 @@
background: rgba(0, 0, 0, 0.5); /* 반투명한 배경 */
justify-content: center;
align-items: center;
- z-index: 4;
+
+ z-index: 1000 !important;
}
.Demodal.open{
display: flex;
+ z-index: 1000 !important;
}
@@ -32,6 +34,7 @@
display: flex;
flex-direction: column;
align-items: center;
+ z-index: 1000 !important;
}
.Demodal_content button{
background-color: #8393BE;
diff --git a/src/components/calendar/inquiryListModal.module.css b/src/components/calendar/inquiryListModal.module.css
index 76ba5ba5f886a1966b252b748abc901525f57c21..0d88715377187e3a7c153945f6c48af16264efe0 100644
--- a/src/components/calendar/inquiryListModal.module.css
+++ b/src/components/calendar/inquiryListModal.module.css
@@ -13,6 +13,7 @@
.modal.open{
display: flex;
+ z-index: 1000;
}
@@ -32,6 +33,7 @@
overflow-y: auto;
max-height: 540px;
width: 500px;
+ z-index: 1000;
}
diff --git a/src/components/channel/addNotice.module.css b/src/components/channel/addNotice.module.css
index 5caf56c461f74988ba9cd77b94512bde24771233..0d410ea04b75f0935987a6fd255d0459a2177224 100644
--- a/src/components/channel/addNotice.module.css
+++ b/src/components/channel/addNotice.module.css
@@ -6,7 +6,7 @@
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
- z-index: 999;
+ z-index: 100000;
}
.modal {
@@ -22,7 +22,7 @@
transform: translate(-50%, -50%);
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
- z-index: 1000;
+ z-index: 100000;
overflow-y: auto;
background: #FFFFFF;
diff --git a/src/components/channel/channel.js b/src/components/channel/channel.js
index 09233c67a40b85472b66bf4bf330ba16667d52e4..a59b239c0188074667b79b63da129f8d6de0a80f 100644
--- a/src/components/channel/channel.js
+++ b/src/components/channel/channel.js
@@ -5,42 +5,50 @@ import { click } from '@testing-library/user-event/dist/click';
import { PageItem } from '../recruit/my_recruitList';
import Notice from './notice';
-const Channel=({isOpen, onClose, data})=>{
+const Channel=({data})=>{
const [clickcomponent, setClickComponent] = useState('recruits');
const exampleData={"recruits": [
{
- "id": 2,
- "title": "[방탈출]홍대 거상 2인구합니다",
- "content": "나이, 성별 상관없습니다. 즐겁게 하실 분 구해요~",
- "peopleNum": 4,
- "participateNum": 1,
- "regionFirst": "강원도",
- "regionSecond": "양양군",
- "startDate": "2023-10-17",
- "endDate": "2023-12-31",
- "timeCategory": "D",
- "startTime": "13:00:00",
- "endTime": "16:00:00",
- "state": "Recruiting",
- "Writer": "jk",
- "imagePath": "uploads/recruits/default.jpg"
+ "id": 2,
+ "title": "[방탈출]홍대 거상 2인구합니다",
+ "content": "나이, 성별 상관없습니다. 즐겁게 하실 분 구해요~",
+ "peopleNum": 4,
+ "participateNum": 1,
+ "regionFirst": "강원도",
+ "regionSecond": "양양군",
+ "startDate": "2023-10-17",
+ "endDate": "2023-12-31",
+ "timeCategory": "D",
+ "startTime": "13:00:00",
+ "endTime": "16:00:00",
+ "state": "Recruiting",
+ "Writer": {
+ "id":"jojojo",
+ "nickname":"jk"
+ },
+ "participants":[1,3,323,108],
+ "imagePath": "uploads/recruits/default.jpg"
},
{
- "id": 2,
- "title": "[방탈출]홍대 거상 2인구합니다",
- "content": "나이, 성별 상관없습니다. 즐겁게 하실 분 구해요~",
- "peopleNum": 4,
- "participateNum": 1,
- "regionFirst": "강원도",
- "regionSecond": "양양군",
- "startDate": "2023-10-17",
- "endDate": "2023-12-31",
- "timeCategory": "TBD",
- "startTime": null,
- "endTime": null,
- "state": "Recruiting",
- "Writer": "jk",
- "imagePath": "uploads/recruits/default.jpg"
+ "id": 2,
+ "title": "[방탈출]홍대 거상 2인구합니다",
+ "content": "나이, 성별 상관없습니다. 즐겁게 하실 분 구해요~",
+ "peopleNum": 4,
+ "participateNum": 1,
+ "regionFirst": "강원도",
+ "regionSecond": "양양군",
+ "startDate": "2023-10-17",
+ "endDate": "2023-12-31",
+ "timeCategory": "D",
+ "startTime": "13:00:00",
+ "endTime": "16:00:00",
+ "state": "Recruiting",
+ "Writer": {
+ "id":"jojojo",
+ "nickname":"jk"
+ },
+ "participants":[1,3,323,108],
+ "imagePath": "uploads/recruits/default.jpg"
}
]}
const handleClick=(e)=>{
@@ -92,10 +100,10 @@ function handleSubscribe() {
return(
- <div className={`${channel_styles.channelModal} ${isOpen ? channel_styles.open : ''}`}>
+ <div className={channel_styles.channelModal}>
<div className={channel_styles.channelContent}>
{/* <Header></Header> */}
- <button className={channel_styles.closeBtn} onClick={onClose}>X</button>
+ {/* <button className={channel_styles.closeBtn} onClick={onClose}>X</button> */}
<div className={channel_styles.channelbox}>
<div className={channel_styles.channelpicture}>
diff --git a/src/components/channel/channel.module.css b/src/components/channel/channel.module.css
index 88052bf83cb08997f7948133a5465ce131d5b863..076197974c5467bde870ad3e7e37ad43554ab359 100644
--- a/src/components/channel/channel.module.css
+++ b/src/components/channel/channel.module.css
@@ -1,31 +1,21 @@
-.channelModal{
- display: none;
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background: rgba(0, 0, 0, 0.5); /* 반투명한 배경 */
- justify-content: center;
- align-items: center;
- z-index: 1000;
-}
-.channelModal.open{
- display: flex;
-}
.channelContent {
background-color: white;
overflow-y: auto;
width:100%;
- height:85%
+ height:85%;
+ z-index:1;
}
+.channelModal{
+ z-index:1;
+}
.channelbox{
margin-left:150px;
margin-right:250px;
+ z-index:1;
}
.channelpicture img{
height:400px;
diff --git a/src/components/channel/channelList.js b/src/components/channel/channelList.js
index 2d5a11921ccb9f389a09318db254701103ddfef1..6974115458e261413b20dc39924317dca4a6e923 100644
--- a/src/components/channel/channelList.js
+++ b/src/components/channel/channelList.js
@@ -2,8 +2,9 @@ import React, { useState } from 'react';
import channelListStyles from './channelList.module.css';
import InfiniteScroll from '../infiniteScroll';
import Channel from './channel';
-
-function ChannelItem(){
+import ChannelListModal from './channelListModal';
+function ChannelItem(props){
+
const [isModalOpen, setIsModalOpen] = useState(false);
const [sendData, setSendData]=useState('');
const openModal = () => {
@@ -17,7 +18,7 @@ function ChannelItem(){
try {
// 아래 URL을 실제 사용하는 API 엔드포인트로 변경하세요.
const apiUrl = `/api/channels/${props.userID}`;
-
+ openModal();
fetch(apiUrl, {
method: 'GET',
headers: {
@@ -47,76 +48,26 @@ function ChannelItem(){
console.error('Error:', error);
}
}
- const props =
- {
- "channels": {
- "data": {
- "userID": 5,
- "title": "채널명",
- "content": "소개글",
- "imagePath": "uploads/recruits/default.jpg",
- "follower": 15,
- "recruitsNum": 2
- },
- "recruits": [
- {
- "id": 3,
- "title": "[방탈출]홍대 거상 2인구합니다",
- "content": "나이, 성별 상관없습니다. 즐겁게 하실 분 구해요~",
- "peopleNum": 4,
- "participateNum": 1,
- "regionFirst": "강원도",
- "regionSecond": "양양군",
- "startDate": "2023-10-17",
- "endDate": "2023-12-31",
- "timeCategory": "D",
- "startTime": "13:00:00",
- "endTime": "16:00:00",
- "state": "Recruiting",
- "Writer": "jk",
- "imagePath": "uploads/recruits/default.jpg"
- },
- {
- "id": 2,
- "title": "[방탈출]홍대 거상 2인구합니다",
- "content": "나이, 성별 상관없습니다. 즐겁게 하실 분 구해요~",
- "peopleNum": 4,
- "participateNum": 1,
- "regionFirst": "강원도",
- "regionSecond": "양양군",
- "startDate": "2023-10-17",
- "endDate": "2023-12-31",
- "timeCategory": "TBD",
- "startTime": '',
- "endTime": '',
- "state": "Recruiting",
- "Writer": "jk",
- "imagePath": "uploads/recruits/default.jpg"
- }
- ],
- "notices": [
- {
- "id": "1",
- "title": "title1",
- "content": "content1",
- "image": "uploads/recruits/default.jpg"
- },
- {
- "id": "2",
- "title": "title2",
- "content": "content2",
- "image": "uploads/recruits/default.jpg"
- }
- ]
- }
- }
+ // const props =
+
+
+ // {
+ // "userID": 5,
+ // "nickname":"liel",
+ // "title": "채널명",
+ // "content": "소개글",
+ // "imagePath": "uploads/recruits/default.jpg",
+ // }
+
+
return (
- <div>
- <div className={channelListStyles.channel}>
+ <div className={channelListStyles.flex}>
+
+ <span className={channelListStyles.channel}>
<div className={channelListStyles.container} onClick={handleClick}>
<div className={channelListStyles.imgContainer}>
- {props.imagePath ? (<img className={channelListStyles.img} src={'/id.png'} alt='recruit img' />) : (<img src={props.imagePath}/>)}
+ {props.imagePath ? (<img className={channelListStyles.img} src={'/id.png'} alt='recruit img' />) : (<img src={'/id.png'}/>)}
</div>
<div className={channelListStyles.mouseover}>
<p className={channelListStyles.content}>
@@ -124,13 +75,13 @@ function ChannelItem(){
</p>
</div>
<div className={channelListStyles.title}>
- {props.title}
+ 사랑유치원
</div>
</div>
- </div>
+ </span>
<div className={channelListStyles.bringModal}>
- <Channel
+ <ChannelListModal
isOpen={isModalOpen} onClose={closeModal} data={sendData}/>
</div>
</div>
diff --git a/src/components/channel/channelList.module.css b/src/components/channel/channelList.module.css
index 4c0629d9612431117eae22c8607d8e3faa0d0af3..d144ede9f7f419718f60a8d00b332d789cf6eb1b 100644
--- a/src/components/channel/channelList.module.css
+++ b/src/components/channel/channelList.module.css
@@ -1,10 +1,19 @@
/* channelList.module.css */
-
+.flex{
+ display: flex;
+
+}
.container {
position: relative;
z-index:1;
+ width:370px;
+ margin-left:52px;
+ margin-top:5%;
+
}
+
+
.mouseover {
position: absolute;
top:0;
@@ -21,13 +30,13 @@
position: relative;
overflow: hidden;
object-fit: cover;
- margin-bottom: 10px;
- width: 30%;
+
+ width: 100%;
}
.imgContainer img {
width: 100%;
- height: 240px;
+ height: 250px;
transition: transform 0.3s ease-in-out; /* 크기 변환에 애니메이션 추가 */
}
@@ -60,6 +69,3 @@
.overlay{
background-color: rgba(0, 0, 0, 0.7);
}
-.bringModal{
- z-index:10000;
-}
\ No newline at end of file
diff --git a/src/components/channel/channelListModal.js b/src/components/channel/channelListModal.js
new file mode 100644
index 0000000000000000000000000000000000000000..e9f0938dd889375c0b4fb902ea2be1e03950a5af
--- /dev/null
+++ b/src/components/channel/channelListModal.js
@@ -0,0 +1,14 @@
+import React, {useState} from 'react';
+import Channel from './channel';
+import channelListModalStyles from './channelListModal.module.css';
+const ChannelListModal=({isOpen, onClose, data})=>{
+ return(
+ <div className={`${channelListModalStyles.modal} ${isOpen ? channelListModalStyles.open : ''}`}>
+ <div className={channelListModalStyles.content}>
+ <button className={channelListModalStyles.closeBtn} onClick={onClose}>X</button>
+ <Channel data={data}></Channel>
+ </div>
+ </div>
+ )
+}
+export default ChannelListModal;
\ No newline at end of file
diff --git a/src/components/channel/channelListModal.module.css b/src/components/channel/channelListModal.module.css
new file mode 100644
index 0000000000000000000000000000000000000000..677a46a40371817444fdaf794bf9bc6ee0fbc00c
--- /dev/null
+++ b/src/components/channel/channelListModal.module.css
@@ -0,0 +1,40 @@
+.modal{
+ display: none;
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: rgba(0, 0, 0, 0.5); /* 반투명한 배경 */
+ justify-content: center;
+ align-items: center;
+ z-index: 1000;
+}
+
+.modal.open{
+ display: flex;
+}
+.content {
+ background-color: white;
+ overflow-y: auto;
+ width:100%;
+ height:85%
+
+}
+.closeBtn{
+
+ margin-top:15px;
+ width:30px;
+ height:30px;
+ margin-left:49%;
+ border:none;
+ background-color: #F97E7E;
+ color: white;
+ cursor: pointer;
+ margin-bottom:10px;
+
+ border-radius: 50%;
+ box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* 그림자 추가 */
+ transition: background-color 0.3s, color 0.3s, transform 0.3s;
+
+}
\ No newline at end of file
diff --git a/src/components/channel/existingChannel.js b/src/components/channel/existingChannel.js
index 520dc1c2fa2fb9aaa62b2ae0ffbda995f9691f5b..114d2a1f9958ffc7a691abdf789a939b8c73ea8b 100644
--- a/src/components/channel/existingChannel.js
+++ b/src/components/channel/existingChannel.js
@@ -8,7 +8,7 @@ import ChangeIcon from './iconModal';
import ChangePicture from './pictureModal';
import { AuthContext } from '../../App';
-const ExistingChannel=({isOpen, onClose,myChannelData})=>{
+const ExistingChannel=({isOpen, onClose, myChannelData})=>{
const [IsModal, setIsModal]=useState(false);
const { userData } = useContext(AuthContext);
const [changePicture, setChangePicture]=useState('');
@@ -32,15 +32,15 @@ const ExistingChannel=({isOpen, onClose,myChannelData})=>{
setChangeIcon(false);
}
const handleClick=()=>{
- onClose();
+
openModal();
}
const handlePictureClick=()=>{
- onClose();
+
openChangePicture();
}
const handleIconClick=()=>{
- onClose();
+
openChangeIcon();
}
const handleDeleteChannel = async () => {
@@ -74,16 +74,16 @@ const ExistingChannel=({isOpen, onClose,myChannelData})=>{
<div className={`${existingStyles.channelModal} ${isOpen ? existingStyles.open : ''}`}>
<div className={existingStyles.channelContent}>
+
<button className={existingStyles.addcommunity} onClick={handleClick}>공지 추가</button>
<button className={existingStyles.uploadPicture} onClick={handlePictureClick}>배경 사진 변경</button>
<button className={existingStyles.uploadicon} onClick={handleIconClick}>아이콘 사진 변경</button>
<button className={existingStyles.deleteBtn} onClick={handleDeleteChannel}>채널 삭제</button>
- {/* <button className={existingStyles.closeBtn} onClick={onClose}>X</button> */}
+ <button className={existingStyles.closeBtn} onClick={onClose}>X</button>
<div className={existingStyles.bringModal}>
- <Channel isOpen={true} onClose={onClose} data={myChannelData} ></Channel>
-
+ <Channel data={myChannelData} ></Channel>
</div>
</div>
diff --git a/src/components/channel/existingChannel.module.css b/src/components/channel/existingChannel.module.css
index bbdb4213ece589699c4e49406a82e72a8b2e64a0..983c224bc6fdc9f41b0f8fa412fc43a121fda56d 100644
--- a/src/components/channel/existingChannel.module.css
+++ b/src/components/channel/existingChannel.module.css
@@ -26,7 +26,7 @@
margin-top:15px;
width:30px;
height:30px;
-
+ margin-left:49%;
border:none;
background-color: #F97E7E;
color: white;
@@ -54,7 +54,7 @@
}
.addcommunity{
- margin-left:62%;
+ margin-left:11%;
margin-top:10px;
width:80px;
height:30px;
diff --git a/src/components/channel/iconModal.js b/src/components/channel/iconModal.js
index a6d9822a44c48efc7787b0644fc8c8d2c98f4ea8..ae5233ce9280dc686ccd13aa133bd4d811b37474 100644
--- a/src/components/channel/iconModal.js
+++ b/src/components/channel/iconModal.js
@@ -18,7 +18,7 @@ const ChangeIcon=({ isOpen, onClose})=> {
// 여기에 서버의 프로필 수정 API 엔드포인트를 입력합니다.
- const response = await fetch('api/mypage/profile', {
+ const response = await fetch('api/mypage/icon', {
method: 'POST',
body: formData,
// 필요에 따라 다른 헤더 설정이나 인증 토큰 등을 추가할 수 있습니다.
diff --git a/src/components/channel/iconModal.module.css b/src/components/channel/iconModal.module.css
index fce2ce5c937207a863aae7ccf51b7466b80e1211..013b7f894cff3064a2ee07fdfbad62206fa12b8b 100644
--- a/src/components/channel/iconModal.module.css
+++ b/src/components/channel/iconModal.module.css
@@ -13,12 +13,14 @@
.editModal.open{
display: flex;
+ z-index: 100000;
}
.modal_content{
background-color: white;
width:400px;
height:300px;
- padding:10%
+ padding:10%;
+
}
diff --git a/src/components/channel/pictureModal.js b/src/components/channel/pictureModal.js
index a76a7139e8ee7e7dcea5980f585f76917d6bf4dc..70f7a5daa4e8d90dd04c63409a06a96736818de5 100644
--- a/src/components/channel/pictureModal.js
+++ b/src/components/channel/pictureModal.js
@@ -18,7 +18,7 @@ const ChangePicture=({ isOpen, onClose})=> {
// 여기에 서버의 프로필 수정 API 엔드포인트를 입력합니다.
- const response = await fetch('api/mypage/profile', {
+ const response = await fetch('api/mypage/thumbnail', {
method: 'POST',
body: formData,
// 필요에 따라 다른 헤더 설정이나 인증 토큰 등을 추가할 수 있습니다.
diff --git a/src/components/channel/pictureModal.module.css b/src/components/channel/pictureModal.module.css
index 59b9862d0736bde04e8f3846609959e494cdb2ef..ba84512f28a972e6c102f70a85bd8e3c12997fdc 100644
--- a/src/components/channel/pictureModal.module.css
+++ b/src/components/channel/pictureModal.module.css
@@ -13,18 +13,20 @@
.editModal.open{
display: flex;
+ z-index: 100000;
}
.modal_content{
background-color: white;
width:400px;
height:300px;
- padding:10%
+ padding:10%;
+
}
.profile_image {
- width:150px;
+ width:200px;
height: 150px;
overflow: hidden;
border-radius: 50%;
diff --git a/src/components/infiniteScroll.js b/src/components/infiniteScroll.js
index b61802cbe10d9ce6ebe26019a1394ff9e3cfe9d2..f2991687088ec22aab4a1c704ecea3c7850a8b9f 100644
--- a/src/components/infiniteScroll.js
+++ b/src/components/infiniteScroll.js
@@ -1,23 +1,33 @@
import React, { useState, useEffect } from 'react';
import {PageItem} from "./recruit/recruitList";
-//import {PageItem} from "./subscribe/subscribeList"
import InfiniteScrollStyles from './infiniteScroll.module.css'
import {ChannelItem} from "./channel/channelList";
+
function InfiniteScroll(props){
const [items, setItems] = useState([]);
const [minId, setMinId] = useState(0);
const [isLoading, setIsLoading] = useState(false);
const page = props.pagename;
+ const queryString1 = props.queryString1;
+ const queryString2 = props.queryString2;
const initialFetchData = async ()=>{
try{
- const response = await fetch(`/api/${page}`);
+ const response = await fetch(`/api/${page}${queryString1}`);
+ console.log(`/api/${page}${queryString1}`);
const jsonData = await response.json();
- setMinId(jsonData['minId']);
const newData = jsonData[page];
- if (page==='recruits'){
-
+ setMinId(jsonData['minId']);
+
+ if(page==='channels'){
+ if(newData.length>0){
+ const components=newData.map((item)=>(
+ <ChannelItem data={item}/>
+ ));
+ setItems(prevItem => [...prevItem, ...components]);
+ }
+ }else {
if(newData.length > 0) {
const components = newData.map((item) => (
<PageItem data={item}/>
@@ -25,16 +35,7 @@ function InfiniteScroll(props){
setItems(prevItem => [...prevItem, ...components]);
}
- }
- else if(page==='channels'){
- if(newData.length>0){
- const components=newData.map((item)=>(
- <ChannelItem data={item}/>
- ));
- setItems(prevItem => [...prevItem, ...components]);
- }
-
- }
+ }
} catch(error){
console.log('Error during fetch:', error);
@@ -43,7 +44,7 @@ function InfiniteScroll(props){
useEffect(() => {
initialFetchData(); // 최초 렌더링 시에 데이터 가져오기
- }, []);
+ }, [page, queryString1, queryString2]);
const fetchData = async ()=>{
if (isLoading || minId === 0) return;
@@ -51,14 +52,32 @@ function InfiniteScroll(props){
setIsLoading(true);
try{
- const response = await fetch(`/api/${page}&minId=${minId}`);
+ 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']);
-
- if (page==='recruits'){
-
+
+ if(page==='channels'){
+ if (newData.length > 0) {
+ const components = [];
+ for (let i = 0; i < newData.length; i += 2) {
+ const component = (
+
+ <div className={InfiniteScrollStyles.itemContainer}>
+ <div className={InfiniteScrollStyles.firstitem}>
+ <ChannelItem props={newData[i]} /></div>
+ <div className={InfiniteScrollStyles.seconditem}>{i + 1 < newData.length && <ChannelItem props={newData[i + 1]} />}</div>
+ </div>
+
+ );
+ components.push(component);
+ console.log('ne', newData[i]);
+ }
+ setItems((prevItem) => [...prevItem, ...components]);
+ }
+ }else {
if(newData.length > 0) {
const components = newData.map((item) => (
<PageItem data={item}/>
@@ -66,21 +85,8 @@ function InfiniteScroll(props){
setItems(prevItem => [...prevItem, ...components]);
}
- }
- else if(page==='channels'){
- if(newData.length>0){
- for (let i = 0; i < newData.length; i += 2) {
- const component = (
- <div key={i} className="channelItemRow">
- <ChannelItem data={newData[i]} />
- {i + 1 < newData.length && <ChannelItem data={newData[i + 1]} />}
- </div>
- );
- setItems((prevItem) => [...prevItem, component]);
- }
- }
+ }
- }
} catch(error){
console.log('Error during fetch:', error);
} finally{
@@ -91,8 +97,8 @@ function InfiniteScroll(props){
// 스크롤 이벤트 감지
const handleScroll = () => {
if (
- window.innerHeight + document.documentElement.scrollTop + 100 >=
- document.documentElement.offsetHeight
+ window.innerHeight + window.scrollY + 100 >=
+ document.body.offsetHeight
&& !isLoading
) {
// 스크롤이 페이지 하단에 도달하면 데이터를 가져옴
diff --git a/src/components/infiniteScroll.module.css b/src/components/infiniteScroll.module.css
index 2f6da344ee0727aa0a87247f537c9cc916e5882b..f741408555989864f1314e36d3e2ebc3cc7ae395 100644
--- a/src/components/infiniteScroll.module.css
+++ b/src/components/infiniteScroll.module.css
@@ -3,17 +3,10 @@
}
/* InfiniteScroll.module.css */
-.channelItemRow {
- display: flex;
- margin-bottom: 20px; /* 원하는 간격으로 조절 */
- }
-
- .channelItemRow > * {
- flex: 1;
- margin-right: 10px; /* 각 ChannelItem 간격 조절 */
- }
-
- .channelItemRow > *:last-child {
- margin-right: 0;
- }
-
\ No newline at end of file
+.itemContainer {
+ display: flex;
+ /* Add other flex properties as needed */
+}
+.firstitem{
+ margin-left:18%;
+}
diff --git a/src/components/logout.module.css b/src/components/logout.module.css
index 15ac9f4232c7a735c23cc7c6aa30c6ec39ff5680..9bfbd4008efef368908c08d5c345934faa497139 100644
--- a/src/components/logout.module.css
+++ b/src/components/logout.module.css
@@ -11,7 +11,7 @@
background: rgba(0, 0, 0, 0.5); /* 반투명한 배경 */
justify-content: center;
align-items: center;
- z-index: 1000;
+
}
.logoutmodal.open{
@@ -28,7 +28,7 @@
display: flex;
align-items: center;
justify-content: center;
- z-index:1000;
+
}
.lomodal {
@@ -38,7 +38,7 @@
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
text-align: center;
- z-index:1000;
+
}
.lomodal p {
diff --git a/src/components/recruit/my_recruitList.js b/src/components/recruit/my_recruitList.js
index b55061ef4ce8720e95126686f5a04e7874878500..d95f684878f91cc1f3acdeec5afd87fff62ee4de 100644
--- a/src/components/recruit/my_recruitList.js
+++ b/src/components/recruit/my_recruitList.js
@@ -24,7 +24,7 @@ function PageItem(props){
} else if(props.props.state === 'Completed'){
state = '활동 종료';
}
- console.log('이건',state);
+
return (
<div className={recruitListStyles.recruit}>
diff --git a/src/components/search.js b/src/components/search.js
index c930e9b33c5b1c1650ec02a8548fc2a70634ca15..c712ee36734347bde5e80f1a1418c8777afd78a4 100644
--- a/src/components/search.js
+++ b/src/components/search.js
@@ -12,7 +12,7 @@ function Search({ currentPage, onUrlGenerated }){
const [searchTerm, setSearchTerm] = useState('');
const [searchType, setSearchType] = useState('title');
const [sortType, setSortType] = useState('');
- const [haveChannel, sethaveChannel]=useState(true);
+ const [haveChannel, sethaveChannel]=useState(false);
const [myChannelData, setmyChannelData]=useState('');
const navigate = useNavigate();
@@ -35,7 +35,7 @@ function Search({ currentPage, onUrlGenerated }){
const fetchChannelData = async () => {
try {
openModal();
- const response = await fetch('api/channels');
+ const response = await fetch('/api/channels/mychannel');
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
@@ -43,7 +43,7 @@ function Search({ currentPage, onUrlGenerated }){
const backendData = await response.json();
setmyChannelData(backendData);
- if (backendData.data && backendData.data.channelState) {
+ if (backendData.data ) {
sethaveChannel(true);
}
else{
diff --git a/src/pages/main.module.css b/src/pages/main.module.css
index 6223bdcbb24380444cd2497699b2648887cc3fa5..85b981d6abbdd1da1ac6c4d0a33ae7919376197f 100644
--- a/src/pages/main.module.css
+++ b/src/pages/main.module.css
@@ -5,14 +5,17 @@
}
.main_header{
margin-bottom: 10px;
+ z-index: 1;
}
.content {
display: flex;
flex: 1; /* Header와 content를 나누는 부분을 확장하도록 설정 */
+
}
.section {
flex: 8;
+
}
.aside {
diff --git a/src/pages/mypage.js b/src/pages/mypage.js
index c3dbce76e1833a03515e1223485684dff272f75a..38c6d7d0629dc03d40a6536c81e4dfae51bb3f6a 100644
--- a/src/pages/mypage.js
+++ b/src/pages/mypage.js
@@ -88,7 +88,7 @@ const Mypage=()=>{
setProcessing(true);
// 여기에 서버의 회원탈퇴 API 엔드포인트를 입력합니다.
- const response = await fetch('api/mypage/withdrawal', {
+ const response = await fetch(`api/mypage/${userData.userId}`, {
method: 'DELETE',
headers: {
'Content-Type': 'application/json',
diff --git a/src/pages/subscribe.js b/src/pages/subscribe.js
index 9e47ad3ccf913eb9ee3b0180dd556b9fd45f1628..4533810f59c9e15ef85b7d9bb7c121b4e253659b 100644
--- a/src/pages/subscribe.js
+++ b/src/pages/subscribe.js
@@ -8,7 +8,7 @@ function Subscribe(){
<div>
<Header></Header>
<Search currentPage='subscribes'></Search>
- <ChannelItem></ChannelItem>
+ <ChannelList></ChannelList>
</div>
)
}