Merge pull request #212 from boostcampwm-2021/feature/fe/egg-debounce

Grid에서 margin padding 빼고 스타일 대폭 수정

Author: beomseok37

frontend/src/components/DashboardJobObjectives/index.tsx

@@ -15,7 +15,7 @@ function DashboardJobObjectives({ jobObjectives, onDeleteJobObjective }: Props)
   return (
     <Wrapper>
       <Title>desired job</Title>
-      <Col padding={16} alignItems='flex-end'>
+      <Col alignItems='flex-end'>
         {jobObjectives.map((jobObjective) => (
           <Row key={jobObjective} alignItems='center'>
             <p>{jobObjective}</p>

frontend/src/components/ExternalPreview/style.ts

@@ -3,6 +3,7 @@ import styled from '@emotion/styled';
 const Wrapper = styled.div`
   position: relative;
   height: 100px;
+  width: 360px;
   overflow-y: hidden;
   border-radius: 16px;
   padding: 16px;
@@ -13,7 +14,7 @@ const Cover = styled.div`
   right: 0;
   left: 0;
   bottom: 0;
-  background: linear-gradient(rgba(0, 0, 0, 0), rgba(18, 18, 18, 1));
+  background: linear-gradient(rgba(0, 0, 0, 0), rgba(13, 13, 13, 1));
 `;
 
 const LinkButton = styled.a`

frontend/src/components/Grid/index.ts

@@ -3,12 +3,6 @@ import styled from '@emotion/styled';
 interface Props {
   justifyContent?: string;
   alignItems?: string;
-  margin?: number;
-  marginTop?: number;
-  marginBottom?: number;
-  marginLeft?: number;
-  marginRight?: number;
-  padding?: number;
   expanded?: boolean;
 }
 
@@ -17,22 +11,14 @@ const Row = styled.div<Props>`
   flex-direction: row;
   justify-content: ${({ justifyContent }) => justifyContent};
   align-items: ${({ alignItems }) => alignItems};
-  margin: ${({ margin }) => `${margin}px`};
-  padding: ${({ padding }) => `${padding}px`};
   width: ${({ expanded }) => (expanded === true ? '100%' : 'unset')};
-  margin-top: ${({ marginTop }) => (marginTop ? `${marginTop}px` : `unset`)};
-  margin-bottom: ${({ marginBottom }) => (marginBottom ? `${marginBottom}px` : `unset`)};
-  margin-left: ${({ marginLeft }) => (marginLeft ? `${marginLeft}px` : `unset`)};
-  margin-right: ${({ marginRight }) => (marginRight ? `${marginRight}px` : `unset`)};
 `;
 
 const Col = styled.div<Props>`
   display: flex;
   flex-direction: column;
   align-items: ${({ alignItems }) => alignItems};
   justify-content: ${({ justifyContent }) => justifyContent};
-  margin: ${({ margin }) => `${margin}px`};
-  padding: ${({ padding }) => `${padding}px`};
   height: ${({ expanded }) => (expanded === true ? '100%' : 'unset')};
 `;
 
@@ -43,13 +29,11 @@ const Spacer = styled.div`
 Row.defaultProps = {
   justifyContent: 'unset',
   alignItems: 'unset',
-  margin: 0,
 };
 
 Col.defaultProps = {
   justifyContent: 'unset',
   alignItems: 'unset',
-  margin: 0,
 };
 
 export { Row, Col, Spacer };

frontend/src/components/Post/index.tsx

@@ -47,7 +47,7 @@ function Post({ post, onPostDelete }: Props) {
 
   return (
     <CardCommon width={POST_WIDTH}>
-      <Row alignItems='center' marginBottom={10}>
+      <Row alignItems='center'>
         <ProfileSet profileImage={targetUser!.profileImage} username={targetUser!.username!} />
         <TimeFromNow time={createdAt!} />
         <Spacer />

frontend/src/components/PostDetail/style.ts

@@ -1,7 +1,5 @@
 import styled from '@emotion/styled';
 
-import PostComments from 'src/components/PostComments';
-
 import { POST_WIDTH } from 'src/globals/constants';
 
 import { ThemeType } from 'src/types';

frontend/src/components/cards/DashboardBasicCard/index.tsx

@@ -19,7 +19,6 @@ import {
   USER_INFO_PROFILE_IMAGE_MARGIN_RIGHT,
   DASHBOARD_LEFT_SECTION_CARD_WIDTH,
   DASHBOARD_USER_INFO_ICON_SIZE,
-  DASHBOARD_USER_INFO_COL_MARGIN,
 } from 'src/globals/constants';
 
 import dashboardUserInfoAtom from 'src/recoil/dashboardUserInfo';
@@ -49,14 +48,14 @@ function DashboardBasicCard() {
         <Col>
           <Row alignItems='center'>
             <IoPersonOutline size={DASHBOARD_USER_INFO_ICON_SIZE} />
-            <Col margin={DASHBOARD_USER_INFO_COL_MARGIN}>
+            <Col>
               <Content>이름</Content>
               <Content>{name}</Content>
             </Col>
           </Row>
           <Row alignItems='center'>
             <IoCallOutline size={DASHBOARD_USER_INFO_ICON_SIZE} />
-            <Col margin={DASHBOARD_USER_INFO_COL_MARGIN}>
+            <Col>
               <Content>연락처</Content>
               <Content>{phoneNumber}</Content>
             </Col>
@@ -65,14 +64,14 @@ function DashboardBasicCard() {
         <Col>
           <Row alignItems='center'>
             <IoCalendarClearOutline size={DASHBOARD_USER_INFO_ICON_SIZE} />
-            <Col margin={DASHBOARD_USER_INFO_COL_MARGIN}>
+            <Col>
               <Content>생년 월일</Content>
               <Content>{getBirthdayFormat(birthday)}</Content>
             </Col>
           </Row>
           <Row alignItems='center'>
             <IoMailOutline size={DASHBOARD_USER_INFO_ICON_SIZE} />
-            <Col margin={DASHBOARD_USER_INFO_COL_MARGIN}>
+            <Col>
               <Content>이메일</Content>
               <Content>{email}</Content>
             </Col>
@@ -81,14 +80,14 @@ function DashboardBasicCard() {
         <Col>
           <Row alignItems='center'>
             <IoLocationOutline size={DASHBOARD_USER_INFO_ICON_SIZE} />
-            <Col margin={DASHBOARD_USER_INFO_COL_MARGIN}>
+            <Col>
               <Content>주소지</Content>
               <Content>{region}</Content>
             </Col>
           </Row>
           <Row alignItems='center'>
             <BsPencil size={DASHBOARD_USER_INFO_ICON_SIZE} />
-            <Col margin={DASHBOARD_USER_INFO_COL_MARGIN}>
+            <Col>
               <Content>학력</Content>
               <Content>{school}</Content>
             </Col>

frontend/src/components/cards/DashboardLinkCard/index.tsx

@@ -5,10 +5,7 @@ import CardCommon from 'src/components/cards/Common';
 import DashboardLinkSettingButton from 'src/components/buttons/dashboardSettings/DashboardLinkSettingButton';
 import { Row, Col } from 'src/components/Grid';
 
-import {
-  DASHBOARD_RIGHT_SECTION_CARD_WIDTH,
-  DASHBOARD_LINK_ROW_PADDING,
-} from 'src/globals/constants';
+import { DASHBOARD_RIGHT_SECTION_CARD_WIDTH } from 'src/globals/constants';
 
 import userAtom from 'src/recoil/user';
 import dashboardUserInfoAtom from 'src/recoil/dashboardUserInfo';
@@ -25,7 +22,7 @@ function DashboardLinkCard() {
 
   return (
     <CardCommon width={DASHBOARD_RIGHT_SECTION_CARD_WIDTH}>
-      <Row padding={DASHBOARD_LINK_ROW_PADDING} justifyContent='space-between'>
+      <Row justifyContent='space-between'>
         <Col>
           <Row>
             <Title>희망 직군</Title>

frontend/src/components/cards/DashboardTechStacksCard/index.tsx

@@ -4,10 +4,7 @@ import CardCommon from 'src/components/cards/Common';
 import DashboardTechStacksSettingButton from 'src/components/buttons/dashboardSettings/DashboardTechStacksSettingButton';
 import { Col, Row } from 'src/components/Grid';
 
-import {
-  DASHBOARD_LEFT_SECTION_CARD_WIDTH,
-  DASHBOARD_STACK_GRID_PADDING,
-} from 'src/globals/constants';
+import { DASHBOARD_LEFT_SECTION_CARD_WIDTH } from 'src/globals/constants';
 
 import { dashboardTechStacksSelector } from 'src/recoil/dashboardUserInfo';
 
@@ -20,7 +17,7 @@ function DashboardTechStacksCard() {
   return (
     <CardCommon width={DASHBOARD_LEFT_SECTION_CARD_WIDTH}>
       <Row justifyContent='space-between'>
-        <Col padding={DASHBOARD_STACK_GRID_PADDING}>
+        <Col>
           {fields.map((field) => (
             <Field key={field}>
               <Title>{field}</Title>

frontend/src/components/contents/ProblemContent/index.tsx

@@ -18,9 +18,9 @@ function ProblemContent({ content, info, link, title }: Props) {
     <>
       <h1>{title}</h1>
       <Row justifyContent='space-between'>
-        <p>티어 {info.tear}</p>
-        <p>푼 사람 {info.solvedUserCount}</p>
-        <p>시도 횟수 {info.totalTryCount}</p>
+        <p>티어 {info?.tear}</p>
+        <p>푼 사람 {info?.solvedUserCount}</p>
+        <p>시도 횟수 {info?.totalTryCount}</p>
       </Row>
       {/* eslint-disable-next-line react/no-danger */}
       <div dangerouslySetInnerHTML={{ __html: sanitizer(content) }} />

frontend/src/components/contents/RepoContent/index.tsx

@@ -18,12 +18,12 @@ function RepoContent({ content, link, info, title }: Props) {
     <>
       <h1>{title}</h1>
       <Row justifyContent='space-between'>
-        <p>별 {info.starCount}</p>
-        <p>포크 {info.forkCount}</p>
-        {Object.keys(info.language ?? {}).map((language) => (
+        <p>별 {info?.starCount}</p>
+        <p>포크 {info?.forkCount}</p>
+        {Object.keys(info?.language ?? {}).map((language) => (
           <Col key={language}>
             <p>{language}</p>
-            <p>{info.language[language]}%</p>
+            <p>{info?.language[language]}%</p>
           </Col>
         ))}
       </Row>

frontend/src/components/modals/BlogsModal/index.tsx

@@ -10,8 +10,6 @@ import { Col } from 'src/components/Grid';
 
 import { Fetcher } from 'src/utils';
 
-import { EXTERNAL_MODAL_HEIGHT } from 'src/globals/constants';
-
 import { BlogType } from 'src/types';
 
 import userAtom from 'src/recoil/user';
@@ -49,7 +47,6 @@ function BlogsModal({ onClose, onSelect }: Props) {
         onClose={onClose}
         close='취소'
         confirm='선택'
-        height={EXTERNAL_MODAL_HEIGHT}
         onConfirm={handleConfirm}
         disabled={selectedIndex === -1}
         title={hasExternalBlog ? '게시글을 선택하세요' : '연동된 블로그가 없습니다'}

frontend/src/components/modals/BlogsModal/style.ts

@@ -6,7 +6,8 @@ const Wrapper = styled.div`
 `;
 
 const Blogs = styled.div`
-  height: 200px;
+  height: 400px;
+  width: 350px;
   overflow-y: scroll;
   padding: 16px;
 `;

frontend/src/components/modals/PostWriteModal/index.tsx

@@ -44,22 +44,22 @@ function PostWriteModal({ onClose, onPostWrite }: Props) {
   });
   const problemMutation = useMutation((id: string) => Fetcher.getProblem(id), {
     onSuccess: (problem: ExternalType) => {
-      setExternal(problem);
       setExternalType('problem');
+      setExternal(problem);
     },
   });
   const repoMutation = useMutation((name: string) => Fetcher.getUserRepo(user, name), {
     onSuccess: (repo: ExternalType) => {
-      setExternal(repo);
       setExternalType('repo');
+      setExternal(repo);
     },
   });
   const blogMutation = useMutation(
     (blog: BlogType) => Fetcher.getUserBlog(user, blog.identity, blog.postID),
     {
       onSuccess: (blog: ExternalType) => {
-        setExternal(blog);
         setExternalType('blog');
+        setExternal(blog);
       },
     },
   );
@@ -129,7 +129,7 @@ function PostWriteModal({ onClose, onPostWrite }: Props) {
         onClose={onClose}
         disabled={content.trim() === ''}
       >
-        <Row justifyContent='center' alignItems='center' margin={16}>
+        <Row justifyContent='center' alignItems='center'>
           <ImageInput onImageUpload={handleImageUpload}>
             <IconHolder>
               <IoMdImages />

frontend/src/components/modals/PostWriteModal/style.ts

@@ -1,14 +1,13 @@
 import styled from '@emotion/styled';
 
 const Textarea = styled.textarea`
-  width: 100%;
+  width: 360px;
   height: 164px;
-  border: none;
   border-radius: 36px;
   padding: 24px;
-  margin-bottom: 36px;
-  background: #1e1e1e;
-  box-shadow: inset 5px 5px 11px #1a1a1a, inset -5px -5px 11px #232323;
+  margin: 24px 0;
+  background: #444444;
+  box-shadow: inset 5px 5px 10px #3a3a3a, inset -5px -5px 10px #4e4e4e;
   resize: none;
   font-size: 16px;
 `;
@@ -17,13 +16,13 @@ const IconHolder = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  align-self: start;
+  align-self: center;
   width: 48px;
   height: 48px;
   border-radius: 12px;
   background: #444444;
-  box-shadow: 11px 11px 21px #3a3a3a, -11px -11px 21px #4e4e4e;
-  margin-right: 12px;
+  box-shadow: 4px 4px 8px #3a3a3a, -4px -4px 8px #4e4e4e;
+  margin: 0 12px;
 `;
 
 export { Textarea, IconHolder };

frontend/src/components/modals/ProblemsModal/index.tsx

@@ -9,8 +9,6 @@ import { Col, Row } from 'src/components/Grid';
 
 import { Fetcher } from 'src/utils';
 
-import { EXTERNAL_MODAL_HEIGHT } from 'src/globals/constants';
-
 import { ProblemType } from 'src/types';
 
 import { Wrapper, Problems } from './style';
@@ -47,7 +45,6 @@ function ProblemsModal({ onClose, onSelect }: Props) {
         onClose={onClose}
         close='취소'
         confirm='선택'
-        height={EXTERNAL_MODAL_HEIGHT}
         onConfirm={handleConfirm}
         disabled={selectedIndex === -1}
         title='문제를 검색하고 선택하세요'

frontend/src/components/modals/ProblemsModal/style.ts

@@ -6,7 +6,8 @@ const Wrapper = styled.div`
 `;
 
 const Problems = styled.div`
-  height: 200px;
+  height: 400px;
+  width: 350px;
   overflow-y: scroll;
   padding: 16px;
 `;

frontend/src/components/modals/ReposModal/index.tsx

@@ -12,8 +12,6 @@ import userAtom from 'src/recoil/user';
 
 import { Fetcher } from 'src/utils';
 
-import { REPOS_MODAL_HEIGHT } from 'src/globals/constants';
-
 import { RepoType } from 'src/types';
 
 import { Wrapper, Repos } from './style';
@@ -48,7 +46,6 @@ function ReposModal({ onClose, onSelect }: Props) {
         onConfirm={handleConfirm}
         close='취소'
         confirm='선택'
-        height={REPOS_MODAL_HEIGHT}
         onClose={onClose}
         disabled={selectedIndex === -1}
         title={hasExternalGithub ? '저장소를 선택하세요' : '연동된 깃헙이 없습니다'}

frontend/src/components/modals/ReposModal/style.ts

@@ -6,8 +6,9 @@ const Wrapper = styled.div`
 `;
 
 const Repos = styled.div`
-  overflow-y: scroll;
   height: 400px;
+  width: 350px;
+  overflow-y: scroll;
 `;
 
 export { Wrapper, Repos };