Merge pull request #184 from pkiop/Fix/inputErrorhandling

잘못된 입력 에러 핸들링
pkiop · Jan 24, 2021 · 50a5dde · 50a5dde
2 parents ba48e78 + 72720f4
commit 50a5dde
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 10 deletions.
diff --git 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;
diff --git 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);

diff --git 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}