From a01163377c19994324e5a7af86343ba8bcd98642 Mon Sep 17 00:00:00 2001 From: jungwho Date: Sun, 10 Nov 2024 19:22:17 +0900 Subject: [PATCH] [fix] Team components migration --- package-lock.json | 179 ++++++------------ package.json | 1 + .../commons/{teamInput.jsx => teamInput.tsx} | 21 +- .../team/{diaryCard.jsx => diaryCard.tsx} | 22 ++- .../team/{memberAdd.jsx => memberAdd.tsx} | 57 ++++-- .../team/{teamAdd.jsx => teamAdd.tsx} | 15 +- .../team/{teamAddUi.jsx => teamAddUi.tsx} | 24 ++- .../team/{teamDiary.jsx => teamDiary.tsx} | 35 +++- .../team/{teamEdit.jsx => teamEdit.tsx} | 14 +- .../team/{teamMember.jsx => teamMember.tsx} | 42 ++-- .../team/{teamProfile.jsx => teamProfile.tsx} | 23 ++- 11 files changed, 239 insertions(+), 194 deletions(-) rename src/components/team/commons/{teamInput.jsx => teamInput.tsx} (64%) rename src/components/team/{diaryCard.jsx => diaryCard.tsx} (62%) rename src/components/team/{memberAdd.jsx => memberAdd.tsx} (80%) rename src/components/team/{teamAdd.jsx => teamAdd.tsx} (79%) rename src/components/team/{teamAddUi.jsx => teamAddUi.tsx} (86%) rename src/components/team/{teamDiary.jsx => teamDiary.tsx} (88%) rename src/components/team/{teamEdit.jsx => teamEdit.tsx} (82%) rename src/components/team/{teamMember.jsx => teamMember.tsx} (78%) rename src/components/team/{teamProfile.jsx => teamProfile.tsx} (87%) diff --git a/package-lock.json b/package-lock.json index 2999df8..fac6b05 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,6 +19,7 @@ "http-proxy-middleware": "^3.0.0", "react": "^18.3.1", "react-dom": "^18.3.1", + "react-paypal-express-checkout": "^1.0.5", "react-router-dom": "^6.24.1", "react-scripts": "5.0.1", "styled-component": "^2.8.0", @@ -3709,104 +3710,6 @@ "node": ">=6" } }, - "node_modules/@testing-library/dom": { - "version": "10.3.1", - "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.3.1.tgz", - "integrity": "sha512-q/WL+vlXMpC0uXDyfsMtc1rmotzLV8Y0gq6q1gfrrDjQeHoeLrqHbxdPvPNAh1i+xuJl7+BezywcXArz7vLqKQ==", - "peer": true, - "dependencies": { - "@babel/code-frame": "^7.10.4", - "@babel/runtime": "^7.12.5", - "@types/aria-query": "^5.0.1", - "aria-query": "5.3.0", - "chalk": "^4.1.0", - "dom-accessibility-api": "^0.5.9", - "lz-string": "^1.5.0", - "pretty-format": "^27.0.2" - }, - "engines": { - "node": ">=18" - } - }, - "node_modules/@testing-library/dom/node_modules/ansi-styles": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", - "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", - "peer": true, - "dependencies": { - "color-convert": "^2.0.1" - }, - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/chalk/ansi-styles?sponsor=1" - } - }, - "node_modules/@testing-library/dom/node_modules/aria-query": { - "version": "5.3.0", - "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz", - "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==", - "peer": true, - "dependencies": { - "dequal": "^2.0.3" - } - }, - "node_modules/@testing-library/dom/node_modules/chalk": { - "version": "4.1.2", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", - "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", - "peer": true, - "dependencies": { - "ansi-styles": "^4.1.0", - "supports-color": "^7.1.0" - }, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/chalk/chalk?sponsor=1" - } - }, - "node_modules/@testing-library/dom/node_modules/color-convert": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", - "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", - "peer": true, - "dependencies": { - "color-name": "~1.1.4" - }, - "engines": { - "node": ">=7.0.0" - } - }, - "node_modules/@testing-library/dom/node_modules/color-name": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", - "peer": true - }, - "node_modules/@testing-library/dom/node_modules/has-flag": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", - "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", - "peer": true, - "engines": { - "node": ">=8" - } - }, - "node_modules/@testing-library/dom/node_modules/supports-color": { - "version": "7.2.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", - "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", - "peer": true, - "dependencies": { - "has-flag": "^4.0.0" - }, - "engines": { - "node": ">=8" - } - }, "node_modules/@testing-library/jest-dom": { "version": "5.17.0", "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.17.0.tgz", @@ -6183,6 +6086,30 @@ "babel-plugin-transform-react-remove-prop-types": "^0.4.24" } }, + "node_modules/babel-runtime": { + "version": "6.26.0", + "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz", + "integrity": "sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g==", + "license": "MIT", + "dependencies": { + "core-js": "^2.4.0", + "regenerator-runtime": "^0.11.0" + } + }, + "node_modules/babel-runtime/node_modules/core-js": { + "version": "2.6.12", + "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz", + "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==", + "deprecated": "core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.", + "hasInstallScript": true, + "license": "MIT" + }, + "node_modules/babel-runtime/node_modules/regenerator-runtime": { + "version": "0.11.1", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz", + "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==", + "license": "MIT" + }, "node_modules/balanced-match": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", @@ -8409,15 +8336,6 @@ "node": ">= 0.8" } }, - "node_modules/dequal": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz", - "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==", - "peer": true, - "engines": { - "node": ">=6" - } - }, "node_modules/des.js": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/des.js/-/des.js-1.1.0.tgz", @@ -11373,6 +11291,11 @@ "minimalistic-crypto-utils": "^1.0.1" } }, + "node_modules/hoist-non-react-statics": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-1.2.0.tgz", + "integrity": "sha512-r8huvKK+m+VraiRipdZYc+U4XW43j6OFG/oIafe7GfDbRpCduRoX9JI/DRxqgtBSCeL+et6N6ibZoedHS2NyOQ==" + }, "node_modules/hoopy": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz", @@ -15931,21 +15854,6 @@ "safe-buffer": "~5.1.0" } }, - "node_modules/node-notifier": { - "version": "10.0.1", - "resolved": "https://registry.npmjs.org/node-notifier/-/node-notifier-10.0.1.tgz", - "integrity": "sha512-YX7TSyDukOZ0g+gmzjB6abKu+hTGvO8+8+gIFDsRCU2t8fLV/P2unmt+LGFaIa4y64aX98Qksa97rgz4vMNeLQ==", - "optional": true, - "peer": true, - "dependencies": { - "growly": "^1.3.0", - "is-wsl": "^2.2.0", - "semver": "^7.3.5", - "shellwords": "^0.1.1", - "uuid": "^8.3.2", - "which": "^2.0.2" - } - }, "node_modules/node-releases": { "version": "2.0.14", "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz", @@ -18489,6 +18397,18 @@ "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz", "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==" }, + "node_modules/react-async-script-loader": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/react-async-script-loader/-/react-async-script-loader-0.3.0.tgz", + "integrity": "sha512-g2pokd4l9IG95RlKmrthyxMl5tSrlEQgRC18skLpyuDDkljsuR8UHAnf27Oy/Fkl0PfXCkWWG/VDjsiifDCJtA==", + "license": "MIT", + "dependencies": { + "hoist-non-react-statics": "^1.0.3" + }, + "peerDependencies": { + "react": "^15.5.4" + } + }, "node_modules/react-dev-utils": { "version": "12.0.1", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz", @@ -18685,6 +18605,21 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" }, + "node_modules/react-paypal-express-checkout": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/react-paypal-express-checkout/-/react-paypal-express-checkout-1.0.5.tgz", + "integrity": "sha512-J2s/C9ftuG/ja1/QelGSg4veXij5p9zNhOqr2wTw6ERprWpHbQm/JNx/U43G5aiqAnnoFxlKsFl+t1nAOqbw6w==", + "license": "MIT", + "dependencies": { + "babel-runtime": "^6.6.1", + "prop-types": "^15.5.10", + "react-async-script-loader": "^0.3.0" + }, + "peerDependencies": { + "react": "~0.14.8 || ^15.5.0", + "react-dom": "~0.14.8 || ^15.5.0" + } + }, "node_modules/react-refresh": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", diff --git a/package.json b/package.json index 47d2809..ec464a3 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "http-proxy-middleware": "^3.0.0", "react": "^18.3.1", "react-dom": "^18.3.1", + "react-paypal-express-checkout": "^1.0.5", "react-router-dom": "^6.24.1", "react-scripts": "5.0.1", "styled-component": "^2.8.0", diff --git a/src/components/team/commons/teamInput.jsx b/src/components/team/commons/teamInput.tsx similarity index 64% rename from src/components/team/commons/teamInput.jsx rename to src/components/team/commons/teamInput.tsx index 1d82740..15c1cb0 100644 --- a/src/components/team/commons/teamInput.jsx +++ b/src/components/team/commons/teamInput.tsx @@ -22,14 +22,25 @@ const StyledInput = styled.input` } `; -const TeamInput = ({ placeholder, width, height, onChange }) => { +interface TeamInputProps { + placeholder?: string; + width?: string; + height?: string; + onChange: (value: string) => void; +} + +const TeamInput: React.FC = ({ + placeholder, + width, + height, + onChange, +}) => { return ( - onChange(e.target.value)} /> ); }; diff --git a/src/components/team/diaryCard.jsx b/src/components/team/diaryCard.tsx similarity index 62% rename from src/components/team/diaryCard.jsx rename to src/components/team/diaryCard.tsx index 0c8702e..b0aee94 100644 --- a/src/components/team/diaryCard.jsx +++ b/src/components/team/diaryCard.tsx @@ -1,20 +1,28 @@ -import React from "react"; +interface Diary { + postId: Number; + postTitle: string; + nickname: string; + postBody: string; + createdAt: any; + memberId: string; + thumbnailImageUrl: string; +} -const DiaryCard = ({ data }) => { - const cardContainer = { +const DiaryCard = ({ data }: { data: Diary }) => { + const cardContainer: React.CSSProperties = { display: "flex", flexDirection: "column", width: "360px", height: "460px", }; - const imgContainer = { + const imgContainer: React.CSSProperties = { width: "100%", height: "200px", }; return (
- +
{
{data.postTitle}
-
{data.writer}
+
{data.nickname}
- {data.contents} + {data.postBody}
diff --git a/src/components/team/memberAdd.jsx b/src/components/team/memberAdd.tsx similarity index 80% rename from src/components/team/memberAdd.jsx rename to src/components/team/memberAdd.tsx index 25965c1..1ec45f0 100644 --- a/src/components/team/memberAdd.jsx +++ b/src/components/team/memberAdd.tsx @@ -3,15 +3,37 @@ import styled from "styled-components"; import { get, post, del2 } from "../../common/api"; import { useParams } from "react-router-dom"; -const MemberAdd = ({ isPop, onClose }) => { - const [memberData, setMemberData] = useState([]); +interface MemberAddProps { + isPop: boolean; + onClose: any; +} + +interface Follower { + current_member_id: Number; + user_id: Number; + user_name: string; + photo_url: string; + github_url: string; + linkedin_url: string; + discord_url: string; + introduction: string; +} + +type Followers = Follower[]; + +const MemberAdd = ({ isPop, onClose }: MemberAddProps) => { + const [memberData, setMemberData] = useState([]); const [selectedMembers, setSelectedMembers] = useState(new Set()); const [showRolePopup, setShowRolePopup] = useState(false); - const [currentMemberId, setCurrentMemberId] = useState(null); + const [currentMemberId, setCurrentMemberId] = useState(null); const [memberRole, setRole] = useState(""); const { teamId } = useParams(); - const addMember = async (memberId, teamId, memberRole) => { + const addMember = async ( + memberId: Number | null, + teamId: string | undefined, + memberRole: string + ) => { const addData = { teamId: teamId, memberId: memberId, @@ -26,7 +48,7 @@ const MemberAdd = ({ isPop, onClose }) => { } }; - const getTeamInfo = async (teamId) => { + const getTeamInfo = async (teamId: string | undefined) => { try { const result = await get(`/teams/${teamId}`); return result?.result; @@ -35,7 +57,7 @@ const MemberAdd = ({ isPop, onClose }) => { } }; - const deleteMember = async (memberId, teamId) => { + const deleteMember = async (memberId: Number, teamId: string | undefined) => { const deleteData = { memberId: memberId, teamId: teamId, @@ -51,8 +73,8 @@ const MemberAdd = ({ isPop, onClose }) => { useEffect(() => { const getFollowing = async () => { try { - const result = await get("/members/following"); - setMemberData(result.result); + const result = await get(`/api/v2/follow/teams/${teamId}/followers`); + setMemberData(result?.result.followers); } catch (error) { console.log("follower", error); } @@ -61,7 +83,7 @@ const MemberAdd = ({ isPop, onClose }) => { try { const teamInfo = await getTeamInfo(teamId); const teamMembers = new Set( - teamInfo.members.map((member) => member.memberId) + teamInfo.members.map((member: any) => member.memberId) ); setSelectedMembers(teamMembers); } catch (error) { @@ -73,7 +95,7 @@ const MemberAdd = ({ isPop, onClose }) => { fetchTeamInfo(); }, []); - const handleToggleMember = (memberId) => { + const handleToggleMember = (memberId: Number) => { const isSelected = selectedMembers.has(memberId); if (isSelected) { @@ -84,7 +106,7 @@ const MemberAdd = ({ isPop, onClose }) => { } }; - const handleRemoveMember = async (memberId) => { + const handleRemoveMember = async (memberId: Number) => { await deleteMember(memberId, teamId); setSelectedMembers((prev) => { const newSet = new Set(prev); @@ -124,15 +146,15 @@ const MemberAdd = ({ isPop, onClose }) => { memberData.map((el, index) => ( handleToggleMember(el.memberId)} + onClick={() => handleToggleMember(el.current_member_id)} style={{ - backgroundColor: selectedMembers.has(el.memberId) + backgroundColor: selectedMembers.has(el.current_member_id) ? "gray" : "#222222", color: "white", }} > - {el.nickname} + {el.user_name} )) ) : ( @@ -169,7 +191,12 @@ const Container = styled.div` z-index: 1000; `; -const CloseBtn = styled.img` +interface CloseBtnProps { + onClick: any; + src: string; +} + +const CloseBtn = styled.img` margin-left: 95%; &:hover { cursor: pointer; diff --git a/src/components/team/teamAdd.jsx b/src/components/team/teamAdd.tsx similarity index 79% rename from src/components/team/teamAdd.jsx rename to src/components/team/teamAdd.tsx index 54e8678..97ca7ec 100644 --- a/src/components/team/teamAdd.jsx +++ b/src/components/team/teamAdd.tsx @@ -42,13 +42,14 @@ const TeamAdd = () => { return ( setName(e.target.value)} - onChangeEmail={(e) => setEmail(e.target.value)} - onChangeIntro={(e) => setIntro(e.target.value)} - onChangeGithub={(e) => setGithub(e.target.value)} - onChangeDiscord={(e) => setDiscord(e.target.value)} - onChangeLinked={(e) => setLinked(e.target.value)} - onChangeInstagram={(e) => setInstagram(e.target.value)} + onChangeName={(e: any) => setName(e.target.value)} + onChangeEmail={(e: any) => setEmail(e.target.value)} + onChangeIntro={(e: any) => setIntro(e.target.value)} + onChangeGithub={(e: any) => setGithub(e.target.value)} + onChangeDiscord={(e: any) => setDiscord(e.target.value)} + onChangeLinked={(e: any) => setLinked(e.target.value)} + onChangeInstagram={(e: any) => setInstagram(e.target.value)} + isEdit /> 저장하기 diff --git a/src/components/team/teamAddUi.jsx b/src/components/team/teamAddUi.tsx similarity index 86% rename from src/components/team/teamAddUi.jsx rename to src/components/team/teamAddUi.tsx index 4b15f02..0e397ee 100644 --- a/src/components/team/teamAddUi.jsx +++ b/src/components/team/teamAddUi.tsx @@ -1,9 +1,18 @@ -import React, { useState, useEffect } from "react"; import styled from "styled-components"; import TeamInput from "./commons/teamInput"; -import { Link } from "react-router-dom"; -const TeamAddUi = (props) => { +interface TeamAddUiProps { + onChangeName: (value: string) => void; + onChangeEmail: (value: string) => void; + onChangeIntro: (value: string) => void; + onChangeGithub: (value: string) => void; + onChangeDiscord: (value: string) => void; + onChangeLinked: (value: string) => void; + onChangeInstagram: (value: string) => void; + isEdit: boolean; +} + +const TeamAddUi = (props: TeamAddUiProps) => { return (
팀 정보 @@ -44,23 +53,22 @@ const TeamAddUi = (props) => { +

- +

diff --git a/src/components/team/teamDiary.jsx b/src/components/team/teamDiary.tsx similarity index 88% rename from src/components/team/teamDiary.jsx rename to src/components/team/teamDiary.tsx index 4cc6f0b..8035f90 100644 --- a/src/components/team/teamDiary.jsx +++ b/src/components/team/teamDiary.tsx @@ -5,12 +5,31 @@ import { useParams } from "react-router-dom"; import { AddModal } from "../modal/AddModal"; import Card from "../main/Card"; -const TeamDiary = ({ isManager }) => { +interface Project { + projectId: Number; + projectName: string; +} + +type TeamProject = Project[]; + +interface Diary { + postId: Number; + postTitle: string; + nickname: string; + postBody: string; + createdAt: any; + memberId: string; + thumbnailImageUrl: string; +} + +type DiaryList = Diary[]; + +const TeamDiary = ({ isManager }: { isManager: boolean }) => { const [currentPage, setCurrentPage] = useState(1); const [totalPages, setTotalPages] = useState(0); - const [diaryList, setDiaryList] = useState([]); + const [diaryList, setDiaryList] = useState([]); const { teamId } = useParams(); - const [teamProject, setTeamProject] = useState([]); + const [teamProject, setTeamProject] = useState([]); const [isAddCategoryModalOpen, setIsAddCategoryModalOpen] = useState(false); @@ -43,7 +62,7 @@ const TeamDiary = ({ isManager }) => { fetchTeamDiary(); }, [isAddCategoryModalOpen]); - const addCategory = async (value) => { + const addCategory = async (value: string) => { try { const result = await post(`/teams/${teamId}/project`, { projectName: value, @@ -57,7 +76,7 @@ const TeamDiary = ({ isManager }) => { setTotalPages(Math.ceil(diaryList.length / 6)); }, [diaryList]); - const handleCategoryClick = async (projectId) => { + const handleCategoryClick = async (projectId: Number) => { if (projectId == -1) { try { const response = await get( @@ -218,7 +237,11 @@ const Pagination = styled.div` margin: 20px 0; `; -const PageNum = styled.div` +interface PageNumProps { + isActive: boolean; +} + +const PageNum = styled.div` color: ${(props) => (props.isActive ? "white" : "#888888")}; font-size: 20px; cursor: pointer; diff --git a/src/components/team/teamEdit.jsx b/src/components/team/teamEdit.tsx similarity index 82% rename from src/components/team/teamEdit.jsx rename to src/components/team/teamEdit.tsx index 7a1b6a4..c83fce8 100644 --- a/src/components/team/teamEdit.jsx +++ b/src/components/team/teamEdit.tsx @@ -40,13 +40,13 @@ const TeamEdit = () => { return ( setName(e.target.value)} - onChangeEmail={(e) => setEmail(e.target.value)} - onChangeIntro={(e) => setIntro(e.target.value)} - onChangeGithub={(e) => setGithub(e.target.value)} - onChangeDiscord={(e) => setDiscord(e.target.value)} - onChangeLinked={(e) => setLinked(e.target.value)} - onChangeInstagram={(e) => setInstagram(e.target.value)} + onChangeName={(e: any) => setName(e.target.value)} + onChangeEmail={(e: any) => setEmail(e.target.value)} + onChangeIntro={(e: any) => setIntro(e.target.value)} + onChangeGithub={(e: any) => setGithub(e.target.value)} + onChangeDiscord={(e: any) => setDiscord(e.target.value)} + onChangeLinked={(e: any) => setLinked(e.target.value)} + onChangeInstagram={(e: any) => setInstagram(e.target.value)} isEdit={isEdit} /> diff --git a/src/components/team/teamMember.jsx b/src/components/team/teamMember.tsx similarity index 78% rename from src/components/team/teamMember.jsx rename to src/components/team/teamMember.tsx index 118d180..b75f924 100644 --- a/src/components/team/teamMember.jsx +++ b/src/components/team/teamMember.tsx @@ -3,19 +3,33 @@ import React, { useState, useEffect } from "react"; import { get } from "../../common/api"; import MemberAdd from "./memberAdd"; import { useParams } from "react-router-dom"; -import DiaryDefaultImg from "../../assets/diary_default_img.png"; -import svg from "../../assets/user_profile_default.svg"; -const TeamMember = ({ isManager }) => { + +interface Member { + team_member_id: Number; + team_member_role: string; + team_member_position: string; + member: MemberInfo; +} + +interface MemberInfo { + user_id: Number; + user_name: string; + photo_url: string; +} + +type Members = Member[]; + +const TeamMember = ({ isManager }: { isManager: boolean }) => { const [memberIndex, setMemberIndex] = useState(0); const [isPop, setIsPop] = useState(false); - const [memberData, setMemberData] = useState([]); + const [memberData, setMemberData] = useState([]); const { teamId } = useParams(); useEffect(() => { const getTeamInfo = async () => { try { const result = await get(`/teams/${teamId}`); - setMemberData(result?.result.members); - console.log(result?.result.members); + setMemberData(result?.result.team_member_list); + console.log(result?.result.team_member_list); } catch (error) { console.log("Error fetching team info:", error); } @@ -64,19 +78,21 @@ const TeamMember = ({ isManager }) => { )} - {memberData.slice(memberIndex, memberIndex + 3).map((el) => ( - + {memberData.slice(memberIndex, memberIndex + 3).map((el, index) => ( + - {el.nickname} + {el.member.user_name} - {el.memberRole === "ADMIN" ? el.memberRole : el.memberPosition} + {el.team_member_role === "ADMIN" + ? el.team_member_role + : el.team_member_position} ))} diff --git a/src/components/team/teamProfile.jsx b/src/components/team/teamProfile.tsx similarity index 87% rename from src/components/team/teamProfile.jsx rename to src/components/team/teamProfile.tsx index 214f171..1bcdfc0 100644 --- a/src/components/team/teamProfile.jsx +++ b/src/components/team/teamProfile.tsx @@ -1,9 +1,24 @@ import styled from "styled-components"; -import React, { useState, useEffect } from "react"; +import { useState, useEffect } from "react"; import TeamMember from "./teamMember"; import { useNavigate, useParams } from "react-router-dom"; import { get } from "../../common/api"; -const TeamProfile = (props) => { + +interface TeamData { + team_id: 0; + name: "string"; + intro: "string"; + admin_mail: "string"; + profile_image_url: "string"; + banner_image_url: "string"; + github: "string"; + email: "string"; + linked_in: "string"; + discord: "string"; + instagram: "string"; +} + +const TeamProfile = (props: any) => { const [teamName, setTeamName] = useState("Team Name"); const [teamUrl, setTeamUrl] = useState([]); const [teamDescription, setTeamDescription] = useState("Team Introduce"); @@ -13,14 +28,14 @@ const TeamProfile = (props) => { const isEdit = true; const { teamId } = useParams(); - const [teamData, setTeamData] = useState(null); + const [teamData, setTeamData] = useState(null); const [isManager, setIsManager] = useState(true); useEffect(() => { const fetchTeamData = async () => { try { - const response = await get(`/teams/${teamId}`); + const response = await get(`api/v2/teams/${teamId}`); setTeamData(response.result); console.log(response.result); } catch (error) {