From 152c21e3b2444bf42dac026bb89c47bf6a024de1 Mon Sep 17 00:00:00 2001
From: saseungmin <dbd02169@naver.com>
Date: Mon, 25 Jan 2021 00:04:18 +0900
Subject: [PATCH] [Improve] responsive introduce subInfo form - Improve css for
 responsive

---
 src/components/introduce/IntroduceForm.jsx | 30 ++++++++++++----------
 src/components/main/StudyGroup.jsx         |  6 ++---
 src/styles/DateTimeStatus.jsx              | 18 ++++++++++---
 3 files changed, 34 insertions(+), 20 deletions(-)

diff --git a/src/components/introduce/IntroduceForm.jsx b/src/components/introduce/IntroduceForm.jsx
index d10467b..e7afe84 100644
--- a/src/components/introduce/IntroduceForm.jsx
+++ b/src/components/introduce/IntroduceForm.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 
 import Moment from 'react-moment';
 
+import facepaint from 'facepaint';
 import styled from '@emotion/styled';
 
 import { authorizedUsersNumber, changeDateToTime } from '../../util/utils';
@@ -11,30 +12,30 @@ import palette from '../../styles/palette';
 import DateTimeChange from '../common/DateTimeChange';
 import IntroduceActionButtons from './IntroduceActionButtons';
 
+const mq = facepaint([
+  '@media(min-width: 1024px)',
+  '@media(min-width: 1150px)',
+]);
+
 const IntroduceReferenceWrapper = styled.div`
-  font-size: 1.1rem;
+
+  ${mq({
+    fontSize: ['2vw', '0.9rem', '1.1rem'],
+  })};
+
   display: flex;
   justify-content: space-evenly;
   margin-bottom: 1.5rem;
   padding: 1rem;
   border-radius: 0.75rem;
   background-color: ${palette.gray[1]};
-
+  align-items: center;
+  
   label {
     font-weight: bold;
     line-height: 3rem;
     margin-right: .7rem;
   }
-
-  @media (max-width: 1024px) {
-    font-size: 1rem;
-    padding: 0.5rem;
-    width: auto;
-  }
-
-  @media (max-width: 768px) {
-    width: 100%;
-  }
 `;
 
 const ModeratorWrapper = styled.div`
@@ -57,7 +58,10 @@ const ModeratorWrapper = styled.div`
 `;
 
 const IntroduceReference = styled.div`
-  padding-right: 50px;
+${mq({
+    paddingRight: ['4vw', '30px', '50px'],
+  })};
+
   border-right: 0.1rem solid ${palette.gray[3]};
 `;
 
diff --git a/src/components/main/StudyGroup.jsx b/src/components/main/StudyGroup.jsx
index 1a4d2f5..568be1a 100644
--- a/src/components/main/StudyGroup.jsx
+++ b/src/components/main/StudyGroup.jsx
@@ -14,7 +14,7 @@ import palette from '../../styles/palette';
 import DateTimeChange from '../common/DateTimeChange';
 
 const mq = facepaint([
-  '@media(min-width: 767px)',
+  '@media(min-width: 650px)',
   '@media(min-width: 1024px)',
 ]);
 
@@ -22,7 +22,7 @@ const StudyGroupWrapper = styled.div(() => mq({
   display: 'flex',
   flexDirection: 'column',
   overflow: 'hidden',
-  margin: ['1rem 0px 0px 0px', '.5rem', '1rem'],
+  margin: ['1rem 0px 1rem 0px', '0.5rem', '1rem'],
   borderRadius: '4px',
   border: `2px solid ${palette.gray[4]}`,
   width: ['100%', 'calc(50% - 2rem)', '19rem'],
@@ -60,7 +60,6 @@ const ContentLink = styled(Link)`
 const StudyInfoWrapper = styled.div`
   padding: 0 1rem 1rem 1rem;
   display: flex;
-  flex: 1 1 0%;
   flex-direction: column;
 
   .moderator{
@@ -72,7 +71,6 @@ const StudyInfoWrapper = styled.div`
 const StudyContentWrapper = styled.div`
   padding: 0 1rem 0 1rem;
   display: block;
-  flex: 1 1 0%;
 
   p {
     text-overflow: ellipsis;
diff --git a/src/styles/DateTimeStatus.jsx b/src/styles/DateTimeStatus.jsx
index 17253bd..73fa13f 100644
--- a/src/styles/DateTimeStatus.jsx
+++ b/src/styles/DateTimeStatus.jsx
@@ -1,12 +1,22 @@
 import React from 'react';
 
+import facepaint from 'facepaint';
 import styled from '@emotion/styled';
 import { css } from '@emotion/react';
 
 import palette from './palette';
 
+const mq = facepaint([
+  '@media(min-width: 1024px)',
+  '@media(min-width: 1150px)',
+]);
+
 const DateTimeStatusWrapper = styled.div`
-  font-size: 1rem;
+  ${mq({
+    fontSize: ['1.5vw', '0.8rem', '1.1rem'],
+    height: ['30px', '30px', '40px'],
+  })};
+
   font-weight: 600;
   font-family: 'Gamja Flower', cursive;
   display: inline-flex;
@@ -41,11 +51,14 @@ const DateTimeStatusWrapper = styled.div`
     && css`
       margin-bottom: 0.5rem;
       background: #ff6b6b;
+      ${mq({
+    fontSize: ['0.8rem', '1rem'],
+    height: ['15px', '20px'],
+  })};
   `}
 
   ${({ status }) => status === 'introduceRecruit'
     && css`
-      font-size: 1.1rem;
       align-items: center;
       margin: 0;
       padding: .2rem 40px .2rem 40px;
@@ -71,7 +84,6 @@ const DateTimeStatusWrapper = styled.div`
 
   ${({ status }) => status === 'introduceDeadline'
     && css`
-      font-size: 1.1rem;
       align-items: center;
       margin: 0;
       padding: 0 40px 0 40px;