✨ 서치바 빈칸 막기

potenday-project · Aug 13, 2023 · b7c5536 · b7c5536
1 parent dce4d27
commit b7c5536
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 19 deletions.
diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
@@ -1,11 +1,4 @@
-import {
-  ChangeEvent,
-  ReactElement,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
+import { ChangeEvent, ReactElement, useEffect, useRef, useState } from "react";
 
 import { observer } from "mobx-react-lite";
 
@@ -141,22 +134,27 @@ const Home = (): ReactElement => {
   const { mainStore } = useStore();
   const navigate = useNavigate();
   const [value, setValue] = useState("");
+  const [isError, setIsError] = useState(false);
+  const [errorMsg, setErrorMsg] = useState("");
 
-  const handleTextFieldChange = useCallback(
-    (e: ChangeEvent<HTMLTextAreaElement>) => {
-      setValue(e.target.value);
-    },
-    [],
-  );
+  const handleTextFieldChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
+    if (isError) {
+      setIsError(false);
+      setErrorMsg("");
+    }
+    setValue(e.target.value);
+  };
 
-  const handleClickSearchButton = useCallback(
-    (v: string) => {
+  const handleClickSearchButton = (v: string) => {
+    if (value.length === 0 || value === "") {
+      setErrorMsg("검색어는 빈칸 일 수 없어요.");
+      setIsError(true);
+    } else {
       mainStore.resetSearchWords();
       mainStore.addSearchWord(v);
       navigate("/search");
-    },
-    [navigate],
-  );
+    }
+  };
 
   useEffect(() => {
     const wheelHandler = (e: WheelEvent) => {
@@ -231,6 +229,8 @@ const Home = (): ReactElement => {
         <Box className="bottom-area">
           <Box className="search-area">
             <SearchBarWithButton
+              isError={isError}
+              errorMsg={errorMsg}
               value={value}
               onChange={handleTextFieldChange}
               placeholder="키워드 또는 사건번호 입력"

diff --git a/src/pages/components/SearchBarWithButton.tsx b/src/pages/components/SearchBarWithButton.tsx
@@ -12,6 +12,8 @@ const StyledDiv = styled.div`
   gap: 10px;
 
   .MuiIconButton-root {
+    width: 40px;
+    height: 40px;
     background-color: rgba(255, 188, 16, 1);
     color: #ffffff;
     box-shadow: 2px 2px 4px 0px rgba(255, 126, 32, 0.25);
@@ -50,6 +52,8 @@ interface Props {
   placeholder?: string;
   onClick: (inputValue: string) => void;
   hasClear?: boolean;
+  isError?: boolean;
+  errorMsg?: string;
 }
 
 const SearchBarWithButton = ({
@@ -59,10 +63,14 @@ const SearchBarWithButton = ({
   placeholder = "",
   onClick,
   hasClear = false,
+  isError = false,
+  errorMsg = "",
 }: Props): ReactElement => {
   return (
     <StyledDiv>
       <TextField
+        error={isError}
+        helperText={errorMsg}
         fullWidth
         size="small"
         value={value}