[FE-224] fix: 마이페이지 검색 QA 버그 픽스

src/assets/constant/constant.ts

@@ -4,6 +4,8 @@ export const INPUT_DETAILS = Object.freeze({
   MIN_TYPING: 0,
 })
 
+export const RECORD_TITLE_MAX_LENGTH = 12
+
 export const TEXT_DETAILS = Object.freeze({
   CELEBRATION: 'celebration',
   CONSOLATION: 'consolation',

src/pages/AddRecord/AddRecordInput.tsx

@@ -1,5 +1,9 @@
 import React, { Dispatch, SetStateAction, useEffect, useState } from 'react'
-import { CELEBRATION_ID, INPUT_DETAILS } from '@assets/constant/constant'
+import {
+  CELEBRATION_ID,
+  INPUT_DETAILS,
+  RECORD_TITLE_MAX_LENGTH,
+} from '@assets/constant/constant'
 import { IsInputsHasValueType } from './AddRecord'
 import { parentCategoryID } from 'types/category'
 
@@ -71,6 +75,7 @@ function AddRecordInput({
         onChange={(e) => handleChange(e)}
         type="text"
         value={modifyTitle ? modifyTitle : recordTitle}
+        maxLength={RECORD_TITLE_MAX_LENGTH}
       />
       <span className=" text-xs text-grey-4">{`${recordTitle.length}/${INPUT_DETAILS.MAX_INPUT_TYPING}`}</span>
     </div>

src/pages/MyRecord/Common/SearchInput.tsx

@@ -1,32 +1,42 @@
-import React, { Dispatch, SetStateAction } from 'react'
+import React, { Dispatch, SetStateAction, useRef } from 'react'
 import { ReactComponent as SearchIcon } from '@assets/myRecordIcon/search.svg'
 import { ReactComponent as CloseIcon } from '@assets/icon_closed.svg'
+import { RECORD_TITLE_MAX_LENGTH } from '@assets/constant/constant'
 
 interface SearchInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
   onKeyUp?: (e: React.KeyboardEvent<HTMLInputElement>) => void
   setKeyword: Dispatch<SetStateAction<string>>
+  setIsClickedInput: Dispatch<SetStateAction<boolean>>
 }
 
 export default function SearchInput({
   onKeyUp,
   setKeyword,
+  setIsClickedInput,
   ...props
 }: SearchInputProps) {
+  const inputRef = useRef<HTMLInputElement>(null)
+
   return (
     <div className="relative flex w-full items-center">
       <SearchIcon className="absolute left-[12px] h-[14px] w-[14px]" />
       <input
+        ref={inputRef}
         className="w-full rounded-[10px] bg-grey-2 py-[10px] pl-[38px] text-[14px] font-medium outline-none placeholder:text-grey-5"
         id="search-record-input"
-        placeholder="레코드 제목을 입력하세요"
         autoComplete="off"
         onChange={(e) => setKeyword(e.target.value)}
+        onFocus={() => setIsClickedInput(true)}
         onKeyUp={onKeyUp}
+        maxLength={RECORD_TITLE_MAX_LENGTH}
         {...props}
       />
       <CloseIcon
         className="absolute right-[10px] cursor-pointer"
-        onClick={() => setKeyword('')}
+        onClick={() => {
+          setKeyword('')
+          inputRef.current?.focus()
+        }}
       />
     </div>
   )

src/pages/MyRecord/MyRecord.tsx

@@ -14,6 +14,7 @@ export default function MyRecord() {
   const { isLoading, monthYear } = useMyRecordByDate()
   const [isOpenCalendar, setIsOpenCalendar] = useState(false)
   const [keyword, setKeyword] = useState('')
+  const [isClickedInput, setIsClickedInput] = useState(false)
   const setSearchedKeyword = useSetRecoilState(searchedKeyword)
 
   const handleSearch = (e: React.KeyboardEvent<HTMLInputElement>) => {
@@ -38,6 +39,8 @@ export default function MyRecord() {
             value={keyword}
             onKeyUp={handleSearch}
             setKeyword={setKeyword}
+            setIsClickedInput={setIsClickedInput}
+            placeholder={isClickedInput ? `` : `레코드 제목을 입력하세요`}
           />
         </section>
         <section id="my-today-record">

src/pages/MyRecord/Search/SearchRecord.tsx

@@ -9,12 +9,11 @@ import useDebounce from '@hooks/useDebounce'
 import { useIntersect } from '@hooks/useIntersectionObserver'
 import Spinner from '@components/Spinner'
 
-const KEYWORD_MAX_LENGTH = 12
-
 export default function SearchRecord() {
   const { keyword: keywordInStore } = useRecoilValue(searchedKeyword)
   const resetSearchedKeyword = useResetRecoilState(searchedKeyword)
   const [keyword, setKeyword] = useState(keywordInStore || '')
+  const [isClickedInput, setIsClickedInput] = useState(false)
   const {
     myRecordByKeyword,
     setKeywordWithQuery,
@@ -56,7 +55,8 @@ export default function SearchRecord() {
           value={keyword}
           onChange={(e) => setKeyword(e.target.value)}
           setKeyword={setKeyword}
-          maxLength={KEYWORD_MAX_LENGTH}
+          setIsClickedInput={setIsClickedInput}
+          placeholder={isClickedInput ? `` : `레코드 제목을 입력하세요`}
         />
       </section>
       <section id="my-today-record">