Skip to content
Snippets Groups Projects
Commit d7addbf2 authored by 유 채린's avatar 유 채린
Browse files

Committing changes from previous merge

parents 1f36d175 ef00e64f
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
Showing
with 183 additions and 164 deletions
src/App.js
+ 3
− 0
View file @ d7addbf2
......@@ -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>
......
src/components/Header.module.css
+ 4
− 1
View file @ d7addbf2
......@@ -10,6 +10,8 @@ header {
font-weight: bold;
position: sticky;
top: 0;
z-index:2;
}
......@@ -34,6 +36,7 @@ header {
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{
......
src/components/calendar/addModal.module.css
+ 3
− 1
View file @ d7addbf2
......@@ -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;
}
......
src/components/calendar/deleteModal.module.css
+ 4
− 1
View file @ d7addbf2
......@@ -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;
......
src/components/calendar/inquiryListModal.module.css
+ 2
− 0
View file @ d7addbf2
......@@ -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;
}
......
src/components/channel/addNotice.module.css
+ 2
− 2
View file @ d7addbf2
......@@ -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;
......
src/components/channel/channel.js
+ 41
− 33
View file @ d7addbf2
......@@ -5,7 +5,7 @@ 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": [
{
......@@ -22,7 +22,11 @@ const Channel=({isOpen, onClose, data})=>{
"startTime": "13:00:00",
"endTime": "16:00:00",
"state": "Recruiting",
"Writer": "jk",
"Writer": {
"id":"jojojo",
"nickname":"jk"
},
"participants":[1,3,323,108],
"imagePath": "uploads/recruits/default.jpg"
},
{
......@@ -35,11 +39,15 @@ const Channel=({isOpen, onClose, data})=>{
"regionSecond": "양양군",
"startDate": "2023-10-17",
"endDate": "2023-12-31",
"timeCategory": "TBD",
"startTime": null,
"endTime": null,
"timeCategory": "D",
"startTime": "13:00:00",
"endTime": "16:00:00",
"state": "Recruiting",
"Writer": "jk",
"Writer": {
"id":"jojojo",
"nickname":"jk"
},
"participants":[1,3,323,108],
"imagePath": "uploads/recruits/default.jpg"
}
]}
......@@ -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}>
......
src/components/channel/channel.module.css
+ 6
− 16
View file @ d7addbf2
.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;
......
src/components/channel/channelList.js
+ 23
− 72
View file @ d7addbf2
......@@ -2,8 +2,9 @@ import React, { useState } from 'react';
import channelListStyles from './channelList.module.css';
import InfiniteScroll from '../infiniteScroll';
import Channel from './channel';
import ChannelListModal from './channelListModal';
function ChannelItem(props){
function ChannelItem(){
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>
......
src/components/channel/channelList.module.css
+ 13
− 7
View file @ d7addbf2
/* 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
src/components/channel/channelListModal.js 0 → 100644
+ 14
− 0
View file @ d7addbf2
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
src/components/channel/channelListModal.module.css 0 → 100644
+ 40
− 0
View file @ d7addbf2
.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
src/components/channel/existingChannel.js
+ 7
− 7
View file @ d7addbf2
......@@ -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>
......
src/components/channel/existingChannel.module.css
+ 2
− 2
View file @ d7addbf2
......@@ -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;
......
src/components/channel/iconModal.js
+ 1
− 1
View file @ d7addbf2
......@@ -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,
// 필요에 따라 다른 헤더 설정이나 인증 토큰 등을 추가할 수 있습니다.
......
src/components/channel/iconModal.module.css
+ 3
− 1
View file @ d7addbf2
......@@ -13,12 +13,14 @@
.editModal.open{
display: flex;
z-index: 100000;
}
.modal_content{
background-color: white;
width:400px;
height:300px;
padding:10%
padding:10%;
}
......
src/components/channel/pictureModal.js
+ 1
− 1
View file @ d7addbf2
......@@ -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,
// 필요에 따라 다른 헤더 설정이나 인증 토큰 등을 추가할 수 있습니다.
......
src/components/channel/pictureModal.module.css
+ 4
− 2
View file @ d7addbf2
......@@ -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%;
......
src/components/infiniteScroll.module.css
+ 7
− 14
View file @ d7addbf2
......@@ -3,17 +3,10 @@
}
/* InfiniteScroll.module.css */
.channelItemRow {
.itemContainer {
display: flex;
margin-bottom: 20px; /* 원하는 간격으로 조절 */
/* Add other flex properties as needed */
}
.channelItemRow > * {
flex: 1;
margin-right: 10px; /* 각 ChannelItem 간격 조절 */
}
.channelItemRow > *:last-child {
margin-right: 0;
.firstitem{
margin-left:18%;
}
\ No newline at end of file
src/components/logout.module.css
+ 3
− 3
View file @ d7addbf2
......@@ -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 {
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment

feedback to tooltime@ajou.ac.kr or hwan@ajou.ac.kr