diff --git a/src/components/channel/channelList.js b/src/components/channel/channelList.js
index 6974115458e261413b20dc39924317dca4a6e923..3f5cb46accbe7f8fd3d64461e40ce88b7c20730b 100644
--- a/src/components/channel/channelList.js
+++ b/src/components/channel/channelList.js
@@ -40,11 +40,9 @@ function ChannelItem(props){
openModal();
})
.catch(error => {
- // 에러가 발생한 경우에 수행할 작업을 여기에 추가하세요.
console.error('Error:', error);
});
} catch (error) {
- // 다른 에러가 발생한 경우에 수행할 작업을 여기에 추가하세요.
console.error('Error:', error);
}
}
@@ -67,15 +65,15 @@ function ChannelItem(props){
<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={'/id.png'}/>)}
+ {props.thumbnailImgPath ? (<img className={channelListStyles.img} src={props.thumbnailImgPath} alt='recruit img' />) : (<img src={props.thumbnailImgPath} />)}
</div>
<div className={channelListStyles.mouseover}>
<p className={channelListStyles.content}>
- {props.content}
+ {props.props.content}
</p>
</div>
<div className={channelListStyles.title}>
- 사랑유치원
+ {props.props.title}
</div>
</div>
@@ -91,7 +89,9 @@ function ChannelItem(props){
function ChannelList(){
return(
<div className={channelListStyles.RecruitList}>
- <InfiniteScroll pagename='channels' />
+ <InfiniteScroll pagename='channels'
+ queryString1=""
+ queryString2="" />
</div>
)
}
diff --git a/src/components/channel/channelList.module.css b/src/components/channel/channelList.module.css
index d144ede9f7f419718f60a8d00b332d789cf6eb1b..b55ced8f9e1b9cdf485eb06648d20c4fd3e52c65 100644
--- a/src/components/channel/channelList.module.css
+++ b/src/components/channel/channelList.module.css
@@ -50,11 +50,12 @@
width: 100%;
height: 240px;
- background: url('../../../public/id.png') center/cover;
+
filter: blur(5px); /* 블러 효과 정도 조절 가능 */
}
.title{
- font-size:20px;
+ font-size:23px;
+ font-weight: bold;
}
.channelModal{
@@ -69,3 +70,8 @@
.overlay{
background-color: rgba(0, 0, 0, 0.7);
}
+.content{
+ font-size:20px;
+ margin-top:20px;
+ margin-left:10px;
+}
\ No newline at end of file
diff --git a/src/components/channel/createChannel.js b/src/components/channel/createChannel.js
index ee94cfa67d4a1db07958cb371d0a8ad7e5ca0675..6fee6709ce713920328ed90a0074f9f5e3c258ad 100644
--- a/src/components/channel/createChannel.js
+++ b/src/components/channel/createChannel.js
@@ -18,7 +18,7 @@ function CreateChannel({ isOpen, onClose }){
const handleSubmit = async (e) => {
- e.preventDefault();
+
if(formData.title === ''){
alert('채널명을 입력해주세요.');
@@ -30,12 +30,15 @@ function CreateChannel({ isOpen, onClose }){
try {
-
-
const response = await fetch('/api/channels', {
method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
body: JSON.stringify(formData),
+
});
+ console.log(JSON.stringify(formData));
if (response.ok) {
// 성공적으로 모집글이 생성됨
diff --git a/src/components/channel/existingChannel.js b/src/components/channel/existingChannel.js
index 98fc8dca4012a92fc0296907d6502194ef6549d7..f9f7d5a85f23b610195c4b25498961394668ecd3 100644
--- a/src/components/channel/existingChannel.js
+++ b/src/components/channel/existingChannel.js
@@ -46,7 +46,7 @@ const ExistingChannel=({isOpen, onClose, data})=>{
const handleDeleteChannel = async () => {
try {
- const response = await fetch(`api/channels/${userData.userId}`, {
+ const response = await fetch(`api/channels/`, {
method: 'DELETE',
headers: {
'Content-Type': 'application/json',
diff --git a/src/components/infiniteScroll.js b/src/components/infiniteScroll.js
index 653d3649032c5f8bbc2cb0e1fa05ff3c94a9be23..bbedfeefeefdc8acb6c2c2373ad1a89c8e3d576b 100644
--- a/src/components/infiniteScroll.js
+++ b/src/components/infiniteScroll.js
@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
import {PageItem} from "./recruit/recruitList";
import InfiniteScrollStyles from './infiniteScroll.module.css'
import {ChannelItem} from "./channel/channelList";
+import { json } from 'react-router-dom';
function InfiniteScroll(props){
const [items, setItems] = useState([]);
@@ -19,7 +20,7 @@ function InfiniteScroll(props){
try{
const response = await fetch(`/api/${page}${queryString1}`);
const jsonData = await response.json();
-
+
if(page==='channels'){
setMinDate(jsonData['minDate']);
const newData = jsonData[page];
@@ -83,7 +84,7 @@ function InfiniteScroll(props){
}else{
response = await fetch(`/api/${page}?${min}=${minId}${queryString2}`);
}
-
+
const jsonData = await response.json();
if(page==='channels'){
diff --git a/src/components/mypage/my_editModal.js b/src/components/mypage/my_editModal.js
index 3b3971972f39c47e282da8b58f437bb41208ad61..139762616553ec0f43b829d4aece9a395039dd0c 100644
--- a/src/components/mypage/my_editModal.js
+++ b/src/components/mypage/my_editModal.js
@@ -5,28 +5,33 @@ const MypageEdittModal=({ isOpen, closeModal, onSave, user})=> {
const [image, setImage] = useState(null);
const [nickname, setNickname] = useState('');
const [statusMessage, setStatusMessage] = useState('');
-
+ const [isNicknameAvailable, setIsNicknameAvailable] = useState(false);
const handleImageChange = (e) => {
const selectedImage = e.target.files[0];
setImage(selectedImage);
};
const handleSave = () => {
+ if (!isNicknameAvailable) {
+ alert('닉네임 중복 확인을 해주세요.');
+ return;
+ }
onSave({ image, nickname, statusMessage });
closeModal();
};
const handlecheckBtn = async ()=>{
try{
- const response = await fetch(`/api/users/mypage/${nickname}`);
+ const response = await fetch(`/api/users/nickname/${nickname}`);
const data = await response.json();
if (response.status === 200){
alert(data.message);
alert("사용 가능한 닉네임입니다.")
+ setIsNicknameAvailable(true);
}else{
alert('이미 존재하는 닉네임입니다.');
-
+ setIsNicknameAvailable(false);
}
} catch(error){
diff --git a/src/components/mypage/my_editModal.module.css b/src/components/mypage/my_editModal.module.css
index d9a3acf3605122b6a135b8dcd0c159c05aadf213..698b9839a14ac32211a8dd91ccb16db4fe1bb38b 100644
--- a/src/components/mypage/my_editModal.module.css
+++ b/src/components/mypage/my_editModal.module.css
@@ -24,10 +24,16 @@
.profile_image {
- width: 100%;
- height: 100%;
- overflow: hidden;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 150px;
+ height: 150px;
+ background-color: #ddd;
border-radius: 50%;
+ font-weight: bold;
+ margin-bottom: 10px;
+ margin-top:5%
}
/* .profile_image img {
diff --git a/src/components/mypage/my_group.js b/src/components/mypage/my_group.js
index 24abb58488bb558c5af3206154810cd19d3f5aef..d05fe0cb24d6e3ca7ac166b91a27c1f5f464df32 100644
--- a/src/components/mypage/my_group.js
+++ b/src/components/mypage/my_group.js
@@ -2,24 +2,24 @@ import React, { useState, useEffect } from 'react';
import groupmodal_styles from './my_group.module.css'
import { PageItem } from '../recruit/my_recruitList';
const MypagegroupModal=({ isOpen,closeModal})=> {
- useEffect(() => {
+ const [backendData, setBackendData] = useState([]);
+ useEffect(async () => {
try {
- const response = fetch('api/mypage/group', {
+ const response = await fetch('api/mypage/participants', {
method: 'GET',
- headers: {
- 'Content-Type': 'application/json',
- },
+
// 기타 필요한 옵션들을 추가할 수 있습니다.
});
if (!response.ok) {
// 서버에서 에러 응답이 온 경우 처리합니다.
- const errorData = response.json();
+ const errorData = await response.json();
throw new Error(`회원탈퇴 실패: ${errorData.message}`);
}
// 성공적으로 처리된 경우, 추가적인 로직을 작성할 수 있습니다.
- const exampledata = response.json();
- console.log(exampledata);
+ const exampledata = await response.json();
+ console.log("Dddd",exampledata);
+ setBackendData(exampledata);
} catch (error) {
// 에러가 발생한 경우 에러 처리 로직을 작성합니다.
@@ -27,67 +27,6 @@ const MypagegroupModal=({ isOpen,closeModal})=> {
}
},[])
- const exampledata = {
- "data" :[
- {"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": 1,
- "title": "[방탈출]홍대 거상 2인구합니다",
- "content": "나이, 성별 상관없습니다. 즐겁게 하실 분 구해요~",
- "peopleNum": 4,
- "regionFirst": "강원도",
- "regionSecond": "양양군",
- "startDate": "2023-10-17",
- "endDate": "2023-12-31",
- "timeCategory": "D",
- "startTime": "13:00:00",
- "endTime": "16:00:00",
- "state": "Recruiting",
- "color": "#aa23f1",
- "imagePath": "uploads/recruits/default.jpg",
- "owner": "User",
- "createdAt": "2023-11-24T15:20:37.000Z",
- "updatedAt": "2023-11-24T15:20:37.000Z",
- "UserId": 1
- },
- {
- "id": 3,
- "title": "[방탈출]홍대 거상 2인구합니다",
- "content": "나이, 성별 상관없습니다. 즐겁게 하실 분 구해요~",
- "peopleNum": 4,
- "regionFirst": "강원도",
- "regionSecond": "양양군",
- "startDate": "2023-10-17",
- "endDate": "2023-12-31",
- "timeCategory": "D",
- "startTime": "13:00:00",
- "endTime": "16:00:00",
- "state": "Recruiting",
- "color": "#aa23f1",
- "imagePath": "uploads/recruits/default.jpg",
- "owner": "User",
- "createdAt": "2023-11-24T15:20:37.000Z",
- "updatedAt": "2023-11-24T15:20:37.000Z",
- "UserId": 1
- }
- ]
-
- }
@@ -101,7 +40,7 @@ const MypagegroupModal=({ isOpen,closeModal})=> {
<label>내가 참여 중인 모집</label>
- {exampledata.data.map(item => (
+ {backendData.map(item => (
<PageItem props={item}></PageItem>
))}
diff --git a/src/components/mypage/my_infoModal.js b/src/components/mypage/my_infoModal.js
index 72d99a1581c614b4b4880d10da6ce7ca4c70558e..0dec45cd76cfa535b6c84ea598e668a18e6b0d4a 100644
--- a/src/components/mypage/my_infoModal.js
+++ b/src/components/mypage/my_infoModal.js
@@ -7,7 +7,7 @@ const MypageInfoModal=({ isOpen,closeModal})=> {
const [newId, setNewId] = useState('');
const [oldPassword, setOldPassword] = useState('');
const [newPassword, setNewPassword] = useState('');
- const [showPasswordChange, setShowPasswordChange] = useState(true);
+ const [showPasswordChange, setShowPasswordChange] = useState(false);
const seePasswordHandler1=()=>{
setSeePassword1(!seePassword1);
}
@@ -46,7 +46,7 @@ const MypageInfoModal=({ isOpen,closeModal})=> {
const handlePasswordChange = async () => {
try {
// Assuming you have an API endpoint for changing the password
- const response = await fetch('backend_api_url/changepw', {
+ const response = await fetch('/api/mypage/password', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
@@ -60,39 +60,41 @@ const MypageInfoModal=({ isOpen,closeModal})=> {
if (!response.ok) {
throw new Error('Failed to change password');
}
-
+ else{
// Handle success, e.g., display a success message or update state
- console.log('Password changed successfully');
-
+ alert('비밀번호가 성공적으로 변경되었습니다.');
+ setShowPasswordChange(false);
// Close the modal after a successful password change
closeModal();
+ }
} catch (error) {
console.error('Error changing password:', error.message);
}
};
const handleValidate =async()=>{
try{
- const response=await fetch('/api/users/login',{
+ const response=await fetch('/api/mypage/check',{
method:'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
- oldId: oldId,
- oldPassword: oldPassword,
+ id: oldId,
+ password: oldPassword,
}),
});
const data = await response.json();
if (response.status===200){
- setShowPasswordChange(true);
+ setShowPasswordChange(true);
+ console.log('성공');
}
else{
- console.log("Login failed", data);
+ console.log("실패", data);
}
}catch(error){
- alert('해당 정보의 유저가 존재하지 않습니다.');
+ alert('실패');
setShowPasswordChange(false);
}
};
diff --git a/src/components/mypage/mywritingModal.js b/src/components/mypage/mywritingModal.js
index 7c75bb9807816795a52431b5e781a7211fea0a0f..96adef2607c8e03e8435fb0253d3a98924b65f6e 100644
--- a/src/components/mypage/mywritingModal.js
+++ b/src/components/mypage/mywritingModal.js
@@ -2,9 +2,10 @@ import React, { useState, useEffect } from 'react';
import mywriting_styles from './mywritingModal.module.css'
import { PageItem } from '../recruit/my_recruitList';
const MywritingModal=({ isOpen,closeModal})=> {
- useEffect(() => {
+ const [backendData, setBackendData]=useState([]);
+ useEffect( async () => {
try {
- const response = fetch('api/mypage/mywriting', {
+ const response = await fetch('api/mypage/recruits', {
method: 'GET',
headers: {
'Content-Type': 'application/json',
@@ -13,80 +14,21 @@ const MywritingModal=({ isOpen,closeModal})=> {
});
if (!response.ok) {
// 서버에서 에러 응답이 온 경우 처리합니다.
- const errorData = response.json();
+ const errorData = await response.json();
throw new Error(`회원탈퇴 실패: ${errorData.message}`);
}
// 성공적으로 처리된 경우, 추가적인 로직을 작성할 수 있습니다.
- const exampledata = response.json();
+ const exampledata = await response.json();
console.log(exampledata);
+ setBackendData(exampledata);
} catch (error) {
// 에러가 발생한 경우 에러 처리 로직을 작성합니다.
console.error(error.message);
}
},[])
- const exampledata = {
- "data" :[
- {"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": 1,
- "title": "[방탈출]홍대 거상 2인구합니다",
- "content": "나이, 성별 상관없습니다. 즐겁게 하실 분 구해요~",
- "peopleNum": 4,
- "regionFirst": "강원도",
- "regionSecond": "양양군",
- "startDate": "2023-10-17",
- "endDate": "2023-12-31",
- "timeCategory": "D",
- "startTime": "13:00:00",
- "endTime": "16:00:00",
- "state": "Recruiting",
- "color": "#aa23f1",
- "imagePath": "uploads/recruits/default.jpg",
- "owner": "User",
- "createdAt": "2023-11-24T15:20:37.000Z",
- "updatedAt": "2023-11-24T15:20:37.000Z",
- "UserId": 1
- },
- {
- "id": 3,
- "title": "[방탈출]홍대 거상 2인구합니다",
- "content": "나이, 성별 상관없습니다. 즐겁게 하실 분 구해요~",
- "peopleNum": 4,
- "regionFirst": "강원도",
- "regionSecond": "양양군",
- "startDate": "2023-10-17",
- "endDate": "2023-12-31",
- "timeCategory": "D",
- "startTime": "13:00:00",
- "endTime": "16:00:00",
- "state": "Recruiting",
- "color": "#aa23f1",
- "imagePath": "uploads/recruits/default.jpg",
- "owner": "User",
- "createdAt": "2023-11-24T15:20:37.000Z",
- "updatedAt": "2023-11-24T15:20:37.000Z",
- "UserId": 1
- }
- ]
-
- }
+
return (
<div className={`${mywriting_styles.mywritingModal} ${isOpen ? mywriting_styles.open : ''}`}>
@@ -95,7 +37,7 @@ const MywritingModal=({ isOpen,closeModal})=> {
<label>내가 쓴 모집글</label>
- {exampledata.data.map(item => (
+ {backendData.map(item => (
<PageItem props={item}></PageItem>
))}
diff --git a/src/pages/mypage.js b/src/pages/mypage.js
index 56471e28704e1c040dfaa7c0601ffd3edd72482c..aa5fb6e3e92b0a4df06552759919c43d00797dd0 100644
--- a/src/pages/mypage.js
+++ b/src/pages/mypage.js
@@ -19,6 +19,8 @@ const Mypage=()=>{
const [quitModalOpen, setQuitModalOpen] = useState(false);
const [isProcessing, setProcessing] = useState(false);
const [isMywriting, setIsmyWriting]=useState(false);
+ const [channelList, setChannelList]=useState([]);
+
const openEditModal=()=>{
setIsEditModal(true);
}
@@ -94,59 +96,27 @@ const Mypage=()=>{
}
};
- const handleDeleteAccount = async () => {
- try {
- setProcessing(true);
-
- // 여기에 서버의 회원탈퇴 API 엔드포인트를 입력합니다.
- const response = await fetch(`api/mypage/${userData.userId}`, {
- method: 'DELETE',
- headers: {
- 'Content-Type': 'application/json',
- // 필요에 따라 인증 토큰 등을 포함할 수 있습니다.
- },
- // 기타 필요한 옵션들을 추가할 수 있습니다.
- });
-
- // HTTP 응답 코드를 확인하여 처리합니다.
- if (!response.ok) {
- // 서버에서 에러 응답이 온 경우 처리합니다.
- const errorData = await response.json();
- throw new Error(`회원탈퇴 실패: ${errorData.message}`);
- }
-
- // 성공적으로 처리된 경우, 추가적인 로직을 작성할 수 있습니다.
- const successData = await response.json();
- console.log(successData);
-
- // 회원탈퇴 후 로직 (예: 로그아웃 처리 등)
- } catch (error) {
- // 에러가 발생한 경우 에러 처리 로직을 작성합니다.
- console.error(error.message);
- } finally {
- setProcessing(false);
- }
- };
+
const handleChannelList=async()=>{
try{
- const response = await fetch('api/mypage/subscribe', {
+ const response = await fetch('/api/mypage/subscriptions', {
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
- // 기타 필요한 옵션들을 추가할 수 있습니다.
+
});
if (!response.ok) {
- // 서버에서 에러 응답이 온 경우 처리합니다.
const errorData = await response.json();
throw new Error(`회원탈퇴 실패: ${errorData.message}`);
}
- // 성공적으로 처리된 경우, 추가적인 로직을 작성할 수 있습니다.
+
const subscribedChannels= await response.json();
console.log(subscribedChannels);
+ setChannelList(subscribedChannels);
} catch (error) {
- // 에러가 발생한 경우 에러 처리 로직을 작성합니다.
+
console.error(error.message);
} finally {
setProcessing(false);
@@ -181,24 +151,27 @@ const Mypage=()=>{
<div className={mypage_styles.myactivity_box}>
<img className={mypage_styles.mypage_clickicon} src="/mypage_icon.png"></img>
<div className={mypage_styles.channel}>내가 구독중인 채널</div>
- <img className={mypage_styles.mypage_listicon} src="/mypage_list.png" alt="icon" onClick={toggleChannelList} />
+ <img className={mypage_styles.mypage_listicon} src="/mypage_list.png" alt="icon" onClick={() => {
+ toggleChannelList();
+ handleChannelList(); // Add this line to fetch and update channels
+ }} />
</div>
- {/* {isChannelListOpen && (
+ {isChannelListOpen && (
<div className={mypage_styles.channelList}>
- {subscribedChannels.map((channel) => (
+ {channelList.map((channel) => (
<div key={channel.id} className={mypage_styles.channelListItem}>
<img
- src={channel.iconImg}
+ src={channel.iconImgPath}
alt={`프로필 - ${channel.name}`}
className={mypage_styles.channelProfile}
/>
- <span className={mypage_styles.channelname}>{channel.name}</span>
+ <div className={mypage_styles.channelname}>{channel.title}</div>
</div>
))}
</div>
- )} */}
+ )}
<div className={mypage_styles.myactivity_box}>
<img className={mypage_styles.mypage_clickicon} src="/mypage_icon.png" ></img>
<div className={mypage_styles.channel} onClick={openMygroup}>현재 참여 그룹</div>
@@ -219,10 +192,7 @@ const Mypage=()=>{
<img className={mypage_styles.mypage_clickicon} src="/mypage_icon.png"></img><div className={mypage_styles.channel} onClick={openInfoModal}>비밀번호 변경</div>
</div>
- <div className={mypage_styles.myactivity_box}>
- <img className={mypage_styles.mypage_clickicon} src="/mypage_icon.png"></img><div className={mypage_styles.channel} onClick={openQuitModal}>회원탈퇴</div>
-
- </div>
+
</div>
</div>
@@ -235,8 +205,7 @@ const Mypage=()=>{
closeModal={closeInfoModal}/>
<MypagegroupModal isOpen={isMygroup}
closeModal={closeMygroup}/>
- <MyQuitModal modalOpen={quitModalOpen}
- closeModal={closeQuitModal} handleDeleteAccount={handleDeleteAccount}/>
+
<MywritingModal isOpen={isMywriting}
closeModal={closeMywriting}/>
</div>
diff --git a/src/pages/mypage.module.css b/src/pages/mypage.module.css
index 67ca859938ab498a5afda3c9136f73abb36ebca2..71c8ac90972efb779cc159b82caf544b2831c19d 100644
--- a/src/pages/mypage.module.css
+++ b/src/pages/mypage.module.css
@@ -135,11 +135,19 @@
flex: 0 0 auto;
margin-right: 10px;
text-align: center;
+
}
.channelProfile {
- width: 50px;
- height: 50px;
+ width: 100px;
+ height: 100px;
border-radius: 50%;
object-fit: cover;
+ margin-right:20px;
+ border:2px solid black;
+}
+.channelname{
+ font-size:17px;
+ margin-right:20px;
+ margin-bottom:20px;
}