people페이지, peopleDetail페이지 구현

buildyourteam · Feb 3, 2020 · c608811 · c608811
1 parent e74e123
commit c608811
Show file tree

Hide file tree

Showing 10 changed files with 428 additions and 107 deletions.
diff --git a/.vscode/launch.json 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"
+        }
+    ]
+}
diff --git 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() {
       <Switch>
         <Route exact path="/" component={BasicPage} />
         <Route path="/project/:projectId" component={ProjectPageDetail} />
+        <Route path="/people/:userId" component={PeoplePageDetail} />
         <Route exact path="/project" component={ProjectPage} />
         <Route exact path="/people" component={PeoplePage} />
         <Route path="*" component={NotFound} />

diff --git 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
@@ -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
@@ -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
@@ -55,30 +55,30 @@ const PeoplePage = () => {
       </AppBar>
       <Grid>
         <FormControl className={classes.formcontrol}>
-          <InputLabel shrink={false} id="fieldLabel">
-            {navState.field === "" ? "분야" : ""}
+          <InputLabel shrink={false} id="tagLabel">
+            {navState.tag === "" ? "분야" : ""}
           </InputLabel>
           <Select
             className={classes.select}
-            labelId="fieldLabel"
-            id="field"
-            name="field"
-            value={navState.field}
+            labelId="tagLabel"
+            id="tag"
+            name="tag"
+            value={navState.tag}
             onChange={handleClickNav}
             autoWidth
             variant="standard"
             disableUnderline
           >
-            <MenuItem value="앱 서비스">앱 서비스</MenuItem>
-            <MenuItem value="웹 서비스">웹 서비스</MenuItem>
-            <MenuItem value="AI 서비스">AI 서비스</MenuItem>
-            <MenuItem value="블록체인">블록체인</MenuItem>
-            <MenuItem value="HW 개발">HW 개발</MenuItem>
-            <MenuItem value="시스템 개발">시스템 개발</MenuItem>
-            <MenuItem value="기타 개발">기타 개발</MenuItem>
+            <MenuItem value="Python">Python</MenuItem>
+            <MenuItem value="Django">Django</MenuItem>
+            <MenuItem value="JAVA">JAVA</MenuItem>
+            <MenuItem value="React JS">React JS</MenuItem>
+            <MenuItem value="Vue JS">Vue JS</MenuItem>
+            <MenuItem value="Spring boot">Spring boot</MenuItem>
+            <MenuItem value="Ruby on Rails">Ruby on Rails</MenuItem>
           </Select>
         </FormControl>
-        <FormControl className={classes.formcontrol}>
+        {/* <FormControl className={classes.formcontrol}>
           <InputLabel shrink={false} id="jobGroupLabel">
             {navState.jobGroup === "" ? "직군" : ""}
           </InputLabel>
@@ -98,31 +98,9 @@ const PeoplePage = () => {
             <MenuItem value="planner">기획자</MenuItem>
             <MenuItem value="other">기타직군</MenuItem>
           </Select>
-        </FormControl>
-        <FormControl className={classes.formcontrol}>
-          <InputLabel shrink={false} id="areaLabel">
-            {navState.area === "" ? "지역" : ""}
-          </InputLabel>
-          <Select
-            className={classes.select}
-            labelId="areaLabel"
-            id="area"
-            name="area"
-            value={navState.area}
-            onChange={handleClickNav}
-            autoWidth
-            variant="standard"
-            disableUnderline
-          >
-            <MenuItem value="서울">서울</MenuItem>
-            <MenuItem value="인천">인천</MenuItem>
-            <MenuItem value="경기북부">경기북부</MenuItem>
-            <MenuItem value="경기남부">경기남부</MenuItem>
-          </Select>
-        </FormControl>
-        <Button>프로젝트 팀 개설하기 ></Button>
+        </FormControl> */}
       </Grid>
-      <div>{peopleState.length}개의 팀이 있습니다.</div>
+      <div>{peopleState.length}마리의 User가 있습니다.</div>
       <Grid container>
         {peopleState.map((value, i) => (
           <span