diff --git a/domain/Course/CoursePinList/index.tsx b/domain/Course/CoursePinList/index.tsx
index 678a809..f910ce1 100644
--- a/domain/Course/CoursePinList/index.tsx
+++ b/domain/Course/CoursePinList/index.tsx
@@ -14,7 +14,7 @@ export default function CoursePinList(): JSX.Element {
   useEffect(() => {
     (async () => {
       const res = await getCourses();
-      setCourseItems(res.slice(0, 4));
+      setCourseItems(res.reverse().slice(0, 4));
     })();
     return () => setCourseItems([]);
   }, []);
diff --git a/domain/Course/CreateCourse/index.tsx b/domain/Course/CreateCourse/index.tsx
index 9d0b643..f9cd9cd 100644
--- a/domain/Course/CreateCourse/index.tsx
+++ b/domain/Course/CreateCourse/index.tsx
@@ -1,25 +1,34 @@
-import React, { FormEvent, useEffect, useState } from "react";
+import React from "react";
+
+import { useRouter } from "next/router";
 
 import * as S from "./style";
 
-import { getColors } from "../../../libs/colors";
+import useGetString from "../../../hooks/useGetString";
+import useOnChange from "../../../hooks/useOnChange";
+import useTagOnChange from "../../../hooks/useTagOnChange";
 
-import TagInput from "../../Tag/TagInput";
 import Button from "../../../components/Button";
+import SelectCourseColor from "../SelectCourseColor";
+import TagInput from "../../Tag/TagInput";
+import { postNewCourse } from "../../../libs/course";
 
 export default function CreateCourse(): JSX.Element {
-  const [courseColors, setCourseColors] = useState<string[]>([]);
-
-  useEffect(() => {
-    (async () => {
-      const res = await getColors();
-      setCourseColors(res);
-    })();
-    return () => setCourseColors([]);
-  }, []);
-
-  const handleSubmit = async (event: FormEvent) => {
-    event.preventDefault();
+  const router = useRouter();
+
+  const [color, setColor] = useGetString();
+  const [title, setTitle] = useOnChange();
+  const [explanation, setExplanation] = useOnChange();
+  const [tags, setTags] = useTagOnChange();
+
+  const addCourse = async () => {
+    await postNewCourse({
+      title: title,
+      explanation: explanation,
+      color: color,
+      tags: tags,
+    });
+    router.back();
   };
 
   return (
@@ -27,33 +36,29 @@ export default function CreateCourse(): JSX.Element {
       <S.TitleBox>
         <S.Title>새로운 코스 추가</S.Title>
       </S.TitleBox>
-      <form onSubmit={handleSubmit}>
-        <S.Contents>
-          <S.SubTitleBox>
-            <S.SubTitle>코스 색상 선택</S.SubTitle>
-          </S.SubTitleBox>
-          <S.RadioColorsBox>
-            {courseColors.map((color, index) => {
-              return <S.ColorInput type="radio" color={color} value={color} name="color" key={index} defaultChecked={index === 0 ? true : false} />;
-            })}
-          </S.RadioColorsBox>
-          <S.SubTitleBox>
-            <S.SubTitle>코스 제목</S.SubTitle>
-          </S.SubTitleBox>
-          <S.DefaultInput type="text" placeholder="입력해주세요" name="title" />
-          <S.SubTitleBox>
-            <S.SubTitle>설명</S.SubTitle>
-          </S.SubTitleBox>
-          <S.DefaultTextArea placeholder="입력해주세요 (200자)" name="explanation" rows={6} maxLength={200} />
-          <S.SubTitleBox>
-            <S.SubTitle>태그</S.SubTitle>
-          </S.SubTitleBox>
-          <TagInput />
-          <S.SubmitButtonBox>
-            <Button type={"submit"} text={"코스 생성"} />
-          </S.SubmitButtonBox>
-        </S.Contents>
-      </form>
+      <S.Contents>
+        <S.SubTitleBox>
+          <S.SubTitle>코스 색상 선택</S.SubTitle>
+        </S.SubTitleBox>
+        <S.RadioColorsBox>
+          <SelectCourseColor colorOnChange={setColor} />
+        </S.RadioColorsBox>
+        <S.SubTitleBox>
+          <S.SubTitle>코스 제목</S.SubTitle>
+        </S.SubTitleBox>
+        <S.DefaultInput type="text" placeholder="입력해주세요" name="title" onChange={setTitle} />
+        <S.SubTitleBox>
+          <S.SubTitle>설명</S.SubTitle>
+        </S.SubTitleBox>
+        <S.DefaultTextArea placeholder="입력해주세요 (200자)" name="explanation" rows={6} maxLength={200} onChange={setExplanation} />
+        <S.SubTitleBox>
+          <S.SubTitle>태그</S.SubTitle>
+        </S.SubTitleBox>
+        <TagInput tagsOnChange={setTags} />
+        <S.SubmitButtonBox onClick={addCourse}>
+          <Button type={"submit"} text={"코스 생성"} />
+        </S.SubmitButtonBox>
+      </S.Contents>
     </>
   );
 }
diff --git a/domain/Course/CreateCourse/style.ts b/domain/Course/CreateCourse/style.ts
index ad2fa9e..a4a8b3d 100644
--- a/domain/Course/CreateCourse/style.ts
+++ b/domain/Course/CreateCourse/style.ts
@@ -14,19 +14,6 @@ const RadioColorsBox = styled.div`
   }
 `;
 
-const ColorInput = styled.input.attrs({ type: "radio" })<{ color: string }>`
-  background-color: ${(props) => props.color};
-  appearance: none;
-  border: none;
-  width: 32px;
-  height: 32px;
-  border-radius: 100%;
-  cursor: pointer;
-  :checked {
-    border: 4px solid ${({ theme }) => theme.fontColor.sub2};
-  }
-`;
-
 const DefaultInput = styled.input.attrs({ type: "text" })`
   border-radius: ${({ theme }) => theme.common.borderRadius.default}px;
   background-color: ${({ theme }) => theme.backgroundColor.card};
@@ -88,4 +75,4 @@ const SubmitButtonBox = styled.div`
   margin: 20px 0px;
 `;
 
-export { Title, TitleBox, Contents, SubTitle, SubTitleBox, ColorInput, DefaultInput, DefaultTextArea, RadioColorsBox, SubmitButtonBox };
+export { Title, TitleBox, Contents, SubTitle, SubTitleBox, DefaultInput, DefaultTextArea, RadioColorsBox, SubmitButtonBox };
diff --git a/domain/Course/SelectCourseColor/index.tsx b/domain/Course/SelectCourseColor/index.tsx
new file mode 100644
index 0000000..7203a1d
--- /dev/null
+++ b/domain/Course/SelectCourseColor/index.tsx
@@ -0,0 +1,45 @@
+import { useEffect, useState } from "react";
+
+import * as S from "./style";
+
+import { getColors } from "../../../libs/colors";
+
+type props = {
+  colorOnChange: (value: string) => void;
+};
+
+export default function SelectCourseColor({ colorOnChange }: props): JSX.Element {
+  const [courseColors, setCourseColors] = useState<string[]>([]);
+  const [currentColor, setCurrentColor] = useState<string>("");
+
+  useEffect(() => {
+    (async () => {
+      const res = await getColors();
+      setCourseColors(res);
+      setCurrentColor(res[0]);
+    })();
+    return () => setCourseColors([]);
+  }, []);
+
+  useEffect(() => {
+    colorOnChange(currentColor);
+  }, [currentColor]);
+
+  return (
+    <>
+      {courseColors.map((color, index) => {
+        return (
+          <S.ColorInput
+            type="radio"
+            color={color}
+            value={color}
+            name="color"
+            key={index}
+            checked={currentColor == color}
+            onChange={() => setCurrentColor(color)}
+          />
+        );
+      })}
+    </>
+  );
+}
diff --git a/domain/Course/SelectCourseColor/style.ts b/domain/Course/SelectCourseColor/style.ts
new file mode 100644
index 0000000..b29acab
--- /dev/null
+++ b/domain/Course/SelectCourseColor/style.ts
@@ -0,0 +1,16 @@
+import styled from "styled-components";
+
+const ColorInput = styled.input.attrs({ type: "radio" })<{ color: string }>`
+  background-color: ${(props) => props.color};
+  appearance: none;
+  border: none;
+  width: 32px;
+  height: 32px;
+  border-radius: 100%;
+  cursor: pointer;
+  :checked {
+    border: 4px solid ${({ theme }) => theme.fontColor.sub2};
+  }
+`;
+
+export { ColorInput };
diff --git a/domain/Tag/TagInput/index.tsx b/domain/Tag/TagInput/index.tsx
index 31dd0bc..cb30425 100644
--- a/domain/Tag/TagInput/index.tsx
+++ b/domain/Tag/TagInput/index.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 
 import * as S from "./style";
 
@@ -6,7 +6,11 @@ import { Tag } from "../../../types/components-type/course";
 
 import CloseIcon from "../../../icons/CloseIcon";
 
-export default function TagInput(): JSX.Element {
+type props = {
+  tagsOnChange: (value: Tag[]) => void;
+};
+
+export default function TagInput({ tagsOnChange }: props): JSX.Element {
   const [tagList, setTagList] = useState<Tag[]>([]);
   const tagInputRef = useRef<HTMLInputElement>(null);
 
@@ -32,6 +36,10 @@ export default function TagInput(): JSX.Element {
     setTagList(tempArray);
   };
 
+  useEffect(() => {
+    tagsOnChange(tagList);
+  }, [tagList]);
+
   return (
     <>
       <S.DefaultInput type="text" placeholder="태그를 입력해주세요" onKeyPress={pressedKey} ref={tagInputRef} maxLength={30} />
diff --git a/domain/Todo/CreateTodo/index.tsx b/domain/Todo/CreateTodo/index.tsx
index bfaed00..885c4cd 100644
--- a/domain/Todo/CreateTodo/index.tsx
+++ b/domain/Todo/CreateTodo/index.tsx
@@ -1,14 +1,34 @@
-import React, { FormEvent } from "react";
+import React from "react";
+
+import { useRouter } from "next/router";
 
 import * as S from "./style";
 
+import { postNewTodo } from "../../../libs/todo";
+
 import Button from "../../../components/Button";
 import SelectCourse from "../SelectCourse";
 import SelectDayOfWeek from "../SelectDayOfWeek";
 
+import useOnChange from "../../../hooks/useOnChange";
+import useCourseOnChange from "../../../hooks/useCourseOnChange";
+
 export default function CreateTodo(): JSX.Element {
-  const handleSubmit = async (event: FormEvent) => {
-    event.preventDefault();
+  const router = useRouter();
+
+  const [title, setTitle] = useOnChange();
+  const [explanation, setExplanation] = useOnChange();
+  const [course, setCourse] = useCourseOnChange();
+
+  const addTodo = async () => {
+    await postNewTodo({
+      courseId: course.id,
+      title: title,
+      explanation: explanation,
+      recurringCycleDate: 1,
+      repeatedDaysOfTheWeek: [],
+    });
+    router.back();
   };
 
   return (
@@ -16,25 +36,27 @@ export default function CreateTodo(): JSX.Element {
       <S.TitleBox>
         <S.Title>새로운 할일 추가</S.Title>
       </S.TitleBox>
-      <form onSubmit={handleSubmit}>
-        <S.Contents>
-          <S.SubTitleBox>
-            <S.SubTitle>할일 제목</S.SubTitle>
-          </S.SubTitleBox>
-          <S.DefaultInput type="text" placeholder="입력해주세요" name="title" />
-          <S.SubTitleBox>
-            <S.SubTitle>코스 선택</S.SubTitle>
-          </S.SubTitleBox>
-          <SelectCourse />
-          <S.SubTitleBox>
-            <S.SubTitle>옵션</S.SubTitle>
-          </S.SubTitleBox>
-          <SelectDayOfWeek />
-          <S.SubmitButtonBox>
-            <Button type={"submit"} text={"할일 생성"} />
-          </S.SubmitButtonBox>
-        </S.Contents>
-      </form>
+      <S.Contents>
+        <S.SubTitleBox>
+          <S.SubTitle>할일 제목</S.SubTitle>
+        </S.SubTitleBox>
+        <S.DefaultInput type="text" placeholder="입력해주세요" name="title" onChange={setTitle} />
+        <S.SubTitleBox>
+          <S.SubTitle>설명</S.SubTitle>
+        </S.SubTitleBox>
+        <S.DefaultTextArea placeholder="입력해주세요 (200자)" name="explanation" rows={6} maxLength={200} onChange={setExplanation} />
+        <S.SubTitleBox>
+          <S.SubTitle>코스 선택</S.SubTitle>
+        </S.SubTitleBox>
+        <SelectCourse courseOnChange={setCourse} />
+        <S.SubTitleBox>
+          <S.SubTitle>옵션</S.SubTitle>
+        </S.SubTitleBox>
+        <SelectDayOfWeek />
+        <S.SubmitButtonBox onClick={addTodo}>
+          <Button type={"submit"} text={"할일 생성"} />
+        </S.SubmitButtonBox>
+      </S.Contents>
     </>
   );
 }
diff --git a/domain/Todo/SelectCourse/index.tsx b/domain/Todo/SelectCourse/index.tsx
index 48acb8a..c1b12be 100644
--- a/domain/Todo/SelectCourse/index.tsx
+++ b/domain/Todo/SelectCourse/index.tsx
@@ -8,7 +8,11 @@ import { CourseItem } from "../../../types/components-type/course";
 
 import ArrowIcon from "../../../icons/ArrowIcon";
 
-export default function SelectCourse(): JSX.Element {
+type props = {
+  courseOnChange: (value: CourseItem) => void;
+};
+
+export default function SelectCourse({ courseOnChange }: props): JSX.Element {
   const [isOpenPopup, setIsOpenPopup] = useState<boolean>(false);
   const [courseItems, setCourseItems] = useState<CourseItem[]>([]);
   const [currentCourseItem, setCurrentCourseItem] = useState<CourseItem>();
@@ -37,6 +41,10 @@ export default function SelectCourse(): JSX.Element {
     })();
   }, []);
 
+  useEffect(() => {
+    courseOnChange(currentCourseItem);
+  }, [currentCourseItem]);
+
   return (
     <S.SelectCourseBox ref={modalEl}>
       <S.SelectCourseInfoBox
diff --git a/domain/Todo/SelectDayOfWeek/index.tsx b/domain/Todo/SelectDayOfWeek/index.tsx
index 236b83b..a260363 100644
--- a/domain/Todo/SelectDayOfWeek/index.tsx
+++ b/domain/Todo/SelectDayOfWeek/index.tsx
@@ -10,7 +10,11 @@ type DayOfWeek = {
   isChecked?: boolean;
 };
 
-export default function SelectDayOfWeek(): JSX.Element {
+type props = {
+  dayOfWeekOnChange?: (value: boolean[]) => void;
+};
+
+export default function SelectDayOfWeek({ dayOfWeekOnChange }: props): JSX.Element {
   const [isOpenPopup, setIsOpenPopup] = useState<boolean>(false);
   const [dayOfWeekItems] = useState<DayOfWeek[]>([
     { showText: "월", number: 0 },
@@ -41,6 +45,10 @@ export default function SelectDayOfWeek(): JSX.Element {
     };
   }, []);
 
+  useEffect(() => {
+    if (dayOfWeekOnChange) dayOfWeekOnChange(currentDayOfWeekItems);
+  }, [currentDayOfWeekItems]);
+
   return (
     <S.SelectDayOfWeekBox ref={modalEl}>
       <S.SelectDayOfWeekInfoBox
diff --git a/hooks/useCourseOnChange.ts b/hooks/useCourseOnChange.ts
new file mode 100644
index 0000000..e25f41e
--- /dev/null
+++ b/hooks/useCourseOnChange.ts
@@ -0,0 +1,12 @@
+import { useState } from "react";
+import { CourseItem } from "../types/components-type/course";
+
+export default function useCourseOnChange(): [CourseItem, (value: CourseItem) => void] {
+  const [value, setValue] = useState<CourseItem>();
+
+  function handleOnChange(value: CourseItem): void {
+    setValue(value);
+  }
+
+  return [value, handleOnChange];
+}
diff --git a/hooks/useDayOfWeekOnChange.ts b/hooks/useDayOfWeekOnChange.ts
new file mode 100644
index 0000000..97b9838
--- /dev/null
+++ b/hooks/useDayOfWeekOnChange.ts
@@ -0,0 +1,11 @@
+import { useState } from "react";
+
+export default function useDayOfWeekOnChange(): [boolean[], (value: boolean[]) => void] {
+  const [value, setValue] = useState<boolean[]>();
+
+  function handleOnChange(value: boolean[]): void {
+    setValue(value);
+  }
+
+  return [value, handleOnChange];
+}
diff --git a/hooks/useGetString.ts b/hooks/useGetString.ts
index 9cafef9..9fb1f46 100644
--- a/hooks/useGetString.ts
+++ b/hooks/useGetString.ts
@@ -1,6 +1,6 @@
 import { useState } from "react";
 
-export function useGetString(): [string, (key: string) => void] {
+export default function useGetString(): [string, (key: string) => void] {
   const [value, setValue] = useState<string>("");
 
   function handle(key: string): void {
diff --git a/hooks/useOnChange.ts b/hooks/useOnChange.ts
new file mode 100644
index 0000000..2e08025
--- /dev/null
+++ b/hooks/useOnChange.ts
@@ -0,0 +1,12 @@
+import { ChangeEvent, useState } from "react";
+
+export default function useOnChange(): [string, (e: ChangeEvent<any>) => void] {
+  const [value, setValue] = useState("");
+
+  function handleOnChange(e: ChangeEvent<any>): void {
+    const result = e.target.value;
+    setValue(result);
+  }
+
+  return [value, handleOnChange];
+}
diff --git a/hooks/useTagOnChange.ts b/hooks/useTagOnChange.ts
new file mode 100644
index 0000000..793a45d
--- /dev/null
+++ b/hooks/useTagOnChange.ts
@@ -0,0 +1,12 @@
+import { useState } from "react";
+import { Tag } from "../types/components-type/course";
+
+export default function useTagOnChange(): [Tag[], (value: Tag[]) => void] {
+  const [value, setValue] = useState<Tag[]>([]);
+
+  function handleOnChange(value: Tag[]): void {
+    setValue(value);
+  }
+
+  return [value, handleOnChange];
+}
diff --git a/k8s/prod.yaml b/k8s/prod.yaml
index 3277eeb..afa3e8a 100644
--- a/k8s/prod.yaml
+++ b/k8s/prod.yaml
@@ -21,10 +21,10 @@ spec:
             - containerPort: 3000
           resources:
             requests:
-              cpu: 100m
-              memory: 50Mi
+              cpu: 5m
+              memory: 100Mi
             limits:
-              cpu: 100m
+              cpu: 5m
               memory: 100Mi
 ---
 apiVersion: v1
diff --git a/k8s/qa.yaml b/k8s/qa.yaml
index 4e0427f..8c1bc79 100644
--- a/k8s/qa.yaml
+++ b/k8s/qa.yaml
@@ -21,10 +21,10 @@ spec:
             - containerPort: 3000
           resources:
             requests:
-              cpu: 100m
-              memory: 50Mi
+              cpu: 5m
+              memory: 100Mi
             limits:
-              cpu: 100m
+              cpu: 5m
               memory: 100Mi
 ---
 apiVersion: v1
diff --git a/libs/course/index.ts b/libs/course/index.ts
index bcb54c7..cad394a 100644
--- a/libs/course/index.ts
+++ b/libs/course/index.ts
@@ -2,7 +2,7 @@ import { client } from "../api-client";
 
 import { CourseItem } from "../../types/components-type/course";
 
-export async function postCourse(course: CourseItem) {
+export async function postNewCourse(course: CourseItem): Promise<void> {
   await client.post(`/courses`, course);
 }
 
@@ -11,6 +11,6 @@ export async function getCourses(): Promise<CourseItem[]> {
   return data;
 }
 
-export async function deleteCourse(id: number) {
+export async function deleteCourse(id: number): Promise<void> {
   await client.delete(`/courses`, { data: { id } });
 }
diff --git a/libs/todo/index.ts b/libs/todo/index.ts
index ab5ee01..415a203 100644
--- a/libs/todo/index.ts
+++ b/libs/todo/index.ts
@@ -6,3 +6,7 @@ export async function getTodayTodos(): Promise<TodoItem[]> {
   const { data } = await client.get<TodoItem[]>(`/work-todos`);
   return data;
 }
+
+export async function postNewTodo(todo: TodoItem): Promise<void> {
+  await client.post<TodoItem>(`/work-todos`, todo);
+}
diff --git a/next-env.d.ts b/next-env.d.ts
index c6643fd..9bc3dd4 100644
--- a/next-env.d.ts
+++ b/next-env.d.ts
@@ -1,3 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/package-lock.json b/package-lock.json
index d0ea521..69af001 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "front-server",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index 04b6b22..d801664 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "front-server",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "scripts": {
     "dev": "next dev",
     "build": "next build",
diff --git a/pages/[userId]/index.tsx b/pages/[userId]/index.tsx
index d987566..fddf271 100644
--- a/pages/[userId]/index.tsx
+++ b/pages/[userId]/index.tsx
@@ -12,7 +12,7 @@ import PlantingGlass from "../../domain/Status/PlantingGlass";
 import TodayTodoList from "../../domain/Todo/TodayTodoList";
 import CourseList from "../../domain/Course/CourseList";
 
-import { useGetString } from "../../hooks/useGetString";
+import useGetString from "../../hooks/useGetString";
 
 const getTabComponent = (key: string) => {
   switch (key) {
diff --git a/types/components-type/todo/index.ts b/types/components-type/todo/index.ts
index 39b3f2d..673950f 100644
--- a/types/components-type/todo/index.ts
+++ b/types/components-type/todo/index.ts
@@ -1,6 +1,6 @@
 export type TodoItem = {
   id?: number;
-  recurrintCycleDate?: string;
+  recurringCycleDate?: number;
   title?: string;
   explanation?: string;
   passedDay?: number;
@@ -8,4 +8,5 @@ export type TodoItem = {
   courseId?: number;
   courseTitle?: string;
   color?: string;
+  repeatedDaysOfTheWeek?: number[];
 };