Rename home <-> main components

- unused components are removed

Author: velopert

src/App.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { Route, Switch } from 'react-router-dom';
-// import MainPage from './pages/main/MainPage';
 // import PostPage from './pages/PostPage';
 
 import loadable from '@loadable/component';

src/components/base/Header.tsx

@@ -12,7 +12,7 @@ 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';
+import MainResponsive from '../main/MainResponsive';
 
 const HeaderBlock = styled.div<{ floating: boolean }>`
   width: 100%;
@@ -123,7 +123,7 @@ const Header: React.FC<HeaderProps> = ({
         style={{ marginTop: floating ? floatingMargin : 0 }}
         data-testid="Header"
       >
-        <HomeResponsive>
+        <MainResponsive>
           <div className="wrapper">
             <div className="brand">
               <HeaderLogo
@@ -181,7 +181,7 @@ const Header: React.FC<HeaderProps> = ({
               )}
             </div>
           </div>
-        </HomeResponsive>
+        </MainResponsive>
       </HeaderBlock>
       {floating && <Placeholder />}
     </>

src/components/main/MainMobileHeadExtra.tsx renamed to src/components/home/HomeMobileHeadExtra.tsx

@@ -1,17 +1,17 @@
 import * as React from 'react';
 import styled from 'styled-components';
 import palette from '../../lib/styles/palette';
-import MainWidget from './MainWidget';
+import HomeWidget from './HomeWidget';
 import { Link } from 'react-router-dom';
 import { PartialPost } from '../../lib/graphql/post';
 import { formatDate } from '../../lib/utils';
 import Skeleton from '../common/Skeleton';
 
-interface MainNoticeWidgetProps {
+interface HomeNoticeWidgetProps {
   posts: PartialPost[];
 }
 
-const MainNoticeWidget: React.FC<MainNoticeWidgetProps> = ({ posts }) => {
+const HomeNoticeWidget: React.FC<HomeNoticeWidgetProps> = ({ posts }) => {
   const sliced = posts.slice(0, 5);
 
   return (
@@ -39,7 +39,7 @@ const MainNoticeWidget: React.FC<MainNoticeWidgetProps> = ({ posts }) => {
   );
 };
 
-export function MainNoticeWidgetSkeleton() {
+export function HomeNoticeWidgetSkeleton() {
   return (
     <StyledWidget title="공지사항">
       <ul>
@@ -58,7 +58,7 @@ export function MainNoticeWidgetSkeleton() {
   );
 }
 
-const StyledWidget = styled(MainWidget)`
+const StyledWidget = styled(HomeWidget)`
   .empty {
     padding-top: 1rem;
     padding-bottom: 1rem;
@@ -105,4 +105,4 @@ const StyledWidget = styled(MainWidget)`
   }
 `;
 
-export default MainNoticeWidget;
+export default HomeNoticeWidget;

src/components/main/MainNoticeWidget.tsx renamed to src/components/home/HomeNoticeWidget.tsx

@@ -27,9 +27,9 @@ const MainRightFooterBlock = styled.div`
   }
 `;
 
-interface MainRightFooterProps {}
+interface HomeRightFooterProps {}
 
-const MainRightFooter: React.FC<MainRightFooterProps> = props => {
+const HomeRightFooter: React.FC<HomeRightFooterProps> = props => {
   return (
     <MainRightFooterBlock>
       <div className="links">
@@ -51,4 +51,4 @@ const MainRightFooter: React.FC<MainRightFooterProps> = props => {
   );
 };
 
-export default MainRightFooter;
+export default HomeRightFooter;

src/components/main/MainRightFooter.tsx renamed to src/components/home/HomeRightFooter.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import styled from 'styled-components';
-import MainNoticeWidgetContainer from '../../containers/main/MainNoticeWidgetContainer';
-import MainTagWidgetContainer from '../../containers/main/MainTagWidgetContainer';
-import MainRightFooter from '../main/MainRightFooter';
+import MainNoticeWidgetContainer from '../../containers/home/MainNoticeWidgetContainer';
+import MainTagWidgetContainer from '../../containers/home/MainTagWidgetContainer';
+import HomeRightFooter from './HomeRightFooter';
 import Sticky from '../common/Sticky';
 
 export type HomeSidebarProps = {};
@@ -13,7 +13,7 @@ function HomeSidebar(props: HomeSidebarProps) {
       <Block>
         <MainNoticeWidgetContainer />
         <MainTagWidgetContainer />
-        <MainRightFooter />
+        <HomeRightFooter />
       </Block>
     </Sticky>
   );

src/components/home/HomeSidebar.tsx

@@ -6,7 +6,7 @@ import { MdTrendingUp, MdAccessTime, MdMoreVert } from 'react-icons/md';
 import { useSpring, animated } from 'react-spring';
 import { mediaQuery } from '../../lib/styles/media';
 import useToggle from '../../lib/hooks/useToggle';
-import MainMobileHeadExtra from '../../components/main/MainMobileHeadExtra';
+import HomeMobileHeadExtra from './HomeMobileHeadExtra';
 
 export type HomeTabProps = {};
 
@@ -58,7 +58,7 @@ function HomeTab(props: HomeTabProps) {
       <MobileMore ref={moreButtonRef}>
         <MdMoreVert className="more" onClick={toggle} />
       </MobileMore>
-      <MainMobileHeadExtra visible={extra} onClose={onClose} />
+      <HomeMobileHeadExtra visible={extra} onClose={onClose} />
     </Wrapper>
   );
 }

src/components/home/HomeTab.tsx

@@ -1,15 +1,15 @@
 import React from 'react';
 import styled from 'styled-components';
-import MainWidget from './MainWidget';
+import HomeWidget from './HomeWidget';
 import palette from '../../lib/styles/palette';
 import { Link } from 'react-router-dom';
 import Skeleton from '../common/Skeleton';
 
-export type MainTagWidgetProps = {
+export type HomeTagWidgetProps = {
   tags: string[];
 };
 
-function MainTagWidget({ tags }: MainTagWidgetProps) {
+function HomeTagWidget({ tags }: HomeTagWidgetProps) {
   return (
     <StyledWidget title="인기 태그">
       <ul>
@@ -26,7 +26,7 @@ function MainTagWidget({ tags }: MainTagWidgetProps) {
   );
 }
 
-export function MainTagWidgetSkeleton() {
+export function HomeTagWidgetSkeleton() {
   return (
     <StyledWidget title="인기 태그">
       <ul>
@@ -40,7 +40,7 @@ export function MainTagWidgetSkeleton() {
   );
 }
 
-const StyledWidget = styled(MainWidget)`
+const StyledWidget = styled(HomeWidget)`
   ul {
     list-style: none;
     padding-left: 0;
@@ -72,4 +72,4 @@ const StyledWidget = styled(MainWidget)`
   }
 `;
 
-export default MainTagWidget;
+export default HomeTagWidget;

src/components/main/MainTagWidget.tsx renamed to src/components/home/HomeTagWidget.tsx

@@ -2,13 +2,13 @@ import React from 'react';
 import styled from 'styled-components';
 import palette from '../../lib/styles/palette';
 
-export type MainWidgetProps = {
+export type HomeWidgetProps = {
   title: string;
   children: React.ReactNode;
   className?: string;
 };
 
-function MainWidget({ title, children, className }: MainWidgetProps) {
+function HomeWidget({ title, children, className }: HomeWidgetProps) {
   return (
     <MainWidgetBlock className={className}>
       <h4>{title}</h4>
@@ -33,4 +33,4 @@ const MainWidgetBlock = styled.section`
   }
 `;
 
-export default MainWidget;
+export default HomeWidget;

src/components/home/HomeTemplate.tsx

@@ -1,13 +1,13 @@
 import React, { useEffect, useCallback, useRef, useState } from 'react';
 import styled from 'styled-components';
-import HomeHeader from './HomeHeader';
-import HomeTab from './HomeTab';
-import HomeResponsive from './HomeResponsive';
+import MainHeader from './MainHeader';
+import HomeTab from '../home/HomeTab';
+import MainResponsive from './MainResponsive';
 import { getScrollTop } from '../../lib/utils';
 
-export type FloatingHomeHeaderProps = {};
+export type FloatingMainHeaderProps = {};
 
-function FloatingHomeHeader(props: FloatingHomeHeaderProps) {
+function FloatingMainHeader(props: FloatingMainHeaderProps) {
   const [visible, setVisible] = useState(false);
   const [marginTop, setMarginTop] = useState(-102);
 
@@ -66,11 +66,11 @@ function FloatingHomeHeader(props: FloatingHomeHeaderProps) {
             }
       }
     >
-      <HomeHeader />
+      <MainHeader />
       <div className="tab-wrapper">
-        <HomeResponsive>
+        <MainResponsive>
           <HomeTab />
-        </HomeResponsive>
+        </MainResponsive>
       </div>
       <div></div>
     </Block>
@@ -90,4 +90,4 @@ const Block = styled.div`
   }
 `;
 
-export default FloatingHomeHeader;
+export default FloatingMainHeader;

src/components/main/MainWidget.tsx renamed to src/components/home/HomeWidget.tsx

@@ -2,17 +2,17 @@ import React from 'react';
 import styled from 'styled-components';
 import { Logo, SearchIcon2 } from '../../static/svg';
 import RoundButton from '../common/RoundButton';
-import HomeResponsive from './HomeResponsive';
-import useHeader from './hooks/useHeader';
+import MainResponsive from './MainResponsive';
+import useHeader from '../home/hooks/useHeader';
 import HeaderUserIcon from '../base/HeaderUserIcon';
 import useToggle from '../../lib/hooks/useToggle';
 import HeaderUserMenu from '../base/HeaderUserMenu';
 import { Link } from 'react-router-dom';
 import { mediaQuery } from '../../lib/styles/media';
 
-export type HomeHeaderProps = {};
+export type MainHeaderProps = {};
 
-function HomeHeader(props: HomeHeaderProps) {
+function MainHeader(props: MainHeaderProps) {
   const { user, onLoginClick, onLogout } = useHeader();
   const [userMenu, toggleUserMenu] = useToggle(false);
 
@@ -83,7 +83,7 @@ const SearchButton = styled(Link)`
   margin-right: 0.75rem;
 `;
 
-const Inner = styled(HomeResponsive)`
+const Inner = styled(MainResponsive)`
   height: 100%;
   display: flex;
   align-items: center;
@@ -101,4 +101,4 @@ const Right = styled.div`
   }
 `;
 
-export default HomeHeader;
+export default MainHeader;