post API Res/Req 추가, 컴포넌트 수정, k8s 수정 (#84)

* add (todo 추가) api Req/Res 추가 * 기본설정 * add new course API Res/Req 추가 * up hooks * up course Color 선택 컴포넌트로 뺌 * fix 리펙토링 과정 에러 픽스 * add tag 선택 체인지 훅 추기 * up tag선택 시 선택된 tag 리스트 가져오기 * up 코스 추가 기능(데이터 Validation X) * up coursePinList 최근 순으로 나오게 변경 * add hooks 코스 변경, 반복 요일 변경 * up 타입 수정 * up 코스 변경, 반복 요일 변경 훅 추가 * up (할일 추가) 추가 * package version up * up 요일 반복 기능 아직 추가안함 * up 수정된 API Spec 수정 * ci/cd k8s 스캐줄 개선 * rollback: 이전 배포 형식으로 복구 * up: 배포 다시 롤백 * test: k8s 배포테스트틀 위함 * test: k8s 배포테스트틀 위함 Co-authored-by: 박경은 <[email protected]>
belf-kr · Nov 12, 2021 · 0d40cb4 · 0d40cb4
1 parent 87eb288
commit 0d40cb4
Show file tree

Hide file tree

Showing 23 changed files with 250 additions and 96 deletions.
diff --git 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
@@ -1,59 +1,64 @@
-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 (
     <>
       <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
@@ -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
@@ -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
@@ -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
@@ -1,12 +1,16 @@
-import React, { useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 
 import * as S from "./style";
 
 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
@@ -1,40 +1,62 @@
-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 (
     <>
       <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
@@ -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
@@ -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
@@ -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
@@ -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];
+}