src/components/common/CollectionCard.tsx

@@ -6,7 +6,7 @@ import { Link } from 'react-router-dom';
 
 import UserThumb from '@src/components/common/CircleThumb';
 import URLInfo from '@src/constants/URLInfo';
-import NumberUtil from '@src/utils/NumberUtil';
+import currency from 'currency.js';
 
 const cx = classNames.bind(styles);
 
@@ -57,11 +57,14 @@ const CollectionCard: React.FC<IOwnProps> = ({
           <div className={cx('collection_info')}>
             <div className={cx('info_area')}>
               <strong className={cx('text')}>Items</strong>
-              <strong className={cx('info')}>{NumberUtil.numFormatter(totalItem)}</strong>
+              <strong className={cx('info')}>{totalItem}</strong>
             </div>
             <div className={cx('info_area')}>
               <strong className={cx('text')}>Total Volume</strong>
-              <strong className={cx('info')}>${NumberUtil.numFormatter(totalVolume)}</strong>
+              <strong className={cx('info')}>{currency(totalVolume).format({
+                precision: 2,
+                symbol: '$'
+              })}</strong>
             </div>
           </div>
         </div>

src/components/mobile/Search.tsx

@@ -1,12 +1,13 @@
-import React, { useRef, useState } from "react";
 import classNames from "classnames/bind";
+import React, { useRef, useState } from "react";
 import styles from "./Search.scss";
 
-import { ReactComponent as IconSearchGray } from "@assets/img/svg/ico_search_gray.svg";
 import { ReactComponent as IconClose } from "@assets/img/svg/ico_close.svg";
+import { ReactComponent as IconSearchGray } from "@assets/img/svg/ico_search_gray.svg";
+import URLInfo from "@src/constants/URLInfo";
 import useSearch from "@src/hooks/useSearch";
+import { useSelector } from "react-redux";
 import { useHistory } from "react-router";
-import URLInfo from "@src/constants/URLInfo";
 import { useOnClickOutside } from "usehooks-ts";
 import AutoCompleteSearch from "../common/AutoCompleteSearch";
 
@@ -19,6 +20,7 @@ interface IOwnProps {
 const Search: React.FC<IOwnProps> = ({ onClose }) => {
   const history = useHistory();
   const searchRef = useRef(null);
+  const { hint } = useSelector((state) => state.explore);
   const [showAutoComplete, setShowAutoComplete] = useState<boolean>(false);
   const onSearch = () => {
     history.push(URLInfo.getSearchResultUrl(keyword));
@@ -33,19 +35,6 @@ const Search: React.FC<IOwnProps> = ({ onClose }) => {
     onSearch,
   });
 
-  const fakeComplete = [
-    "test1",
-    "test2",
-    "test3",
-    "test4",
-    "test5",
-    "test6",
-    "test7",
-    "test8",
-    "test9",
-    "test10",
-  ];
-
   useOnClickOutside(searchRef, () => {
     setShowAutoComplete(false);
   });
@@ -70,7 +59,7 @@ const Search: React.FC<IOwnProps> = ({ onClose }) => {
         </button>
         <AutoCompleteSearch
           show={showAutoComplete}
-          data={fakeComplete}
+          data={hint}
           onClick={(e) => {
             setShowAutoComplete(false);
             SelectTextComplete(e);

src/components/pc/Header.tsx

@@ -15,7 +15,7 @@ import ProfileModal from "../common/ProfileModal";
 import LayerContainer from "@src/containers/common/LayerContainer";
 import { useDispatch, useSelector } from "react-redux";
 import useLogin from "@src/hooks/useLogin";
-import { useHistory } from "react-router";
+import { useHistory, useLocation } from "react-router";
 import { fetchUserInfo } from "@src/store/reducers/UserReducer";
 import { YoutubeIcon } from "../common/icon/youtube";
 import { useDebounce, useOnClickOutside} from "usehooks-ts";
@@ -32,6 +32,7 @@ const Header: React.FC = () => {
   const { userInfo, isUserInfoLoaded } = useSelector((store) => store.user);
   const onSearch = () => {
     history.push(URLInfo.getSearchResultUrl(keyword));
+    setShowAutoComplete(false)
   };
   const SelectTextComplete = (text: string) => {
     history.push(URLInfo.getSearchResultUrl(text));
@@ -42,6 +43,7 @@ const Header: React.FC = () => {
   const debouncedValue = useDebounce<string>(keyword, 1000)
   const [showCommunity, setShowCommunity] = useState(false);
   const [showProfile, setShowProfile] = useState<boolean>(false);
+  const location = useLocation();
   const { handleClickLoginButton, loginText } = useLogin();
   const { hint } = useSelector((state) => state.explore)
   useEffect(() => {
@@ -72,6 +74,12 @@ const Header: React.FC = () => {
       dispatchHint(keyword)
   }, [debouncedValue]);
 
+  useEffect(() => {
+    if(!URLInfo.isExplorePage(location)){
+      setKeyword('')
+    }
+  }, [location])
+
   return (
     <div className={cx("header_wrap")}>
       <div className={cx("header_group")}>

src/pages/Home.tsx

@@ -53,7 +53,7 @@ const Home: React.FC = () => {
 
   const dispatchHomeArtists = () => {
     dispatch(fetchHomeArtists({
-      limit: 25
+      limit: 1000000
     }))
   }
   const { onClickMore, showMore, resetPagination, defaultDisplayCnt } = useMore({ list, dispatchFnc: dispatchExploreHome, setSelectedFilterType: filterProps.setSelectedFilterType });

src/pages/ProfileCollection.tsx

@@ -193,7 +193,7 @@ const ProfileCollection: React.FC<IOwnProps> = ({ }) => {
               </li>
               <li className={cx('info_list_list')}>
                 <p className={cx('title')}>Items</p>
-                <p className={cx('desc')}>{NumberUtil.numFormatter(baseInfo?.items)}</p>
+                <p className={cx('desc')}>{baseInfo?.items}</p>
               </li>
               <li className={cx('info_list_list')}>
                 <p className={cx('title')}>Owners</p>