From 76f8c338c96a598c63608c4640498963128e4a35 Mon Sep 17 00:00:00 2001 From: hustle-dev Date: Tue, 29 Mar 2022 20:39:08 +0900 Subject: [PATCH 1/4] =?UTF-8?q?feat:=20UI=20Styling=20=EC=88=98=EC=A0=95?= =?UTF-8?q?=EC=9E=91=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .eslintrc.js | 2 +- .../CookingInfo/CookingInfo.styled.tsx | 5 ++++- .../HotRecipes/HotRecipes.styled.tsx | 2 +- src/components/Loading/Loading.tsx | 20 +++++++++++-------- 4 files changed, 18 insertions(+), 11 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 66385bf..d1508bb 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -42,6 +42,6 @@ module.exports = { 'react/function-component-definition': 'off', 'react/require-default-props': 'off', 'no-plusplus': 'off', - 'no-param-reassign': 'off,', + 'no-param-reassign': 'off', }, }; diff --git a/src/components/CookingInfo/CookingInfo.styled.tsx b/src/components/CookingInfo/CookingInfo.styled.tsx index 6da7b4f..4f78907 100644 --- a/src/components/CookingInfo/CookingInfo.styled.tsx +++ b/src/components/CookingInfo/CookingInfo.styled.tsx @@ -5,9 +5,12 @@ import { pxToRem } from 'utils'; export const StyledDL = styled.dl` color: #cbcbcb; - font-size: ${pxToRem(24)}; + font-size: ${pxToRem(18)}; padding: ${pxToRem(10)} 0; width: 100%; + + /* @media (min-width: 380ㅔ) {} + } */ `; export const StyledDiv = styled.div` diff --git a/src/components/HotRecipes/HotRecipes.styled.tsx b/src/components/HotRecipes/HotRecipes.styled.tsx index d6741ec..27f9b14 100644 --- a/src/components/HotRecipes/HotRecipes.styled.tsx +++ b/src/components/HotRecipes/HotRecipes.styled.tsx @@ -1,6 +1,6 @@ import styled from '@emotion/styled'; -import { Heading } from '..'; import { media, pxToRem } from 'utils'; +import { Heading } from '..'; export const HotRecipesSection = styled.section` ${media.desktop} { diff --git a/src/components/Loading/Loading.tsx b/src/components/Loading/Loading.tsx index 05b7570..518c861 100644 --- a/src/components/Loading/Loading.tsx +++ b/src/components/Loading/Loading.tsx @@ -8,17 +8,21 @@ const loadingEndNode = $('#loading-end'); export const Loading = ({ message, showBackground }: LoadingProps) => { useEffect(() => { - loadingStartNode.setAttribute('role', 'alert'); - loadingStartNode.insertAdjacentHTML('beforeend', `${message}`); + if (loadingStartNode && loadingEndNode) { + loadingStartNode.setAttribute('role', 'alert'); + loadingStartNode.insertAdjacentHTML('beforeend', `${message}`); + } return () => { - loadingStartNode.removeAttribute('role'); - loadingStartNode.innerHTML = ''; + if (loadingStartNode && loadingEndNode) { + loadingStartNode.removeAttribute('role'); + loadingStartNode.innerHTML = ''; - loadingEndNode.insertAdjacentHTML('beforeend', `Finished Loading.`); - setTimeout(() => { - loadingEndNode.innerHTML = ''; - }, 800); + loadingEndNode.insertAdjacentHTML('beforeend', `Finished Loading.`); + setTimeout(() => { + loadingEndNode.innerHTML = ''; + }, 800); + } }; }, [message]); From a09501c511fe898619d83e5c827f62e2bb48a254 Mon Sep 17 00:00:00 2001 From: hustle-dev Date: Wed, 30 Mar 2022 16:45:46 +0900 Subject: [PATCH 2/4] =?UTF-8?q?fix:=20=EC=98=88=EC=A0=9C=20stories=20?= =?UTF-8?q?=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/stories/example/button/button.css | 30 -------- src/stories/example/button/button.jsx | 52 ------------- src/stories/example/button/button.stories.jsx | 43 ----------- src/stories/example/header/header.css | 26 ------- src/stories/example/header/header.jsx | 52 ------------- src/stories/example/header/header.stories.jsx | 17 ----- src/stories/example/page/page.css | 76 ------------------- src/stories/example/page/page.jsx | 70 ----------------- src/stories/example/page/page.stories.jsx | 22 ------ 9 files changed, 388 deletions(-) delete mode 100644 src/stories/example/button/button.css delete mode 100644 src/stories/example/button/button.jsx delete mode 100644 src/stories/example/button/button.stories.jsx delete mode 100644 src/stories/example/header/header.css delete mode 100644 src/stories/example/header/header.jsx delete mode 100644 src/stories/example/header/header.stories.jsx delete mode 100644 src/stories/example/page/page.css delete mode 100644 src/stories/example/page/page.jsx delete mode 100644 src/stories/example/page/page.stories.jsx diff --git a/src/stories/example/button/button.css b/src/stories/example/button/button.css deleted file mode 100644 index dc91dc7..0000000 --- a/src/stories/example/button/button.css +++ /dev/null @@ -1,30 +0,0 @@ -.storybook-button { - font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; - font-weight: 700; - border: 0; - border-radius: 3em; - cursor: pointer; - display: inline-block; - line-height: 1; -} -.storybook-button--primary { - color: white; - background-color: #1ea7fd; -} -.storybook-button--secondary { - color: #333; - background-color: transparent; - box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset; -} -.storybook-button--small { - font-size: 12px; - padding: 10px 16px; -} -.storybook-button--medium { - font-size: 14px; - padding: 11px 20px; -} -.storybook-button--large { - font-size: 16px; - padding: 12px 24px; -} diff --git a/src/stories/example/button/button.jsx b/src/stories/example/button/button.jsx deleted file mode 100644 index 574991f..0000000 --- a/src/stories/example/button/button.jsx +++ /dev/null @@ -1,52 +0,0 @@ -import './button.css'; -import React from 'react'; -import PropTypes from 'prop-types'; - -/** - * UI 인터랙션을 위한 기본 UI 컴포넌트 - */ -export const Button = ({ primary, backgroundColor, size, label, ...props }) => { - - const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary'; - - return ( - - ); -}; - -Button.propTypes = { - /** - * 프라이머리 버튼 설정 - */ - primary: PropTypes.bool, - /** - * 배경 색상 설정 - */ - backgroundColor: PropTypes.string, - /** - * 버튼 크기 설정 - */ - size: PropTypes.oneOf(['small', 'medium', 'large']), - /** - * 버튼 콘텐츠 - */ - label: PropTypes.string.isRequired, - /** - * 클릭 이벤트 핸들러 (옵션) - */ - onClick: PropTypes.func, -}; - -Button.defaultProps = { - backgroundColor: null, - primary: false, - size: 'medium', - onClick: undefined, -}; diff --git a/src/stories/example/button/button.stories.jsx b/src/stories/example/button/button.stories.jsx deleted file mode 100644 index a2c3ad2..0000000 --- a/src/stories/example/button/button.stories.jsx +++ /dev/null @@ -1,43 +0,0 @@ -import React from 'react'; -import { Button } from './button'; - -// 기본 내보내기 참고: https://storybook.js.org/docs/react/writing-stories/introduction#default-export -export default { - title: 'Example/Button', - component: Button, - - // decorators 참고: https://storybook.js.org/docs/react/writing-stories/decorators#component-decorators - // decorators: [(story) =>
{story()}
], - - // argTypes 참고: https://storybook.js.org/docs/react/api/argtypes - argTypes: { - backgroundColor: { control: 'color' }, - }, -}; - -// 컴포넌트 템플릿 참고: https://storybook.js.org/docs/react/writing-stories/introduction#using-args -const Template = (args) =>