Merge pull request #356 from entrylabs/issue/4685

[#4685] 작품 불러오기 팝업 작품 정렬 및 필터 적용 방식 수정

Author: prisml

src/components/popup/Contents/Navigation/SearchBox.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { CommonUtils } from '@utils/Common';
 import Theme from '@utils/Theme';
 import classname from 'classnames';
@@ -19,20 +19,31 @@ const Index = ({ projectNavOptions, searchOption = {}, triggerSearch, type }) =>
     });
     const [isActive, setActive] = useState(false);
 
-    const search = (e) => {
-        e.preventDefault();
+    const search = useCallback(() => {
         triggerSearch({
             ...selected,
             searchQuery: query,
             type,
         });
-    };
+    }, [query, selected, triggerSearch, type]);
+
+    const handleSearch = useCallback(
+        (e) => {
+            e.preventDefault();
+            search();
+        },
+        [search]
+    );
+
+    useEffect(() => {
+        search();
+    }, [selected, type]);
 
     const toggleDropDown = (dropdown) => setDropdown(dropdown);
     const selectOption = (type) => (option) => select({ ...selected, [type]: option });
     return (
         <div className={theme.art_sel_area}>
-            <form onSubmit={search}>
+            <form onSubmit={handleSearch}>
                 {Object.keys(SearchOptionMap)
                     .filter((key) => searchOption[key])
                     .map((key) => {
@@ -61,7 +72,7 @@ const Index = ({ projectNavOptions, searchOption = {}, triggerSearch, type }) =>
                         <button
                             type="button"
                             className={classname(theme.btn_srch, theme.imbtn_pop_srch)}
-                            onClick={search}
+                            onClick={handleSearch}
                         >
                             <span className={theme.blind}>
                                 {CommonUtils.getLang('Menus.search_lang')}

src/components/popup/Contents/Projects/index.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useCallback } from 'react';
 import { connect } from 'react-redux';
 import { triggerEvent } from '@actions';
 import { closePopup } from '@actions/popup';
@@ -10,24 +10,10 @@ import EmptyContents from './EmptyContents';
 import Item from './Item';
 import { MasonryInfiniteGrid } from '@egjs/react-infinitegrid';
 
-const Index = ({
-    type,
-    data = [],
-    avatarImage,
-    raw,
-    submit,
-    fetch,
-    fetchMore,
-    HeaderButtonPortal,
-}) => {
+const Index = ({ type, data = [], avatarImage, raw, submit, fetchMore, HeaderButtonPortal }) => {
     const totalCount = raw.total || data.length;
     const theme = Theme.getStyle('popup');
     const [selected, select] = useState(null);
-
-    useEffect(() => {
-        fetch(type);
-    }, [type]);
-
     const onRequestAppend = useCallback(
         (event) => {
             if (!raw.searchAfter || !raw.searchAfter[0] || raw.total === data.length) {
@@ -65,6 +51,7 @@ const Index = ({
                     isEqualSize={true}
                     className={theme.list}
                     gap={15}
+                    align={'start'}
                     onRequestAppend={onRequestAppend}
                 >
                     {data