Merge pull request #582 from velopert/fix/validate-inputs

input 값 검증하기

Author: winverse

src/components/write/TagInput.tsx

@@ -6,6 +6,7 @@ import transitions from '../../lib/styles/transitions';
 import { mediaQuery } from '../../lib/styles/media';
 import { useTransition, animated } from 'react-spring';
 import OutsideClickHandler from 'react-outside-click-handler';
+import { isEmptyOrWhitespace } from '../../lib/utils';
 
 export interface TagInputProps {
   ref?: React.RefObject<HTMLDivElement>;
@@ -48,9 +49,8 @@ const TagInput: React.FC<TagInputProps> = ({ onChange, tags: initialTags }) => {
     (tag: string) => {
       ignore.current = true;
       setValue('');
-      if (tag === '' || tags.includes(tag)) return;
-      let processed = tag;
-      processed = tag.trim().slice(0,255);
+      if (isEmptyOrWhitespace(tag) || tags.includes(tag)) return;
+      let processed = tag.trim().slice(0, 255);
       if (processed.indexOf(' #') > 0) {
         const tempTags: string[] = [];
         const regex = /#(\S+)/g;

src/containers/register/RegisterFormContainer.tsx

@@ -16,6 +16,8 @@ import { withRouter, RouteComponentProps } from 'react-router-dom';
 import qs from 'qs';
 import { useApolloClient } from '@apollo/react-hooks';
 import { GET_CURRENT_USER } from '../../lib/graphql/user';
+import { isEmpty, trim } from 'ramda';
+import { isEmptyOrWhitespace } from '../../lib/utils';
 
 interface RegisterFormContainerProps extends RouteComponentProps<{}> {}
 
@@ -65,16 +67,21 @@ const RegisterFormContainer: React.FC<RegisterFormContainerProps> = ({
   const onSubmit = async (form: RegisterFormType) => {
     setError(null);
     // validate
+
     const validation = {
       displayName: (text: string) => {
-        if (text.trim() === '') {
-          return '이름을 입력해주세요.';
+        if (isEmptyOrWhitespace(text)) {
+          return '프로필 이름을 입력해주세요.';
         }
         if (text.trim().length > 45) {
           return '이름은 최대 45자까지 입력 할 수 있습니다.';
         }
       },
       username: (text: string) => {
+        if (isEmptyOrWhitespace(text)) {
+          return '사용자 ID를 입력해주세요.';
+        }
+
         if (!/^[a-z0-9-_]{3,16}$/.test(text)) {
           return '사용자 ID는 3~16자의 알파벳 소문자,숫자,혹은 - _ 으로 이루어져야 합니다.';
         }

src/lib/utils.ts

@@ -1,6 +1,7 @@
 import distanceInWordsToNow from 'date-fns/formatDistanceToNow';
 import format from 'date-fns/format';
 import koLocale from 'date-fns/locale/ko';
+import { isEmpty, trim } from 'ramda';
 
 export const formatDate = (date: string): string => {
   const d = new Date(date);
@@ -115,3 +116,10 @@ export const createFallbackTitle = (username: string | null) => {
 };
 
 export const ssrEnabled = process.env.REACT_APP_SSR === 'enabled';
+
+export const isEmptyOrWhitespace = (str: string) => {
+  if (typeof str !== 'string') {
+    return isEmpty(str);
+  }
+  return isEmpty(trim(str.replace(/\s/g, '')));
+};