diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 000000000..a21bbe5dc --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,14 @@ +{ + // Use IntelliSense to learn about possible attributes. + // Hover to view descriptions of existing attributes. + // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 + "version": "0.2.0", + "configurations": [ + { + "type": "node", + "request": "launch", + "name": "Launch Program", + "program": "${workspaceFolder}/start" + } + ] +} \ No newline at end of file diff --git a/src/App.js b/src/App.js index c65730c93..72610cf85 100755 --- a/src/App.js +++ b/src/App.js @@ -5,7 +5,8 @@ import { BasicPage, ProjectPage, PeoplePage, - ProjectPageDetail + ProjectPageDetail, + PeoplePageDetail } from "./pages"; function App() { @@ -14,6 +15,7 @@ function App() { + diff --git a/src/hooks/index.js b/src/hooks/index.js index 70f56790f..9aeb9ef00 100755 --- a/src/hooks/index.js +++ b/src/hooks/index.js @@ -7,3 +7,4 @@ export { useProjectDetailLoading, useProjectDetailData } from "./useProjectDetail"; +export { usePeopleDetailLoading, usePeopleDetailData } from "./usePeopleDetail"; diff --git a/src/hooks/usePeople.js b/src/hooks/usePeople.js index 2fb8e1178..5d8f5d73d 100644 --- a/src/hooks/usePeople.js +++ b/src/hooks/usePeople.js @@ -51,31 +51,18 @@ export const usePeopleData = () => { useEffect(() => { let tempData = []; - if (navState.field) { + if (navState.tag) { peopleCard.forEach(value => { let Flag = false; - value.field.forEach(value2 => { - if (value2 === navState.field) Flag = true; + value.tag.forEach(value2 => { + if (value2 === navState.tag) Flag = true; }); - if (navState.jobGroup !== "") { - if (navState.jobGroup === "developer") - if ( - value.needMember.developer - value.currentMember.developer === - 0 - ) - Flag = false; - if (navState.jobGroup === "designer") - if (value.needMember.designer - value.currentMember.designer === 0) - Flag = false; - if (navState.jobGroup === "planner") - if (value.needMember.planner - value.currentMember.planner === 0) - Flag = false; - } + if (Flag) tempData.push(value); }); + setPeopleState(tempData); } - setPeopleState(tempData); - }, [navState.field, navState.jobGroup, peopleCard]); + }, [navState.tag, navState.jobGroup, peopleCard]); console.log(peopleState); return [{ peopleState, navState }, setPeopleState, setNavState]; diff --git a/src/hooks/usePeopleDetail.js b/src/hooks/usePeopleDetail.js new file mode 100644 index 000000000..a9decd396 --- /dev/null +++ b/src/hooks/usePeopleDetail.js @@ -0,0 +1,52 @@ +import { useEffect, useState } from "react"; +import { useSelector, useDispatch } from "react-redux"; +import { getPeopleDetail } from "../reducers/People"; + +export function usePeopleDetailLoading() { + const dispatch = useDispatch(); + const { isLoading, isError } = useSelector(state => state.People); + const [loadState, setLoadState] = useState({ + open: false, + text: "로딩 중..." + }); // 메시지 상태메시지 + + useEffect(() => { + if (isLoading) { + setLoadState({ ...loadState, open: true }); + } else if (isError) { + setLoadState({ ...loadState, open: false }); + } else { + setLoadState({ ...loadState, open: false }); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [isLoading, isError]); + + return [{ loadState }, setLoadState, dispatch]; +} + +export const usePeopleDetailData = () => { + const dispatch = useDispatch(); + const { people } = useSelector(state => state.People); + const [peopleDetailState, setPeopleDetailState] = useState({ + userId: "", + imgUrl: "", + name: "", + role: [], + technicalStack: [], + contact: "", + area: "", + level: 0 + }); + const [open, setOpen] = useState({ + change: false + }); + useEffect(() => { + dispatch(getPeopleDetail()); + }, [dispatch]); + + useEffect(() => { + setPeopleDetailState(people); + }, [people]); + + return [{ peopleDetailState, open }, setPeopleDetailState, setOpen]; +}; diff --git a/src/pages/People.js b/src/pages/People.js index 884e2cb97..46a1a10e6 100644 --- a/src/pages/People.js +++ b/src/pages/People.js @@ -55,30 +55,30 @@ const PeoplePage = () => { - - {navState.field === "" ? "분야" : ""} + + {navState.tag === "" ? "분야" : ""} - + {/* {navState.jobGroup === "" ? "직군" : ""} @@ -98,31 +98,9 @@ const PeoplePage = () => { 기획자 기타직군 - - - - {navState.area === "" ? "지역" : ""} - - - - + */} -
{peopleState.length}개의 팀이 있습니다.
+
{peopleState.length}마리의 User가 있습니다.
{peopleState.map((value, i) => ( ({ + text: { + color: "#ffffff" + } +})); + +const PeoplePageDetail = () => { + const classes = useStyles(); + const [{ loadState }, setLoadState, dispatch] = usePeopleDetailLoading(); + const [ + { peopleDetailState, open }, + setPeopleDetailState, + setOpen + ] = usePeopleDetailData(); + console.log(peopleDetailState); + + const handleInput = e => { + e.persist(); + setPeopleDetailState({ + ...peopleDetailState, + [e.target.name]: e.target.value + }); + }; + + // const handleInputMember = e => { + // setPeopleDetailState({ + // ...peopleDetailState, + // needMember: { + // [e.target.name]: e.target.value + // } + // }); + // }; + + const handleSave = async () => { + setOpen({ ...open, change: !open.change }); + await dispatch(setPeopleDetail(peopleDetailState)); + }; + + return ( +
+ + + + ESKIMO + + +
+ +
+ + + {open.change ? ( +
+ + + + + + {/*
+ 개발자 : + +
+
+ 기획자 : + +
+
+ 디자이너 : + +
+
+ 기타 : + +
*/} + +
+ ) : ( +
+
+
+ {typeof peopleDetailState.imgUrl !== "string" ? ( + 이미지 에러 + ) : ( +
+ 이미지 에러 +
+ )} +
+
+
+ + {peopleDetailState.name} + + + Lev.{peopleDetailState.level} + +
+
+ 개인정보 + {/* */} + + 레벨 : {peopleDetailState.level} + + + 연락처 : {peopleDetailState.contact} + + + {peopleDetailState.technicalStack.map((value, i) => ( + #{value} + ))} + +
+ + 팀원 현황 ... 데이터 추가후 추가예정 + + + + +
{loadState.text}
+ + + +
+ )} +
+ + ESKIMO + + + 문의 : manzi@kakao.com + +
+
+ ); +}; + +export default PeoplePageDetail; diff --git a/src/pages/ProjectDetail.js b/src/pages/ProjectDetail.js index a55eb2820..7585f74f6 100755 --- a/src/pages/ProjectDetail.js +++ b/src/pages/ProjectDetail.js @@ -1,22 +1,22 @@ -import React from 'react'; -import Button from '@material-ui/core/Button'; -import { makeStyles } from '@material-ui/core/styles'; -import AppBar from '@material-ui/core/AppBar'; -import Toolbar from '@material-ui/core/Toolbar'; -import Typography from '@material-ui/core/Typography'; -import MuiCircularProgress from '@material-ui/core/CircularProgress'; -import MuiDialogContent from '@material-ui/core/DialogContent'; -import Dialog from '@material-ui/core/Dialog'; -import ReactMarkdown from 'react-markdown/with-html'; -import TextField from '@material-ui/core/TextField'; -import { useProjectDetailLoading, useProjectDetailData } from '../hooks'; -import { ImgInput } from '../components'; -import { setProjectDetail } from '../reducers/Project'; +import React from "react"; +import Button from "@material-ui/core/Button"; +import { makeStyles } from "@material-ui/core/styles"; +import AppBar from "@material-ui/core/AppBar"; +import Toolbar from "@material-ui/core/Toolbar"; +import Typography from "@material-ui/core/Typography"; +import MuiCircularProgress from "@material-ui/core/CircularProgress"; +import MuiDialogContent from "@material-ui/core/DialogContent"; +import Dialog from "@material-ui/core/Dialog"; +import ReactMarkdown from "react-markdown/with-html"; +import TextField from "@material-ui/core/TextField"; +import { useProjectDetailLoading, useProjectDetailData } from "../hooks"; +import { ImgInput } from "../components"; +import { setProjectDetail } from "../reducers/Project"; const useStyles = makeStyles(theme => ({ text: { - color: '#ffffff', - }, + color: "#ffffff" + } })); const ProjectPageDetail = () => { @@ -25,7 +25,7 @@ const ProjectPageDetail = () => { const [ { projectDetailState, open }, setProjectDetailState, - setOpen, + setOpen ] = useProjectDetailData(); const tempDate = new Date(projectDetailState.Dday); @@ -33,7 +33,7 @@ const ProjectPageDetail = () => { e.persist(); setProjectDetailState({ ...projectDetailState, - [e.target.name]: e.target.value, + [e.target.name]: e.target.value }); }; @@ -41,8 +41,8 @@ const ProjectPageDetail = () => { setProjectDetailState({ ...projectDetailState, needMember: { - [e.target.name]: e.target.value, - }, + [e.target.name]: e.target.value + } }); }; @@ -56,9 +56,9 @@ const ProjectPageDetail = () => { - + ESKIMO @@ -142,16 +142,16 @@ const ProjectPageDetail = () => { ) : (
-
+
- {typeof projectDetailState.imgUrl !== 'string' ? ( + {typeof projectDetailState.imgUrl !== "string" ? ( 이미지 에러 ) : (
@@ -161,13 +161,13 @@ const ProjectPageDetail = () => { align="center" height="30%" width="100%" - style={{ display: 'block', opacity: '0.5', hover: 1 }} + style={{ display: "block", opacity: "0.5", hover: 1 }} />
)}
-
+
{projectDetailState.projectName} @@ -175,34 +175,34 @@ const ProjectPageDetail = () => { {projectDetailState.teamName}
-
+
팀원 현황 - 개발 :{' '} + 개발 :{" "} {projectDetailState.needMember.developer - projectDetailState.currentMember.developer} - 기획 :{' '} + 기획 :{" "} {projectDetailState.needMember.planner - projectDetailState.currentMember.planner} - 디자이너 :{' '} + 디자이너 :{" "} {projectDetailState.needMember.designer - projectDetailState.currentMember.designer} - 기타 :{' '} + 기타 :{" "} {projectDetailState.needMember.other - projectDetailState.currentMember.other} - 마감 일 :{' '} + 마감 일 :{" "} {`${tempDate.getFullYear()}년${tempDate.getMonth()}${1}월${tempDate.getDate()}일`}
@@ -212,14 +212,14 @@ const ProjectPageDetail = () => { - -
{loadState.text}
+ +
{loadState.text}