-
+
);
diff --git a/src/pages/Main/main.js b/src/pages/Main/main.js
index 51e4390..1976d64 100644
--- a/src/pages/Main/main.js
+++ b/src/pages/Main/main.js
@@ -22,12 +22,12 @@ const Main = (props) => {
>
- {data.title}
- 팀원 관리
- 소개 페이지 수정
+ >
+
+
+
);
};
diff --git a/src/components/MyPageCard/MyTeamCard/styles.js b/src/components/MyPageCard/MyTeamCard/styles.js
index 0e66fb4..65a211e 100644
--- a/src/components/MyPageCard/MyTeamCard/styles.js
+++ b/src/components/MyPageCard/MyTeamCard/styles.js
@@ -1,88 +1,32 @@
import styled from "styled-components";
export const Containter = styled.div`
- position: relative;
- width: 360px;
- height: 246px;
- border: 1.9px solid;
+ display: flex;
+ flex-direction: column;
+ border: 2px solid;
border-radius: 11px;
border-color: #c9c9c9;
+ padding: 20px;
+ justify-content: space-between;
`;
-export const ProejctName = styled.label`
- position: absolute;
- left: 24px;
- top: 19px;
+export const TeamName = styled.label`
font-size: 17px;
font-weight: 700;
color: #6d758f;
`;
-export const TeamName = styled.label`
- position: absolute;
- left: 24px;
- top: 57px;
- font-size: 11px;
- font-weight: 600;
- color: #6d758f;
-`;
-
-export const Region = styled.label`
- position: absolute;
- left: 24px;
- top: 71px;
- font-size: 11px;
- font-weight: 600;
- color: #6d758f;
-`;
-
-export const Recruitment = styled.label`
- position: absolute;
- right: 76px;
- top: 24px;
- font-size: 11px;
- font-weight: 400;
-`;
-
-export const RecruitmentTime = styled.label`
- position: absolute;
- width: 45px;
- font-size: 11px;
- font-weight: 400;
- color: #6d758f;
-`;
-
export const Introduction = styled.label`
- position: absolute;
- left: 26px;
- top: 108px;
font-size: 15px;
font-weight: 400;
color: #6d758f;
`;
-export const TeamMemberButtton = styled.button`
- position: absolute;
- left: 14px;
- top: 201px;
- width: 159px;
- height: 32px;
- border: 2px solid;
- border-radius: 4px;
- border-color: #376fff;
- font-size: 14px;
- font-weight: 400;
- color: #376fff;
- background-color: #ffffff;
+export const Button = styled.button`
+ all: unset;
cursor: pointer;
-`;
-
-export const EditButton = styled.button`
- position: absolute;
- right: 14px;
- top: 201px;
- width: 159px;
- height: 32px;
+ width: 100%;
+ height: 30px;
border: 2px solid;
border-radius: 4px;
border-color: #376fff;
diff --git a/src/components/Navigation/navigation.js b/src/components/Navigation/navigation.js
index 98c4755..70f9fb9 100644
--- a/src/components/Navigation/navigation.js
+++ b/src/components/Navigation/navigation.js
@@ -44,7 +44,7 @@ const Navigation = (props) => {
-
-
- {data.recruitmentStatus ? (
- 모집 중
- ) : (
- 모집 마감
- )}
- 1시간 전
-
-
- QWER{data.teamName}
- SEOUL{data.location}
+
+
+ {data.title}
+
+
+ {data.recruitmentStatus ? (
+ 모집 중
+ ) : (
+ 모집 마감
+ )}
+ 1시간 전
+
+
+ QWER{data.teamId}
+ {data.region}
+
+ {data.summary}
+
+
- {data.description}
+
-
- UI/UX 디자이너{data.category1}
- 프론트엔드{data.category2}
- 프론트엔드{data.category2}
- 프론트엔드{data.category2}
- 프론트엔드{data.category2}
- 프론트엔드{data.category2}
-
-
);
};
diff --git a/src/components/CardGrid/memberCardGrid.js b/src/components/CardGrid/memberCardGrid.js
index 6b51c05..306a52f 100644
--- a/src/components/CardGrid/memberCardGrid.js
+++ b/src/components/CardGrid/memberCardGrid.js
@@ -1,12 +1,11 @@
import MemberCard from "../Card/memberCard";
-import { GridContainer, Title } from "./styles";
+import { GridContainer } from "./styles";
const MemberCardGrid = (props) => {
return (
- {myTeams.map((item) => (
-
diff --git a/src/components/MyPage/MyTeam/styles.js b/src/components/MyPage/MyTeam/styles.js
index 0b1e491..a994007 100644
--- a/src/components/MyPage/MyTeam/styles.js
+++ b/src/components/MyPage/MyTeam/styles.js
@@ -78,14 +78,14 @@ export const CreateTeamButton = styled.button`
`;
export const CardContainter = styled.div`
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
margin-left: auto;
margin-right: auto;
margin-top: 30px;
margin-bottom: 50px;
width: 767px;
height: 600px;
- display: flex;
- flex-wrap: wrap;
gap: 20px;
overflow-y: auto;
`;
diff --git a/src/components/MyPage/MyTeamDetail/myTeamDetail.js b/src/components/MyPage/MyTeamDetail/myTeamDetail.js
index 4f3d4cd..0f7fd66 100644
--- a/src/components/MyPage/MyTeamDetail/myTeamDetail.js
+++ b/src/components/MyPage/MyTeamDetail/myTeamDetail.js
@@ -1,17 +1,20 @@
import React, { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import { teamAPI } from "../../../api/teamAPI";
-import Select from "react-select";
import {
Container,
Title,
Details,
+ DetailsWrapper,
InviteContainer,
InviteInput,
InviteButton,
SelectedEmail,
SelectedEmailList,
CloseButton,
+ LogoImage,
+ DetailsTitle,
+ DetailsContent,
} from "./styles";
import Navigation from "../../Navigation/navigation";
@@ -85,15 +88,22 @@ const MyTeamDetail = () => {
+ {teamDetails.name}
-
+
{
const [teamName, setTeamName] = useState("");
- const [teamDescription, setTeamDescription] = useState("");
+ const [teamIntroduction, setTeamIntroduction] = useState("");
+ const [teamContent, setTeamContent] = useState("");
const [domain, setDomain] = useState("");
const [location, setLocation] = useState("");
const [phoneNumber, setPhoneNumber] = useState("");
@@ -40,7 +41,8 @@ const MyTeamPage = ({ setIsCreateTeam }) => {
const registerTeam = async () => {
if (
!teamName ||
- !teamDescription ||
+ !teamIntroduction ||
+ !teamContent ||
!domain ||
!location ||
!phoneNumber ||
@@ -48,7 +50,9 @@ const MyTeamPage = ({ setIsCreateTeam }) => {
) {
setErrors({
teamName: teamName ? "" : "팀명을 입력해 주세요",
- teamDescription: teamDescription ? "" : "팀 상세 소개를 입력해 주세요",
+ teamIntroduction: teamIntroduction
+ ? ""
+ : "팀 상세 소개를 입력해 주세요",
domain: domain ? "" : "분야를 선택해 주세요",
location: location ? "" : "활동 지역을 선택해 주세요",
phoneNumber: phoneNumber ? "" : "연락처를 입력해 주세요",
@@ -57,7 +61,8 @@ const MyTeamPage = ({ setIsCreateTeam }) => {
} else {
const data = {
name: teamName,
- introduction: teamDescription,
+ introduction: teamIntroduction,
+ content: teamContent,
domain: domain,
location: location,
phoneNumber: phoneNumber,
@@ -80,21 +85,23 @@ const MyTeamPage = ({ setIsCreateTeam }) => {
return (
신규 팀 등록
-
);
};
diff --git a/src/components/MyPage/MyTeamPage/styled.js b/src/components/MyPage/MyTeamPage/styled.js
index 8353083..c4ce483 100644
--- a/src/components/MyPage/MyTeamPage/styled.js
+++ b/src/components/MyPage/MyTeamPage/styled.js
@@ -9,11 +9,10 @@ export const Container = styled.div`
display: flex;
flex-direction: column;
align-items: flex-start;
+ padding: 40px;
`;
export const Title = styled.label`
- margin-left: 36px;
- margin-top: 30px;
font-size: 24px;
font-weight: 700;
`;
@@ -34,7 +33,8 @@ export const Tag = styled.label`
`;
export const Input = styled.input`
- width: 332px;
+ margin-left: 50px;
+ width: 300px;
height: 36px;
border: 1.9px solid;
border-radius: 6px;
@@ -42,7 +42,8 @@ export const Input = styled.input`
`;
export const Sel = styled.select`
- width: 332px;
+ margin-left: 50px;
+ width: 300px;
height: 36px;
border: 1.9px solid;
border-radius: 6px;
@@ -50,14 +51,10 @@ export const Sel = styled.select`
`;
export const Explanation = styled.textarea`
- width: 350px;
- height: 229px;
+ width: 100%;
border: 1.9px solid;
border-radius: 6px;
border-color: #c9c9c9;
- padding-top: 15px;
- padding-left: 18px;
- padding-right: 10px;
resize: none;
`;
diff --git a/src/components/MyPageCard/MySupportCard/mySupportCard.js b/src/components/MyPageCard/MySupportCard/mySupportCard.js
index 1ead382..227d8f7 100644
--- a/src/components/MyPageCard/MySupportCard/mySupportCard.js
+++ b/src/components/MyPageCard/MySupportCard/mySupportCard.js
@@ -9,29 +9,38 @@ import {
Fail,
} from "./styles";
-import { ReactComponent as CenterLine } from "../../../assets/myPage/SupportCenterLine.svg";
-
const MySupportCard = ({ data }) => {
return (
- {data.projectName}
-
- {data.teamName} / {data.region}
-
- {data.date}
- | {data.time}
+ {data.introduction}
- {data.pass ? 합격 : 불합격 }
+ >
+ {data.introduction}
+
);
};
diff --git a/src/components/MyPageCard/MySupportCard/styles.js b/src/components/MyPageCard/MySupportCard/styles.js
index d7bbe1c..de24bcf 100644
--- a/src/components/MyPageCard/MySupportCard/styles.js
+++ b/src/components/MyPageCard/MySupportCard/styles.js
@@ -1,65 +1,46 @@
import styled from "styled-components";
export const Containter = styled.div`
- position: relative;
- width: 780px;
- height: 106px;
- border: 1.9px solid;
+ display: flex;
+ flex-direction: column;
+ border: 2px solid;
border-radius: 11px;
border-color: #c9c9c9;
+ padding: 20px;
`;
export const ProjectName = styled.label`
- position: absolute;
- left: 21px;
- top: 12px;
font-size: 17px;
font-weight: 700;
color: #6d758f;
`;
export const TeamAndRegion = styled.label`
- position: absolute;
- left: 126px;
- top: 17px;
font-size: 11px;
font-weight: 600;
color: #6d758f;
`;
export const DateLabel = styled.label`
- position: absolute;
- right: 56px;
- top: 17px;
font-size: 12px;
font-weight: 500;
color: #7c7c7c;
`;
export const TimeLabel = styled.label`
- position: absolute;
- right: 16px;
- top: 17px;
font-size: 12px;
font-weight: 400;
color: #9a9a9a;
`;
export const Introduction = styled.label`
- position: absolute;
- left: 21px;
- top: 53px;
font-size: 15px;
font-weight: 400;
- font-color: #6d758f;
+ color: #6d758f;
`;
export const Pass = styled.div`
- position: absolute;
- right: 18px;
- top: 54px;
- width: 64px;
- height: 34px;
+ width: 80px;
border: 2px solid;
border-radius: 8px;
border-color: #376fff;
@@ -73,11 +54,7 @@ export const Pass = styled.div`
`;
export const Fail = styled.div`
- position: absolute;
- right: 18px;
- top: 54px;
- width: 64px;
- height: 34px;
+ width: 80px;
border: 2px solid;
border-radius: 8px;
border-color: #ff3737;
diff --git a/src/components/MyPageCard/MyTeamCard/myTeamCard.js b/src/components/MyPageCard/MyTeamCard/myTeamCard.js
index f0ab3bd..0fc3548 100644
--- a/src/components/MyPageCard/MyTeamCard/myTeamCard.js
+++ b/src/components/MyPageCard/MyTeamCard/myTeamCard.js
@@ -11,6 +11,7 @@ import {
Introduction,
TeamMemberButtton,
EditButton,
+ Button,
} from "./styles";
import { ReactComponent as MemberCenterLine } from "../../../assets/myPage/MemberCenterLine.svg";
import { useNavigate } from "react-router-dom";
@@ -43,28 +44,27 @@ const MyTeamCard = ({ data }) => {
return (
- {data.name}
- [{data.name}]
- [{data.region}]
-
-
- {data.recruitment ? "모집중" : "모집완료"}
-
- | {formatFormationDate(data.formationDate)}
-
-
-
- {data.introduction}
-
+ {data.name}
+ {data.introduction}
+
+
-
+
+
+ {data.occupationClassifications.map((item, index) => {
+ return (
+
+ {occupationOptions[item]}
+
+ );
+ })}
+
+
-
-
- AI 팀원 추천
{props.cardDatas.map((item) => (
- {supportTestData.map((item) => (
+ {filteredApplications.map((item) => (
diff --git a/src/components/MyPage/MyTeam/myTeam.js b/src/components/MyPage/MyTeam/myTeam.js
index fad23b5..ad0f436 100644
--- a/src/components/MyPage/MyTeam/myTeam.js
+++ b/src/components/MyPage/MyTeam/myTeam.js
@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
import {
Container,
Title,
@@ -13,11 +13,11 @@ import { ReactComponent as CheckCircleOff } from "../../../assets/myPage/CheckCi
import { ReactComponent as CheckCircleOn } from "../../../assets/myPage/CheckCircleOn.svg";
import { ReactComponent as Cross } from "../../../assets/myPage/Cross.svg";
import MyTeamCard from "../../MyPageCard/MyTeamCard/myTeamCard";
-import MyTeamTestData from "../../../api/testDummyData/myTeamTestData";
import { teamAPI } from "../../../api/teamAPI";
const MyTeam = ({ setIsCreateTeam, innerRef }) => {
const [myTeams, setMyTeams] = useState([]);
+ const [filteredTeams, setFilteredTeams] = useState([]);
const [isMyTeam, setIsMyTeam] = useState(false);
const [visible, setVisible] = useState({
@@ -28,6 +28,7 @@ const MyTeam = ({ setIsCreateTeam, innerRef }) => {
const MyTeamBtn = () => {
setIsMyTeam(!isMyTeam);
+ console.log(filteredTeams);
};
const StartAnimation = () => {
@@ -69,6 +70,7 @@ const MyTeam = ({ setIsCreateTeam, innerRef }) => {
const response = await teamAPI.getMyTeams();
console.log(response.data.data);
setMyTeams(response.data.data);
+ setFilteredTeams(response.data.data);
} catch (err) {
console.log(err);
} finally {
@@ -81,6 +83,14 @@ const MyTeam = ({ setIsCreateTeam, innerRef }) => {
getMyTeams();
}, []);
+ useEffect(() => {
+ if (isMyTeam) {
+ setFilteredTeams(myTeams.filter((team) => team.isOwner));
+ } else {
+ setFilteredTeams(myTeams);
+ }
+ }, [isMyTeam, myTeams]);
+
return (
팀관리
@@ -98,7 +108,7 @@ const MyTeam = ({ setIsCreateTeam, innerRef }) => {
>
{isMyTeam ? 나의 팀만 보기
+ 내가 팀장인 팀만 보기
@@ -109,8 +119,8 @@ const MyTeam = ({ setIsCreateTeam, innerRef }) => {
- AI 팀 추천
{props.cardDatas.map((item) => (
{data.title}
@@ -57,7 +66,12 @@ const ContestDetail = ({ data }) => {
상세 내용
-
+ {data.description}
+
+
+ {isExpanded ? "접기" : "더보기"}
+
※ 주최사 홈페이지의 공모요강을 확인하시기 바랍니다.
diff --git a/src/components/ContestDetail/styles.js b/src/components/ContestDetail/styles.js
index 1232ed5..077e2bb 100644
--- a/src/components/ContestDetail/styles.js
+++ b/src/components/ContestDetail/styles.js
@@ -36,6 +36,7 @@ export const Details = styled.div`
display: flex;
flex-direction: column;
justify-content: space-between;
+ margin-left: 80px;
`;
export const DetailItem = styled.div`
@@ -85,3 +86,40 @@ export const FilterText = styled.label`
cursor: pointer;
padding: 0 10px;
`;
+
+export const DescriptionWrapper = styled.div`
+ max-height: ${(props) => (props.isExpanded ? "none" : "300px")};
+ overflow: hidden;
+ position: relative;
+ transition: max-height 0.3s ease;
+
+ &::after {
+ content: "";
+ display: ${(props) => (props.isExpanded ? "none" : "block")};
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 50%;
+ background: linear-gradient(to bottom, transparent, white);
+ }
+`;
+
+export const MoreButton = styled.button`
+ display: ${(props) => (props.isExpanded ? "none" : "visible")};
+ background: #fafafa;
+ border: none;
+ cursor: pointer;
+ padding: 16px;
+ text-align: center;
+ margin-top: 10px;
+
+ &:hover {
+ text-decoration: underline;
+ }
+`;
+
+export const MoreButtonText = styled.label`
+ font-size: 20px;
+ color: #292929;
+`;
diff --git a/src/components/MyPage/MyFavorites/styles.js b/src/components/MyPage/MyFavorites/styles.js
index b93a260..f578901 100644
--- a/src/components/MyPage/MyFavorites/styles.js
+++ b/src/components/MyPage/MyFavorites/styles.js
@@ -90,4 +90,5 @@ export const CardContainter = styled.div`
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
+ overflow: scroll;
`;
diff --git a/src/components/MyPage/MyPageSideBar/myPageSideBar.js b/src/components/MyPage/MyPageSideBar/myPageSideBar.js
index 659e935..8b3c0c6 100644
--- a/src/components/MyPage/MyPageSideBar/myPageSideBar.js
+++ b/src/components/MyPage/MyPageSideBar/myPageSideBar.js
@@ -49,9 +49,6 @@ const MyPageSideBar = ({
return (
sideButtonClick(index)}>
- {curPage === index && (
-
);
diff --git a/src/components/MyPage/MyPageSideBar/styles.js b/src/components/MyPage/MyPageSideBar/styles.js
index 01b5f9b..aabdd34 100644
--- a/src/components/MyPage/MyPageSideBar/styles.js
+++ b/src/components/MyPage/MyPageSideBar/styles.js
@@ -1,4 +1,17 @@
-import styled from "styled-components";
+import styled, { css } from "styled-components";
+
+const sharedStyles = css`
+ width: 200px;
+ height: 60px;
+ border: none;
+ border-radius: 12px;
+ font-size: 20px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ transition: background-color 0.3s ease;
+`;
export const Container = styled.div`
margin-right: 60px;
@@ -13,40 +26,21 @@ export const Container = styled.div`
`;
export const SelectPage = styled.button`
- width: 200px;
- height: 60px;
- border: none;
- border-radius: 12px;
- font-size: 20px;
+ ${sharedStyles}
+ color: #0f0f0f;
font-weight: 600;
- background-color: #ffffff;
- display: flex;
- align-items: center;
- justify-content: center;
- cursor: pointer;
-
- transition: background-color 0.3s ease;
+ background-color: #f2f2f2;
&:hover {
- background-color: #e6e6e6;
+ background-color: #f2f2f2;
}
`;
export const NotSelectPage = styled.button`
- width: 200px;
- height: 60px;
- border: none;
- border-radius: 12px;
- font-size: 20px;
+ ${sharedStyles}
font-weight: 400;
color: #c9c9c9;
background-color: #ffffff;
- display: flex;
- align-items: center;
- justify-content: center;
- cursor: pointer;
-
- transition: background-color 0.3s ease;
&:hover {
- background-color: #e6e6e6;
+ background-color: #f2f2f2;
}
`;
diff --git a/src/components/MyPage/MySupport/mySupport.js b/src/components/MyPage/MySupport/mySupport.js
index c005eab..b85a831 100644
--- a/src/components/MyPage/MySupport/mySupport.js
+++ b/src/components/MyPage/MySupport/mySupport.js
@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
import {
Container,
Title,
@@ -9,11 +9,15 @@ import {
import { ReactComponent as CheckCircleOff } from "../../../assets/myPage/CheckCircleOff.svg";
import { ReactComponent as CheckCircleOn } from "../../../assets/myPage/CheckCircleOn.svg";
import MySupportCard from "../../MyPageCard/MySupportCard/mySupportCard";
-import supportTestData from "../../../api/testDummyData/supportTestData";
+import { applicationAPI } from "../../../api/applicationAPI";
import { ReactComponent as Line } from "../../../assets/myPage/myInfoVector1.svg";
const MySupport = ({ innerRef }) => {
+ const [applications, setApplications] = useState([]);
+ const [filteredApplications, setFilteredApplications] = useState([]);
const [isCompleted, setIsCompleted] = useState(false);
+ const [page, setPage] = useState(1);
+
const [visible, setVisible] = useState({
step0: false,
step1: false,
@@ -58,9 +62,29 @@ const MySupport = ({ innerRef }) => {
EndAnimation,
};
+ const fetchApplications = async (page, state) => {
+ try {
+ const response = await applicationAPI.getMyApplications(page, state);
+ console.log(response.data.data);
+ setApplications(response.data.data.content);
+ setFilteredApplications(response.data.data.content);
+ } catch (err) {
+ console.log(err);
+ }
+ };
+
useEffect(() => {
StartAnimation();
- }, []);
+ fetchApplications(0, "all");
+ }, [page]);
+
+ useEffect(() => {
+ if (isCompleted) {
+ setFilteredApplications(applications.filter((app) => !app.isCompleted));
+ } else {
+ setFilteredApplications(applications);
+ }
+ }, [isCompleted, applications]);
return (
@@ -84,7 +108,7 @@ const MySupport = ({ innerRef }) => {
{data.description}
+
-
+ Email: {teamDetails.email}
-FormationDate: {teamDetails.formationDate}
-id: {teamDetails.id}
-Introduction: {teamDetails.introduction}
-phoneNumber: {teamDetails.phoneNumber}
-logo: {teamDetails.logo}
-
+ Email
+ {teamDetails.email}
+ Formation Date
+ {teamDetails.formationDate}
+ ID
+ {teamDetails.id}
+ Introduction
+ {teamDetails.introduction}
+ Phone Number
+ {teamDetails.phoneNumber}
+
+
+
- 등록하기
-
+ 한줄 소개
+ handleChange(e.target.value, setTeamIntroduction)}
+ />
+
+
+
- 프로필 설정
- {
style={{ width: "200px", height: "200px" }}
/>
) : (
-
- 사진을 여기에 드래그 하거나 클릭하여 업로드하세요 1:1 비율 권장 -
+
+
)}
+ 팀 로고 등록 +
+
- 팀 상세 소개
- handleChange(e.target.value, setTeamDescription)}
- />
-
- {errors.teamDescription}
- )}
-
- 팀명
- handleChange(e.target.value, setTeamName)}
- />
- {errors.teamName && (
- 활동 지역
- handleChange(e.target.value, setLocation)}
+
{errors.teamName}
- )}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {errors.location && (
-
+ {errors.location}
- )}
-
+ 팀명
+ 분야
+ 활동 지역
+ 연락처
+ 이메일
+
+
+ handleChange(e.target.value, setTeamName)}
+ />
+ {errors.teamName && (
+
{errors.teamName}
+ )}
-
- 분야
- handleChange(e.target.value, setDomain)}
- >
-
-
-
-
- {errors.domain && 연락처
- handleChange(e.target.value, setPhoneNumber)}
- />
- {errors.phoneNumber && (
- 이메일
- handleChange(e.target.value, setEmail)}
- />
- {errors.email && handleChange(e.target.value, setDomain)}
+ >
+
+
+
+
+ {errors.domain && (
+ handleChange(e.target.value, setLocation)}
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {errors.location && (
+
+ {errors.domain}
}
-
- {errors.phoneNumber}
- )}
-
- {errors.email}
}
+ {errors.domain}
+ )}
+
+ {errors.location}
+ )}
+
+ handleChange(e.target.value, setPhoneNumber)}
+ />
+ {errors.phoneNumber && (
+ {errors.phoneNumber}
+ )}
+
+ handleChange(e.target.value, setEmail)}
+ />
+ {errors.email && (
+ {errors.email}
+ )}
+
+ 상세 소개
+ handleChange(e.target.value, setTeamContent)}
+ />
+
+
+
+
+ 등록하기
+
+
+ {data.projectName}
+
-
+
+ {data.teamName} / {data.region}
+
+ {data.state}
+ | {data.createDate}
+
+
+ 
+ {data.pass ? 합격 : 불합격 }
+
+
+ {data.pass ?
+ {/*
*/}
-
-
-
-
+ 팀원 추천
+
{
}}
>
-
- 마이페이지
+
{
const [title, setTitle] = useState("");
+ const [summary, setSummary] = useState("");
const [description, setDescription] = useState("");
const [vacancies, setVacancies] = useState(0);
+ const [teamId, setTeamId] = useState(0);
const [occupationClassifications, setOccupationClassifications] = useState(
[],
);
@@ -66,6 +89,7 @@ const RegisterMember = ({ setIsCreateTeam }) => {
const [expiredDate, setExpiredDate] = useState(new Date());
const [location, setLocation] = useState("");
const [errors, setErrors] = useState({});
+ const [teamList, setTeamList] = useState([]);
const navigate = useNavigate();
const handleChange = (value, setter) => {
@@ -79,12 +103,16 @@ const RegisterMember = ({ setIsCreateTeam }) => {
!vacancies ||
!occupationClassifications ||
!publish ||
- !expiredDate
+ !expiredDate ||
+ !location ||
+ !teamId ||
+ !summary
) {
alert("모든 항목을 채워주세요");
return;
}
const data = {
+ teamId: teamId.value,
title: title,
description: description,
vacancies: vacancies,
@@ -93,40 +121,49 @@ const RegisterMember = ({ setIsCreateTeam }) => {
),
publish: publish,
expiredDate: expiredDate.toISOString(),
+ region: location.label,
+ summary: summary,
};
console.log(data);
teamAPI
- .postNewTeamAnnouncement(data, 2)
+ .postNewTeamAnnouncement(data)
.then((res) => {
console.log(res);
- navigate("/team");
+ navigate("/teamannouncement");
})
.catch((err) => {
console.log(err);
});
};
+ useEffect(() => {
+ teamAPI
+ .getMyTeams()
+ .then((res) => {
+ const teamList = res.data.data.filter((team) => team.isOwner);
+ setTeamList(
+ teamList.map((team) => ({ value: team.id, label: team.name })),
+ );
+ })
+ .catch((err) => {
+ console.log(err);
+ });
+ }, []);
+
+ useEffect(() => {
+ console.log(description);
+ }, [description]);
+
return (
-
- 팀원 모집 공고
-
+ 팀원 모집 공고
{
marginRight: "auto",
}}
/>
-
- 공고 제목
+ 공고 제목
handleChange(e.target.value, setTitle)}
/>
- 구인 분야
- handleChange(e.target.value, setDomain)}
- >
-
-
-
-
+ onChange={(selected) => setDomain(selected)}
+ styles={{ marginTop: "15px", width: "330px" }}
+ />
{errors.domain && (
구인 유형
- handleChange(e.target.value, setLocation)}
- >
-
-
-
-
- {errors.location && (
-
diff --git a/src/pages/TeamAnnouncementDetail/styles.js b/src/pages/TeamAnnouncementDetail/styles.js
new file mode 100644
index 0000000..21da2b7
--- /dev/null
+++ b/src/pages/TeamAnnouncementDetail/styles.js
@@ -0,0 +1,210 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 20px;
+ width: 100%;
+ box-sizing: border-box;
+`;
+
+export const ContentWrapper = styled.div`
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: 80%;
+ max-width: 1200px;
+ border: 2px solid #ddd;
+ border-radius: 10px;
+ padding: 20px;
+ background-color: #fff;
+ margin-bottom: 20px;
+`;
+
+export const TeamInfoWrapper = styled.div`
+ display: flex;
+ justify-content: center;
+ align-items: flex-start;
+ width: 100%;
+ margin-bottom: 20px;
+`;
+
+export const Logo = styled.img`
+ width: 200px;
+ height: 200px;
+ object-fit: cover;
+ border: 1px solid #ddd;
+ border-radius: 10px;
+`;
+
+export const Info = styled.div`
+ display: flex;
+ flex-direction: column;
+ margin-left: 20px;
+ justify-content: start;
+ align-items: start;
+`;
+
+export const InfoItem = styled.div`
+ margin-bottom: 10px;
+ font-size: 18px;
+ color: #333;
+`;
+
+export const Introduction = styled.p`
+ margin-top: 20px;
+ font-size: 16px;
+ line-height: 1.5;
+ color: #666;
+ width: 100%;
+`;
+
+export const ApplyButton = styled.button`
+ margin-top: 20px;
+ padding: 10px 20px;
+ font-size: 18px;
+ color: #fff;
+ background-color: #007bff;
+ border: none;
+ border-radius: 5px;
+ cursor: pointer;
+
+ &:hover {
+ background-color: #0056b3;
+ }
+`;
+
+export const ParticipantsWrapper = styled.div`
+ display: flex;
+ flex-direction: column;
+ align-items: start;
+ width: 100%;
+ border: 2px solid #ddd;
+ border-radius: 10px;
+ padding: 20px;
+ background-color: #fff;
+ max-width: 1200px;
+`;
+
+export const ParticipantCard = styled.div`
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 10px;
+
+ &:last-child {
+ border-bottom: none;
+ }
+`;
+
+export const ParticipantImage = styled.img`
+ width: 100px;
+ height: 100px;
+ border-radius: 50%;
+ object-fit: cover;
+ cursor: pointer;
+`;
+
+export const ParticipantInfo = styled.div`
+ display: flex;
+ flex-direction: column;
+`;
+
+export const ParticipantName = styled.div`
+ margin-top: 14px;
+ font-size: 18px;
+ font-weight: bold;
+ cursor: pointer;
+ max-width: 6ch;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+`;
+
+export const ParticipantDetails = styled.div`
+ font-size: 14px;
+ color: #555;
+`;
+
+export const ModalOverlay = styled.div`
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: rgba(0, 0, 0, 0.7);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+`;
+
+export const Modal = styled.div`
+ background: white;
+ padding: 20px;
+ border-radius: 8px;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+ max-height: 80vh;
+ overflow-y: auto;
+`;
+
+export const ModalContent = styled.div`
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+`;
+
+export const ResumeList = styled.div`
+ max-height: 400px;
+ overflow-y: auto;
+ width: 100%;
+`;
+
+export const ResumeItem = styled.div`
+ display: flex;
+ align-items: start;
+ flex-direction: column;
+ padding: 14px;
+ margin: 5px 0;
+ border: 1px solid #ddd;
+ border-radius: 5px;
+ cursor: pointer;
+ background-color: ${({ $isSelected }) => ($isSelected ? "#f0f0f0" : "white")};
+
+ &:hover {
+ background-color: #f0f0f0;
+ }
+`;
+
+export const ResumeItemDetail = styled.div`
+ margin-bottom: 5px;
+`;
+
+export const ResumeItemDetailSmall = styled.div`
+ font-size: 14px;
+ margin-bottom: 5px;
+`;
+
+export const ModalButtonWrapper = styled.div`
+ margin-top: 14px;
+ display: flex;
+ gap: 10px;
+`;
+
+export const ConfirmButton = styled.button`
+ padding: 10px 20px;
+ background-color: #377bff;
+ color: white;
+ border: none;
+ border-radius: 5px;
+ cursor: pointer;
+`;
+
+export const CancelButton = styled.button`
+ padding: 10px 20px;
+ background-color: #ffffff;
+ color: #f44336;
+ border: 1px solid #f44336;
+ border-radius: 5px;
+ cursor: pointer;
+`;
diff --git a/src/pages/TeamAnnouncementDetail/teamAnnouncementDetail.js b/src/pages/TeamAnnouncementDetail/teamAnnouncementDetail.js
new file mode 100644
index 0000000..c36f102
--- /dev/null
+++ b/src/pages/TeamAnnouncementDetail/teamAnnouncementDetail.js
@@ -0,0 +1,213 @@
+import { useLocation } from "react-router-dom";
+import Footer from "../../components/Footer/footer";
+import Navigation from "../../components/Navigation/navigation";
+import { useEffect, useState } from "react";
+import { teamAPI } from "../../api/teamAPI";
+import {
+ Container,
+ ContentWrapper,
+ TeamInfoWrapper,
+ Logo,
+ Info,
+ InfoItem,
+ Introduction,
+ ApplyButton,
+ ParticipantsWrapper,
+ ParticipantCard,
+ ParticipantImage,
+ ParticipantInfo,
+ ParticipantName,
+ ParticipantDetails,
+ ModalOverlay,
+ Modal,
+ ModalContent,
+ ModalInput,
+ ModalButtonWrapper,
+ ConfirmButton,
+ CancelButton,
+ ResumeList,
+ ResumeItem,
+ ResumeItemDetail,
+ ResumeItemDetailSmall,
+} from "./styles";
+import { applicationAPI } from "../../api/applicationAPI";
+import { resumeAPI } from "../../api/resumeAPI";
+
+const TeamAnnouncementDetail = () => {
+ const location = useLocation();
+ const [announcementInfo, setAnnouncementInfo] = useState({});
+ const [teamInfo, setTeamInfo] = useState({});
+ const [participants, setParticipants] = useState([]);
+ const [resumes, setResumes] = useState([]);
+ const [teamAnnouncementId, setTeamAnnouncementId] = useState();
+ const [isModalOpen, setIsModalOpen] = useState(false);
+ const [selectedResumeId, setSelectedResumeId] = useState();
+
+ useEffect(() => {
+ const url = location.pathname;
+ const result = url.split("/");
+ const teamAnnouncementId = result[result.length - 1];
+ setTeamAnnouncementId(teamAnnouncementId);
+
+ teamAPI
+ .getTeamAnnouncementById(teamAnnouncementId)
+ .then((res) => {
+ setAnnouncementInfo(res.data.data);
+ })
+ .catch((err) => {
+ console.log(err);
+ });
+ }, [location]);
+
+ useEffect(() => {
+ if (announcementInfo.teamId) {
+ teamAPI
+ .getTeamById(announcementInfo.teamId)
+ .then((res) => {
+ setTeamInfo(res.data.data);
+ })
+ .catch((err) => {
+ console.log(err);
+ });
+
+ teamAPI
+ .getTeamParticipantsByTeamId(announcementInfo.teamId)
+ .then((res) => {
+ setParticipants(res.data.data);
+ })
+ .catch((err) => {
+ console.log(err);
+ });
+ }
+ }, [announcementInfo]);
+
+ const handleApply = () => {
+ setIsModalOpen(true);
+ resumeAPI
+ .getResume()
+ .then((res) => {
+ setResumes(res.data.data);
+ })
+ .catch((err) => {
+ console.log(err);
+ });
+ };
+
+ const handleConfirmApply = () => {
+ applicationAPI
+ .applyTeamAnnouncement(teamAnnouncementId, selectedResumeId)
+ .then((res) => {
+ console.log(res);
+ })
+ .catch((err) => {
+ console.log(err);
+ })
+ .finally(() => {
+ setIsModalOpen(false);
+ });
+ setSelectedResumeId();
+ };
+
+ const handleCancelApply = () => {
+ setIsModalOpen(false);
+ setSelectedResumeId();
+ };
+
+ const handleResumeSelect = (resumeId) => {
+ setSelectedResumeId(resumeId);
+ };
+
+ const formatDate = (dateString) => {
+ const options = {
+ year: "numeric",
+ month: "2-digit",
+ day: "2-digit",
+ hour: "2-digit",
+ minute: "2-digit",
+ };
+ return new Date(dateString).toLocaleString(undefined, options);
+ };
+
+ return (
+
- 팀 모집 공고
-
- 프로필 설정
- 팀 상세 소개
-
-
- handleChange(e.target.value, setDescription)}
- />
-
-
-
+
모집 분야
@@ -175,40 +200,94 @@ const RegisterMember = ({ setIsCreateTeam }) => {
onChange={(selected) => setOccupationClassifications(selected)}
styles={{ marginTop: "10px", width: "330px" }}
/>
- 모집 마감일
+
+
모집 인원
handleChange(e.target.value, setVacancies)}
- style={{ marginTop: "10px", width: "330px" }}
- />
- 활동지역
- handleChange(e.target.value, setLocation)}
- style={{ marginTop: "10px", width: "330px" }}
/>
+ 한줄 요약
+ handleChange(e.target.value, setSummary)}
+ />
+
+
-
- 등록하기
-
+
diff --git a/src/pages/RegisterMember/styles.js b/src/pages/RegisterMember/styles.js
index 227ec22..23513b1 100644
--- a/src/pages/RegisterMember/styles.js
+++ b/src/pages/RegisterMember/styles.js
@@ -1,17 +1,17 @@
import styled from "styled-components";
export const Container = styled.div`
- width: 1000px;
border: 2px solid;
border-radius: 9px;
border-color: #c9c9c9;
display: flex;
flex-direction: column;
align-items: flex-start;
+ padding: 60px;
`;
export const Title = styled.label`
- font-size: 24px;
+ font-size: 28px;
font-weight: 700;
`;
@@ -21,22 +21,14 @@ export const Tag = styled.label`
`;
export const Input = styled.input`
- height: 36px;
+ height: 38px;
border: 2px solid;
border-radius: 9px;
border-color: #c9c9c9;
`;
-export const Profile = styled.button`
- width: 250px;
- height: 250px;
- border: none;
- border-radius: 8px;
-`;
-
export const Introduce = styled.textarea`
- margin-left: 20px;
- width: 500px;
+ width: 100%;
height: 240px;
border: 2px solid;
border-radius: 9px;
@@ -50,8 +42,6 @@ export const Introduce = styled.textarea`
export const RegistrationButton = styled.button`
margin-top: 60px;
- margin-left: 750px;
- margin-bottom: 108px;
height: 35px;
border: none;
border-radius: 8px;
@@ -62,3 +52,13 @@ export const RegistrationButton = styled.button`
color: #ffffff;
background: #377bff;
`;
+
+export const QuillWrapper = styled.div`
+ margin-top: 20px;
+ display: flex;
+ width: 100%;
+ .ql-toolbar {
+ display: flex;
+ justify-content: flex-start;
+ }
+`;
diff --git a/src/pages/RegisterTeam/registerTeam.js b/src/pages/RegisterTeam/registerTeam.js
index 966499c..7ee01cd 100644
--- a/src/pages/RegisterTeam/registerTeam.js
+++ b/src/pages/RegisterTeam/registerTeam.js
@@ -1,9 +1,9 @@
import { useState } from "react";
+import Select from "react-select";
import {
Explanation,
Profile,
Input,
- Sel,
SaveButton,
Tag,
Title,
@@ -15,33 +15,104 @@ import MyResumeTestData from "../../api/testDummyData/myResumeTestData";
import MyResumeCard from "../../components/MyPageCard/MyResumeCard/myResumeCard";
import Footer from "../../components/Footer/footer";
+const occupationOptions = [
+ { value: "design_ui_ux", label: "UI/UX 디자인" },
+ { value: "design_illustration_character", label: "일러스트/캐릭터 디자인" },
+ { value: "design_movie_motion_graphic", label: "영화/모션그래픽 디자인" },
+ { value: "design_product_package", label: "제품/패키지 디자인" },
+ { value: "design_passion", label: "열정 디자인" },
+ { value: "design_crafts", label: "공예 디자인" },
+ { value: "design_graphic", label: "그래픽 디자인" },
+ { value: "development_frontend", label: "프론트엔드 개발" },
+ { value: "development_backend", label: "백엔드 개발" },
+ { value: "development_ai", label: "AI 개발" },
+ { value: "development_devops", label: "DevOps 개발" },
+ { value: "development_security", label: "보안 개발" },
+ { value: "development_game", label: "게임 개발" },
+ { value: "development_embedded", label: "임베디드 개발" },
+ { value: "development_dba", label: "DBA" },
+ { value: "plan", label: "기획" },
+ { value: "media_editing_movie", label: "영화 편집" },
+ { value: "media_filming_movie", label: "영화 촬영" },
+ { value: "media_pd", label: "PD" },
+ { value: "media_photographer", label: "사진작가" },
+ { value: "media_sound_engineer", label: "음향 엔지니어" },
+ { value: "marketing_management", label: "마케팅 관리" },
+ { value: "marketing_promotion", label: "마케팅 홍보" },
+ { value: "marketing_consulting", label: "마케팅 컨설팅" },
+ { value: "translation_english", label: "영어 번역" },
+ { value: "translation_japanese", label: "일본어 번역" },
+ { value: "translation_chinese", label: "중국어 번역" },
+ { value: "translation_spanish", label: "스페인어 번역" },
+ { value: "translation_arabic", label: "아랍어 번역" },
+ { value: "translation_hindi", label: "힌디어 번역" },
+ { value: "translation_french", label: "프랑스어 번역" },
+ { value: "translation_etc", label: "기타 번역" },
+ { value: "etc", label: "기타" },
+];
+
+const locationOptions = [
+ { value: "", label: "선택" },
+ { value: "seoul", label: "서울" },
+ { value: "busan", label: "부산" },
+ { value: "incheon", label: "인천" },
+ { value: "daegu", label: "대구" },
+ { value: "gwangju", label: "광주" },
+ { value: "daejeon", label: "대전" },
+ { value: "ulsan", label: "울산" },
+ { value: "gyeonggi", label: "경기도" },
+ { value: "gangwon", label: "강원도" },
+ { value: "chungbuk", label: "충청북도" },
+ { value: "chungnam", label: "충청남도" },
+ { value: "jeonbuk", label: "전라북도" },
+ { value: "jeonnam", label: "전라남도" },
+ { value: "gyeongbuk", label: "경상북도" },
+ { value: "gyeongnam", label: "경상남도" },
+ { value: "jeju", label: "제주도" },
+];
+
+const recruitmentTypeOptions = [
+ { value: "hackathon", label: "해커톤" },
+ { value: "side_project", label: "사이드 프로젝트" },
+ { value: "contest", label: "공모전" },
+ { value: "etc", label: "기타" },
+];
+
const RegisterTeam = ({ setIsCreateTeam }) => {
const [teamName, setTeamName] = useState("");
const [teamDescription, setTeamDescription] = useState("");
- const [domain, setDomain] = useState("");
+ const [domain, setDomain] = useState([]);
const [location, setLocation] = useState("");
+ const [recruitmentType, setRecruitmentType] = useState("");
const [phoneNumber, setPhoneNumber] = useState("");
const [email, setEmail] = useState("");
const [errors, setErrors] = useState({});
+ const [selectedResume, setSelectedResume] = useState(null);
const handleChange = (value, setter) => {
setter(value);
};
+ const handleResumeClick = (id) => {
+ setSelectedResume(id);
+ };
+
const registerTeam = async () => {
if (
!teamName ||
!teamDescription ||
- !domain ||
+ !domain.length ||
!location ||
+ !recruitmentType ||
!phoneNumber ||
!email
) {
setErrors({
teamName: teamName ? "" : "팀명을 입력해 주세요",
teamDescription: teamDescription ? "" : "팀 상세 소개를 입력해 주세요",
- domain: domain ? "" : "분야를 선택해 주세요",
+ domain: domain.length ? "" : "분야를 선택해 주세요",
location: location ? "" : "활동 지역을 선택해 주세요",
+ recruitmentType: recruitmentType ? "" : "구인 유형을 선택해 주세요",
phoneNumber: phoneNumber ? "" : "연락처를 입력해 주세요",
email: email ? "" : "이메일을 입력해 주세요",
});
@@ -50,8 +121,9 @@ const RegisterTeam = ({ setIsCreateTeam }) => {
const data = {
name: teamName,
introduction: teamDescription,
- domain: domain,
+ domain: domain.map((opt) => opt.value),
location: location,
+ recruitmentType: recruitmentType.value,
phoneNumber: phoneNumber,
email: email,
};
@@ -120,15 +192,13 @@ const RegisterTeam = ({ setIsCreateTeam }) => {
}}
>
+ 팀 선택
+
+
+
+ 활동 지역
+
+
+ 모집 마감일
setExpiredDate(date)}
dateFormat="yyyy-MM-dd"
- style={{ marginTop: "10px", width: "330px" }}
/>
+
+ 팀 상세 소개
+
+
+
+ 등록하기
+
+
{errors.domain}
)}
@@ -142,17 +212,14 @@ const RegisterTeam = ({ setIsCreateTeam }) => {
}}
>
{errors.location}
+
+
+
+
+
+ 프로젝트명:
+ 연락처:
+ 이메일:
+ 생성일:
+ 지역:
+
+
+ {announcementInfo.title}
+ {teamInfo.phoneNumber}
+ {teamInfo.email}
+ {announcementInfo.createDate}
+ {announcementInfo.region}
+
+
+
+
+
+
+
+ {isModalOpen && (
+
+
+
+
+ {resumes.map((resume, index) => (
+ handleResumeSelect(resume.id)}
+ $isSelected={resume.id === selectedResumeId}
+ >
+ {resume.title}
+
+ {formatDate(resume.timeStamp.updateAt)} 에 수정됨
+
+
+ ))}
+
+
+ 확인
+ 취소
+
+
+
+
+ )}
+
+ );
+};
+
+export default TeamAnnouncementDetail;
diff --git a/src/pages/TeamSearch/styles.js b/src/pages/TeamSearch/styles.js
index e69de29..04005b2 100644
--- a/src/pages/TeamSearch/styles.js
+++ b/src/pages/TeamSearch/styles.js
@@ -0,0 +1,38 @@
+import styled from "styled-components";
+
+export const Title = styled.label`
+ font-size: 30px;
+ font-weight: 700;
+`;
+
+export const FilterContainer = styled.div`
+ display: flex;
+ width: 100%;
+ justify-content: end;
+ margin-bottom: 20px;
+`;
+
+export const FilterButton = styled.label`
+ cursor: pointer;
+ margin: 0 10px;
+ color: ${({ $active }) => ($active ? "#377BFF" : "#6D758F")};
+ text-decoration: ${({ $active }) => ($active ? "underline #377bff" : "none")};
+ &:hover {
+ color: #377bff;
+ }
+`;
+
+export const CheckboxContainer = styled.div`
+ display: flex;
+ margin: 0px 10px;
+ justify-content: end;
+ margin-bottom: 10px;
+ label {
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ input {
+ margin-right: 8px;
+ }
+ }
+`;
diff --git a/src/pages/TeamSearch/teamSearch.js b/src/pages/TeamSearch/teamSearch.js
index d3eb5ea..c49da5a 100644
--- a/src/pages/TeamSearch/teamSearch.js
+++ b/src/pages/TeamSearch/teamSearch.js
@@ -11,12 +11,20 @@ import Footer from "../../components/Footer/footer";
import { teamAPI } from "../../api/teamAPI";
import { useRecoilValue } from "recoil";
import { occupationClassificationsState } from "../../states/occupationState";
+import {
+ Title,
+ FilterButton,
+ FilterContainer,
+ CheckboxContainer,
+} from "./styles";
const TeamSearch = () => {
const navigate = useNavigate();
const [currentPage, setCurrentPage] = useState(1);
const [announcements, setAnnouncements] = useState([]);
const [totalPages, setTotalPages] = useState(1);
+ const [filterOption, setFilterOption] = useState("latest");
+ const [expired, setExpired] = useState(false);
const occupationClassifications = useRecoilValue(
occupationClassificationsState,
);
@@ -26,6 +34,8 @@ const TeamSearch = () => {
const filter = {
page: page - 1, // 서버에서 페이지 번호가 0부터 시작하기 때문에
size: 10,
+ expired: expired,
+ option: filterOption, // views, popular, favorites
occupationClassifications:
occupationClassifications.length > 0 ? occupationClassifications : "", // 빈 배열일 경우 빈 문자열로 설정
};
@@ -41,7 +51,7 @@ const TeamSearch = () => {
useEffect(() => {
fetchTeamAnnouncements(currentPage);
- }, [currentPage, occupationClassifications]); // occupationClassifications 상태가 변경될 때마다 호출
+ }, [currentPage, occupationClassifications, filterOption, expired]); // filterOption과 expired 상태가 변경될 때마다 호출
const handlePageChange = (pageNumber) => {
setCurrentPage(pageNumber);
@@ -70,7 +80,52 @@ const TeamSearch = () => {
+ 해당 팀에 지원하기
+
+
+
+ 소속 팀원 정보
+
+ {participants.map((participant, index) => (
+
+
+ {participant.name.fullName}
+
+
+ ))}
+
+ 제출할 이력서를 아래에서 선택하세요.
+
-
+
+
+
+
+
+ setFilterOption("latest")}
+ $active={filterOption === "latest"}
+ >
+ 최신순
+
+ setFilterOption("views")}
+ $active={filterOption === "views"}
+ >
+ 조회순
+
+ setFilterOption("popular")}
+ $active={filterOption === "popular"}
+ >
+ 인기순
+
+ setFilterOption("favorites")}
+ $active={filterOption === "favorites"}
+ >
+ 찜순
+
+
+ 팀 구하기
+
+