From b3e7b162f243c7f2a835507bc3b50dd8cc8cc8e7 Mon Sep 17 00:00:00 2001 From: saseungmin Date: Sat, 23 Jan 2021 22:05:42 +0900 Subject: [PATCH] [Improve] Apply to responsive in main page - npm install facepaint and reactresponsive - main page not finish so, Intermediate commit --- package-lock.json | 34 ++++++++++++++++++++++++++++++ package.json | 2 ++ src/components/main/StudyGroup.jsx | 28 ++++++++++++++---------- src/styles/Button.jsx | 13 +++++++++++- src/styles/Responsive.jsx | 25 +++++++++++----------- 5 files changed, 77 insertions(+), 25 deletions(-) diff --git a/package-lock.json b/package-lock.json index 820be53..2a2aa12 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4666,6 +4666,11 @@ } } }, + "css-mediaquery": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/css-mediaquery/-/css-mediaquery-0.1.2.tgz", + "integrity": "sha1-aiw3NEkoYYYxxUvTPO3TAdoYvqA=" + }, "css-select": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/css-select/-/css-select-1.2.0.tgz", @@ -6287,6 +6292,11 @@ "integrity": "sha1-lpGEQOMEGnpBT4xS48V06zw+HgU=", "dev": true }, + "facepaint": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/facepaint/-/facepaint-1.2.1.tgz", + "integrity": "sha512-oNvBekbhsm/0PNSOWca5raHNAi6dG960Bx6LJgxDPNF59WpuspgQ17bN5MKwOr7JcFdQYc7StW3VZ28DBZLavQ==" + }, "fast-deep-equal": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", @@ -9815,6 +9825,14 @@ "object-visit": "^1.0.0" } }, + "matchmediaquery": { + "version": "0.3.1", + "resolved": "https://registry.npmjs.org/matchmediaquery/-/matchmediaquery-0.3.1.tgz", + "integrity": "sha512-Hlk20WQHRIm9EE9luN1kjRjYXAQToHOIAHPJn9buxBwuhfTHoKUcX+lXBbxc85DVQfXYbEQ4HcwQdd128E3qHQ==", + "requires": { + "css-mediaquery": "^0.1.2" + } + }, "md5.js": { "version": "1.3.5", "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz", @@ -11333,6 +11351,17 @@ "react-is": "^16.13.1" } }, + "react-responsive": { + "version": "8.2.0", + "resolved": "https://registry.npmjs.org/react-responsive/-/react-responsive-8.2.0.tgz", + "integrity": "sha512-iagCqVrw4QSjhxKp3I/YK6+ODkWY6G+YPElvdYKiUUbywwh9Ds0M7r26Fj2/7dWFFbOpcGnJE6uE7aMck8j5Qg==", + "requires": { + "hyphenate-style-name": "^1.0.0", + "matchmediaquery": "^0.3.0", + "prop-types": "^15.6.1", + "shallow-equal": "^1.1.0" + } + }, "react-router": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz", @@ -12563,6 +12592,11 @@ "safe-buffer": "^5.0.1" } }, + "shallow-equal": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/shallow-equal/-/shallow-equal-1.2.1.tgz", + "integrity": "sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA==" + }, "shebang-command": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz", diff --git a/package.json b/package.json index 06b12c5..3bc72bd 100644 --- a/package.json +++ b/package.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", diff --git a/src/components/main/StudyGroup.jsx b/src/components/main/StudyGroup.jsx index c3a610a..1a4d2f5 100644 --- a/src/components/main/StudyGroup.jsx +++ b/src/components/main/StudyGroup.jsx @@ -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; diff --git a/src/styles/Button.jsx b/src/styles/Button.jsx index d804900..aace0af 100644 --- a/src/styles/Button.jsx +++ b/src/styles/Button.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; diff --git a/src/styles/Responsive.jsx b/src/styles/Responsive.jsx index 416aa55..ac3bb37 100644 --- a/src/styles/Responsive.jsx +++ b/src/styles/Responsive.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 }) => (