From 26eed538cee1f252b9298a51d02336486ee8d3dd Mon Sep 17 00:00:00 2001
From: pkiop <pkiop@naver.com>
Date: Sun, 24 Jan 2021 23:11:14 +0900
Subject: [PATCH 1/3] Feat: Add error message input

---
 .../UI/molecules/TitleInput/index.tsx         | 24 ++++++++++++-------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/UI/molecules/TitleInput/index.tsx b/frontend/src/components/UI/molecules/TitleInput/index.tsx
index f79876a..882ebee 100644
--- a/frontend/src/components/UI/molecules/TitleInput/index.tsx
+++ b/frontend/src/components/UI/molecules/TitleInput/index.tsx
@@ -4,17 +4,23 @@ import * as S from './style';
 export interface Props {
   text?: string;
   value?: string;
+  errorMsg?: string;
   className?: string;
   titleRef?: any;
 }
 
-const App = ({
-  text, value, className, titleRef, ...props
-}: Props) => (
-  <S.TitleInput className={className} {...props}>
-    <S.Text text={text} />
-    <S.Input value={value} inputRef={titleRef} placeholder={'여기에 입력하세요.'} />
-  </S.TitleInput>
-);
+function TitleInput({
+  text, value, errorMsg, className, titleRef, ...props
+}: Props) {
+  return (
+    <S.TitleInput className={className} {...props}>
+      <S.Title>
+        <S.Text text={text} />
+        <S.ErrorMessage text={errorMsg} />
+      </S.Title>
+      <S.Input value={value} inputRef={titleRef} placeholder={'여기에 입력하세요.'} />
+    </S.TitleInput>
+  );
+}
 
-export default App;
+export default TitleInput;

From 2beef53a6855b6777f0116030ea8e3a28487712b Mon Sep 17 00:00:00 2001
From: pkiop <pkiop@naver.com>
Date: Sun, 24 Jan 2021 23:11:30 +0900
Subject: [PATCH 2/3] Feat: Add error message style

---
 .../src/components/UI/molecules/TitleInput/style.ts  | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/frontend/src/components/UI/molecules/TitleInput/style.ts b/frontend/src/components/UI/molecules/TitleInput/style.ts
index c941e44..41b0f80 100644
--- a/frontend/src/components/UI/molecules/TitleInput/style.ts
+++ b/frontend/src/components/UI/molecules/TitleInput/style.ts
@@ -7,12 +7,24 @@ export const TitleInput = styled.div`
   border-radius: ${({ theme }) => theme.size.mainInputRadius};
 `;
 
+export const Title = styled.div`
+  display: flex;
+  justify-content: space-between;
+`;
+
 export const Text = styled(TextComponent)`
   padding: 0.5rem 0 0 0.4rem ;
   margin: 0 1rem;
   font-size: 1.2rem;
 `;
 
+export const ErrorMessage = styled(TextComponent)`
+  padding: 0.5rem 0 0 0.4rem ;
+  margin: 0 1rem;
+  font-size: 1.2rem;
+  color: red;
+`;
+
 export const Input = styled(InputComponent)`
   margin: 0.5rem 1rem;
   width: calc(100% - 2rem);

From 72720f49e4d2237982120faa78ae28573ea8ef8c Mon Sep 17 00:00:00 2001
From: pkiop <pkiop@naver.com>
Date: Sun, 24 Jan 2021 23:11:59 +0900
Subject: [PATCH 3/3] Feat: Add input error handling

---
 .../UI/organisms/RecodeInput/index.tsx        | 26 ++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/UI/organisms/RecodeInput/index.tsx b/frontend/src/components/UI/organisms/RecodeInput/index.tsx
index f68eae3..1e1ba57 100644
--- a/frontend/src/components/UI/organisms/RecodeInput/index.tsx
+++ b/frontend/src/components/UI/organisms/RecodeInput/index.tsx
@@ -15,6 +15,22 @@ export interface Props {
   className?: string;
 }
 
+function isInputError(title: string, startHour:string, startMin: string, selectedCategory: string) {
+  if (title === '') {
+    return 'title을 입력하세요';
+  }
+  if (startHour === '') {
+    return 'startHour을 입력하세요';
+  }
+  if (startMin === '') {
+    return 'startMin을 입력하세요';
+  }
+  if (selectedCategory === '') {
+    return '카테고리를 입력하세요';
+  }
+  return null;
+}
+
 function RecodeInput({
   labelList, refetch, recodeId, toggleRecodeInput, className, selectedDate,
 }: Props) {
@@ -25,6 +41,7 @@ function RecodeInput({
   const endMinRef = useRef<HTMLInputElement>(null);
   const switchButtonRef = useRef<HTMLDivElement>(null);
   const [fullFetched, setFullFetched] = useState<boolean>(false);
+  const [errorMsg, setErrorMsg] = useState<string>('');
 
   const [selectedCategory, setSelectedCategory] = useState<string>('');
   const {
@@ -61,6 +78,13 @@ function RecodeInput({
     };
     const bActive = switchButtonRef?.current?.classList.contains('active');
 
+    const inputErrorMsg = isInputError(title!, startHour!, startMin!, selectedCategory);
+    if (inputErrorMsg) {
+      setErrorMsg(inputErrorMsg);
+      return;
+    }
+    setErrorMsg('');
+
     if (recodeId) {
       await updateTimeRecodeMutation({
         variables: {
@@ -176,7 +200,7 @@ function RecodeInput({
   }
   return (
     <S.RecodeInput className={className}>
-      <S.TitleInput titleRef={titleRef} text={'Title'} />
+      <S.TitleInput titleRef={titleRef} errorMsg={errorMsg} text={'Title'} />
       <S.TimeInput
         startHourRef={startHourRef}
         startMinRef={startMinRef}