create SearchResultLayout.tsx

packages/app/src/components/Layout/SearchResultLayout.tsx

@@ -0,0 +1,32 @@
+import React, { ReactNode } from 'react';
+
+import { BasicLayout } from '~/components/Layout/BasicLayout';
+
+import commonStyles from './SearchResultLayout.module.scss';
+
+type Props = {
+  title: string,
+  className?: string,
+  children?: ReactNode,
+}
+
+const SearchResultLayout = ({
+  children, title, className,
+}: Props): JSX.Element => {
+  const classNames: string[] = ['wrapper'];
+  if (className != null) {
+    classNames.push(className);
+  }
+  return (
+    <div className={`${commonStyles['on-search']}`}>
+      <BasicLayout title={title} className={classNames.join(' ')}>
+        <div id="grw-fav-sticky-trigger" className="sticky-top"></div>
+        <div id="main" className="main search-page mt-0">
+          { children }
+        </div>
+      </BasicLayout>
+    </div>
+  );
+};
+
+export default SearchResultLayout;

packages/app/src/components/SearchPage.tsx

@@ -265,3 +265,5 @@ export const SearchPage = (): JSX.Element => {
     />
   );
 };
+
+SearchPage.displayName = 'SearchPage';

packages/app/src/pages/_private-legacy-pages.page.tsx

@@ -25,7 +25,7 @@ import {
   CommonProps, getNextI18NextConfig, getServerSideCommonProps, useCustomTitle,
 } from './utils/commons';
 
-import styles from './SearchResultLayout.module.scss';
+const SearchResultLayout = dynamic(() => import('~/components/Layout/SearchResultLayout'), { ssr: false });
 
 type Props = CommonProps & {
   currentUser: IUser,
@@ -78,19 +78,12 @@ const PrivateLegacyPage: NextPage<Props> = (props: Props) => {
         {renderScriptTagByName('highlight-addons')}
         */}
       </Head>
-      <div className={`${styles['on-search']}`}>
-        <BasicLayout title={useCustomTitle(props, 'GROWI')}>
 
-          <div id="grw-fav-sticky-trigger" className="sticky-top"></div>
-          <div id="main" className="main search-page mt-0">
-
-            <div id="private-regacy-pages">
-              <PrivateLegacyPages />
-            </div>
-
-          </div>
-        </BasicLayout>
-      </div>
+      <SearchResultLayout title={useCustomTitle(props, 'GROWI')}>
+        <div id="private-regacy-pages">
+          <PrivateLegacyPages />
+        </div>
+      </SearchResultLayout>
     </>
   );
 };

packages/app/src/pages/_search.page.tsx

@@ -28,7 +28,7 @@ import {
   CommonProps, getNextI18NextConfig, getServerSideCommonProps, useCustomTitle,
 } from './utils/commons';
 
-import styles from './SearchResultLayout.module.scss';
+const SearchResultLayout = dynamic(() => import('~/components/Layout/SearchResultLayout'), { ssr: false });
 
 type Props = CommonProps & {
   currentUser: IUser,
@@ -89,20 +89,14 @@ const SearchResultPage: NextPage<Props> = (props: Props) => {
         {renderScriptTagByName('highlight-addons')}
         */}
       </Head>
-      <div className={`${styles['on-search']}`}>
-        <BasicLayout title={useCustomTitle(props, 'GROWI')} className={classNames.join(' ')}>
 
-          <div id="grw-fav-sticky-trigger" className="sticky-top"></div>
-          <div id="main" className="main search-page mt-0">
+      <SearchResultLayout title={useCustomTitle(props, 'GROWI')} className={classNames.join(' ')}>
+        <div id="search-page">
+          <SearchPage />
+        </div>
+      </SearchResultLayout>
 
-            <div id="search-page">
-              <SearchPage />
-            </div>
-
-          </div>
-          <PutbackPageModal />
-        </BasicLayout>
-      </div>
+      <PutbackPageModal />
     </>
   );
 };