Merge pull request #141 from JhsK/refactor/style_division#140

refactor #140 deploy
JhsK · Jun 14, 2022 · a8ec744 · a8ec744
2 parents 12f0d8e + 01d4f92
commit a8ec744
Show file tree

Hide file tree

Showing 25 changed files with 905 additions and 905 deletions.
diff --git a/front/scripts/deploy.sh b/front/scripts/deploy.sh
@@ -1,8 +1,4 @@
 #!/usr/bin/env bash
 echo "> FE 배포"
-cd /home/ubuntu/front
-ls
 pwd
-sudo rm -rf node_modules
-sudo npm install
-sudo npx pm2 status
+ls
diff --git a/front/src/components/About/index.tsx b/front/src/components/About/index.tsx
@@ -1,4 +1,3 @@
-import styled from '@emotion/styled';
 import AOS from 'aos';
 import React, { useEffect } from 'react';
 import useDevice from 'src/hooks/useDevice';
@@ -7,10 +6,6 @@ import MobileIntroduceText from '../share/MobileIntroduceText';
 import Experience from './Experience';
 import Introduce from './Introduce';
 
-const Container = styled.div`
-  /* height: 100%; */
-`;
-
 const AboutComponent = () => {
   const isFold = useDevice(400);
 
@@ -19,11 +14,11 @@ const AboutComponent = () => {
   }, []);
 
   return (
-    <Container>
+    <div>
       {isFold ? <MobileIntroduceText /> : <Introduce />}
       <Experience />
       <Footer />
-    </Container>
+    </div>
   );
 };
 

diff --git a/front/src/components/About/style.ts b/front/src/components/About/style.ts
@@ -23,7 +23,7 @@ export const AboutContainer = styled.div`
     align-items: center;
   }
 
-  span {
+  & > span {
     font-weight: bold;
     font-size: 1.4rem;
   }
@@ -124,7 +124,7 @@ export const Container = styled.div`
         @media ${(props) => props.theme.MOBILE} {
           font-size: 0.9rem;
         }
-        h1 {
+        & > h1 {
           font-size: 1.4rem;
           margin-bottom: 1rem;
 
@@ -133,7 +133,7 @@ export const Container = styled.div`
           }
         }
 
-        span {
+        & > span {
           opacity: 0.5;
           margin-bottom: 0.5rem;
           display: block;
@@ -149,13 +149,13 @@ export const Container = styled.div`
           margin-bottom: 1rem;
           line-height: 1.2rem;
         }
-      }
 
-      .task {
-        padding-left: 1rem;
+        .task {
+          padding-left: 1rem;
 
-        li {
-          list-style-type: circle;
+          & > li {
+            list-style-type: circle;
+          }
         }
       }
     }

diff --git a/front/src/components/Blog/List.tsx → front/src/components/Blog/List/index.tsx b/front/src/components/Blog/List.tsx → front/src/components/Blog/List/index.tsx
@@ -1,177 +1,30 @@
 /* eslint-disable no-useless-escape */
-import styled from '@emotion/styled';
+import Image from 'next/image';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { useInfiniteQuery } from 'react-query';
 import { useRecoilState } from 'recoil';
 import { getPostsAPI } from 'src/api';
 import { postsInfinite } from 'src/atom';
 import { PostModel } from 'src/constant';
 import useAuth from 'src/hooks/useAuth';
 import useDevice from 'src/hooks/useDevice';
