From bd1dc9ebb90832fde2c6468101bd4454bdedd48b Mon Sep 17 00:00:00 2001 From: edegiil Date: Wed, 18 Aug 2021 01:12:57 +0900 Subject: [PATCH 001/163] feat: css-in-js woowahan components --- .../components/create-global-style.tsx | 33 +++++ .../components/theme-provider.tsx | 14 ++ .../components/woowahan-component.tsx | 59 +++++++++ .../woowahan-components/configs/tag-names.ts | 120 ++++++++++++++++++ .../woowahan-components/hooks/use-theme.ts | 8 ++ client/src/lib/woowahan-components/index.ts | 17 +++ .../woowahan-components/utils/generate-id.ts | 9 ++ .../woowahan-components/utils/parse-string.ts | 27 ++++ package.json | 7 + yarn.lock | 18 +++ 10 files changed, 312 insertions(+) create mode 100644 client/src/lib/woowahan-components/components/create-global-style.tsx create mode 100644 client/src/lib/woowahan-components/components/theme-provider.tsx create mode 100644 client/src/lib/woowahan-components/components/woowahan-component.tsx create mode 100644 client/src/lib/woowahan-components/configs/tag-names.ts create mode 100644 client/src/lib/woowahan-components/hooks/use-theme.ts create mode 100644 client/src/lib/woowahan-components/index.ts create mode 100644 client/src/lib/woowahan-components/utils/generate-id.ts create mode 100644 client/src/lib/woowahan-components/utils/parse-string.ts create mode 100644 package.json create mode 100644 yarn.lock diff --git a/client/src/lib/woowahan-components/components/create-global-style.tsx b/client/src/lib/woowahan-components/components/create-global-style.tsx new file mode 100644 index 0000000..9859c52 --- /dev/null +++ b/client/src/lib/woowahan-components/components/create-global-style.tsx @@ -0,0 +1,33 @@ +import React, { FC } from 'react'; +import { compile, serialize, stringify, middleware } from 'stylis'; + +import parseString from '../utils/parse-string'; + +const createGlobalStyle = (styleString: TemplateStringsArray, ...exps: string[]): FC => { + const FunctionComponent: FC = () => { + const parsedString = parseString(styleString, exps, {}); + + const preprocessedStyle = serialize( + compile(parsedString), + middleware([element => (element.parent === null ? '\n' : ''), stringify]), + ).trim(); + + const styleList = preprocessedStyle.split('\n'); + + const styleSheet = document.styleSheets[0]; + + styleList.forEach(style => { + if (style) { + styleSheet.insertRule(style, styleSheet.cssRules.length); + } + }); + + const ReactElement = React.createElement(React.Fragment, null, null); + + return ReactElement; + }; + + return FunctionComponent; +}; + +export default createGlobalStyle; diff --git a/client/src/lib/woowahan-components/components/theme-provider.tsx b/client/src/lib/woowahan-components/components/theme-provider.tsx new file mode 100644 index 0000000..e608401 --- /dev/null +++ b/client/src/lib/woowahan-components/components/theme-provider.tsx @@ -0,0 +1,14 @@ +import React, { FC, createContext } from 'react'; + +export interface IThemeContext { + [key: string]: string; +} + +export const ThemeContext = createContext({}); + +const ThemeProvider: FC<{ theme: IThemeContext }> = props => { + const { children, theme } = props; + return {children}; +}; + +export default ThemeProvider; diff --git a/client/src/lib/woowahan-components/components/woowahan-component.tsx b/client/src/lib/woowahan-components/components/woowahan-component.tsx new file mode 100644 index 0000000..4ff6159 --- /dev/null +++ b/client/src/lib/woowahan-components/components/woowahan-component.tsx @@ -0,0 +1,59 @@ +import React, { FC } from 'react'; +import { compile, serialize, stringify, middleware } from 'stylis'; + +import useTheme from '../hooks/use-theme'; +import generateId from '../utils/generate-id'; +import parseString, { IProps, ExpType } from '../utils/parse-string'; +import { IThemeContext } from './theme-provider'; + +export type TaggedTemplateType = (styleString: TemplateStringsArray, ...exps: ExpType) => FC; + +const woowahanComponent = (tag: string): TaggedTemplateType => { + const classMap = new Map(); + + return (styleString: TemplateStringsArray, ...exps: ExpType): FC => { + const FuntionComponent: FC = props => { + const theme = useTheme(); + const parsedString = parseString(styleString, exps, { theme, ...props }); + + let className = ''; + + const isAlreadyInserted = classMap.has(parsedString); + + if (isAlreadyInserted) { + className = classMap.get(parsedString) as string; + } else { + className = `wc-${generateId()}`; + classMap.set(parsedString, className); + } + + const nomralisedStyle = serialize(compile(`.${className} {${parsedString}}`), stringify); + + const preprocessedStyle = serialize( + compile(nomralisedStyle), + middleware([stringify, element => (element.parent === null ? '\n' : '')]), + ).trim(); + + const styleList = preprocessedStyle.split('\n'); + + const styleSheet = document.styleSheets[0]; + + if (!isAlreadyInserted) { + styleList.forEach(style => { + if (style) { + styleSheet.insertRule(style, styleSheet.cssRules.length); + } + }); + } + + const { children } = props; + const ReactElement = React.createElement(tag, { className, theme, ...props }, children); + + return ReactElement; + }; + + return FuntionComponent; + }; +}; + +export default woowahanComponent; diff --git a/client/src/lib/woowahan-components/configs/tag-names.ts b/client/src/lib/woowahan-components/configs/tag-names.ts new file mode 100644 index 0000000..7f069ef --- /dev/null +++ b/client/src/lib/woowahan-components/configs/tag-names.ts @@ -0,0 +1,120 @@ +const tags = [ + 'a', + 'abbr', + 'address', + 'article', + 'aside', + 'audio', + 'b', + 'base', + 'bdi', + 'bdo', + 'blockquote', + 'body', + 'br', + 'button', + 'canvas', + 'caption', + 'cite', + 'code', + 'col', + 'colgroup', + 'data', + 'datalist', + 'dd', + 'del', + 'details', + 'dfn', + 'dialog', + 'div', + 'dl', + 'dt', + 'em', + 'embed', + 'fieldset', + 'figcaption', + 'figure', + 'footer', + 'form', + 'h1', + 'h2', + 'h3', + 'h4', + 'h5', + 'h6', + 'head', + 'header', + 'hgroup', + 'hr', + 'html', + 'i', + 'iframe', + 'img', + 'input', + 'ins', + 'kbd', + 'label', + 'legend', + 'li', + 'link', + 'main', + 'map', + 'mark', + 'math', + 'menu', + 'menuitem', + 'meta', + 'meter', + 'nav', + 'noscript', + 'object', + 'ol', + 'optgroup', + 'option', + 'output', + 'p', + 'param', + 'picture', + 'pre', + 'progress', + 'q', + 'rb', + 'rp', + 'rt', + 'rtc', + 'ruby', + 's', + 'samp', + 'script', + 'section', + 'select', + 'slot', + 'small', + 'source', + 'span', + 'strong', + 'style', + 'sub', + 'summary', + 'sup', + 'svg', + 'table', + 'tbody', + 'td', + 'template', + 'textarea', + 'tfoot', + 'th', + 'thead', + 'time', + 'title', + 'tr', + 'track', + 'u', + 'ul', + 'var', + 'video', + 'wbr', +]; + +export default tags; diff --git a/client/src/lib/woowahan-components/hooks/use-theme.ts b/client/src/lib/woowahan-components/hooks/use-theme.ts new file mode 100644 index 0000000..14b3cbb --- /dev/null +++ b/client/src/lib/woowahan-components/hooks/use-theme.ts @@ -0,0 +1,8 @@ +import { useContext } from 'react'; +import { ThemeContext, IThemeContext } from '../components/theme-provider'; + +const useTheme = (): IThemeContext => { + return useContext(ThemeContext); +}; + +export default useTheme; diff --git a/client/src/lib/woowahan-components/index.ts b/client/src/lib/woowahan-components/index.ts new file mode 100644 index 0000000..22b44dd --- /dev/null +++ b/client/src/lib/woowahan-components/index.ts @@ -0,0 +1,17 @@ +import woowahanComponent, { TaggedTemplateType } from './components/woowahan-component'; +import tags from './configs/tag-names'; + +export { default as createGlobalStyle } from './components/create-global-style'; +export { default as ThemeProvider } from './components/theme-provider'; + +export interface IWoowahan { + [key: string]: TaggedTemplateType; +} + +const woowahan: IWoowahan = {}; + +tags.forEach((tag: string) => { + woowahan[tag] = woowahanComponent(tag); +}); + +export default woowahan; diff --git a/client/src/lib/woowahan-components/utils/generate-id.ts b/client/src/lib/woowahan-components/utils/generate-id.ts new file mode 100644 index 0000000..9f9d04a --- /dev/null +++ b/client/src/lib/woowahan-components/utils/generate-id.ts @@ -0,0 +1,9 @@ +import { customAlphabet } from 'nanoid'; + +const alphabet = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'; +const size = 8; +const nanoid = customAlphabet(alphabet, size); + +const generateId = (): string => nanoid(); + +export default generateId; diff --git a/client/src/lib/woowahan-components/utils/parse-string.ts b/client/src/lib/woowahan-components/utils/parse-string.ts new file mode 100644 index 0000000..37c9a67 --- /dev/null +++ b/client/src/lib/woowahan-components/utils/parse-string.ts @@ -0,0 +1,27 @@ +import { IThemeContext } from '../components/theme-provider'; + +export interface IProps { + children?: React.ReactNode; + theme?: IThemeContext; + [key: string]: unknown; +} + +export type ExpType = (((props: IProps) => string | undefined) | string | number)[]; + +const parseString = (styleString: TemplateStringsArray, exps: ExpType, props: IProps): string => { + return styleString + .map((string, i) => { + let expResult = ''; + if (exps[i]) { + if (typeof exps[i] === 'function') { + expResult = `${(exps[i] as (props: IProps) => string | number)(props)}`; + } else if (typeof exps[i] === 'string' || typeof exps[i] === 'number') { + expResult = `${exps[i] as string | number}`; + } + } + return `${string}${expResult}`; + }) + .join(''); +}; + +export default parseString; diff --git a/package.json b/package.json new file mode 100644 index 0000000..90f2d78 --- /dev/null +++ b/package.json @@ -0,0 +1,7 @@ +{ + "dependencies": { + "@types/stylis": "^4.0.1", + "nanoid": "^3.1.25", + "stylis": "^4.0.10" + } +} diff --git a/yarn.lock b/yarn.lock new file mode 100644 index 0000000..35c9c30 --- /dev/null +++ b/yarn.lock @@ -0,0 +1,18 @@ +# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. +# yarn lockfile v1 + + +"@types/stylis@^4.0.1": + version "4.0.1" + resolved "https://registry.yarnpkg.com/@types/stylis/-/stylis-4.0.1.tgz#ed14588039b713fc3183cfa0e95033e86e5e1aa2" + integrity sha512-tMMy2pb95ZvBrvrNhZDj6fsU1SpR97BYeoS798IRCzKLqWY0bh0rtg9G6knNtiUD6Pij1PoafHYjVCbspKenOA== + +nanoid@^3.1.25: + version "3.1.25" + resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.25.tgz#09ca32747c0e543f0e1814b7d3793477f9c8e152" + integrity sha512-rdwtIXaXCLFAQbnfqDRnI6jaRHp9fTcYBjtFKE8eezcZ7LuLjhUaQGNeMXf1HmRoCH32CLz6XwX0TtxEOS/A3Q== + +stylis@^4.0.10: + version "4.0.10" + resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.0.10.tgz#446512d1097197ab3f02fb3c258358c3f7a14240" + integrity sha512-m3k+dk7QeJw660eIKRRn3xPF6uuvHs/FFzjX3HQ5ove0qYsiygoAhwn5a3IYKaZPo5LrYD0rfVmtv1gNY1uYwg== From e50d97cb7b68df277df6e3607f187a655ea0e5af Mon Sep 17 00:00:00 2001 From: edegiil Date: Wed, 18 Aug 2021 01:16:59 +0900 Subject: [PATCH 002/163] =?UTF-8?q?fix:=20woowahan=20components=20?= =?UTF-8?q?=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/components/auth/form.tsx | 40 +++++++-------- client/src/components/auth/logout-modal.tsx | 6 +-- client/src/components/auth/success-modal.tsx | 10 ++-- client/src/components/common/footer.tsx | 38 +++++++------- client/src/components/common/header.tsx | 12 ++--- client/src/components/common/layout.tsx | 10 ++-- client/src/components/common/logo.tsx | 4 +- client/src/components/common/modal.tsx | 50 +++++++++---------- client/src/components/common/navbar.tsx | 22 ++++---- client/src/components/form/button.tsx | 24 ++++----- client/src/components/form/input.tsx | 22 ++++---- client/src/components/smart-menu/index.tsx | 22 ++++---- .../src/components/smart-menu/large-menu.tsx | 24 ++++----- .../src/components/smart-menu/medium-menu.tsx | 22 ++++---- .../src/components/smart-menu/small-menu.tsx | 18 +++---- client/src/pages/not-found-page.tsx | 10 ++-- client/src/pages/signup-page.tsx | 4 +- 17 files changed, 161 insertions(+), 177 deletions(-) diff --git a/client/src/components/auth/form.tsx b/client/src/components/auth/form.tsx index 8fdf8ef..cf81804 100644 --- a/client/src/components/auth/form.tsx +++ b/client/src/components/auth/form.tsx @@ -1,5 +1,5 @@ import React, { FC } from 'react'; -import styled from 'styled-components'; +import woowahan from 'lib/woowahan-components'; import { Link } from 'lib/router'; import { Input, Button } from 'components'; import baedal from 'assets/icons/baedalee.png'; @@ -17,83 +17,83 @@ interface AuthFormProps { onCheckChange?: (e: React.ChangeEvent) => void; } -const Wrapper = styled.div` +const Wrapper = woowahan.div` display: flex; flex-direction: column; margin-top: 50px; - ${({ theme }) => theme.mobile} { + ${({ theme }) => theme?.mobile} { > * { width: 100%; max-width: 380px; } } - ${({ theme }) => theme.tablet} { + ${({ theme }) => theme?.tablet} { margin: 15px; max-width: 380px; } - ${({ theme }) => theme.laptop} { + ${({ theme }) => theme?.laptop} { width: 400px; } `; -const Form = styled.form` +const Form = woowahan.form` > * { width: 100%; } `; -const Image = styled.img` +const Image = woowahan.img` margin-right: 10px; - ${({ theme }) => theme.mobile} { + ${({ theme }) => theme?.mobile} { width: 26px; } - ${({ theme }) => theme.tablet} { + ${({ theme }) => theme?.tablet} { width: 30px; } - ${({ theme }) => theme.laptop} { + ${({ theme }) => theme?.laptop} { width: 34px; } `; -const CheckBoxLabel = styled.label` +const CheckBoxLabel = woowahan.label` cursor: pointer; margin-bottom: 20px; display: flex; align-items: flex-end; - font-family: ${props => props.theme.fontHannaAir}; - color: ${props => props.theme.colorSoftBlack}; + font-family: ${props => props.theme?.fontHannaAir}; + color: ${props => props.theme?.colorSoftBlack}; input[type='checkbox'] { margin-right: 10px; } `; -const Error = styled.div` - color: ${props => props.theme.colorError}; - font-family: ${props => props.theme.fontHannaAir}; +const Error = woowahan.div` + color: ${props => props.theme?.colorError}; + font-family: ${props => props.theme?.fontHannaAir}; font-size: 14px; height: 30px; text-indent: 5px; `; -const LinkWrapper = styled.div` +const LinkWrapper = woowahan.div` display: flex; justify-content: center; align-items: center; padding: 10px; - font-family: ${props => props.theme.fontEuljiro}; + font-family: ${props => props.theme?.fontEuljiro}; margin-top: 10px; a { font-size: 18px; - color: ${props => props.theme.colorTextBeige}; + color: ${props => props.theme?.colorTextBeige}; :hover { - color: ${props => props.theme.colorLine}; + color: ${props => props.theme?.colorLine}; } } `; diff --git a/client/src/components/auth/logout-modal.tsx b/client/src/components/auth/logout-modal.tsx index dc4ff65..9613752 100644 --- a/client/src/components/auth/logout-modal.tsx +++ b/client/src/components/auth/logout-modal.tsx @@ -1,10 +1,10 @@ import React, { FC } from 'react'; -import styled from 'styled-components'; +import woowahan from 'lib/woowahan-components'; import { Modal } from 'components'; -const Title = styled.h2` +const Title = woowahan.h2` span { - color: ${props => props.theme.colorPrimary}; + color: ${props => props.theme?.colorPrimary}; } `; diff --git a/client/src/components/auth/success-modal.tsx b/client/src/components/auth/success-modal.tsx index 06647b9..635f739 100644 --- a/client/src/components/auth/success-modal.tsx +++ b/client/src/components/auth/success-modal.tsx @@ -1,5 +1,5 @@ import React, { FC } from 'react'; -import styled from 'styled-components'; +import woowahan from 'lib/woowahan-components'; import { Modal } from 'components'; import { IUserId } from 'types/auth'; @@ -7,19 +7,19 @@ interface AuthSuccessModalProps { userId: IUserId; } -const Title = styled.h2` +const Title = woowahan.h2` span { - color: ${props => props.theme.colorPrimary}; + color: ${props => props.theme?.colorPrimary}; } `; -const Info = styled.div` +const Info = woowahan.div` p { margin-bottom: 3px; } span { - font-family: ${props => props.theme.fontHanna}; + font-family: ${props => props.theme?.fontHanna}; font-size: 105%; vertical-align: middle; margin-right: 1px; diff --git a/client/src/components/common/footer.tsx b/client/src/components/common/footer.tsx index d87e1b9..7cc44ce 100644 --- a/client/src/components/common/footer.tsx +++ b/client/src/components/common/footer.tsx @@ -1,49 +1,49 @@ import React, { FC } from 'react'; -import styled from 'styled-components'; +import woowahan from 'lib/woowahan-components'; import { Logo } from 'components'; interface FooterProps { isMobile: boolean; } -const Wrapper = styled.footer` +const Wrapper = woowahan.footer` width: 100%; min-height: 200px; - background-color: ${props => props.theme.colorFooter}; + background-color: ${props => props.theme?.colorFooter}; box-sizing: border-box; display: flex; padding: 30px 10%; - ${props => props.theme.mobile} { + ${props => props.theme?.mobile} { display: flex; flex-direction: column; padding: 30px 2%; } `; -const Left = styled.div` +const Left = woowahan.div` width: 30%; display: flex; justify-content: center; - ${props => props.theme.mobile} { + ${props => props.theme?.mobile} { width: 100%; margin-top: 20px; } `; -const Right = styled.div` +const Right = woowahan.div` width: 70%; display: flex; flex-direction: column; - ${props => props.theme.mobile} { + ${props => props.theme?.mobile} { width: 100%; margin-top: 20px; } `; -const Links = styled.div` +const Links = woowahan.div` margin-top: 5px; margin-bottom: 20px; @@ -53,12 +53,12 @@ const Links = styled.div` } ul li a { - color: ${props => props.theme.colorSoftBlack}; - font-weight: ${props => props.theme.weightBold}; + color: ${props => props.theme?.colorSoftBlack}; + font-weight: ${props => props.theme?.weightBold}; font-size: 14px; } - ${props => props.theme.mobile} { + ${props => props.theme?.mobile} { display: flex; justify-content: center; @@ -68,30 +68,30 @@ const Links = styled.div` } ul li:not(:last-child) { - border-right: 1px solid ${props => props.theme.colorGreyDark}; + border-right: 1px solid ${props => props.theme?.colorGreyDark}; } ul li a { - color: ${props => props.theme.colorGreyDark}; + color: ${props => props.theme?.colorGreyDark}; } } `; -const Info = styled.div` +const Info = woowahan.div` p { - color: ${props => props.theme.colorGreyDark}; + color: ${props => props.theme?.colorGreyDark}; font-size: 12px; line-height: 18px; } - ${props => props.theme.mobile} { + ${props => props.theme?.mobile} { text-align: center; margin-top: 15px; margin-bottom: 20px; p { - color: ${props => props.theme.colorPointBeigeLight}; - font-family: ${props => props.theme.fontEuljiro}; + color: ${props => props.theme?.colorPointBeigeLight}; + font-family: ${props => props.theme?.fontEuljiro}; } } `; diff --git a/client/src/components/common/header.tsx b/client/src/components/common/header.tsx index 0631cb1..f6f1858 100644 --- a/client/src/components/common/header.tsx +++ b/client/src/components/common/header.tsx @@ -1,5 +1,5 @@ import React, { FC } from 'react'; -import styled from 'styled-components'; +import woowahan from 'lib/woowahan-components'; import { Link } from 'lib/router'; import { Logo, Navbar } from 'components'; import BrickBg from 'assets/images/brick.png'; @@ -12,11 +12,11 @@ interface HeaderProps { onLogout: () => void; } -const Wrapper = styled.header` +const Wrapper = woowahan.header` width: 100%; `; -const Brick = styled.div` +const Brick = woowahan.div` width: 100%; height: 150px; background-image: url(${BrickBg}); @@ -28,18 +28,18 @@ const Brick = styled.div` } `; -const Tent = styled.div` +const Tent = woowahan.div` width: 100%; height: 80px; background-image: url(${TentBg}); background-repeat: repeat-x; - ${props => props.theme.mobile} { + ${props => props.theme?.mobile} { margin-top: -15px; } `; -const LogoWrapper = styled.div` +const LogoWrapper = woowahan.div` display: flex; justify-content: center; padding: 25px 0; diff --git a/client/src/components/common/layout.tsx b/client/src/components/common/layout.tsx index 5b8a93a..ceafc9e 100644 --- a/client/src/components/common/layout.tsx +++ b/client/src/components/common/layout.tsx @@ -1,9 +1,9 @@ import React, { FC } from 'react'; -import styled from 'styled-components'; +import woowahan from 'lib/woowahan-components'; -const Wrapper = styled.div` +const Wrapper = woowahan.div` min-height: 100%; - background-color: ${props => props.theme.colorBg}; + background-color: ${props => props.theme?.colorBg}; display: flex; flex-direction: column; @@ -14,13 +14,13 @@ const Wrapper = styled.div` justify-content: center; } - ${props => props.theme.mobile} { + ${props => props.theme?.mobile} { main { padding: 0 12px; } } - ${props => props.theme.laptop} { + ${props => props.theme?.laptop} { align-items: center; main { padding: 0; diff --git a/client/src/components/common/logo.tsx b/client/src/components/common/logo.tsx index 2f7a276..1f62210 100644 --- a/client/src/components/common/logo.tsx +++ b/client/src/components/common/logo.tsx @@ -1,5 +1,5 @@ import React, { FC } from 'react'; -import styled from 'styled-components'; +import woowahan from 'lib/woowahan-components'; import LogoImg from 'assets/images/logo.png'; import LogoTentImg from 'assets/images/logo_tent.png'; @@ -12,7 +12,7 @@ interface LogoProps { mobile?: boolean; } -const Wrapper = styled.div` +const Wrapper = woowahan.div` width: fit-content; `; diff --git a/client/src/components/common/modal.tsx b/client/src/components/common/modal.tsx index 4cca07d..27ca790 100644 --- a/client/src/components/common/modal.tsx +++ b/client/src/components/common/modal.tsx @@ -1,5 +1,5 @@ import React, { FC, ReactNode } from 'react'; -import styled from 'styled-components'; +import woowahan from 'lib/woowahan-components'; import alertImg from 'assets/icons/congrats.gif'; import confirmImg from 'assets/icons/wait.png'; @@ -12,7 +12,7 @@ interface ModalProps { onConfirm?: () => void; } -const ModalBlock = styled.div` +const ModalBlock = woowahan.div` position: fixed; left: 0; top: 0; @@ -26,33 +26,33 @@ const ModalBlock = styled.div` z-index: 10; `; -const Inner = styled.div` +const Inner = woowahan.div` display: flex; flex-direction: column; justify-content: center; align-items: center; - background-color: ${props => props.theme.colorWhite}; + background-color: ${props => props.theme?.colorWhite}; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25); border-radius: 50px; height: 500px; - ${({ theme }) => theme.mobile} { + ${({ theme }) => theme?.mobile} { border-radius: 40px; width: 90%; max-height: 90%; } - ${({ theme }) => theme.tablet} { + ${({ theme }) => theme?.tablet} { width: 650px; max-width: 90%; } - ${({ theme }) => theme.laptop} { + ${({ theme }) => theme?.laptop} { width: 650px; } `; -const ModalHeader = styled.div` +const ModalHeader = woowahan.div` display: flex; flex-direction: column; align-items: center; @@ -62,52 +62,52 @@ const ModalHeader = styled.div` width: 200px; margin-bottom: 20px; - ${({ theme }) => theme.mobile} { + ${({ theme }) => theme?.mobile} { width: 150px; } } div { - color: ${props => props.theme.colorBlack}; - font-family: ${props => props.theme.fontEuljiro}; + color: ${props => props.theme?.colorBlack}; + font-family: ${props => props.theme?.fontEuljiro}; font-size: 36px; - ${({ theme }) => theme.mobile} { + ${({ theme }) => theme?.mobile} { font-size: 24px; } - ${({ theme }) => theme.tablet} { + ${({ theme }) => theme?.tablet} { font-size: 32px; } } `; -const ModalBody = styled.div` +const ModalBody = woowahan.div` text-align: center; margin-bottom: 20px; div { - color: ${props => props.theme.colorBlack}; - font-family: ${props => props.theme.fontHannaAir}; + color: ${props => props.theme?.colorBlack}; + font-family: ${props => props.theme?.fontHannaAir}; font-size: 20px; - ${({ theme }) => theme.mobile} { + ${({ theme }) => theme?.mobile} { font-size: 16px; } - ${({ theme }) => theme.tablet} { + ${({ theme }) => theme?.tablet} { font-size: 18px; } } `; -const ModalFooter = styled.div` +const ModalFooter = woowahan.div` margin-top: 10px; button { cursor: pointer; - color: ${props => props.theme.colorWhite}; - font-family: ${props => props.theme.fontEuljiro}; + color: ${props => props.theme?.colorWhite}; + font-family: ${props => props.theme?.fontEuljiro}; font-size: 20px; width: 80px; padding: 8px 10px; @@ -116,18 +116,18 @@ const ModalFooter = styled.div` :first-child { margin-right: 16px; - background-color: ${props => props.theme.colorGreyLight}; + background-color: ${props => props.theme?.colorGreyLight}; &:hover { - background-color: ${props => props.theme.colorGreyMid}; + background-color: ${props => props.theme?.colorGreyMid}; } } :last-child { - background-color: ${props => props.theme.colorPrimaryLight}; + background-color: ${props => props.theme?.colorPrimaryLight}; &:hover { - background-color: ${props => props.theme.colorPrimary}; + background-color: ${props => props.theme?.colorPrimary}; } } } diff --git a/client/src/components/common/navbar.tsx b/client/src/components/common/navbar.tsx index ec7ea17..69103b1 100644 --- a/client/src/components/common/navbar.tsx +++ b/client/src/components/common/navbar.tsx @@ -1,6 +1,6 @@ import React, { FC } from 'react'; import { Link } from 'lib/router'; -import styled from 'styled-components'; +import woowahan from 'lib/woowahan-components'; import { Logo } from 'components'; import accountIcon from 'assets/icons/account.png'; @@ -15,13 +15,9 @@ interface NavbarProps { onLogout: () => void; } -interface WrapperProps { - white: boolean; -} - -const Wrapper = styled.nav` - background-color: ${props => (props.white ? props.theme.colorWhite : props.theme.colorBg)}; - border-bottom: 1px solid ${props => props.theme.colorLineLight}; +const Wrapper = woowahan.nav` + background-color: ${props => (props.white ? props.theme?.colorWhite : props.theme?.colorBg)}; + border-bottom: 1px solid ${props => props.theme?.colorLineLight}; padding: 10px 10%; display: flex; justify-content: flex-end; @@ -35,18 +31,18 @@ const Wrapper = styled.nav` .nav-link { font-size: 12px; - font-weight: ${props => props.theme.weightMid}; - color: ${props => props.theme.colorGreyDark}; + font-weight: ${props => props.theme?.weightMid}; + color: ${props => props.theme?.colorGreyDark}; text-decoration: none; padding: 0 14px; } .nav-link:hover { - color: ${props => props.theme.colorGreyMid}; + color: ${props => props.theme?.colorGreyMid}; } - ${props => props.theme.mobile} { - background-color: ${props => props.theme.colorWhite}; + ${props => props.theme?.mobile} { + background-color: ${props => props.theme?.colorWhite}; border: none; box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.2); justify-content: space-between; diff --git a/client/src/components/form/button.tsx b/client/src/components/form/button.tsx index 0e33096..0676b66 100644 --- a/client/src/components/form/button.tsx +++ b/client/src/components/form/button.tsx @@ -1,23 +1,19 @@ -import styled from 'styled-components'; +import woowahan from 'lib/woowahan-components'; -interface ButtonProps { - color?: 'basic' | 'dark' | 'github'; -} - -const Button = styled.button` +const Button = woowahan.button` cursor: pointer; border: 0; display: flex; align-items: center; justify-content: center; - color: ${({ theme }) => theme.colorWhite}; - font-family: ${({ theme }) => theme.fontEuljiro}; + color: ${({ theme }) => theme?.colorWhite}; + font-family: ${({ theme }) => theme?.fontEuljiro}; opacity: 0.9; margin-bottom: 10px; background-color: ${props => { - if (props.color === 'dark') return props.theme.colorLineDark; - if (props.color === 'github') return props.theme.colorGithub; - return props.theme.colorLine; + if (props.color === 'dark') return props.theme?.colorLineDark; + if (props.color === 'github') return props.theme?.colorGithub; + return props.theme?.colorLine; }}; &:hover { @@ -25,17 +21,17 @@ const Button = styled.button` transform: translateY(-2px); } - ${({ theme }) => theme.mobile} { + ${({ theme }) => theme?.mobile} { height: 50px; font-size: 20px; } - ${({ theme }) => theme.tablet} { + ${({ theme }) => theme?.tablet} { height: 56px; font-size: 22px; } - ${({ theme }) => theme.laptop} { + ${({ theme }) => theme?.laptop} { height: 64px; font-size: 24px; } diff --git a/client/src/components/form/input.tsx b/client/src/components/form/input.tsx index 9bb0d5c..1112a50 100644 --- a/client/src/components/form/input.tsx +++ b/client/src/components/form/input.tsx @@ -1,9 +1,9 @@ -import styled from 'styled-components'; +import woowahan from 'lib/woowahan-components'; -const Input = styled.input` +const Input = woowahan.input` border: 0; - border-bottom: 2px solid ${props => props.theme.colorGreyMid}; - color: ${props => props.theme.colorSoftBlack}; + border-bottom: 2px solid ${props => props.theme?.colorGreyMid}; + color: ${props => props.theme?.colorSoftBlack}; background-color: transparent; line-height: 1.5; text-indent: 5px; @@ -12,28 +12,28 @@ const Input = styled.input` box-sizing: border-box; &[type='text'] { - font-family: ${props => props.theme.fontHannaAir}; + font-family: ${props => props.theme?.fontHannaAir}; } &::placeholder { - color: ${props => props.theme.colorPlaceholder}; - font-family: ${props => props.theme.fontHannaAir}; + color: ${props => props.theme?.colorPlaceholder}; + font-family: ${props => props.theme?.fontHannaAir}; } &:focus { outline: none; - border-bottom: 2px solid ${props => props.theme.colorLineDark}; + border-bottom: 2px solid ${props => props.theme?.colorLineDark}; } - ${({ theme }) => theme.mobile} { + ${({ theme }) => theme?.mobile} { font-size: 20px; } - ${({ theme }) => theme.tablet} { + ${({ theme }) => theme?.tablet} { font-size: 22px; } - ${({ theme }) => theme.laptop} { + ${({ theme }) => theme?.laptop} { font-size: 24px; } `; diff --git a/client/src/components/smart-menu/index.tsx b/client/src/components/smart-menu/index.tsx index b4ed1e3..e1bf023 100644 --- a/client/src/components/smart-menu/index.tsx +++ b/client/src/components/smart-menu/index.tsx @@ -1,4 +1,4 @@ -import styled from 'styled-components'; +import woowahan from 'lib/woowahan-components'; import React, { useState, FC } from 'react'; import useWindowSize from 'hooks/use-window-size'; import { IMenu } from 'types/category'; @@ -12,7 +12,7 @@ interface SmartMenuProps { menu: IMenu; } -const MenuDiv = styled.div` +const MenuDiv = woowahan.div` cursor: pointer; position: fixed; top: 200px; @@ -21,27 +21,27 @@ const MenuDiv = styled.div` writing-mode: vertical-lr; text-orientation: upright; padding: 24px 12px; - background-color: ${({ theme }) => theme.colorBg}; + background-color: ${({ theme }) => theme?.colorBg}; border-top-right-radius: 20px; border-bottom-right-radius: 20px; - color: ${({ theme }) => theme.colorBlack}; - border: 3px solid ${({ theme }) => theme.colorLineDark}; + color: ${({ theme }) => theme?.colorBlack}; + border: 3px solid ${({ theme }) => theme?.colorLineDark}; `; -const MenuTitle = styled.div` +const MenuTitle = woowahan.div` padding-left: 20px; - color: ${({ theme }) => theme.colorLineDark}; - font-family: ${({ theme }) => theme.fontHanna}; + color: ${({ theme }) => theme?.colorLineDark}; + font-family: ${({ theme }) => theme?.fontHanna}; - ${({ theme }) => theme.mobile} { + ${({ theme }) => theme?.mobile} { font-size: 18px; transform: translate(0px, -13px); } - ${({ theme }) => theme.tablet} { + ${({ theme }) => theme?.tablet} { font-size: 20px; transform: translate(0px, -15px); } - ${({ theme }) => theme.laptop} { + ${({ theme }) => theme?.laptop} { font-size: 26px; transform: translate(0px, -17px); } diff --git a/client/src/components/smart-menu/large-menu.tsx b/client/src/components/smart-menu/large-menu.tsx index 1bc4805..a060e56 100644 --- a/client/src/components/smart-menu/large-menu.tsx +++ b/client/src/components/smart-menu/large-menu.tsx @@ -1,4 +1,4 @@ -import styled from 'styled-components'; +import woowahan from 'lib/woowahan-components'; import React, { FC } from 'react'; import { IMenu } from 'types/category'; import { SMART_MENU_BLOCK_DELAY } from '../../constants'; @@ -17,34 +17,30 @@ interface LargeMenuProps { >; } -interface LargeItemProps { - isSelected: boolean; -} - -const LargeItemDiv = styled.ul` +const LargeItemDiv = woowahan.ul` writing-mode: horizontal-tb; text-orientation: sideways; - background-color: ${({ theme }) => theme.colorBg}; + background-color: ${({ theme }) => theme?.colorBg}; border-radius: 20px; padding-left: 32px; `; -const LargeItem = styled.li` - font-family: ${({ theme }) => theme.fontHannaAir}; +const LargeItem = woowahan.li` + font-family: ${({ theme }) => theme?.fontHannaAir}; display: flex; - background-color: ${props => (props.isSelected ? props.theme.colorOffWhite : props.theme.colorBg)}; + background-color: ${props => (props.isSelected ? props.theme?.colorOffWhite : props.theme?.colorBg)}; - border: 1px solid ${({ theme }) => theme.colorOffWhite}; + border: 1px solid ${({ theme }) => theme?.colorOffWhite}; padding: 10px; - ${({ theme }) => theme.mobile} { + ${({ theme }) => theme?.mobile} { width: 110px; font-size: 16px; } - ${({ theme }) => theme.tablet} { + ${({ theme }) => theme?.tablet} { width: 150px; font-size: 18px; } - ${({ theme }) => theme.laptop} { + ${({ theme }) => theme?.laptop} { width: 200px; font-size: 22px; } diff --git a/client/src/components/smart-menu/medium-menu.tsx b/client/src/components/smart-menu/medium-menu.tsx index c096ff8..3ea2561 100644 --- a/client/src/components/smart-menu/medium-menu.tsx +++ b/client/src/components/smart-menu/medium-menu.tsx @@ -1,4 +1,4 @@ -import styled from 'styled-components'; +import woowahan from 'lib/woowahan-components'; import React, { FC } from 'react'; import { IMenu } from 'types/category'; @@ -9,31 +9,27 @@ interface MediumMenuProps { setMediumId: React.Dispatch>; } -interface MediumItemProps { - isSelected: boolean; -} - -const MediumItemDiv = styled.div` +const MediumItemDiv = woowahan.div` display: flex; `; -const MediumItem = styled.ul` - font-family: ${({ theme }) => theme.fontHannaAir}; +const MediumItem = woowahan.ul` + font-family: ${({ theme }) => theme?.fontHannaAir}; writing-mode: horizontal-tb; text-orientation: sideways; - background-color: ${props => (props.isSelected ? props.theme.colorOffWhite : props.theme.colorBg)}; + background-color: ${props => (props.isSelected ? props.theme?.colorOffWhite : props.theme?.colorBg)}; - border: 1px solid ${({ theme }) => theme.colorOffWhite}; + border: 1px solid ${({ theme }) => theme?.colorOffWhite}; padding: 10px; - ${({ theme }) => theme.mobile} { + ${({ theme }) => theme?.mobile} { width: 110px; font-size: 16px; } - ${({ theme }) => theme.tablet} { + ${({ theme }) => theme?.tablet} { width: 150px; font-size: 18px; } - ${({ theme }) => theme.laptop} { + ${({ theme }) => theme?.laptop} { width: 200px; font-size: 22px; } diff --git a/client/src/components/smart-menu/small-menu.tsx b/client/src/components/smart-menu/small-menu.tsx index 1922146..1ea9810 100644 --- a/client/src/components/smart-menu/small-menu.tsx +++ b/client/src/components/smart-menu/small-menu.tsx @@ -1,4 +1,4 @@ -import styled from 'styled-components'; +import woowahan from 'lib/woowahan-components'; import React, { FC } from 'react'; import { IMenu } from 'types/category'; @@ -8,27 +8,27 @@ interface SmallMenuProps { selectedMediumId: string; } -const SmallItemDiv = styled.div` +const SmallItemDiv = woowahan.div` writing-mode: horizontal-tb; text-orientation: sideways; `; -const SmallItem = styled.div` - font-family: ${({ theme }) => theme.fontHannaAir}; +const SmallItem = woowahan.div` + font-family: ${({ theme }) => theme?.fontHannaAir}; font-size: 26px; - background-color: ${({ theme }) => theme.colorBg}; + background-color: ${({ theme }) => theme?.colorBg}; - border: 1px solid ${({ theme }) => theme.colorOffWhite}; + border: 1px solid ${({ theme }) => theme?.colorOffWhite}; padding: 10px; - ${({ theme }) => theme.mobile} { + ${({ theme }) => theme?.mobile} { width: 110px; font-size: 16px; } - ${({ theme }) => theme.tablet} { + ${({ theme }) => theme?.tablet} { width: 150px; font-size: 18px; } - ${({ theme }) => theme.laptop} { + ${({ theme }) => theme?.laptop} { width: 200px; font-size: 22px; } diff --git a/client/src/pages/not-found-page.tsx b/client/src/pages/not-found-page.tsx index 7ce8a55..20b44da 100644 --- a/client/src/pages/not-found-page.tsx +++ b/client/src/pages/not-found-page.tsx @@ -1,10 +1,10 @@ import React, { ReactElement } from 'react'; -import styled from 'styled-components'; +import woowahan from 'lib/woowahan-components'; import useWindowSize from 'hooks/use-window-size'; import HeaderContainer from 'containers/header-container'; import { Layout, Footer } from 'components'; -const Text = styled.div` +const Text = woowahan.div` flex: 1; display: flex; flex-direction: column; @@ -12,8 +12,8 @@ const Text = styled.div` margin-top: 50px; span { - font-family: ${props => props.theme.fontEuljiro10}; - color: ${props => props.theme.colorTextBeige}; + font-family: ${props => props.theme?.fontEuljiro10}; + color: ${props => props.theme?.colorTextBeige}; } span:nth-child(1) { @@ -24,7 +24,7 @@ const Text = styled.div` font-size: 80px; } - ${props => props.theme.mobile} { + ${props => props.theme?.mobile} { span:nth-child(1) { font-size: 100px; } diff --git a/client/src/pages/signup-page.tsx b/client/src/pages/signup-page.tsx index 76ec2cb..cc73b8b 100644 --- a/client/src/pages/signup-page.tsx +++ b/client/src/pages/signup-page.tsx @@ -1,11 +1,11 @@ import React, { ReactElement } from 'react'; -import styled from 'styled-components'; +import woowahan from 'lib/woowahan-components'; import useWindowSize from 'hooks/use-window-size'; import SignupContainer from 'containers/signup-container'; import HeaderContainer from 'containers/header-container'; import { Layout, Footer } from 'components'; -const Div = styled.div` +const Div = woowahan.div` display: flex; flex-direction: column; align-items: center; From 2336de2a30c490a9c1eacd767f1423bc800077e3 Mon Sep 17 00:00:00 2001 From: edegiil Date: Wed, 18 Aug 2021 01:17:32 +0900 Subject: [PATCH 003/163] =?UTF-8?q?fix:=20=EC=9D=B4=EB=B2=A4=ED=8A=B8=20?= =?UTF-8?q?=ED=83=80=EC=9E=85=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/components/smart-menu/large-menu.tsx | 2 +- client/src/components/smart-menu/medium-menu.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/client/src/components/smart-menu/large-menu.tsx b/client/src/components/smart-menu/large-menu.tsx index a060e56..ef8464c 100644 --- a/client/src/components/smart-menu/large-menu.tsx +++ b/client/src/components/smart-menu/large-menu.tsx @@ -54,7 +54,7 @@ const LargeMenu: FC = ({ menu, position, selectedLargeId, isLapt return ( { + onMouseMove={(e: React.MouseEvent) => { if (isLaptop) { setTimeout(() => { if (e.clientX < position.x + 10) { diff --git a/client/src/components/smart-menu/medium-menu.tsx b/client/src/components/smart-menu/medium-menu.tsx index 3ea2561..f5a8063 100644 --- a/client/src/components/smart-menu/medium-menu.tsx +++ b/client/src/components/smart-menu/medium-menu.tsx @@ -45,7 +45,7 @@ const MediumMenu: FC = ({ menu, selectedLargeId, selectedMedium return ( { + onMouseEnter={(e: React.MouseEvent) => { setMediumId(mediumId); e.stopPropagation(); }} From c8167470f8f3b74a0ba00de93cd8ee89fbc07d2b Mon Sep 17 00:00:00 2001 From: edegiil Date: Wed, 18 Aug 2021 01:22:37 +0900 Subject: [PATCH 004/163] =?UTF-8?q?fix:=20=EB=AA=A8=EB=93=88=20=EC=84=A4?= =?UTF-8?q?=EC=B9=98=20=EA=B2=BD=EB=A1=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/package.json | 5 ++++- client/yarn.lock | 15 +++++++++++++++ package.json | 7 ------- 3 files changed, 19 insertions(+), 8 deletions(-) delete mode 100644 package.json diff --git a/client/package.json b/client/package.json index 6c0119a..bb0479d 100644 --- a/client/package.json +++ b/client/package.json @@ -23,7 +23,9 @@ "dependencies": { "@reduxjs/toolkit": "^1.6.1", "@types/redux-logger": "^3.0.9", + "@types/stylis": "^4.0.1", "axios": "^0.21.1", + "nanoid": "^3.1.25", "react": "^17.0.2", "react-dom": "^17.0.2", "react-redux": "^7.2.4", @@ -33,7 +35,8 @@ "redux-saga-test-plan": "^4.0.3", "sanitize-html": "^2.4.0", "styled-components": "^5.3.0", - "styled-reset": "^4.3.4" + "styled-reset": "^4.3.4", + "stylis": "^4.0.10" }, "devDependencies": { "@babel/cli": "^7.14.8", diff --git a/client/yarn.lock b/client/yarn.lock index 97b35dd..0278893 100644 --- a/client/yarn.lock +++ b/client/yarn.lock @@ -1591,6 +1591,11 @@ "@types/react" "*" csstype "^3.0.2" +"@types/stylis@^4.0.1": + version "4.0.1" + resolved "https://registry.yarnpkg.com/@types/stylis/-/stylis-4.0.1.tgz#ed14588039b713fc3183cfa0e95033e86e5e1aa2" + integrity sha512-tMMy2pb95ZvBrvrNhZDj6fsU1SpR97BYeoS798IRCzKLqWY0bh0rtg9G6knNtiUD6Pij1PoafHYjVCbspKenOA== + "@types/testing-library__jest-dom@^5.9.1": version "5.14.1" resolved "https://registry.yarnpkg.com/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.1.tgz#014162a5cee6571819d48e999980694e2f657c3c" @@ -6202,6 +6207,11 @@ nanoid@^3.1.23: resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.23.tgz#f744086ce7c2bc47ee0a8472574d5c78e4183a81" integrity sha512-FiB0kzdP0FFVGDKlRLEQ1BgDzU87dy5NnzjeW9YZNt+/c3+q82EQDUwniSAUxp/F0gFNI1ZhKU1FqYsMuqZVnw== +nanoid@^3.1.25: + version "3.1.25" + resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.25.tgz#09ca32747c0e543f0e1814b7d3793477f9c8e152" + integrity sha512-rdwtIXaXCLFAQbnfqDRnI6jaRHp9fTcYBjtFKE8eezcZ7LuLjhUaQGNeMXf1HmRoCH32CLz6XwX0TtxEOS/A3Q== + nanomatch@^1.2.9: version "1.2.13" resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119" @@ -8213,6 +8223,11 @@ stylehacks@^5.0.1: browserslist "^4.16.0" postcss-selector-parser "^6.0.4" +stylis@^4.0.10: + version "4.0.10" + resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.0.10.tgz#446512d1097197ab3f02fb3c258358c3f7a14240" + integrity sha512-m3k+dk7QeJw660eIKRRn3xPF6uuvHs/FFzjX3HQ5ove0qYsiygoAhwn5a3IYKaZPo5LrYD0rfVmtv1gNY1uYwg== + supports-color@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7" diff --git a/package.json b/package.json deleted file mode 100644 index 90f2d78..0000000 --- a/package.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "dependencies": { - "@types/stylis": "^4.0.1", - "nanoid": "^3.1.25", - "stylis": "^4.0.10" - } -} From 2da426d58516ad329a8f65ab18163ec9d26952b4 Mon Sep 17 00:00:00 2001 From: edegiil Date: Wed, 18 Aug 2021 01:31:29 +0900 Subject: [PATCH 005/163] =?UTF-8?q?fix:=20=EA=B8=80=EB=A1=9C=EB=B2=8C=20?= =?UTF-8?q?=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/styles/theme.tsx | 24 +++++++++++------------- 1 file changed, 11 insertions(+), 13 deletions(-) diff --git a/client/src/styles/theme.tsx b/client/src/styles/theme.tsx index d9ca03a..6ab83c9 100644 --- a/client/src/styles/theme.tsx +++ b/client/src/styles/theme.tsx @@ -57,18 +57,7 @@ const theme: DefaultTheme = { weightBold: '700', }; -const GlobalStyle = createGlobalStyle` - ${reset} - - #root { - width: 100%; - height: 100vh; - } - - a { - text-decoration: none; - } - +const GlobalStyle = createGlobalStyle` @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap'); @font-face { @@ -91,7 +80,16 @@ const GlobalStyle = createGlobalStyle` src: url(${BMHANNAAir}) format('woff'); } - font-family: 'Noto Sans KR', sans-serif; + ${reset[0]} + + #root { + width: 100%; + height: 100vh; + } + + a { + text-decoration: none; + } `; const Theme: FC = ({ children }) => { From 3c21d8b7ac3d610cc39ff91f367c27ec268827fe Mon Sep 17 00:00:00 2001 From: edegiil Date: Wed, 18 Aug 2021 01:31:43 +0900 Subject: [PATCH 006/163] =?UTF-8?q?fix:=20html=20=EC=8A=A4=ED=83=80?= =?UTF-8?q?=EC=9D=BC=20=EC=8B=9C=ED=8A=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/public/index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/client/public/index.html b/client/public/index.html index 9a50bd1..2164608 100644 --- a/client/public/index.html +++ b/client/public/index.html @@ -5,6 +5,7 @@ 배민문구사 + From c35d1d6845f2cfbfc201b78874c8fd9fcddd8cbb Mon Sep 17 00:00:00 2001 From: edegiil Date: Wed, 18 Aug 2021 09:45:46 +0900 Subject: [PATCH 007/163] =?UTF-8?q?fix:=20=EB=A3=A8=ED=8A=B8=20=ED=8F=B4?= =?UTF-8?q?=EB=8D=94=20yarn.lock=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- yarn.lock | 18 ------------------ 1 file changed, 18 deletions(-) delete mode 100644 yarn.lock diff --git a/yarn.lock b/yarn.lock deleted file mode 100644 index 35c9c30..0000000 --- a/yarn.lock +++ /dev/null @@ -1,18 +0,0 @@ -# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. -# yarn lockfile v1 - - -"@types/stylis@^4.0.1": - version "4.0.1" - resolved "https://registry.yarnpkg.com/@types/stylis/-/stylis-4.0.1.tgz#ed14588039b713fc3183cfa0e95033e86e5e1aa2" - integrity sha512-tMMy2pb95ZvBrvrNhZDj6fsU1SpR97BYeoS798IRCzKLqWY0bh0rtg9G6knNtiUD6Pij1PoafHYjVCbspKenOA== - -nanoid@^3.1.25: - version "3.1.25" - resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.25.tgz#09ca32747c0e543f0e1814b7d3793477f9c8e152" - integrity sha512-rdwtIXaXCLFAQbnfqDRnI6jaRHp9fTcYBjtFKE8eezcZ7LuLjhUaQGNeMXf1HmRoCH32CLz6XwX0TtxEOS/A3Q== - -stylis@^4.0.10: - version "4.0.10" - resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.0.10.tgz#446512d1097197ab3f02fb3c258358c3f7a14240" - integrity sha512-m3k+dk7QeJw660eIKRRn3xPF6uuvHs/FFzjX3HQ5ove0qYsiygoAhwn5a3IYKaZPo5LrYD0rfVmtv1gNY1uYwg== From 89b07c3e3ccb4d7cede9bcc294b6de311e6fe4da Mon Sep 17 00:00:00 2001 From: edegiil Date: Wed, 18 Aug 2021 09:54:48 +0900 Subject: [PATCH 008/163] =?UTF-8?q?fix:=20=ED=85=8C=EB=A7=88=EC=97=90=20?= =?UTF-8?q?=EC=9A=B0=EC=95=84=ED=95=9C=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/styles/theme.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/client/src/styles/theme.tsx b/client/src/styles/theme.tsx index 6ab83c9..5d49ed3 100644 --- a/client/src/styles/theme.tsx +++ b/client/src/styles/theme.tsx @@ -1,12 +1,12 @@ import React, { FC } from 'react'; -import { ThemeProvider, createGlobalStyle, DefaultTheme } from 'styled-components'; +import { ThemeProvider, createGlobalStyle } from 'lib/woowahan-components'; import reset from 'styled-reset'; import BMEULJIRO from '../assets/fonts/BMEULJIRO.woff'; import BMEULJIRO10years from '../assets/fonts/BMEULJIRO10yearslater.woff'; import BMHANNA from '../assets/fonts/BMHANNA11years.woff'; import BMHANNAAir from '../assets/fonts/BMHANNAAir.woff'; -const theme: DefaultTheme = { +const theme = { mobile: '@media all and (max-width: 480px)', tablet: '@media all and (min-width:480px) and (max-width:1200px)', laptop: '@media all and (min-width: 1200px)', @@ -80,7 +80,7 @@ const GlobalStyle = createGlobalStyle` src: url(${BMHANNAAir}) format('woff'); } - ${reset[0]} + ${reset[0] as string} #root { width: 100%; From b65dfe2729ddb4f53e7b182ae74110214524d92a Mon Sep 17 00:00:00 2001 From: Seogeurim Date: Wed, 18 Aug 2021 10:01:14 +0900 Subject: [PATCH 009/163] =?UTF-8?q?fix:=20style=20=EC=98=A4=EB=A5=98=20?= =?UTF-8?q?=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/components/common/modal.tsx | 6 +-- client/src/components/common/navbar.tsx | 2 +- client/src/components/smart-menu/index.tsx | 2 +- .../src/components/smart-menu/large-menu.tsx | 2 +- .../src/components/smart-menu/medium-menu.tsx | 2 +- .../src/components/smart-menu/small-menu.tsx | 2 +- client/src/styles/styled.d.ts | 54 ------------------- 7 files changed, 8 insertions(+), 62 deletions(-) delete mode 100644 client/src/styles/styled.d.ts diff --git a/client/src/components/common/modal.tsx b/client/src/components/common/modal.tsx index 27ca790..7a0da06 100644 --- a/client/src/components/common/modal.tsx +++ b/client/src/components/common/modal.tsx @@ -114,7 +114,7 @@ const ModalFooter = woowahan.div` border: none; border-radius: 10px; - :first-child { + &:first-child { margin-right: 16px; background-color: ${props => props.theme?.colorGreyLight}; @@ -123,7 +123,7 @@ const ModalFooter = woowahan.div` } } - :last-child { + &:last-child { background-color: ${props => props.theme?.colorPrimaryLight}; &:hover { @@ -136,7 +136,7 @@ const ModalFooter = woowahan.div` const Modal: FC = ({ type, header, body, onCancel, onConfirm }) => { return ( - + modal-img
{header}
diff --git a/client/src/components/common/navbar.tsx b/client/src/components/common/navbar.tsx index 69103b1..077ad88 100644 --- a/client/src/components/common/navbar.tsx +++ b/client/src/components/common/navbar.tsx @@ -78,7 +78,7 @@ const Navbar: FC = ({ white = false, mobile = false, userId, onLogo ) : ( - {mobile ? logout : '로그인'} + {mobile ? login : '로그인'} )} diff --git a/client/src/components/smart-menu/index.tsx b/client/src/components/smart-menu/index.tsx index e1bf023..c4e6b19 100644 --- a/client/src/components/smart-menu/index.tsx +++ b/client/src/components/smart-menu/index.tsx @@ -1,5 +1,5 @@ -import woowahan from 'lib/woowahan-components'; import React, { useState, FC } from 'react'; +import woowahan from 'lib/woowahan-components'; import useWindowSize from 'hooks/use-window-size'; import { IMenu } from 'types/category'; import { SMART_MENU_LARGE_WIDTH, SMART_MENU_SMALL_WIDTH, SMART_MENU_BLOCK_DELAY } from '../../constants'; diff --git a/client/src/components/smart-menu/large-menu.tsx b/client/src/components/smart-menu/large-menu.tsx index ef8464c..4bc0847 100644 --- a/client/src/components/smart-menu/large-menu.tsx +++ b/client/src/components/smart-menu/large-menu.tsx @@ -1,5 +1,5 @@ -import woowahan from 'lib/woowahan-components'; import React, { FC } from 'react'; +import woowahan from 'lib/woowahan-components'; import { IMenu } from 'types/category'; import { SMART_MENU_BLOCK_DELAY } from '../../constants'; diff --git a/client/src/components/smart-menu/medium-menu.tsx b/client/src/components/smart-menu/medium-menu.tsx index f5a8063..170007c 100644 --- a/client/src/components/smart-menu/medium-menu.tsx +++ b/client/src/components/smart-menu/medium-menu.tsx @@ -1,5 +1,5 @@ -import woowahan from 'lib/woowahan-components'; import React, { FC } from 'react'; +import woowahan from 'lib/woowahan-components'; import { IMenu } from 'types/category'; interface MediumMenuProps { diff --git a/client/src/components/smart-menu/small-menu.tsx b/client/src/components/smart-menu/small-menu.tsx index 1ea9810..9990743 100644 --- a/client/src/components/smart-menu/small-menu.tsx +++ b/client/src/components/smart-menu/small-menu.tsx @@ -1,5 +1,5 @@ -import woowahan from 'lib/woowahan-components'; import React, { FC } from 'react'; +import woowahan from 'lib/woowahan-components'; import { IMenu } from 'types/category'; interface SmallMenuProps { diff --git a/client/src/styles/styled.d.ts b/client/src/styles/styled.d.ts deleted file mode 100644 index 1bd8d1f..0000000 --- a/client/src/styles/styled.d.ts +++ /dev/null @@ -1,54 +0,0 @@ -import 'styled-components'; - -declare module 'styled-components' { - export interface DefaultTheme { - mobile: string; - tablet: string; - laptop: string; - - colorWhite: string; - colorOffWhite: string; - colorBlack: string; - colorSoftBlack: string; - - colorBg: string; - colorFooter: string; - colorPlaceholder: string; - colorError: string; - - colorLine: string; - colorLineLight: string; - colorLineDark: string; - - colorTextBrown: string; - colorTextBrownLight: string; - colorTextBeige: string; - - colorPrimary: string; - colorPrimaryLight: string; - colorPrimaryDark: string; - - colorPointDarkGreen: string; - colorPointGreen: string; - colorPointBeige: string; - colorPointBeigeLight: string; - colorPointRed: string; - colorPointAqua: string; - - colorGreyDark: string; - colorGreyMid: string; - colorGreyLight: string; - - colorGithub: string; - - fontBasic: string; - fontEuljiro: string; - fontEuljiro10: string; - fontHanna: string; - fontHannaAir: string; - - weightReg: string; - weightMid: string; - weightBold: string; - } -} From 1225d17e75eb3a8da3f89800bcc0e7f2771829c4 Mon Sep 17 00:00:00 2001 From: edegiil Date: Wed, 18 Aug 2021 10:12:18 +0900 Subject: [PATCH 010/163] =?UTF-8?q?refactor:=20=EC=BB=A4=EC=8A=A4=ED=85=80?= =?UTF-8?q?=20=ED=81=B4=EB=9E=98=EC=8A=A4=EB=AA=85=20=EC=A0=81=EC=9A=A9=20?= =?UTF-8?q?=EB=B0=8F=20=ED=85=8C=EB=A7=88=20=EC=88=A8=EA=B8=B0=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../woowahan-components/components/woowahan-component.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/client/src/lib/woowahan-components/components/woowahan-component.tsx b/client/src/lib/woowahan-components/components/woowahan-component.tsx index 4ff6159..7289092 100644 --- a/client/src/lib/woowahan-components/components/woowahan-component.tsx +++ b/client/src/lib/woowahan-components/components/woowahan-component.tsx @@ -47,7 +47,10 @@ const woowahanComponent = (tag: string): TaggedTemplateType => { } const { children } = props; - const ReactElement = React.createElement(tag, { className, theme, ...props }, children); + if (props.className) { + className += ` ${props.className}`; + } + const ReactElement = React.createElement(tag, { ...props, className }, children); return ReactElement; }; From 184e47905c653f6d5db6521e21cc860a1f1aa8ba Mon Sep 17 00:00:00 2001 From: edegiil Date: Wed, 18 Aug 2021 10:12:35 +0900 Subject: [PATCH 011/163] =?UTF-8?q?chore:=20=EB=AA=A8=EB=8B=AC=20=ED=81=B4?= =?UTF-8?q?=EB=9E=98=EC=8A=A4=EB=AA=85=20=EB=8B=A4=EC=8B=9C=20=EB=B3=B5?= =?UTF-8?q?=EA=B5=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/components/common/modal.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/src/components/common/modal.tsx b/client/src/components/common/modal.tsx index 7a0da06..dc8eb5f 100644 --- a/client/src/components/common/modal.tsx +++ b/client/src/components/common/modal.tsx @@ -136,7 +136,7 @@ const ModalFooter = woowahan.div` const Modal: FC = ({ type, header, body, onCancel, onConfirm }) => { return ( - + modal-img
{header}
From a8f6eef7b0f4d60f287b9b78a7ad2bf2fd5bd57c Mon Sep 17 00:00:00 2001 From: edegiil Date: Wed, 18 Aug 2021 10:26:06 +0900 Subject: [PATCH 012/163] =?UTF-8?q?refactor:=20css=20reset,=20css=20normal?= =?UTF-8?q?izer=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/styles/theme.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/client/src/styles/theme.tsx b/client/src/styles/theme.tsx index 5d49ed3..54b7dd7 100644 --- a/client/src/styles/theme.tsx +++ b/client/src/styles/theme.tsx @@ -1,6 +1,5 @@ import React, { FC } from 'react'; import { ThemeProvider, createGlobalStyle } from 'lib/woowahan-components'; -import reset from 'styled-reset'; import BMEULJIRO from '../assets/fonts/BMEULJIRO.woff'; import BMEULJIRO10years from '../assets/fonts/BMEULJIRO10yearslater.woff'; import BMHANNA from '../assets/fonts/BMHANNA11years.woff'; @@ -59,6 +58,8 @@ const theme = { const GlobalStyle = createGlobalStyle` @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap'); + @import url('https://meyerweb.com/eric/tools/css/reset/reset.css'); + @import url('https://unpkg.com/sanitize.css'); @font-face { font-family: 'BMEULJIRO'; @@ -80,8 +81,6 @@ const GlobalStyle = createGlobalStyle` src: url(${BMHANNAAir}) format('woff'); } - ${reset[0] as string} - #root { width: 100%; height: 100vh; From b43e3efc86ff980895e822c083ebcbb7bdf190e3 Mon Sep 17 00:00:00 2001 From: edegiil Date: Wed, 18 Aug 2021 10:26:24 +0900 Subject: [PATCH 013/163] =?UTF-8?q?chore:=20styled=20components=20?= =?UTF-8?q?=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/package.json | 2 - client/yarn.lock | 98 +++------------------------------------------ 2 files changed, 6 insertions(+), 94 deletions(-) diff --git a/client/package.json b/client/package.json index bb0479d..2e942f4 100644 --- a/client/package.json +++ b/client/package.json @@ -34,7 +34,6 @@ "redux-saga": "^1.1.3", "redux-saga-test-plan": "^4.0.3", "sanitize-html": "^2.4.0", - "styled-components": "^5.3.0", "styled-reset": "^4.3.4", "stylis": "^4.0.10" }, @@ -50,7 +49,6 @@ "@types/react": "^17.0.17", "@types/react-dom": "^17.0.9", "@types/react-redux": "^7.1.18", - "@types/styled-components": "^5.1.12", "@typescript-eslint/eslint-plugin": "^4.29.1", "@typescript-eslint/parser": "^4.29.1", "babel-cli": "^6.26.0", diff --git a/client/yarn.lock b/client/yarn.lock index 0278893..529e9dd 100644 --- a/client/yarn.lock +++ b/client/yarn.lock @@ -67,7 +67,7 @@ jsesc "^2.5.1" source-map "^0.5.0" -"@babel/helper-annotate-as-pure@^7.0.0", "@babel/helper-annotate-as-pure@^7.14.5": +"@babel/helper-annotate-as-pure@^7.14.5": version "7.14.5" resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.14.5.tgz#7bf478ec3b71726d56a8ca5775b046fc29879e61" integrity sha512-EivH9EgBIb+G8ij1B2jAwSH36WnGvkQSEC6CkX/6v6ZFlw5fVOHvsgGF4uiEHO2GzMvunZb6tDLQEQSdrdocrA== @@ -163,7 +163,7 @@ dependencies: "@babel/types" "^7.15.0" -"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.12.13", "@babel/helper-module-imports@^7.14.5": +"@babel/helper-module-imports@^7.12.13", "@babel/helper-module-imports@^7.14.5": version "7.14.5" resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.14.5.tgz#6d1a44df6a38c957aa7c312da076429f11b422f3" integrity sha512-SwrNHu5QWS84XlHwGYPDtCxcA0hrSlL2yhWYLgeOc0w7ccOl2qv4s/nARI0aYZW+bSwAL5CukeXA47B/1NKcnQ== @@ -967,7 +967,7 @@ "@babel/parser" "^7.14.5" "@babel/types" "^7.14.5" -"@babel/traverse@^7.1.0", "@babel/traverse@^7.13.0", "@babel/traverse@^7.14.5", "@babel/traverse@^7.15.0", "@babel/traverse@^7.4.5", "@babel/traverse@^7.7.2": +"@babel/traverse@^7.1.0", "@babel/traverse@^7.13.0", "@babel/traverse@^7.14.5", "@babel/traverse@^7.15.0", "@babel/traverse@^7.7.2": version "7.15.0" resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.15.0.tgz#4cca838fd1b2a03283c1f38e141f639d60b3fc98" integrity sha512-392d8BN0C9eVxVWd8H6x9WfipgVH5IaIoLp23334Sc1vbKKWINnvwRpb4us0xtPaCumlwbTtIYNA0Dv/32sVFw== @@ -1000,28 +1000,6 @@ resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.3.tgz#90420f9f9c6d3987f176a19a7d8e764271a2f55d" integrity sha512-Fxt+AfXgjMoin2maPIYzFZnQjAXjAL0PHscM5pRTtatFqB+vZxAM9tLp2Optnuw3QOQC40jTNeGYFOMvyf7v9g== -"@emotion/is-prop-valid@^0.8.8": - version "0.8.8" - resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a" - integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA== - dependencies: - "@emotion/memoize" "0.7.4" - -"@emotion/memoize@0.7.4": - version "0.7.4" - resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb" - integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw== - -"@emotion/stylis@^0.8.4": - version "0.8.5" - resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04" - integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ== - -"@emotion/unitless@^0.7.4": - version "0.7.5" - resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed" - integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg== - "@eslint/eslintrc@^0.4.3": version "0.4.3" resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.4.3.tgz#9e42981ef035beb3dd49add17acb96e8ff6f394c" @@ -1474,7 +1452,7 @@ dependencies: "@types/node" "*" -"@types/hoist-non-react-statics@*", "@types/hoist-non-react-statics@^3.3.0": +"@types/hoist-non-react-statics@^3.3.0": version "3.3.1" resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f" integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA== @@ -1582,15 +1560,6 @@ resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.1.tgz#20f18294f797f2209b5f65c8e3b5c8e8261d127c" integrity sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw== -"@types/styled-components@^5.1.12": - version "5.1.12" - resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-5.1.12.tgz#1a3679942746adecd1e736bfc47aea2c938a7d9a" - integrity sha512-sTjc0+gMl08JvOHchQKgEGbbiSexSvWg5khUNSH4kosb7Tl4782AtfWMkAhQmeXMg2vIn6PthGVHFW+U/Dpihg== - dependencies: - "@types/hoist-non-react-statics" "*" - "@types/react" "*" - csstype "^3.0.2" - "@types/stylis@^4.0.1": version "4.0.1" resolved "https://registry.yarnpkg.com/@types/stylis/-/stylis-4.0.1.tgz#ed14588039b713fc3183cfa0e95033e86e5e1aa2" @@ -2336,21 +2305,6 @@ babel-plugin-polyfill-regenerator@^0.2.2: dependencies: "@babel/helper-define-polyfill-provider" "^0.2.2" -"babel-plugin-styled-components@>= 1.12.0": - version "1.13.2" - resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.13.2.tgz#ebe0e6deff51d7f93fceda1819e9b96aeb88278d" - integrity sha512-Vb1R3d4g+MUfPQPVDMCGjm3cDocJEUTR7Xq7QS95JWWeksN1wdFRYpD2kulDgI3Huuaf1CZd+NK4KQmqUFh5dA== - dependencies: - "@babel/helper-annotate-as-pure" "^7.0.0" - "@babel/helper-module-imports" "^7.0.0" - babel-plugin-syntax-jsx "^6.18.0" - lodash "^4.17.11" - -babel-plugin-syntax-jsx@^6.18.0: - version "6.18.0" - resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946" - integrity sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY= - babel-polyfill@^6.26.0: version "6.26.0" resolved "https://registry.yarnpkg.com/babel-polyfill/-/babel-polyfill-6.26.0.tgz#379937abc67d7895970adc621f284cd966cf2153" @@ -2662,11 +2616,6 @@ camelcase@^6.2.0: resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.2.0.tgz#924af881c9d525ac9d87f40d964e5cea982a1809" integrity sha512-c7wVvbw3f37nuobQNtgsgG9POC9qMbNuMQmTCqZv23b6MIz0fcYpBiOlv9gEN/hdLdnZTDQhg6e9Dq5M1vKvfg== -camelize@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.0.tgz#164a5483e630fa4321e5af07020e531831b2609b" - integrity sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs= - caniuse-api@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-3.0.0.tgz#5e4d90e2274961d46291997df599e3ed008ee4c0" @@ -3028,11 +2977,6 @@ cross-spawn@^7.0.2, cross-spawn@^7.0.3: shebang-command "^2.0.0" which "^2.0.1" -css-color-keywords@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05" - integrity sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU= - css-color-names@^0.0.4: version "0.0.4" resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0" @@ -3088,15 +3032,6 @@ css-select@^4.1.3: domutils "^2.6.0" nth-check "^2.0.0" -css-to-react-native@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-3.0.0.tgz#62dbe678072a824a689bcfee011fc96e02a7d756" - integrity sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ== - dependencies: - camelize "^1.0.0" - css-color-keywords "^1.0.0" - postcss-value-parser "^4.0.2" - css-tree@^1.1.2: version "1.1.3" resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.1.3.tgz#eb4870fb6fd7707327ec95c2ff2ab09b5e8db91d" @@ -4515,7 +4450,7 @@ hex-color-regex@^1.1.0: resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e" integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ== -hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2: +hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2: version "3.3.2" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw== @@ -7798,11 +7733,6 @@ shallow-clone@^3.0.0: dependencies: kind-of "^6.0.2" -shallowequal@^1.1.0: - version "1.1.0" - resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8" - integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ== - shebang-command@^1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea" @@ -8194,22 +8124,6 @@ style-loader@^3.2.1: resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-3.2.1.tgz#63cb920ec145c8669e9a50e92961452a1ef5dcde" integrity sha512-1k9ZosJCRFaRbY6hH49JFlRB0fVSbmnyq1iTPjNxUmGVjBNEmwrrHPenhlp+Lgo51BojHSf6pl2FcqYaN3PfVg== -styled-components@^5.3.0: - version "5.3.0" - resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.3.0.tgz#e47c3d3e9ddfff539f118a3dd0fd4f8f4fb25727" - integrity sha512-bPJKwZCHjJPf/hwTJl6TbkSZg/3evha+XPEizrZUGb535jLImwDUdjTNxXqjjaASt2M4qO4AVfoHJNe3XB/tpQ== - dependencies: - "@babel/helper-module-imports" "^7.0.0" - "@babel/traverse" "^7.4.5" - "@emotion/is-prop-valid" "^0.8.8" - "@emotion/stylis" "^0.8.4" - "@emotion/unitless" "^0.7.4" - babel-plugin-styled-components ">= 1.12.0" - css-to-react-native "^3.0.0" - hoist-non-react-statics "^3.0.0" - shallowequal "^1.1.0" - supports-color "^5.5.0" - styled-reset@^4.3.4: version "4.3.4" resolved "https://registry.yarnpkg.com/styled-reset/-/styled-reset-4.3.4.tgz#87b6f43caa3f83a5f9dc63773c13b8bb71efbe69" @@ -8233,7 +8147,7 @@ supports-color@^2.0.0: resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7" integrity sha1-U10EXOa2Nj+kARcIRimZXp3zJMc= -supports-color@^5.3.0, supports-color@^5.5.0: +supports-color@^5.3.0: version "5.5.0" resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f" integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow== From e76201d3e22db90b668f20320fbde4e21dd60bc2 Mon Sep 17 00:00:00 2001 From: edegiil Date: Wed, 18 Aug 2021 10:51:41 +0900 Subject: [PATCH 014/163] =?UTF-8?q?fix:=20boolean=20=ED=94=84=EB=A1=9C?= =?UTF-8?q?=ED=8D=BC=ED=8B=B0=20=EC=82=AC=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/woowahan-component.tsx | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/client/src/lib/woowahan-components/components/woowahan-component.tsx b/client/src/lib/woowahan-components/components/woowahan-component.tsx index 7289092..2eff52f 100644 --- a/client/src/lib/woowahan-components/components/woowahan-component.tsx +++ b/client/src/lib/woowahan-components/components/woowahan-component.tsx @@ -7,6 +7,7 @@ import parseString, { IProps, ExpType } from '../utils/parse-string'; import { IThemeContext } from './theme-provider'; export type TaggedTemplateType = (styleString: TemplateStringsArray, ...exps: ExpType) => FC; +type ElementProps = { [key: string]: unknown }; const woowahanComponent = (tag: string): TaggedTemplateType => { const classMap = new Map(); @@ -50,7 +51,18 @@ const woowahanComponent = (tag: string): TaggedTemplateType => { if (props.className) { className += ` ${props.className}`; } - const ReactElement = React.createElement(tag, { ...props, className }, children); + + const newProps: ElementProps = {}; + + Object.entries(props).forEach(([key, value]) => { + if (typeof value === 'boolean') { + newProps[key] = (value as boolean).toString(); + } else { + newProps[key] = value; + } + }); + + const ReactElement = React.createElement(tag, { ...newProps, className }, children); return ReactElement; }; From 3401232536288d0561ab309bdd4d01accc1748a5 Mon Sep 17 00:00:00 2001 From: Seogeurim Date: Tue, 17 Aug 2021 01:13:59 +0900 Subject: [PATCH 015/163] =?UTF-8?q?feat:=20=EC=95=84=EC=9D=B4=ED=85=9C=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 상품 아이템 컴포넌트를 생성하여 UI 구성 --- client/src/components/item/index.tsx | 60 ++++++++++++++++++++++++++++ client/src/pages/main-page.tsx | 30 ++++++++++++++ client/src/styles/theme.tsx | 2 +- client/src/utils/index.ts | 3 ++ 4 files changed, 94 insertions(+), 1 deletion(-) create mode 100644 client/src/components/item/index.tsx create mode 100644 client/src/utils/index.ts diff --git a/client/src/components/item/index.tsx b/client/src/components/item/index.tsx new file mode 100644 index 0000000..f84dadf --- /dev/null +++ b/client/src/components/item/index.tsx @@ -0,0 +1,60 @@ +import React, { FC } from 'react'; +import styled from 'styled-components'; +import { formatPrice } from 'utils'; + +interface ItemProps { + thumbnail: string; + title: string; + price: number; +} + +const Container = styled.div` + width: 230px; + height: 380px; + padding: 5px; + background-color: ${props => props.theme.colorPointDarkGreen}; + display: flex; + flex-direction: column; + justify-content: space-between; +`; + +const Thumbnail = styled.img` + width: 100%; + height: 300px; + object-fit: cover; +`; + +const Info = styled.div` + margin-left: 2px; + margin-bottom: 6px; + font-family: ${props => props.theme.fontEuljiro}; + color: ${props => props.theme.colorOffWhite}; + + .title { + width: 220px; + font-size: 18px; + line-height: 24px; + letter-spacing: 0.5px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + .price { + font-size: 30px; + } +`; + +const Item: FC = ({ thumbnail, title, price }) => { + return ( + + + +
{title}
+
{formatPrice(price)}원
+ + + ); +}; + +export default Item; diff --git a/client/src/pages/main-page.tsx b/client/src/pages/main-page.tsx index 26e6ab2..e3d5913 100644 --- a/client/src/pages/main-page.tsx +++ b/client/src/pages/main-page.tsx @@ -3,6 +3,14 @@ import useWindowSize from 'hooks/use-window-size'; import SmartMenuContainer from 'containers/smart-menu-container'; import HeaderContainer from 'containers/header-container'; import { Layout, Footer } from 'components'; +import Item from 'components/item'; +import styled from 'styled-components'; + +const Div = styled.div` + width: 100%; + display: flex; + justify-content: space-between; +`; const MainPage = (): ReactElement => { const { width } = useWindowSize(); @@ -13,6 +21,28 @@ const MainPage = (): ReactElement => {
+
+ + + + +