Skip to content

Commit

Permalink
Merge pull request #33 from sayyyho/develop
Browse files Browse the repository at this point in the history 
Deploy
  • Loading branch information
@sayyyho
sayyyho authored Nov 2, 2024
2 parents a8e5b9e + 8d043c2 commit bf8d024
Show file tree
Hide file tree
Showing 4 changed files with 194 additions and 98 deletions.
45 changes: 38 additions & 7 deletions src/constants/testText.ts
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,40 @@
export const TEST_TEXT: string =
"님이 이번 팀 프로젝트에서\n가장 챙겨가고 싶은 점은 무엇인가요?";
export const TEST_TEXT: string[] = [
"님이 이번 팀 프로젝트에서 가장 챙겨가고 싶은 점은 무엇인가요?",
"가장 중요하게 생각하는 협업 요소는 무엇인가요?",
"팀원들과의 관계에서 가장 중요하게 생각하는 점은 무엇인가요?",
"프로젝트가 끝난 후 팀원들에게 어떤 모습으로 기억되고 싶은가요?",
"프로젝트를 진행하면서 스스로에게 가장 엄격하게 적용하고 싶은 원칙은 무엇인가요?",
];

export const TEST_BTN_TEXT: string[] = [
"팀원들과의 네트워킹",
"새로운 개발 기술 도전",
"팀원들과의 협업 경험",
"문제 해결 능력 강화",
export const TEST_BTN_TEXT = [
[
"팀원들과의 네트워킹",
"새로운 개발 기술 도전",
"팀원들과의 협업 경험",
"문제 해결 능력 강화",
],
[
"명확한 목표와 방향 설정",
"팀원들 간의 신뢰와 존중",
"일정과 마감 기한 준수",
"자발적이고 적극적인 참여",
],
[
"신뢰와 존중",
"서로의 역할에 대한 이해와 존중",
"친밀한 관계와 팀워크",
"자유로운 의견 교환과 소통",
],
[
"항상 문제를 해결하려고 노력했던 사람",
"팀 분위기를 밝게 만들고 소통을 원활하게 했던 사람",
"신뢰할 수 있고 책임감 있게 맡은 일을 수행했던 사람",
"새로운 아이디어와 관점으로 프로젝트에 기여했던 사람",
],
[
"맡은 일에 끝까지 책임지는 자세",
"팀원들의 의견을 존중하고 경청하는 태도",
"정해진 일정과 마감을 철저히 지키는 시간 관리",
"문제에 직면했을 때 포기하지 않고 끝까지 해결하려는 의지",
],
];
42 changes: 29 additions & 13 deletions src/pages/invite/Invite.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
import Button from "@components/common/button/Button";
import HintText2 from "@components/common/hintText/HintText2";
import DeactivatedProfile from "@components/invite/profile/DeactivatedProfile";
import ActivatedProfile from "@components/invite/profile/ActivatedProfile"; // ActivatedProfile import 추가
import UrlCopy from "@components/invite/urlCopy/UrlCopy";
import styled from "styled-components";
import { useParams } from "react-router-dom";
import { instance } from "@apis/instance";
import { useEffect } from "react";
import { useEffect, useState } from "react"; // useState import 추가

export const Container = styled.div`
width: 350px;
Expand Down Expand Up @@ -33,25 +34,40 @@ export const ProfileList = styled.div`
margin: 0 0 20px 0;
`;

// types.ts (또는 적절한 파일에 타입 선언)

export interface Profile {
id: number; // id가 숫자라고 가정
user_name: string; // 사용자 이름
role: string; // 역할
// 필요한 다른 필드도 추가 가능
}

const Invite: React.FC = () => {
const { team, count } = useParams();
const [profiles, setProfiles] = useState<Profile[]>([]); // 프로필 상태 관리

localStorage.setItem("team_id", team ? team : "test");
localStorage.setItem("member_count", count ? count : "test");

useEffect(() => {
fetchData();
}, []);

const fetchData = async () => {
try {
const response = await instance.get(
`/teams/${localStorage.getItem("team_id")}/profiles/`
);
console.log(response);
setProfiles(response.data.profiles); // 받아온 프로필 데이터를 상태에 저장
} catch (err) {
console.log(err);
}
};

const registeredCount = profiles.length; // 등록된 팀원의 수
const totalCount = Number(localStorage.getItem("member_count")); // 전체 팀원의 수

return (
<Container>
<Section>
Expand All @@ -69,22 +85,22 @@ const Invite: React.FC = () => {
프로필 등록을 하지 않으면 다음을 진행할 수 없어요."
/>
<ProfileList>
{Array.from(
{ length: Number(localStorage.getItem("member_count")) },
(_, index) => (
<DeactivatedProfile key={index} />
)
)}
{profiles.map((profile, index) => (
<ActivatedProfile
key={index}
name={profile.user_name}
position={profile.role}
part={"구성원"}
/>
))}
{Array.from({ length: totalCount - registeredCount }, (_, index) => (
<DeactivatedProfile key={index} />
))}
</ProfileList>
</Section>
<Button link="/result" name="팀원들과 동기화하기" />
</Container>
);
// TODO - 미등록 프로필 누르면 등록하는 페이지로
// TODO - 서버로 받은 UUID로 고유 페이지 생성
// TODO - 서버로 부터 등록받은 유저 받아와서 mapping
// TODO - 전 인원 미등록 시 disabled
// TODO - 전 인원 등록 후 버튼 클릭 시 GPT 관련 API요청
};

export default Invite;
167 changes: 111 additions & 56 deletions src/pages/personal/Personal.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
// Personal.tsx

import React, { useState } from "react";
import styled from "styled-components";
import styled, { createGlobalStyle } from "styled-components";
import Dropdown from "@components/common/dropdown/Dropdown";
import HintText from "@components/common/hintText/HintText2";
import DateInput from "@components/common/input/DateInput";
Expand All @@ -11,6 +11,7 @@ import Textarea from "@components/common/textarea/Textarea";
import Button from "@components/common/button/Button";
import ImgInput from "@components/personal/ImgInput";
import { Container } from "@components/common/container/style";
import { instance } from "@apis/instance";

const InputForm = styled.form`
width: 100%;
Expand All @@ -20,48 +21,62 @@ const InputForm = styled.form`
`;

const parts = [
{ value: "1", label: "기획" },
{ value: "2", label: "디자인" },
{ value: "3", label: "백엔드" },
{ value: "4", label: "웹 프론트엔드" },
{ value: "5", label: "AI" },
{ value: "6", label: "앱" },
{ value: "design", label: "디자인" },
{ value: "backend", label: "백엔드" },
{ value: "frontend", label: "프론트엔드" },
{ value: "planning", label: "기획" },
];

const radioOptions = {
radio1: [
{ value: "window", label: "Window" },
{ value: "MacOS", label: "MacOS" },
{ value: "1", label: "Window" },
{ value: "2", label: "MacOS" },
],
radio2: [
{ value: "light", label: "라이트모드" },
{ value: "dark", label: "다크모드" },
{ value: "1", label: "라이트모드" },
{ value: "2", label: "다크모드" },
],
radio3: [
{ value: "quiet", label: "조용한 열람실" },
{ value: "noise", label: "시끌시끌한 카페" },
{ value: "1", label: "조용한 열람실" },
{ value: "2", label: "시끌시끌한 카페" },
],
radio4: [
{ value: "offline", label: "오프라인 모각코" },
{ value: "online", label: "온라인 모각코" },
{ value: "1", label: "오프라인 모각코" },
{ value: "2", label: "온라인 모각코" },
],
radio5: [
{ value: "1", label: "아침" },
{ value: "2", label: "야간" },
],
radio6: [
{ value: "1", label: "계획적" },
{ value: "2", label: "즉흥적" },
],
radio7: [
{ value: "1", label: "주기적 회의" },
{ value: "2", label: "필요할 때만 연락" },
],
};

const Personal: React.FC = () => {
// 상태 객체에 모든 폼 데이터 관리
const [formData, setFormData] = useState({
name: "",
dateOfBirth: "",
contact: "",
user_name: "",
birth_date: "",
phone: "",
email: "",
github_address: "",
participation_field: "",
location: "",
affiliation: "",
affiliations: "",
mbti: "",
description: "",
selectedOption: "",
selectedRadio1: "",
selectedRadio2: "",
selectedRadio3: "",
selectedRadio4: "",
stack: "",
preferred_os: "",
editor_mode: "",
work_environment: "",
collaboration_environment: "",
focus_time: "",
project_style: "",
communication_style: "",
});

const handleChange = (field: string, value: string) => {
Expand All @@ -72,17 +87,17 @@ const Personal: React.FC = () => {
event.preventDefault();

try {
const response = await fetch("backendURL", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(formData),
});
if (!response.ok) {
throw new Error("데이터 전송 실패");
}
alert("성공적으로 데이터가 제출되었습니다.");
const response = await instance.patch(
`/teams/${localStorage.getItem(
"team_id"
)}/profile/${localStorage.getItem("profile_id")}/update/`,
formData,
{
headers: {
"Content-Type": "application/json",
},
}
);
} catch (error) {
console.error(error);
}
Expand All @@ -101,23 +116,41 @@ const Personal: React.FC = () => {
label="이름"
essential
hint=""
value={formData.name}
onChange={(e) => handleChange("name", e.target.value)}
value={formData.user_name}
onChange={(e) => handleChange("user_name", e.target.value)}
/>
<DateInput />
<Input
label="연락처"
essential
hint=""
value={formData.contact}
onChange={(e) => handleChange("contact", e.target.value)}
value={formData.phone}
onChange={(e) => handleChange("phone", e.target.value)}
/>
<Input
label="이메일"
essential
hint=""
value={formData.email}
onChange={(e) => handleChange("email", e.target.value.trim())}
/>
<Input
label="Github 이메일"
essential
hint=""
value={formData.github_address}
onChange={(e) =>
handleChange("github_address", e.target.value.trim())
}
/>
<Dropdown
label="참여 분야"
essential={true}
options={parts}
selectedOption={formData.selectedOption}
onChange={(value) => handleChange("selectedOption", value)}
selectedOption={formData.participation_field}
onChange={(value) =>
handleChange("participation_field", value.trim())
} // Adjusted to use the value directly
placeholder="파트를 선택해주세요."
/>
<Input
Expand All @@ -131,8 +164,8 @@ const Personal: React.FC = () => {
label="소속"
essential
hint=""
value={formData.affiliation}
onChange={(e) => handleChange("affiliation", e.target.value)}
value={formData.affiliations}
onChange={(e) => handleChange("affiliations", e.target.value)}
/>
<Input
label="MBTI"
Expand All @@ -142,34 +175,56 @@ const Personal: React.FC = () => {
onChange={(e) => handleChange("mbti", e.target.value)}
/>
<Textarea
value={formData.description}
onChange={(e) => handleChange("description", e.target.value)}
value={formData.stack}
onChange={(e) => handleChange("stack", e.target.value)}
/>
<RadioGroup
label="선호하는 운영체제는?"
options={radioOptions.radio1}
selectedOption={formData.selectedRadio1}
onChange={(value) => handleChange("selectedRadio1", value)}
selectedOption={formData.preferred_os}
onChange={(value) => handleChange("preferred_os", value)}
/>
<RadioGroup
label="선호하는 코드 편집기 모드는?"
options={radioOptions.radio2}
selectedOption={formData.selectedRadio2}
onChange={(value) => handleChange("selectedRadio2", value)}
selectedOption={formData.editor_mode}
onChange={(value) => handleChange("editor_mode", value)}
/>
<RadioGroup
label="선호하는 작업 환경은?"
options={radioOptions.radio3}
selectedOption={formData.selectedRadio3}
onChange={(value) => handleChange("selectedRadio3", value)}
selectedOption={formData.work_environment}
onChange={(value) => handleChange("work_environment", value)}
/>
<RadioGroup
label="선호하는 협업 환경은?"
options={radioOptions.radio4}
selectedOption={formData.selectedRadio4}
onChange={(value) => handleChange("selectedRadio4", value)}
selectedOption={formData.collaboration_environment}
onChange={(value) =>
handleChange("collaboration_environment", value)
}
/>
<RadioGroup
label="개발할 때 집중이 더 잘되는 시간대는?"
options={radioOptions.radio5}
selectedOption={formData.focus_time}
onChange={(value) => handleChange("focus_time", value)}
/>
<RadioGroup
label="선호하는 프로젝트 진행 방식은?"
options={radioOptions.radio6}
selectedOption={formData.project_style}
onChange={(value) => handleChange("project_style", value)}
/>
<RadioGroup
label="선호하는 커뮤니케이션 방식은?"
options={radioOptions.radio7}
selectedOption={formData.communication_style}
onChange={(value) =>
handleChange("communication_style", value.trim())
}
/>
<Button type="submit" name="팀원들과 동기화하기" />
<Button type="submit" name="팀원들과 동기화하기" link="/test/1" />
</InputForm>
</Container>
</>
Expand Down
Loading

0 comments on commit bf8d024

Please sign in to comment.