Skip to content
Snippets Groups Projects
Commit 6bd91dfb authored by Gaeon Kim's avatar Gaeon Kim
Browse files

design: channel, mypage style

parent 411b8d9f
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
Showing
with 192 additions and 43 deletions
src/components/Header.js
+ 1
− 1
View file @ 6bd91dfb
......@@ -78,7 +78,7 @@ const Header=()=>{
{showUserInfo &&(
<div className={header_styles.user_info}>
<div className={header_styles.profileinfo}>
<div><img className={header_styles.circular_img} src='/id.png' alt="Profile"></img></div>
<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>
......
src/components/Header.module.css
+ 3
− 0
View file @ 6bd91dfb
......@@ -99,6 +99,9 @@ header {
margin-bottom:10px;
}
.userName{
font-size:14px;
}
.logout {
background-color:#9FB8AB;
......
src/components/infiniteScroll.js
+ 1
− 0
View file @ 6bd91dfb
......@@ -80,6 +80,7 @@ function InfiniteScroll(props){
if(page==='channels'){
const response = await fetch(`/api/${page}?${min}=${minDate}${queryString2}`);
console.log(`/api/${page}?${min}=${minDate}${queryString2}`);
const jsonData = await response.json();
setMinDate(jsonData['minDate']);
const newData = jsonData[page];
......
src/components/mypage/my_group.module.css
+ 2
− 2
View file @ 6bd91dfb
......@@ -18,7 +18,7 @@
}
.groupcontent{
background-color: white;
width:80%;
width:61%;
height:100%;
text-align: center;
padding-top:10px;
......@@ -30,7 +30,7 @@
}
.groupcontent label{
padding: 5%;
font-size: 30px;
font-size: 28px;
}
.close_button{
......
src/components/mypage/mywritingModal.module.css
+ 2
− 2
View file @ 6bd91dfb
......@@ -18,7 +18,7 @@
}
.writingcontent{
background-color: white;
width:80%;
width:61%;
height:100%;
text-align: center;
padding-top:10px;
......@@ -30,7 +30,7 @@
}
.writingcontent label{
padding: 5%;
font-size: 30px;
font-size: 28px;
}
.close_button{
......
src/components/recruit/my_recruitList.js
+ 118
− 20
View file @ 6bd91dfb
import React, { useState } from 'react';
import recruitListStyles from './my_recruitList.module.css';
import React, { useState, useContext, useEffect } from 'react';
import recruitListStyles from './recruitList.module.css';
import InfiniteScroll from '../infiniteScroll';
import RecruitDetail from './recruitDetail';
import TimeInquiry from './timeInquiry';
import Vote from './vote';
import Search from '../search';
import { AuthContext } from '../../App';
function PageItem(props){
const [isModalOpen, setIsModalOpen] = useState(false);
const [isInquiryOpen, setIsInquiryOpen] = useState(false);
const [isVoteOpen, setIsVoteOpen] = useState(false);
const [isParticipants, setIsParticipants] = useState(false);
const { userData } = useContext(AuthContext);
const checkParticipants = () => {
props.props.participants.map((participantId) => {
if (participantId === userData.id){
setIsParticipants(true);
}
})
}
const openModal = () => {
setIsModalOpen(true);
......@@ -14,8 +31,25 @@ function PageItem(props){
setIsModalOpen(false);
};
let state = '';
const openInquiry = (e) => {
e.stopPropagation();
setIsInquiryOpen(true);
};
const closeInquiry = () => {
setIsInquiryOpen(false);
};
const openVote = (e) => {
e.stopPropagation();
setIsVoteOpen(true);
};
const closeVote = () => {
setIsVoteOpen(false);
};
let state = '';
if(props.props.state === 'Recruiting'){
state = '모집중';
......@@ -25,12 +59,15 @@ function PageItem(props){
state = '활동종료';
}
useEffect(()=>{
checkParticipants();
}, [])
return (
<div className={recruitListStyles.recruit}>
<div className={recruitListStyles.container} onClick={openModal}>
<div className={recruitListStyles.imgContainer}>
{props.props.imagePath ? (<img className={recruitListStyles.img} src={props.props.imagePath} alt='recruit img' />) : (<img src={props.props.imagePath}/>)}
<img className={recruitListStyles.img} src={props.props.imagePath} alt='recruit img' />
</div>
<div className={recruitListStyles.notImgContainer}>
<div className={recruitListStyles.top}>
......@@ -58,12 +95,12 @@ function PageItem(props){
<svg className={recruitListStyles.dateIcon} width="20" height="22" viewBox="0 0 20 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18 2H17V0H15V2H5V0H3V2H2C0.9 2 0 2.9 0 4V20C0 21.1 0.9 22 2 22H18C19.1 22 20 21.1 20 20V4C20 2.9 19.1 2 18 2ZM18 20H2V9H18V20ZM18 7H2V4H18V7Z" fill="#FF5959"/>
</svg>
<span className={recruitListStyles.date}>{props.props.startDate}</span>
{props.props.endDate ? (<span className={recruitListStyles.date}>~{props.props.endDate}</span>) : (null)}
<span className={recruitListStyles.date}>{props.props.startDate}~{props.props.endDate}</span>
</div>
{props.props.timeCategory === 'D' ? (
<div className={recruitListStyles.timeContainer}>
{props.props.timeCategory === 'D' ? (
<div>
<svg className={recruitListStyles.timeIcon} width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21.8333 4.19668L16.85 0.0150146L15.4525 1.67251L20.4358 5.85418L21.8333 4.19668ZM6.53667 1.67251L5.15 0.0150146L0.166668 4.18585L1.56417 5.84335L6.53667 1.67251ZM11.5417 6.66668H9.91667V13.1667L15.0625 16.2542L15.875 14.9217L11.5417 12.3542V6.66668ZM11 2.33335C5.61583 2.33335 1.25 6.69918 1.25 12.0833C1.25 17.4675 5.605 21.8333 11 21.8333C16.3842 21.8333 20.75 17.4675 20.75 12.0833C20.75 6.69918 16.3842 2.33335 11 2.33335ZM11 19.6667C6.8075 19.6667 3.41667 16.2758 3.41667 12.0833C3.41667 7.89085 6.8075 4.50001 11 4.50001C15.1925 4.50001 18.5833 7.89085 18.5833 12.0833C18.5833 16.2758 15.1925 19.6667 11 19.6667Z" fill="#FF5959"/>
</svg>
......@@ -71,6 +108,33 @@ function PageItem(props){
</div>
) : (null)}
</div>
{state === '모집완료' && props.props.timeCategory === 'TBD' ? (
<div className={recruitListStyles.buttonContainer}>
{userData.nickname === props.props.Writer.nickname ?( //props.data.Writer.id
<div className={recruitListStyles.inquiryContainer}>
<button type="button" className={recruitListStyles.inquiry} onClick={openInquiry}>시간조회</button>
<div className={recruitListStyles.timeInquiry}>
<TimeInquiry isOpen={isInquiryOpen} onClose={closeInquiry} data={props.props}/>
</div>
</div>
):(null)}
{isParticipants ?(
<div className={recruitListStyles.voteContainer}>
{props.props.vote === 'Before' || props.props.vote === 'During' ? (
<button type="button" className={recruitListStyles.vote} onClick={openVote}>투표하기</button>
):(
<button type="button" className={recruitListStyles.vote} onClick={openVote}>결과확인</button>
)}
<div className={recruitListStyles.voteInquiry}>
<Vote isOpen={isVoteOpen} onClose={closeVote} data={props.props}/>
</div>
</div>
):(null)}
</div>
) : (null)}
</div>
</div>
</div>
<RecruitDetail isOpen={isModalOpen} onClose={closeModal} data={props.props}/>
......@@ -78,5 +142,39 @@ function PageItem(props){
)
}
function RecruitList(){
const [generatedUrl, setGeneratedUrl] = useState('recruits');
const [firstQueryString, setFirstQueryString] = useState('');
const [secondQueryString, setSecondQueryString] = useState('');
const handleUrlGeneration = (url) => {
setGeneratedUrl(url);
};
const handleFirstQueryString = (url) => {
setFirstQueryString(url);
};
const handleSecondQueryString = (url) => {
setSecondQueryString(url);
};
return(
<div className={recruitListStyles.RecruitList}>
<Search
currentPage='recruits'
onUrlGenerated={handleUrlGeneration}
onFirstQueryString={handleFirstQueryString}
onSecondQueryString={handleSecondQueryString}
/>
<InfiniteScroll
pagename={generatedUrl}
queryString1={firstQueryString}
queryString2={secondQueryString}
min='minId'
/>
</div>
)
}
export { PageItem};
\ No newline at end of file
export {RecruitList, PageItem};
\ No newline at end of file
src/components/recruit/my_recruitList.module.css
+ 59
− 14
View file @ 6bd91dfb
.RecruitList{
display: flex;
flex-direction: column;
align-items: center;
}
.container{
display: flex;
......@@ -6,10 +10,8 @@
height: 194px;
border: 3px solid #E7E7E7;
margin-top: 20px;
margin-left:13%;
background: #FFFFFF;
overflow-x: auto;
background: #FFFFFF;
}
.imgContainer{
......@@ -34,7 +36,6 @@
.bottom{
display: flex;
width: 500px;
}
.img{
......@@ -73,7 +74,7 @@
align-items: center; /* 세로 방향에서 가운데 정렬. */
justify-content: center;
width: 67px;
width: 90px;
height: 33px;
margin-left: auto;
......@@ -81,7 +82,6 @@
font-weight: bolder;
font-size: 20px;
line-height: 20px;
color: #FFFFFF;
......@@ -92,8 +92,6 @@
align-items: center; /* 세로 방향에서 가운데 정렬. */
justify-content: center;
margin-right: auto;
width: 90px;
height: 33px;
margin-left: auto;
......@@ -102,7 +100,6 @@
font-weight: bolder;
font-size: 20px;
line-height: 20px;
color: #FFFFFF;
......@@ -113,8 +110,6 @@
align-items: center; /* 세로 방향에서 가운데 정렬. */
justify-content: center;
margin-right: auto;
width: 90px;
height: 33px;
margin-left: auto;
......@@ -123,7 +118,6 @@
font-weight: bolder;
font-size: 20px;
line-height: 20px;
color: #FFFFFF;
......@@ -160,12 +154,19 @@
line-height: 40px;
}
.dateContainer{
width: 250px;
}
.timeContainer{
width: 240px;
}
.date, .time{
font-weight: 600;
font-size: 20px;
line-height: 33px;
color: #000000;
}
......@@ -181,3 +182,47 @@
margin-left: 10px;
margin-right: 5px;
}
.buttonContainer{
display: flex;
width: 185px;
}
.inquiryContainer, .voteContainer{
margin-left: auto
}
.inquiry{
display: flex; /* Flexbox를 사용하여 자식 요소들을 가로로 배열합니다. */
align-items: center; /* 세로 방향에서 가운데 정렬. */
justify-content: center;
width: 90px;
height: 33px;
background: #808DC2;
font-weight: bolder;
font-size: 20px;
color: #FFFFFF;
border: none;
}
.vote{
display: flex; /* Flexbox를 사용하여 자식 요소들을 가로로 배열합니다. */
align-items: center; /* 세로 방향에서 가운데 정렬. */
justify-content: center;
width: 90px;
height: 33px;
margin-left: px;
background: #808DC2;
font-weight: bolder;
font-size: 20px;
color: #FFFFFF;
border: none;
}
\ No newline at end of file
src/components/search.js
+ 4
− 2
View file @ 6bd91dfb
......@@ -57,9 +57,11 @@ function Search({ currentPage, onUrlGenerated, onFirstQueryString, onSecondQuery
}
};
useEffect(() => {
if (fetchCount !== 0) {
fetchChannelData();
}
}, [fetchCount]);
const handleSearch = () => {
let searchURL = `${currentPage}/search`;
let firstQueryString = '?';
......
src/pages/mypage.js
+ 1
− 1
View file @ 6bd91dfb
......@@ -125,7 +125,7 @@ const Mypage=()=>{
<button className={mypage_styles.profileEdit} onClick={openEditModal}>내 프로필 수정</button>
<div className={mypage_styles.profileinfo}>
<div className={mypage_styles.profile_picture_container}>
<img src={userData.image} className={mypage_styles.profile_picture} alt="profile"/>
<img src={userData.imagePath} className={mypage_styles.profile_picture} alt="profile"/>
</div>
<div className={mypage_styles.profileText}>
......
src/pages/mypage.module.css
+ 1
− 1
View file @ 6bd91dfb
......@@ -4,7 +4,7 @@
border: 2px solid #ccc; /* border-width, border-style, border-color를 한 번에 설정 */
padding: 20px;
height: 140px;
height: 150px;
margin-bottom:8%;
......
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