-import Image from 'next/image';
-import MobileTags from './MobileTags';
-import Search from './Search';
-
-const Container = styled.div`
-  width: 73%;
-
-  a {
-    margin-bottom: 1rem;
-  }
-`;
-
-const LableContainer = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 2rem;
-
-  @media ${(props) => props.theme.MOBILE} {
-    justify-content: center;
-  }
-
-  .filter {
-    span {
-      margin-right: 1.5rem;
-      font-weight: 800;
-      font-size: 1rem;
-      cursor: pointer;
-    }
-
-    @media ${(props) => props.theme.MOBILE} {
-      margin-bottom: 1rem;
-    }
-  }
-
-  input {
-    width: 150px;
-    height: 20px;
-    border-radius: 20px;
-    border: 1px solid rgba(0, 0, 0, 0.3);
-    padding-left: 0.5rem;
-
-    @media ${(props) => props.theme.MOBILE} {
-      width: 200px;
-    }
-  }
-
-  input:focus {
-    outline: none;
-  }
-
-  @media ${(props) => props.theme.MOBILE} {
-    flex-wrap: wrap;
-  }
-`;
-
-const Newest = styled.span`
-  color: ${(props) => (props.color === '최신순' ? props.theme.PUBLIC_BLACK : props.theme.NO_ACTIVE_CATEGORY_COLOR)};
-`;
-
-const Latest = styled.span`
-  color: ${(props) => (props.color === '후순위' ? props.theme.PUBLIC_BLACK : props.theme.NO_ACTIVE_CATEGORY_COLOR)};
-`;
-
-const All = styled.span`
-  color: ${(props) => (props.color === 'All' ? props.theme.PUBLIC_BLACK : props.theme.NO_ACTIVE_CATEGORY_COLOR)};
-`;
-
-const ListContainer = styled.div`
-  width: 100%;
-  height: 170px;
-  cursor: pointer;
-  display: flex;
-  align-items: flex-start;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  transition: box-shadow 0.3s ease 0s, border-color 0.3s ease 0s;
-
-  &:hover {
-    box-shadow: 4px 4px 1px -1px rgba(0, 0, 0, 0.12);
-  }
-
-  .nextImage {
-    position: relative;
-    width: 30%;
-    height: 100%;
-
-    @media ${(props) => props.theme.MOBILE} {
-      width: 45%;
-    }
-
-    @media ${(props) => props.theme.MOBILE_SM} {
-      width: 100%;
-    }
-  }
-`;
-
-const ContentContainer = styled.div`
-  width: 65%;
-  padding-right: 0.8rem;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-around;
-  height: 100%;
-
-  @media ${(props) => props.theme.MOBILE} {
-    width: 50%;
-  }
-
-  @media ${(props) => props.theme.MOBILE_SM} {
-    display: none;
-  }
-
-  .content {
-    @media ${(props) => props.theme.PC} {
-      font-size: 0.9rem;
-    }
-  }
-
-  div {
-    line-height: 1.5rem;
-  }
-`;
-
-const PostTitle = styled.span`
-  display: block;
-  font-size: 1.5rem;
-  font-weight: 500;
-  margin-bottom: 1.3rem;
-
-  @media ${(props) => props.theme.MOBILE} {
-    font-size: 1.3rem;
-  }
-
-  @media ${(props) => props.theme.MOBILE_SM} {
-    margin-top: 0.7rem;
-  }
-`;
-
-const TagsContainer = styled.div`
-  display: flex;
-  align-items: center;
-
-  span {
-    font-size: 0.8rem;
-    color: ${(props) => props.theme.POST_EDIT_TITLE_BORDER_COLOR};
-    margin-right: 0.8rem;
-  }
-`;
-
-const Hr = styled.hr`
-  opacity: 0.2;
-  margin: 2rem 0;
-
-  @media ${(props) => props.theme.MOBILE_SM} {
-    margin: 3rem 0;
-  }
-`;
-
-const CreateBtn = styled.div`
-  margin-bottom: 1rem;
-`;
+import MobileTags from '../MobileTags';
+import Search from '../Search';
+import {
+  All,
+  Container,
+  ContentContainer,
+  CreateBtn,
+  Hr,
+  LableContainer,
+  Latest,
+  ListContainer,
+  Newest,
+  PostTitle,
+  TagsContainer,
+} from './style';
 
 interface CategoryType {
   name: '최신순' | '후순위' | '태그' | 'All';
@@ -295,7 +148,7 @@ const List = ({ inView }) => {
                   layout="fill"
                   src={post?.Images.length > 0 ? `${post?.Images[0].image_url}` : '/default.png'}
                   alt="sumnail"
-                  objectFit="contain"
+                  objectFit="cover"
                 />
               </div>
               {isMobileSM && (