Merge pull request #149 from saseungmin/apply-to-responsive-main-page

[Improve] Apply to responsive in main page

Author: saseungmin

package-lock.json

@@ -30,6 +30,7 @@
     "d2coding": "^1.3.2",
     "draft-js": "^0.11.7",
     "draftjs-to-html": "^0.9.1",
+    "facepaint": "^1.2.1",
     "firebase": "^8.1.1",
     "html-to-draftjs": "^1.5.0",
     "immer": "^8.0.0",
@@ -44,6 +45,7 @@
     "react-icons": "^4.1.0",
     "react-moment": "^1.0.0",
     "react-redux": "^7.2.2",
+    "react-responsive": "^8.2.0",
     "react-router-dom": "^5.2.0",
     "react-star-ratings": "^2.3.0",
     "react-use": "^15.3.4",

package.json

@@ -6,23 +6,29 @@ import sanitize from 'sanitize-html';
 
 import Moment from 'react-moment';
 
+import facepaint from 'facepaint';
 import styled from '@emotion/styled';
 
 import Tags from '../common/Tags';
 import palette from '../../styles/palette';
 import DateTimeChange from '../common/DateTimeChange';
 
-const StudyGroupWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  margin: 1rem;
-  border-radius: 4px;
-  border: 2px solid ${palette.gray[4]};
-  width: 19rem;
-  box-shadow: rgba(0, 0, 0, 0.04) 0px 4px 16px 0px;
-  background: rgb(248, 249, 250);
-`;
+const mq = facepaint([
+  '@media(min-width: 767px)',
+  '@media(min-width: 1024px)',
+]);
+
+const StudyGroupWrapper = styled.div(() => mq({
+  display: 'flex',
+  flexDirection: 'column',
+  overflow: 'hidden',
+  margin: ['1rem 0px 0px 0px', '.5rem', '1rem'],
+  borderRadius: '4px',
+  border: `2px solid ${palette.gray[4]}`,
+  width: ['100%', 'calc(50% - 2rem)', '19rem'],
+  boxShadow: 'rgba(0, 0, 0, 0.08) 0px 4px 16px 0px',
+  background: 'rgb(248, 249, 250)',
+}));
 
 const HeaderLink = styled(Link)`
   display: block;

src/components/main/StudyGroup.jsx

@@ -3,14 +3,25 @@ import React from 'react';
 
 import { Link } from 'react-router-dom';
 
+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)',
+]);
+
+const fontSizeButton = css(
+  mq({
+    fontSize: ['2vw', '1rem'],
+  }),
+);
+
 const ButtonWrapper = ({ warn, success }) => css`
   cursor: pointer;
-  font-size: 1rem;
+  ${fontSizeButton};
   font-weight: bold;
   font-family: 'Noto Sans KR', sans-serif;
   outline: none;

src/styles/Button.jsx

@@ -1,22 +1,21 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import React from 'react';
 
+import facepaint from 'facepaint';
 import styled from '@emotion/styled';
 
-const ResponsiveContainer = styled.div`
-  margin: 0 auto;
-  padding-left: 1rem;
-  padding-right: 1rem;
-  width: 1024px;
+const mq = facepaint([
+  '@media(min-width: 1024px)',
+  '@media(min-width: 1150px)',
+]);
 
-  @media (max-width: 1024px) {
-    width: 768px;
-  }
-  
-  @media (max-width: 768px) {
-    width: 100%;
-  }
-`;
+const ResponsiveContainer = styled.div(() => mq({
+  marginLeft: 'auto',
+  marginRight: 'auto',
+  paddingLeft: '1rem',
+  paddingRight: '1rem',
+  width: ['calc(100% - 2rem)', '680px', '1024px'],
+}));
 
 const Responsive = ({ children, ...rest }) => (
   <ResponsiveContainer {...rest}>