diff --git a/src/App.js b/src/App.js
index 0c3141a8..1f22e35e 100644
--- a/src/App.js
+++ b/src/App.js
@@ -4,8 +4,6 @@ import {
   Root,
   ProjectList,
   Profile,
-  Register,
-  Login,
   ProjectDetail,
   ProjectCreate,
   ProjectUpdate,
@@ -28,6 +26,7 @@ function App() {
         <Route path="/projects" component={ProjectList} />
         <Route path="/createProject" component={ProjectCreate} />
         <Route path="/projectDetail/:id" component={ProjectDetail} />
+        <Route path="/projectUpdate/:id" component={ProjectUpdate} />
         {/* <Route exact path="/" component={Root} />
         <Route path="/projects" component={ProjectList} />
         <Route path="/peoples" component={PeopleList} />
diff --git a/src/hook/projectTs/index.ts b/src/hook/projectTs/index.ts
index 5f0c4dcd..8038f78e 100644
--- a/src/hook/projectTs/index.ts
+++ b/src/hook/projectTs/index.ts
@@ -13,3 +13,6 @@ export {
   useViewProjectApplyStateTs,
   useViewProjectApplyEffectTs,
 } from "./useProjectApplyTs";
+export { useProjectUpdateStateTs, useProjectUpdateEffectTs } from "./useProjectUpdateTs";
+export {useProjectCreateEffectTs,
+  useProjectCreateStateTS} from "./useProjectCreateTs";
\ No newline at end of file
diff --git a/src/hook/projectTs/useProjectApplyTs.ts b/src/hook/projectTs/useProjectApplyTs.ts
index 99a13d75..27f849c8 100644
--- a/src/hook/projectTs/useProjectApplyTs.ts
+++ b/src/hook/projectTs/useProjectApplyTs.ts
@@ -1,7 +1,7 @@
 import { Dispatch, SetStateAction, useEffect, useState } from "react";
 import { useSelector, useDispatch } from "react-redux";
 import { useHistory } from "react-router-dom";
-import { useRequest } from "..";
+import { useRequest } from "../";
 import { loginApi } from "../api";
 import { RequestState } from "../useRequest";
 
diff --git a/src/hook/projectTs/useProjectDetailTs.ts b/src/hook/projectTs/useProjectDetailTs.ts
index 6c918e03..d366fdda 100644
--- a/src/hook/projectTs/useProjectDetailTs.ts
+++ b/src/hook/projectTs/useProjectDetailTs.ts
@@ -64,14 +64,6 @@ type checkType = {
   applyDetail: boolean;
 };
 
-// type ApplyTypeTmp = {
-//     res: Promise<void>;
-//     resApply: {
-//         apply: object;
-//         recruit: object;
-//     }
-// }
-
 type pagenationType = {
     apply: number,
     recruit: number,
diff --git a/src/hook/projectTs/useProjectListTs.ts b/src/hook/projectTs/useProjectListTs.ts
index 2cadfd97..5e9fe2b6 100644
--- a/src/hook/projectTs/useProjectListTs.ts
+++ b/src/hook/projectTs/useProjectListTs.ts
@@ -1,6 +1,6 @@
 import { Dispatch, SetStateAction, useEffect, useState } from "react";
 import { useSelector, useDispatch } from "react-redux";
-import { useRequest } from "..";
+import { useRequest } from "../";
 import { setTemporary } from "../../reducers/temporary";
 import { loginApi } from "../api";
 import { RequestState } from "../useRequest";
diff --git a/src/hook/projectTs/useProjectUpdateTs.ts b/src/hook/projectTs/useProjectUpdateTs.ts
new file mode 100644
index 00000000..6588e2f0
--- /dev/null
+++ b/src/hook/projectTs/useProjectUpdateTs.ts
@@ -0,0 +1,269 @@
+import { Dispatch, SetStateAction, useEffect, useState } from "react";
+import { useSelector, useDispatch } from "react-redux";
+import { useHistory } from "react-router-dom";
+import { loginApi } from "../api";
+import { useAlert, useRequest } from "../";
+import { AxiosError } from "axios";
+import { RequestState } from "../useRequest";
+
+const axios = require("axios");
+
+type CreateProject = {
+  projectName: string;
+  teamName: string;
+  endDate: string;
+  introduction: string;
+  state: any;
+  projectField: string;
+  applyCanFile: boolean;
+  questions: string[];
+  needMember: {
+    developer: number;
+    designer: number;
+    planner: number;
+    etc: number;
+  };
+};
+
+type updateStateType = {
+    project: CreateProject;
+    img: any;
+    updateProject: RequestState;
+    updateImg: RequestState;
+  }
+
+type updateActionType = {
+    UpdateProjectApi: (projectId: string, data: any) => Promise<void>;
+    UpdateImgApi: (projectId: string, data: any) => Promise<void>;
+    inputProject: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    setImg: Dispatch<SetStateAction<any>>;
+    inputProjectMember: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    inputDate: (date: any) => void;
+    inputQuestion: (data: string, index: number) => void;
+    addQuestion: () => void;
+    deleteQuestion: (index: number) => void;
+    inputField: (data: string) => void;
+  }
+
+type UpdateType = {
+  updateState: updateStateType;
+  updateAction: updateActionType;
+};
+
+const useProjectUpdateStateTs = (): UpdateType => {
+  const projectDetail = useSelector(
+    (state: any) => state.project.projectDetail,
+  );
+  const [project, setProject] = useState<CreateProject>(projectDetail);
+  const [img, setImg] = useState<any>(projectDetail.img);
+
+  const fetchPutUpdate = async (
+    projectId: string,
+    data: any,
+  ): Promise<void> => {
+    let token = window.sessionStorage.getItem("accessToken");
+    let res = await axios
+      .put(`${process.env.REACT_APP_BASE_URL}projects/${projectId}`, data, {
+        headers: {
+          Authorization: `Bearer ${token}`,
+          "Content-Type": "application/json;charset=UTF-8",
+          Accept: "application/hal+json",
+        },
+      })
+      .catch(async (error: any) => {
+        if (error.response.data.error === "007") {
+          token = await loginApi().refreshToken();
+
+          res = await axios
+            .put(
+              `${process.env.REACT_APP_BASE_URL}projects/${projectId}`,
+              data,
+              {
+                headers: {
+                  Authorization: `Bearer ${token}`,
+                  "Content-Type": "application/json;charset=UTF-8",
+                  Accept: "application/hal+json",
+                },
+              },
+            )
+            .catch((error: any) => {
+              throw error;
+            });
+        } else {
+          throw error;
+        }
+      });
+    return res.data;
+  };
+
+  const fetchImg = async (projectId: string, data: any): Promise<void> => {
+    let token = window.sessionStorage.getItem("accessToken");
+    const imgData = new FormData();
+    imgData.append("image", data);
+    imgData.append("type", "image/jpeg");
+    let res = await axios
+      .post(
+        `${process.env.REACT_APP_BASE_URL}projects/image/${projectId}`,
+        imgData,
+        {
+          headers: {
+            Authorization: `Bearer ${token}`,
+            "Content-Type": "multipart/form-data;charset=UTF-8",
+            Accept: "application/hal+json",
+          },
+        },
+      )
+      .catch(async (error: any) => {
+        if (error.response.data.error === "007") {
+          token = await loginApi().refreshToken();
+
+          res = await axios
+            .post(
+              `${process.env.REACT_APP_BASE_URL}projects/image/${projectId}`,
+              imgData,
+              {
+                headers: {
+                  Authorization: `Bearer ${token}`,
+                  "Content-Type": "multipart/form-data;charset=UTF-8",
+                  Accept: "application/hal+json",
+                },
+              },
+            )
+            .catch((error: any) => {
+              throw error;
+            });
+        } else {
+          throw error;
+        }
+      });
+    return res.data;
+  };
+
+  const [updateProject, { run: UpdateProjectApi }] = useRequest(fetchPutUpdate);
+  const [updateImg, { run: UpdateImgApi }] = useRequest(fetchImg);
+
+  const inputProject = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const name = e.target.name;
+    const targetValue = e.target.value;
+
+    setProject((value) => {
+      return {
+        ...value,
+        [name]: targetValue,
+      };
+    });
+  };
+
+  const inputDate = (date: string) => {
+    setProject((value) => {
+      return {
+        ...value,
+        endDate: date,
+      };
+    });
+  };
+
+  const inputQuestion = (data: string, index: number) => {
+    setProject((value) => {
+      const questions = value.questions.map((q, i) => {
+        if (index === i) {
+          return data;
+        } else {
+          return q;
+        }
+      });
+      return {
+        ...value,
+        questions: questions,
+      };
+    });
+  };
+
+  const addQuestion = () => {
+    setProject((value) => {
+      const questions = value.questions.concat("");
+      return {
+        ...value,
+        questions: questions,
+      };
+    });
+  };
+  const deleteQuestion = (index: number) => {
+    setProject((value) => {
+      const questions = value.questions.filter((q, i) => i !== index);
+      return {
+        ...value,
+        questions: questions,
+      };
+    });
+  };
+
+  const inputProjectMember = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const name = e.target.name;
+    const memberValue = e.target.value;
+    setProject((value) => {
+      return {
+        ...value,
+        needMember: {
+          ...value.needMember,
+          [name]: memberValue,
+        },
+      };
+    });
+  };
+
+    const inputField = (data: string) => {
+      setProject((value) => {
+        return {
+          ...value,
+          projectField: data,
+        };
+      });
+    };
+
+  return {
+    updateState: { project, img, updateProject, updateImg },
+    updateAction: {
+      UpdateProjectApi,
+      UpdateImgApi,
+      inputProject,
+      setImg,
+      inputProjectMember,
+      inputDate,
+      inputQuestion,
+      addQuestion,
+      deleteQuestion,
+      inputField,
+    },
+  };
+};
+
+const useProjectUpdateEffectTs = (
+  updateState: updateStateType,
+  updateAction: updateActionType,
+  projectId: string,
+) => {
+  const history = useHistory();
+//   const [alertData, alertAction] = useAlert();
+  const originImg = useSelector(
+    (state: any) => state.project.projectDetail.img,
+  );  
+  useEffect(() => {
+    if (updateState.updateProject.fulfilled) {
+      console.log(typeof updateState.img);
+      console.log(updateState.img);
+      if (updateState.img.length === originImg)
+        updateAction.UpdateImgApi(projectId, updateState.img);
+      else history.push(`/projectDetail/${projectId}`);
+    }
+  }, [updateState.updateProject.fulfilled]);
+
+  useEffect(() => {
+    if (updateState.updateProject.rejected) {
+      //   alertAction.open(updateState.updateProject.error.response.data.message);
+      console.log(updateState.updateProject.error);
+    }
+  }, [updateState.updateProject.rejected]);
+};
+
+export { useProjectUpdateStateTs, useProjectUpdateEffectTs };
diff --git a/src/hook/useImage.tsx b/src/hook/useImage.tsx
index 70fc3cfc..02b26eaf 100644
--- a/src/hook/useImage.tsx
+++ b/src/hook/useImage.tsx
@@ -12,7 +12,6 @@ export const useImageSave = (
 
   useEffect(() => {
     if (postImg.fulfilled) {
-        console.log(postImg.data);
       const projectId = postImg.data.fileName.split(".");
       history.push(`${nextUrl}/${projectId[0]}`);
     }
diff --git a/src/pages/index.js b/src/pages/index.js
index 14319979..ce142bc2 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -3,7 +3,7 @@ export { default as Root } from "./rootTs";
 export { default as ProjectList } from "./project/projectListTs";
 export { default as ProjectDetail } from "./project/projectDetailTs";
 export { default as ProjectCreate } from "./project/createProjectTs";
-export { default as ProjectUpdate } from "./project/updateProject";
+export { default as ProjectUpdate } from "./project/updateProjectTs";
 export { default as Register } from "./auth/Register";
 export { default as RegisterPage } from "./auth/RegisterTs";
 export { default as Profile } from "./Profile";
diff --git a/src/pages/project/createProjectTs.tsx b/src/pages/project/createProjectTs.tsx
index a9258c06..e885b819 100644
--- a/src/pages/project/createProjectTs.tsx
+++ b/src/pages/project/createProjectTs.tsx
@@ -12,7 +12,10 @@ import {
 } from "@material-ui/pickers";
 import DateFnsUtils from "@date-io/date-fns";
 import { ko } from "date-fns/locale";
-import { useProjectCreateEffectTs, useProjectCreateStateTS } from "../../hook/projectTs/useProjectCreateTs";
+import {
+  useProjectCreateEffectTs,
+  useProjectCreateStateTS,
+} from "../../hook/projectTs";
 import { Button, Input } from "antd";
 import { useImageSave } from "../../hook/useImage";
 
@@ -37,120 +40,116 @@ export default function ProjectCreate() {
             </Button>
           </div>
         </div>
-        <div className="half_div_left">
-          <div className="input_img">
-            <ImgInput img={createState.img} saveImg={createAction.inputImg} />
-          </div>
-        </div>
-        <div className="half_div_right">
-          <label htmlFor="exampleEmail">Project Name</label>
-          <Input
-            type="name"
-            name="projectName"
-            placeholder="createState name"
-            value={createState.project.projectName}
-            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-              createAction.inputProject(e.target.name, e.target.value)
-            }
-          />
-          <label htmlFor="exampleEmail">Team Name</label>
-          <Input
-            type="name"
-            name="teamName"
-            placeholder="team name"
-            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-              createAction.inputProject(e.target.name, e.target.value)
-            }
-            value={createState.project.teamName}
-          />
+        <div className="input_grid">
           <div className="half_div_left">
-            <label htmlFor="exampleEmail">Recruit People</label>
-            <br />
-            <Input
-              addonBefore="Developer"
-              placeholder="0"
-              min={0}
-              max={100}
-              type="number"
-              step="1"
-              name="developer"
-              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                createAction.inputProjectMember(e.target.name, e.target.value)
-              }
-              value={createState.project.needMember.developer}
-            />
-            <Input
-              addonBefore="Designer"
-              placeholder="0"
-              min={0}
-              max={100}
-              type="number"
-              step="1"
-              name="designer"
-              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                createAction.inputProjectMember(e.target.name, e.target.value)
-              }
-              value={createState.project.needMember.designer}
-            />
-            <div style={{ height: "12px" }} />
+            <div className="input_img">
+              <ImgInput img={createState.img} saveImg={createAction.inputImg} />
+            </div>
+          </div>
+          <div className="half_div_right">
+            <label htmlFor="exampleEmail">Project Name</label>
             <Input
-              addonBefore="Planner"
-              placeholder="0"
-              min={0}
-              max={100}
-              type="number"
-              step="1"
-              name="planner"
+              type="name"
+              name="projectName"
+              placeholder="createState name"
+              value={createState.project.projectName}
               onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                createAction.inputProjectMember(e.target.name, e.target.value)
+                createAction.inputProject(e.target.name, e.target.value)
               }
-              value={createState.project.needMember.planner}
             />
-            <div style={{ height: "12px" }} />
+            <label htmlFor="exampleEmail">Team Name</label>
             <Input
-              addonBefore="Etc"
-              placeholder="0"
-              min={0}
-              max={100}
-              type="number"
-              step="1"
-              name="etc"
+              type="name"
+              name="teamName"
+              placeholder="team name"
               onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                createAction.inputProjectMember(e.target.name, e.target.value)
+                createAction.inputProject(e.target.name, e.target.value)
               }
-              value={createState.project.needMember.etc}
+              value={createState.project.teamName}
             />
-          </div>
-          <div className="half_div_right">
-            <label htmlFor="exampleEmail">End Date</label>
-            <MuiPickersUtilsProvider utils={DateFnsUtils} locale={ko}>
-              <MuiDateTimePicker
-                name="endDate"
-                value={createState.project.endDate}
-                onChange={(date)=>createAction.inputDate(date)}
-                format="yy.MM.dd HH:mm"
-                placeholder="종료일"
-                variant="dialog"
-                //   disableUnderline
-                disableToolbar={false}
-                hideTabs
-                clearable
-                ampm
+            <div className="half_div_left">
+              <label htmlFor="exampleEmail">Recruit People</label>
+              <Input
+                addonBefore={<div style={{ width: "100px" }}>Developer</div>}
+                placeholder="0"
+                min={0}
+                max={100}
+                type="number"
+                step="1"
+                name="developer"
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                  createAction.inputProjectMember(e.target.name, e.target.value)
+                }
+                value={createState.project.needMember.developer}
               />
-            </MuiPickersUtilsProvider>
-            <br />
-            <br />
-            <br />
-            <label htmlFor="exampleEmail">Role</label>
-            <DropdownField
-              style={{ width: "100%" }}
-              dropdownCaret="Role"
-              action={createAction.inputField}
-              pick={createState.project.projectField}
-            />
+              <Input
+                addonBefore={<div style={{ width: "100px" }}>Designer</div>}
+                placeholder="0"
+                min={0}
+                max={100}
+                type="number"
+                step="1"
+                name="designer"
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                  createAction.inputProjectMember(e.target.name, e.target.value)
+                }
+                value={createState.project.needMember.designer}
+              />
+              <Input
+                addonBefore={<div style={{ width: "100px" }}>Planner</div>}
+                placeholder="0"
+                min={0}
+                max={100}
+                type="number"
+                step="1"
+                name="planner"
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                  createAction.inputProjectMember(e.target.name, e.target.value)
+                }
+                value={createState.project.needMember.planner}
+              />
+              <Input
+                addonBefore={<div style={{ width: "100px" }}>Etc</div>}
+                placeholder="0"
+                min={0}
+                max={100}
+                type="number"
+                step="1"
+                name="etc"
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                  createAction.inputProjectMember(e.target.name, e.target.value)
+                }
+                value={createState.project.needMember.etc}
+              />
+            </div>
+            <div className="half_div_right">
+              <label htmlFor="exampleEmail">End Date</label>
+              <MuiPickersUtilsProvider utils={DateFnsUtils} locale={ko}>
+                <MuiDateTimePicker
+                  name="endDate"
+                  value={createState.project.endDate}
+                  onChange={(date) => createAction.inputDate(date)}
+                  format="yy.MM.dd HH:mm"
+                  placeholder="종료일"
+                  variant="dialog"
+                  disableToolbar={false}
+                  hideTabs
+                  clearable
+                  ampm
+                />
+              </MuiPickersUtilsProvider>
+
+              <label htmlFor="exampleEmail">Role</label>
+              <DropdownField
+                style={{ width: "100%" }}
+                dropdownCaret="Role"
+                action={createAction.inputField}
+                pick={createState.project.projectField}
+              />
+            </div>
           </div>
         </div>
-        <div>
+        <div style={{ marginTop: "20px" }}>
           <label htmlFor="exampleEmail">Introduction</label>
           <BootstrapInput
             multiline
@@ -195,7 +194,6 @@ export default function ProjectCreate() {
             <Button onClick={createAction.addQuestion}>Add Questions</Button>
           </div>
         </div>
-        <br />
       </div>
     </Layout>
   );
diff --git a/src/pages/project/projectDetail.css b/src/pages/project/projectDetail.css
index f44c9401..557c0444 100644
--- a/src/pages/project/projectDetail.css
+++ b/src/pages/project/projectDetail.css
@@ -2,19 +2,13 @@
   padding: 10px;
 }
 
-#root::after {
-    clear: both;
-    content: '';
-    display: block;
-}
-
 .full_div {
   width: 100%;
   min-height: 36px;
 }
 
 .half_div_left {
-  padding: 10px;
+  padding: 10px 10px 10px 0;
   float: left;
   width: 50%;
 }
@@ -28,6 +22,12 @@
 .half_div_right > h1 {
 }
 
+.input_grid::after {
+    clear: both;
+    content: '';
+    display: block;
+}
+
 .half_div_right > h4 {
   color: gray;
   margin: 0px 0px 30px 0px;
diff --git a/src/pages/project/projectDetailTs.tsx b/src/pages/project/projectDetailTs.tsx
index f2c66f7c..58357552 100644
--- a/src/pages/project/projectDetailTs.tsx
+++ b/src/pages/project/projectDetailTs.tsx
@@ -144,7 +144,7 @@ export default function ProjectDetail() {
             </div>
           )}
         </div>
-        <div>
+        <div className="input_grid">
           <div className="half_div_left">
             <img
               id="cover"
diff --git a/src/pages/project/updateProjectTs.tsx b/src/pages/project/updateProjectTs.tsx
new file mode 100644
index 00000000..c4f14b51
--- /dev/null
+++ b/src/pages/project/updateProjectTs.tsx
@@ -0,0 +1,218 @@
+import React from "react";
+import { useLocation } from "react-router-dom";
+import {
+  Layout,
+  ImgInput,
+  DropdownField,
+  BootstrapInput,
+} from "../../components";
+import "../main.css";
+import {
+  DateTimePicker as MuiDateTimePicker,
+  MuiPickersUtilsProvider,
+} from "@material-ui/pickers";
+import DateFnsUtils from "@date-io/date-fns";
+import { ko } from "date-fns/locale";
+import {
+  useProjectUpdateStateTs,
+  useProjectUpdateEffectTs,
+} from "../../hook/projectTs";
+import { useImageSave } from "../../hook/useImage";
+import { Button, Input } from "antd";
+
+export default function ProjectUpdate() {
+  const location = useLocation();
+  const url = location.pathname.split("/");
+  const projectId = url[2];
+  const { updateState, updateAction } = useProjectUpdateStateTs();
+
+  useProjectUpdateEffectTs(updateState, updateAction, url[2]);
+
+  useImageSave(updateState.updateImg, "projectDetail");
+  const handleClickUpdate = () => {
+    const updateData = {
+      projectName: updateState.project.projectName,
+      teamName: updateState.project.teamName,
+      endDate: updateState.project.endDate,
+      introduction: updateState.project.introduction,
+      state: updateState.project.state,
+      projectField: updateState.project.projectField,
+      applyCanFile: updateState.project.applyCanFile,
+      needMember: {
+        developer: updateState.project.needMember.developer,
+        designer: updateState.project.needMember.designer,
+        planner: updateState.project.needMember.planner,
+        etc: updateState.project.needMember.etc,
+      },
+      questions: updateState.project.questions,
+    };
+    updateAction.UpdateProjectApi(projectId, updateData);
+  };
+
+  return (
+    <Layout>
+      <div id="root">
+        <div className="full_div">
+          <div id="button">
+            <Button
+              loading={
+                updateState.updateImg.pending ||
+                updateState.updateProject.pending
+              }
+              onClick={handleClickUpdate}
+            >
+              Update Project
+            </Button>
+          </div>
+        </div>
+        <div className="input_grid">
+          <div className="half_div_left">
+            <div className="input_img">
+              <ImgInput img={updateState.img} saveImg={updateAction.setImg} />
+            </div>
+          </div>
+          <div className="half_div_right">
+            <label htmlFor="exampleEmail">Project Name</label>
+            <Input
+              type="name"
+              name="projectName"
+              placeholder="project name"
+              onChange={updateAction.inputProject}
+              value={updateState.project.projectName}
+            />
+            <label htmlFor="exampleEmail">Team Name</label>
+            <Input
+              type="name"
+              name="teamName"
+              placeholder="team name"
+              onChange={updateAction.inputProject}
+              value={updateState.project.teamName}
+            />
+            <div className="half_div_left">
+              <label htmlFor="exampleEmail">Recruit People</label>
+              <Input
+                addonBefore={<div style={{ width: "100px" }}>Developer</div>}
+                placeholder="0"
+                min={0}
+                max={100}
+                type="number"
+                step="1"
+                name="developer"
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                  updateAction.inputProjectMember(e)
+                }
+                value={updateState.project.needMember.developer}
+              />
+              <Input
+                addonBefore={<div style={{ width: "100px" }}>Designer</div>}
+                placeholder="0"
+                min={0}
+                max={100}
+                type="number"
+                step="1"
+                name="designer"
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                  updateAction.inputProjectMember(e)
+                }
+                value={updateState.project.needMember.designer}
+              />
+              <Input
+                addonBefore={<div style={{ width: "100px" }}>Planner</div>}
+                placeholder="0"
+                min={0}
+                max={100}
+                type="number"
+                step="1"
+                name="planner"
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                  updateAction.inputProjectMember(e)
+                }
+                value={updateState.project.needMember.planner}
+              />
+              <Input
+                addonBefore={<div style={{ width: "100px" }}>Etc</div>}
+                placeholder="0"
+                min={0}
+                max={100}
+                type="number"
+                step="1"
+                name="etc"
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                  updateAction.inputProjectMember(e)
+                }
+                value={updateState.project.needMember.etc}
+              />
+            </div>
+            <div className="half_div_right">
+              <label htmlFor="exampleEmail">End Date</label>
+              <MuiPickersUtilsProvider utils={DateFnsUtils} locale={ko}>
+                <MuiDateTimePicker
+                  name="endDate"
+                  value={updateState.project.endDate}
+                  onChange={(date) => updateAction.inputDate(date)}
+                  format="yy.MM.dd HH:mm"
+                  placeholder="종료일"
+                  variant="dialog"
+                  disableToolbar={false}
+                  hideTabs
+                  clearable
+                  ampm
+                />
+              </MuiPickersUtilsProvider>
+              <label htmlFor="exampleEmail">Role</label>
+              <DropdownField
+                style={{ width: "100%" }}
+                dropdownCaret="Role"
+                action={updateAction.inputField}
+                pick={updateState.project.projectField}
+              />
+            </div>
+          </div>
+        </div>
+        <div style={{marginTop: '20px'}}>
+          <div>
+            <label htmlFor="exampleEmail">Introduction</label>
+            <BootstrapInput
+              multiline
+              name="introduction"
+              placeholder="introduction"
+              value={updateState.project.introduction}
+              onChange={updateAction.inputProject}
+              fullWidth
+            />
+          </div>
+          <label htmlFor="exampleEmail">Questions</label>
+          {updateState.project.questions.map((value: string, index: number) => {
+            const questionString = `Question ${index + 1}`;
+            return (
+              <div>
+                <Input
+                  addonBefore={questionString}
+                  addonAfter={
+                    <Button
+                      color="secondary"
+                      onClick={() => updateAction.deleteQuestion(index)}
+                    >
+                      delete
+                    </Button>
+                  }
+                  placeholder="question"
+                  name="questions"
+                  onChange={(e) =>
+                    updateAction.inputQuestion(e.target.value, index)
+                  }
+                  value={value}
+                />
+              </div>
+            );
+          })}
+        </div>
+        <div className="full_div">
+          <div id="button">
+            <Button onClick={updateAction.addQuestion}>Add Questions</Button>
+          </div>
+        </div>
+      </div>
+    </Layout>
+  );
+}
diff --git a/tsconfig.json b/tsconfig.json
index 22544462..46af96a6 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -4,7 +4,8 @@
     "lib": [
       "dom",
       "dom.iterable",
-      "esnext"
+      "esnext",
+      "WebWorker"
     ],
     "allowJs": true,
     "skipLibCheck": true,