Merge branch 'feature/grid-home' into develop

Author: velopert

package.json

@@ -44,6 +44,7 @@
     "@types/react-router-dom": "^5.1.3",
     "@types/react-textarea-autosize": "^4.3.5",
     "@types/react-toastify": "^4.1.0",
+    "@types/react-virtualized": "^9.21.8",
     "@types/sanitize-html": "^1.20.2",
     "@types/styled-components": "^4.4.1",
     "@types/throttle-debounce": "^2.1.0",
@@ -120,6 +121,7 @@
     "react-textarea-autosize": "^7.1.2",
     "react-toastify": "^5.5.0",
     "react-use": "^13.12.2",
+    "react-virtualized": "^9.21.2",
     "redux": "^4.0.4",
     "redux-devtools-extension": "^2.13.8",
     "remark": "^11.0.2",

src/App.tsx

@@ -12,6 +12,7 @@ import VelogPageFallback from './containers/velog/VelogPageFallback';
 import ErrorBoundary from './components/error/ErrorBoundary';
 import NotFoundPage from './pages/NotFoundPage';
 import { Helmet } from 'react-helmet-async';
+import HomePage from './pages/home/HomePage';
 
 const loadableConfig = {
   fallback: <PageTemplate />,
@@ -57,12 +58,13 @@ const App: React.FC<AppProps> = props => {
       </Helmet>
       <ErrorBoundary>
         <Switch>
-          <Route path="/" component={MainPage} exact />
-          <Route path="/register" component={RegisterPage} />
+          <Route path="/" component={HomePage} exact />
           <Route
             path="/:mode(trending|recent|following)"
-            component={MainPage}
+            component={HomePage}
           />
+
+          <Route path="/register" component={RegisterPage} />
           <Route path="/@:username" component={VelogPage} />
           {/* <Route path="/@:username/:urlSlug" component={PostPage} /> */}
           <Route path="/email-login" component={EmailLoginPage} />

src/components/base/Header.tsx

@@ -12,15 +12,16 @@ import HeaderLogo from './HeaderLogo';
 import media from '../../lib/styles/media';
 import { SearchIcon2 } from '../../static/svg';
 import { Link } from 'react-router-dom';
+import HomeResponsive from '../home/HomeResponsive';
 
 const HeaderBlock = styled.div<{ floating: boolean }>`
   width: 100%;
-  > .wrapper {
-    width: 1200px;
+  .wrapper {
+    /* width: 1200px; */
+    width: 100%;
     height: 4rem;
-    margin: 0 auto;
-    padding-left: 1rem;
-    padding-right: 1rem;
+    /* padding-left: 1rem;
+    padding-right: 1rem; */
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -36,10 +37,10 @@ const HeaderBlock = styled.div<{ floating: boolean }>`
     }
 
     ${media.large} {
-      width: 1024px;
+      /* width: 1024px; */
     }
     ${media.medium} {
-      width: 100%;
+      /* width: 100%; */
       .write-button {
         display: none;
       }
@@ -122,63 +123,65 @@ const Header: React.FC<HeaderProps> = ({
         style={{ marginTop: floating ? floatingMargin : 0 }}
         data-testid="Header"
       >
-        <div className="wrapper">
-          <div className="brand">
-            <HeaderLogo
-              custom={custom}
-              userLogo={userLogo}
-              velogUsername={velogUsername}
-            />
-          </div>
-          <div className="right">
-            {/* {velogUsername ? (
+        <HomeResponsive>
+          <div className="wrapper">
+            <div className="brand">
+              <HeaderLogo
+                custom={custom}
+                userLogo={userLogo}
+                velogUsername={velogUsername}
+              />
+            </div>
+            <div className="right">
+              {/* {velogUsername ? (
               <SearchIcon2 className="search" />
             ) : (
               <Link to="/search">
                 <SearchIcon2 className="search" />
               </Link>
             )} */}
-            {!isSearch && (
-              <Link
-                to={
-                  velogUsername
-                    ? `/search?username=${velogUsername}`
-                    : '/search'
-                }
-              >
-                <SearchIcon2 className="search" />
-              </Link>
-            )}
-            {user ? (
-              <div className="logged-in">
+              {!isSearch && (
+                <Link
+                  to={
+                    velogUsername
+                      ? `/search?username=${velogUsername}`
+                      : '/search'
+                  }
+                >
+                  <SearchIcon2 className="search" />
+                </Link>
+              )}
+              {user ? (
+                <div className="logged-in">
+                  <RoundButton
+                    border
+                    color="darkGray"
+                    style={{ marginRight: '1.25rem' }}
+                    to="/write"
+                    className="write-button"
+                  >
+                    새 글 작성
+                  </RoundButton>
+                  <HeaderUserIcon user={user} onClick={toggleUserMenu} />
+                  <HeaderUserMenu
+                    onClose={toggleUserMenu}
+                    username={user.username}
+                    onLogout={onLogout}
+                    visible={userMenu}
+                  />
+                </div>
+              ) : (
                 <RoundButton
-                  border
                   color="darkGray"
-                  style={{ marginRight: '1.25rem' }}
-                  to="/write"
-                  className="write-button"
+                  onClick={onLoginClick}
+                  className="login-button"
                 >
-                  새 글 작성
+                  로그인
                 </RoundButton>
-                <HeaderUserIcon user={user} onClick={toggleUserMenu} />
-                <HeaderUserMenu
-                  onClose={toggleUserMenu}
-                  username={user.username}
-                  onLogout={onLogout}
-                  visible={userMenu}
-                />
-              </div>
-            ) : (
-              <RoundButton
-                color="darkGray"
-                onClick={onLoginClick}
-                className="login-button"
-              >
-                로그인
-              </RoundButton>
-            )}
+              )}
+            </div>
           </div>
-        </div>
+        </HomeResponsive>
       </HeaderBlock>
       {floating && <Placeholder />}
     </>