From f5a13b67c1d9178e4fff0cd1e39f136a2f7f766e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9B=94=ED=95=98?= Date: Sun, 21 Jul 2024 21:27:39 +0900 Subject: [PATCH 01/40] =?UTF-8?q?refactor(Button):=20=EC=8A=A4=ED=83=80?= =?UTF-8?q?=EC=9D=BC=20=EC=9D=BC=EA=B4=80=EC=84=B1=20=EB=A6=AC=ED=8C=A9?= =?UTF-8?q?=ED=86=A0=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/Button/Button.stories.tsx | 18 +-- frontend/src/components/Button/Button.tsx | 19 ++- frontend/src/components/Button/style.ts | 131 ++++++++++-------- frontend/src/pages/UploadsTemplate.tsx | 2 +- 4 files changed, 89 insertions(+), 81 deletions(-) diff --git a/frontend/src/components/Button/Button.stories.tsx b/frontend/src/components/Button/Button.stories.tsx index edc636eb1..0bb51e7df 100644 --- a/frontend/src/components/Button/Button.stories.tsx +++ b/frontend/src/components/Button/Button.stories.tsx @@ -27,36 +27,36 @@ const ButtonGroup = ({ disabled }: { disabled: boolean }) => (
-
-
-
-
-
-
@@ -75,13 +75,13 @@ export const Disabled: Story = { export const CustomSized: Story = { render: () => (
- - -

(text 타입 버튼의 사이즈는 텍스트 길이에 비례합니다.)

diff --git a/frontend/src/components/Button/Button.tsx b/frontend/src/components/Button/Button.tsx index 4bc332fae..0c6c192aa 100644 --- a/frontend/src/components/Button/Button.tsx +++ b/frontend/src/components/Button/Button.tsx @@ -1,23 +1,20 @@ import React from 'react'; -import { buttonStyle, stylesBySize, stylesByType, textTypeStyle } from './style'; +import * as S from './style'; -interface Props { +export interface Props { children: React.ReactNode; onClick?: (e?: React.MouseEvent) => void; - type?: 'default' | 'outlined' | 'text'; + type?: 'button' | 'submit' | 'reset'; + variant?: 'default' | 'outlined' | 'text'; size?: 'small' | 'medium'; - width?: string | number; + width?: string; disabled?: boolean; } -const Button = ({ children, onClick, type = 'default', size = 'medium', width, disabled = false }: Props) => ( - + ); export default Button; diff --git a/frontend/src/components/Button/style.ts b/frontend/src/components/Button/style.ts index 882b9a059..cbbd30e90 100644 --- a/frontend/src/components/Button/style.ts +++ b/frontend/src/components/Button/style.ts @@ -1,66 +1,77 @@ import { css } from '@emotion/react'; +import styled from '@emotion/styled'; +import { Props } from './Button'; -export const buttonStyle = css({ - cursor: 'pointer', - borderRadius: '8px', - textAlign: 'center', - padding: '0.8rem 1.6rem', - display: 'flex', - alignItems: 'center', - gap: '0.8rem', - - '&:not(:disabled):focus': { - outline: 'none', - }, - - '&:not(:disabled):hover': { - opacity: 0.8, - }, - - '&:not(:disabled):active': { - opacity: 0.6, - }, - - '&:disabled': { - cursor: 'default', - opacity: 0.6, - }, -}); - -export const stylesByType = { - default: css({ - background: 'rgb(255 211 105 / 100%)', - color: 'rgb(52 60 72 / 100%)', - }), - outlined: css({ - background: 'none', - border: '0.1rem solid rgb(255 211 105 / 100%)', - color: 'rgb(255 211 105 / 100%)', - }), - text: css({ - background: 'none', - color: 'rgb(255 211 105 / 100%)', - }), +type StyleProps = Pick; + +const variants = { + default: css` + color: rgb(52 60 72 / 100%); + background: rgb(255 211 105 / 100%); + `, + outlined: css` + color: rgb(255 211 105 / 100%); + background: none; + border: 0.1rem solid rgb(255 211 105 / 100%); + `, + text: css` + display: inline-block; + + width: fit-content; + height: fit-content; + padding: 0; + + color: rgb(255 211 105 / 100%); + + background: none; + border: none; + `, }; -export const stylesBySize = { - small: css({ - height: '3rem', - fontWeight: 700, - fontSize: '1.4rem', - }), - medium: css({ - height: '4rem', - fontWeight: 700, - fontSize: '1.8rem', - }), +const sizes = { + small: css` + height: 3rem; + font-size: 1.4rem; + font-weight: 700; + `, + medium: css` + height: 4rem; + font-size: 1.8rem; + font-weight: 700; + `, }; -export const textTypeStyle = css({ - padding: '0', - background: 'none', - border: 'none', - width: 'fit-content', - height: 'fit-content', - display: 'inline-block', -}); +export const Button = styled.button` + cursor: pointer; + + display: flex; + gap: 0.8rem; + align-items: center; + + width: ${({ width }) => width}; + padding: 0.8rem 1.6rem; + + text-align: center; + + border-radius: 8px; + + ${({ size = 'medium' }) => sizes[size]}; + ${({ variant = 'default' }) => variants[variant]}; + + &:disabled { + cursor: default; + opacity: 0.6; + } + + &:not(:disabled):focus { + outline: none; + } + + &:not(:disabled):hover { + opacity: 0.8; + } + + &:not(:disabled):active { + opacity: 0.6; + } +`; diff --git a/frontend/src/pages/UploadsTemplate.tsx b/frontend/src/pages/UploadsTemplate.tsx index 376130e29..b63b81560 100644 --- a/frontend/src/pages/UploadsTemplate.tsx +++ b/frontend/src/pages/UploadsTemplate.tsx @@ -78,7 +78,7 @@ const UploadsTemplate = () => { ))} - - @@ -45,20 +45,20 @@ const Header = () => { onChange={handleInputChange} placeholder='Search...' type='search' - max-width='40rem' + width='40rem' height='4rem' fontSize='1.6rem' /> - - + ); }; diff --git a/frontend/src/components/Header/style.ts b/frontend/src/components/Header/style.ts index 114b218c5..ae17bda95 100644 --- a/frontend/src/components/Header/style.ts +++ b/frontend/src/components/Header/style.ts @@ -14,3 +14,13 @@ export const HeaderContainer = styled.nav` background: #393e46; `; + +export const Logo = styled.img` + width: auto; + height: auto; +`; + +export const NewTemplateIcon = styled.img` + width: auto; + height: auto; +`; From f667658c62b77521427644fc28f78f42df022da3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9B=94=ED=95=98?= Date: Sun, 21 Jul 2024 21:30:23 +0900 Subject: [PATCH 04/40] =?UTF-8?q?refactor(Input):=20=EC=8A=A4=ED=83=80?= =?UTF-8?q?=EC=9D=BC=20=EC=9D=BC=EA=B4=80=EC=84=B1=20=EB=A6=AC=ED=8C=A9?= =?UTF-8?q?=ED=86=A0=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/Input/Input.tsx | 31 +++---- frontend/src/components/Input/style.ts | 106 +++++++++++------------- 2 files changed, 60 insertions(+), 77 deletions(-) diff --git a/frontend/src/components/Input/Input.tsx b/frontend/src/components/Input/Input.tsx index 1b9585f7d..1ee4b6a85 100644 --- a/frontend/src/components/Input/Input.tsx +++ b/frontend/src/components/Input/Input.tsx @@ -1,8 +1,8 @@ import React from 'react'; import searchIcon from '../../assets/images/search.png'; -import { iconStyle, inputStyle, inputWrapperStyle, searchStyle } from './style'; +import * as S from './style'; -interface Props { +export interface Props { value: string; onChange?: (e: React.ChangeEvent) => void; placeholder?: string; @@ -14,29 +14,22 @@ interface Props { fontWeight?: string; } -const Input = ({ - value, - onChange, - placeholder = '', - type = 'text', - disabled = false, - width, - height, - fontSize, - fontWeight, -}: Props) => ( -
- {type === 'search' && search icon} - ( + + {type === 'search' && } + -
+ ); export default Input; diff --git a/frontend/src/components/Input/style.ts b/frontend/src/components/Input/style.ts index fb10af0dc..6e0a0aaf7 100644 --- a/frontend/src/components/Input/style.ts +++ b/frontend/src/components/Input/style.ts @@ -1,58 +1,48 @@ -import { css } from '@emotion/react'; - -export const inputStyle = ({ - width, - height, - fontSize, - fontWeight, -}: { - width?: string; - height?: string; - fontSize?: string; - fontWeight?: string; -}) => - css({ - padding: '1.4rem', - borderRadius: '8px', - border: '0.1rem solid #808080', - background: '#eee', - width, - height, - fontSize: fontSize || 'inherit', - fontWeight: fontWeight || 'normal', - - '&::placeholder': { - color: '#808080', - }, - - '&:focus': { - borderColor: 'black', - }, - - '&:disabled': { - cursor: 'default', - opacity: 0.6, - backgroundColor: '#f5f5f5', - borderColor: '#ddd', - }, - }); - -export const searchStyle = { - paddingLeft: '4.2rem', -}; - -export const inputWrapperStyle = (width?: string) => - css({ - position: 'relative', - display: 'inline-block', - width, - }); - -export const iconStyle = css({ - position: 'absolute', - left: '1.4rem', - top: '50%', - transform: 'translateY(-50%)', - width: '2rem', - height: '2rem', -}); +import styled from '@emotion/styled'; +import type { Props } from './Input'; + +type StyleProps = Pick; + +export const InputWrapper = styled.div` + position: relative; + display: inline-block; +`; + +export const Input = styled.input` + width: ${({ width }) => width}; + height: ${({ height }) => height}; + padding: 1.4rem; + padding-left: ${({ type }) => type === 'search' && '4.2rem;'}; + + font-size: ${({ fontSize }) => fontSize}; + font-weight: ${({ fontWeight }) => fontWeight}; + + background: #eee; + border: 0.1rem solid #808080; + border-radius: 8px; + + &::placeholder { + color: #808080; + } + + &:focus { + border-color: black; + } + + &:disabled { + cursor: default; + opacity: 0.6; + background-color: #f5f5f5; + border-color: #ddd; + } +`; + +export const SearchIcon = styled.img` + position: absolute; + top: 50%; + left: 1.4rem; + transform: translateY(-50%); + + width: 2rem; + height: 2rem; +`; From 55caec377a5ad32249bcfd8d7ce65ef9f98dc06d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9B=94=ED=95=98?= Date: Sun, 21 Jul 2024 21:54:24 +0900 Subject: [PATCH 05/40] =?UTF-8?q?refactor(Text):=20=EC=8A=A4=ED=83=80?= =?UTF-8?q?=EC=9D=BC=20=EC=9D=BC=EA=B4=80=EC=84=B1=20=EB=A6=AC=ED=8C=A9?= =?UTF-8?q?=ED=86=A0=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/Text/Text.tsx | 80 ++++++++++++++++----------- frontend/src/components/Text/style.ts | 20 +++++-- 2 files changed, 63 insertions(+), 37 deletions(-) diff --git a/frontend/src/components/Text/Text.tsx b/frontend/src/components/Text/Text.tsx index e8d4bc23a..41403960c 100644 --- a/frontend/src/components/Text/Text.tsx +++ b/frontend/src/components/Text/Text.tsx @@ -1,37 +1,55 @@ -import { PropsWithChildren } from 'react'; -import { styleText } from './style'; +import { ReactNode } from 'react'; +import * as S from './style'; -export type FontWeight = 'regular' | 'bold'; - -export interface TextProps { - weight?: FontWeight; +export interface Props { + children?: ReactNode; + weight?: 'regular' | 'bold'; color?: string; } -const Text = ({ children }: PropsWithChildren) => {children}; +const Heading = ({ children, weight, color }: Props) => ( + + {children} + +); + +const Title = ({ children, weight, color }: Props) => ( + + {children} + +); + +const SubTitle = ({ children, weight, color }: Props) => ( + + {children} + +); + +const Label = ({ children, weight, color }: Props) => ( + + {children} + +); + +const Body = ({ children, weight, color }: Props) => ( + + {children} + +); + +const Caption = ({ children, weight, color }: Props) => ( + + {children} + +); + +const Text = Object.assign({ + Heading, + Title, + SubTitle, + Label, + Body, + Caption, +}); export default Text; - -Text.Heading = function Heading({ children, weight, color }: PropsWithChildren) { - return
{children}
; -}; - -Text.Title = function Title({ children, weight, color }: PropsWithChildren) { - return

{children}

; -}; - -Text.SubTitle = function SubTitle({ children, weight, color }: PropsWithChildren) { - return

{children}

; -}; - -Text.Label = function Label({ children, weight, color }: PropsWithChildren) { - return {children}; -}; - -Text.Body = function Body({ children, weight, color }: PropsWithChildren) { - return {children}; -}; - -Text.Caption = function Caption({ children, weight, color }: PropsWithChildren) { - return {children}; -}; diff --git a/frontend/src/components/Text/style.ts b/frontend/src/components/Text/style.ts index 591869ca6..df8514007 100644 --- a/frontend/src/components/Text/style.ts +++ b/frontend/src/components/Text/style.ts @@ -1,7 +1,15 @@ -import { FontWeight } from './Text'; +import styled from '@emotion/styled'; +import { Props } from './Text'; -export const styleText = (size: string, weight: FontWeight = 'regular', color: string = '#ffffff') => ({ - color, - fontSize: `${size}rem`, - fontWeight: weight === 'regular' ? 400 : 700, -}); +type StyleProps = Pick & { size: string }; + +const weights = { + regular: 400, + bold: 700, +}; + +export const TextWrapper = styled.span` + font-size: ${({ size }) => `${size}rem`}; + font-weight: ${({ weight = 'regular' }) => weights[weight]}; + color: ${({ color = 'white' }) => color}; +`; From 9dbcec968bdae64ef9619d65435a1ed26f209a59 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9B=94=ED=95=98?= Date: Sun, 21 Jul 2024 21:54:45 +0900 Subject: [PATCH 06/40] =?UTF-8?q?refactor(SelectList):=20=EC=8A=A4?= =?UTF-8?q?=ED=83=80=EC=9D=BC=20=EC=9D=BC=EA=B4=80=EC=84=B1=20=EB=A6=AC?= =?UTF-8?q?=ED=8C=A9=ED=86=A0=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/SelectList/SelectList.tsx | 33 ++++++------------- frontend/src/components/SelectList/style.ts | 23 +++++++++++++ 2 files changed, 33 insertions(+), 23 deletions(-) create mode 100644 frontend/src/components/SelectList/style.ts diff --git a/frontend/src/components/SelectList/SelectList.tsx b/frontend/src/components/SelectList/SelectList.tsx index 75b7494f5..69a6adf12 100644 --- a/frontend/src/components/SelectList/SelectList.tsx +++ b/frontend/src/components/SelectList/SelectList.tsx @@ -1,39 +1,26 @@ -import { ReactNode } from 'react'; -import { Flex } from '../Flex'; +import React, { ReactNode } from 'react'; import { Text } from '../Text'; +import * as S from './style'; interface Props { children?: ReactNode; } -interface SelectListOptionProps { - children?: ReactNode; +export interface OptionProps { + children?: string; isSelected: boolean; onClick?: (event: React.MouseEvent) => void; } -const SelectListContainer = ({ children }: Props) => ( - - - -); +const SelectListBase = ({ children }: Props) => {children}; -const SelectListOption = ({ children, isSelected, onClick }: SelectListOptionProps) => ( - -
- {children} -
- +const SelectListOption = ({ children, isSelected, onClick }: OptionProps) => ( + + {children} + ); -const SelectList = Object.assign(SelectListContainer, { +const SelectList = Object.assign(SelectListBase, { Option: SelectListOption, }); diff --git a/frontend/src/components/SelectList/style.ts b/frontend/src/components/SelectList/style.ts new file mode 100644 index 000000000..cbeaa4497 --- /dev/null +++ b/frontend/src/components/SelectList/style.ts @@ -0,0 +1,23 @@ +import styled from '@emotion/styled'; +import { OptionProps } from './SelectList'; + +type OptionStyleProps = Pick; + +export const SelectListContainer = styled.aside` + position: fixed; + display: flex; + flex-direction: column; +`; + +export const SelectListOption = styled.a` + display: flex; + align-items: center; + + width: 24rem; + padding: 1rem 1.6rem; + + text-decoration: none; + + background-color: ${({ isSelected }) => isSelected || '#FFEBBB'}; + border-radius: 8px; +`; From 3c241e3686a3d9d160d2b77005db44c8a6d5310c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9B=94=ED=95=98?= Date: Sun, 21 Jul 2024 21:55:04 +0900 Subject: [PATCH 07/40] =?UTF-8?q?refactor(SnippetEditor):=20=EC=8A=A4?= =?UTF-8?q?=ED=83=80=EC=9D=BC=20=EC=9D=BC=EA=B4=80=EC=84=B1=20=EB=A6=AC?= =?UTF-8?q?=ED=8C=A9=ED=86=A0=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/SnippetEditor/SnippetEditor.tsx | 11 ++++++++++- frontend/src/components/SnippetEditor/style.ts | 18 ------------------ 2 files changed, 10 insertions(+), 19 deletions(-) diff --git a/frontend/src/components/SnippetEditor/SnippetEditor.tsx b/frontend/src/components/SnippetEditor/SnippetEditor.tsx index 15a108056..ec8d1565c 100644 --- a/frontend/src/components/SnippetEditor/SnippetEditor.tsx +++ b/frontend/src/components/SnippetEditor/SnippetEditor.tsx @@ -2,6 +2,7 @@ import { javascript } from '@codemirror/lang-javascript'; import { vscodeDark } from '@uiw/codemirror-theme-vscode'; import ReactCodeMirror from '@uiw/react-codemirror'; import { ChangeEvent } from 'react'; +import { Input } from '../Input'; import * as S from './style'; interface Props { @@ -22,7 +23,15 @@ const SnippetEditor = ({ fileName, content, onChangeContent, onChangeFileName }: return ( - + Date: Sun, 21 Jul 2024 21:56:13 +0900 Subject: [PATCH 08/40] =?UTF-8?q?refactor(Layout):=20=EC=8A=A4=ED=83=80?= =?UTF-8?q?=EC=9D=BC=20=EC=9D=BC=EA=B4=80=EC=84=B1=20=EB=A6=AC=ED=8C=A9?= =?UTF-8?q?=ED=86=A0=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/Layout/Layout.tsx | 17 +++++++---------- frontend/src/components/Layout/style.ts | 7 +++++++ 2 files changed, 14 insertions(+), 10 deletions(-) create mode 100644 frontend/src/components/Layout/style.ts diff --git a/frontend/src/components/Layout/Layout.tsx b/frontend/src/components/Layout/Layout.tsx index 05e6d2a8f..640558e52 100644 --- a/frontend/src/components/Layout/Layout.tsx +++ b/frontend/src/components/Layout/Layout.tsx @@ -1,15 +1,12 @@ import { Outlet } from 'react-router-dom'; import { Header } from '../Header'; +import * as S from './style'; -const Layout = () => { - const style = { maxWidth: '1024px', margin: 'auto', padding: '0 2rem' }; - - return ( -
-
- -
- ); -}; +const Layout = () => ( + +
+ + +); export default Layout; diff --git a/frontend/src/components/Layout/style.ts b/frontend/src/components/Layout/style.ts new file mode 100644 index 000000000..1f040d1ed --- /dev/null +++ b/frontend/src/components/Layout/style.ts @@ -0,0 +1,7 @@ +import styled from '@emotion/styled'; + +export const LayoutContainer = styled.div` + max-width: 1024px; + margin: auto; + padding: 0 2rem; +`; From 38874ab2d80483938bcb700254a22fda6c94a967 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9B=94=ED=95=98?= Date: Sun, 21 Jul 2024 22:09:52 +0900 Subject: [PATCH 09/40] =?UTF-8?q?refactor(TemplateTitleInput):=20=EC=8A=A4?= =?UTF-8?q?=ED=83=80=EC=9D=BC=20=EC=9D=BC=EA=B4=80=EC=84=B1=20=EB=A6=AC?= =?UTF-8?q?=ED=8C=A9=ED=86=A0=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/TemplateTitleInput/TemplateTitleInput.tsx | 4 ++-- frontend/src/components/TemplateTitleInput/style.ts | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/TemplateTitleInput/TemplateTitleInput.tsx b/frontend/src/components/TemplateTitleInput/TemplateTitleInput.tsx index b2b027033..5deb289c8 100644 --- a/frontend/src/components/TemplateTitleInput/TemplateTitleInput.tsx +++ b/frontend/src/components/TemplateTitleInput/TemplateTitleInput.tsx @@ -7,9 +7,9 @@ interface Props { } const TemplateTitleInput = ({ placeholder, value, onChange }: Props) => ( - + - + ); export default TemplateTitleInput; diff --git a/frontend/src/components/TemplateTitleInput/style.ts b/frontend/src/components/TemplateTitleInput/style.ts index 94395f8d1..0eaa23c4a 100644 --- a/frontend/src/components/TemplateTitleInput/style.ts +++ b/frontend/src/components/TemplateTitleInput/style.ts @@ -21,7 +21,7 @@ export const TemplateTitleInput = styled.input` } `; -export const InputWrapper = styled.div` +export const TemplateTitleInputWrapper = styled.div` position: relative; width: 100%; margin: 20px 0; From 528e36ff756dee4627b77ee62b279fc1f942b309 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9B=94=ED=95=98?= Date: Sun, 21 Jul 2024 22:40:33 +0900 Subject: [PATCH 10/40] =?UTF-8?q?feat(components):=20import=20'type'=20?= =?UTF-8?q?=ED=82=A4=EC=9B=8C=EB=93=9C=20=EC=82=AC=EC=9A=A9=20=EB=B0=8F=20?= =?UTF-8?q?type=20>=20interface=20=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/Button/style.ts | 4 ++-- frontend/src/components/Flex/style.ts | 11 ++++++----- frontend/src/components/Input/style.ts | 2 +- frontend/src/components/SelectList/style.ts | 4 ++-- frontend/src/components/Text/style.ts | 6 ++++-- 5 files changed, 15 insertions(+), 12 deletions(-) diff --git a/frontend/src/components/Button/style.ts b/frontend/src/components/Button/style.ts index cbbd30e90..1b34f4d55 100644 --- a/frontend/src/components/Button/style.ts +++ b/frontend/src/components/Button/style.ts @@ -1,8 +1,8 @@ import { css } from '@emotion/react'; import styled from '@emotion/styled'; -import { Props } from './Button'; +import type { Props } from './Button'; -type StyleProps = Pick; +interface StyleProps extends Pick {} const variants = { default: css` diff --git a/frontend/src/components/Flex/style.ts b/frontend/src/components/Flex/style.ts index b0883442a..fe208c1d2 100644 --- a/frontend/src/components/Flex/style.ts +++ b/frontend/src/components/Flex/style.ts @@ -1,10 +1,11 @@ import styled from '@emotion/styled'; -import { Props } from './Flex'; +import type { Props } from './Flex'; -type StyleProps = Pick< - Props, - 'flex' | 'width' | 'height' | 'margin' | 'padding' | 'align' | 'direction' | 'wrap' | 'gap' | 'justify' ->; +interface StyleProps + extends Pick< + Props, + 'flex' | 'width' | 'height' | 'margin' | 'padding' | 'align' | 'direction' | 'wrap' | 'gap' | 'justify' + > {} export const FlexContainer = styled.div` display: flex; diff --git a/frontend/src/components/Input/style.ts b/frontend/src/components/Input/style.ts index 6e0a0aaf7..d50eed3d2 100644 --- a/frontend/src/components/Input/style.ts +++ b/frontend/src/components/Input/style.ts @@ -1,7 +1,7 @@ import styled from '@emotion/styled'; import type { Props } from './Input'; -type StyleProps = Pick; +interface StyleProps extends Pick {} export const InputWrapper = styled.div` position: relative; diff --git a/frontend/src/components/SelectList/style.ts b/frontend/src/components/SelectList/style.ts index cbeaa4497..6f29370c8 100644 --- a/frontend/src/components/SelectList/style.ts +++ b/frontend/src/components/SelectList/style.ts @@ -1,7 +1,7 @@ import styled from '@emotion/styled'; -import { OptionProps } from './SelectList'; +import type { OptionProps } from './SelectList'; -type OptionStyleProps = Pick; +interface OptionStyleProps extends Pick {} export const SelectListContainer = styled.aside` position: fixed; diff --git a/frontend/src/components/Text/style.ts b/frontend/src/components/Text/style.ts index df8514007..229eaae0b 100644 --- a/frontend/src/components/Text/style.ts +++ b/frontend/src/components/Text/style.ts @@ -1,7 +1,9 @@ import styled from '@emotion/styled'; -import { Props } from './Text'; +import type { Props } from './Text'; -type StyleProps = Pick & { size: string }; +interface StyleProps extends Pick { + size: string; +} const weights = { regular: 400, From 7fcbc53a5ec9fd41192fd5dd95ad131e6ae68ee1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9B=94=ED=95=98?= Date: Sun, 21 Jul 2024 23:12:15 +0900 Subject: [PATCH 11/40] =?UTF-8?q?refactor(SelectList):=20style=20=EA=B8=B0?= =?UTF-8?q?=EB=B3=B8=EA=B0=92=20=EC=84=A0=EC=96=B8=20=EB=B0=A9=EC=8B=9D=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/SelectList/style.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/SelectList/style.ts b/frontend/src/components/SelectList/style.ts index 6f29370c8..047b8cd49 100644 --- a/frontend/src/components/SelectList/style.ts +++ b/frontend/src/components/SelectList/style.ts @@ -18,6 +18,6 @@ export const SelectListOption = styled.a` text-decoration: none; - background-color: ${({ isSelected }) => isSelected || '#FFEBBB'}; + background-color: ${({ isSelected = '#FFEBBB' }) => isSelected}; border-radius: 8px; `; From 9e280b65f52f38740cb7097816167f36762b369e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9B=94=ED=95=98?= Date: Sun, 21 Jul 2024 23:14:57 +0900 Subject: [PATCH 12/40] =?UTF-8?q?refactor(Flex):=20style=20props=20?= =?UTF-8?q?=EA=B0=9D=EC=B2=B4=EB=B6=84=ED=95=B4=ED=95=A0=EB=8B=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/Flex/style.ts | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/frontend/src/components/Flex/style.ts b/frontend/src/components/Flex/style.ts index fe208c1d2..29c96cd25 100644 --- a/frontend/src/components/Flex/style.ts +++ b/frontend/src/components/Flex/style.ts @@ -9,15 +9,15 @@ interface StyleProps export const FlexContainer = styled.div` display: flex; - flex: ${(props) => props.flex}; - flex-flow: ${(props) => props.direction}; - flex-wrap: ${(props) => props.wrap}; + flex: ${({ flex }) => flex}; + flex-flow: ${({ direction }) => direction}; + flex-wrap: ${({ wrap }) => wrap}; gap: ${(props) => props.gap}; - align-items: ${(props) => props.align}; - justify-content: ${(props) => props.justify}; + align-items: ${({ align }) => align}; + justify-content: ${({ justify }) => justify}; - width: ${(props) => props.width}; - height: ${(props) => props.height}; - margin: ${(props) => props.margin}; - padding: ${(props) => props.padding}; + width: ${({ width }) => width}; + height: ${({ height }) => height}; + margin: ${({ margin }) => margin}; + padding: ${({ padding }) => padding}; `; From 8588a3d6536e3e5980a41be54dd602ab05f5c1f3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9B=94=ED=95=98?= Date: Sun, 21 Jul 2024 23:36:28 +0900 Subject: [PATCH 13/40] =?UTF-8?q?fix(Button):=20=EB=B2=84=ED=8A=BC=20?= =?UTF-8?q?=ED=85=8D=EC=8A=A4=ED=8A=B8=20=EC=A4=91=EC=95=99=20=EC=A0=95?= =?UTF-8?q?=EB=A0=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/Button/style.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/src/components/Button/style.ts b/frontend/src/components/Button/style.ts index 1b34f4d55..493da64e2 100644 --- a/frontend/src/components/Button/style.ts +++ b/frontend/src/components/Button/style.ts @@ -47,6 +47,7 @@ export const Button = styled.button` display: flex; gap: 0.8rem; align-items: center; + justify-content: center; width: ${({ width }) => width}; padding: 0.8rem 1.6rem; From caf244d8dc3b78bcd5a67fa387613f91b9e35eeb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9B=94=ED=95=98?= Date: Sun, 21 Jul 2024 23:48:56 +0900 Subject: [PATCH 14/40] =?UTF-8?q?chore:=20stylelint=20=EB=B6=88=ED=95=84?= =?UTF-8?q?=EC=9A=94=ED=95=9C=20=EA=B5=AC=EB=AC=B8=20=EC=A0=9C=EA=B1=B0=20?= =?UTF-8?q?=EB=B0=8F=20shortHand=20=EA=B7=9C=EC=B9=99=20=EB=B9=84=ED=99=9C?= =?UTF-8?q?=EC=84=B1=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/.stylelintrc.json | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/frontend/.stylelintrc.json b/frontend/.stylelintrc.json index adf3e9607..65bbd8726 100644 --- a/frontend/.stylelintrc.json +++ b/frontend/.stylelintrc.json @@ -1,12 +1,7 @@ { "extends": ["stylelint-config-standard", "stylelint-config-clean-order"], + "customSyntax": "@stylelint/postcss-css-in-js", "rules": { - "no-descending-specificity": null - }, - "overrides": [ - { - "files": ["*.ts"], - "customSyntax": "@stylelint/postcss-css-in-js" - } - ] + "declaration-block-no-redundant-longhand-properties": null + } } From 9d3108b355e840b608ed1284cf52421d499cf83f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9B=94=ED=95=98?= Date: Sun, 21 Jul 2024 23:50:56 +0900 Subject: [PATCH 15/40] =?UTF-8?q?refactor(Flex):=20flex-flow=20->=20flex-d?= =?UTF-8?q?irection=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/Flex/style.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/Flex/style.ts b/frontend/src/components/Flex/style.ts index 29c96cd25..c69b05a5c 100644 --- a/frontend/src/components/Flex/style.ts +++ b/frontend/src/components/Flex/style.ts @@ -10,7 +10,7 @@ interface StyleProps export const FlexContainer = styled.div` display: flex; flex: ${({ flex }) => flex}; - flex-flow: ${({ direction }) => direction}; + flex-direction: ${({ direction }) => direction}; flex-wrap: ${({ wrap }) => wrap}; gap: ${(props) => props.gap}; align-items: ${({ align }) => align}; From fedf8e2fa8a2d5088bb208f21909c185fab12914 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9B=94=ED=95=98?= Date: Mon, 22 Jul 2024 13:09:21 +0900 Subject: [PATCH 16/40] =?UTF-8?q?refactor(Flex):=20=EC=8A=A4=ED=83=80?= =?UTF-8?q?=EC=9D=BC=20props=20=EC=A0=84=EB=8B=AC=20=EB=B0=A9=EC=8B=9D=20p?= =?UTF-8?q?rops.gap=20>=20{gap}=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/Flex/style.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/Flex/style.ts b/frontend/src/components/Flex/style.ts index c69b05a5c..28470e90f 100644 --- a/frontend/src/components/Flex/style.ts +++ b/frontend/src/components/Flex/style.ts @@ -12,7 +12,7 @@ export const FlexContainer = styled.div` flex: ${({ flex }) => flex}; flex-direction: ${({ direction }) => direction}; flex-wrap: ${({ wrap }) => wrap}; - gap: ${(props) => props.gap}; + gap: ${({ gap }) => gap}; align-items: ${({ align }) => align}; justify-content: ${({ justify }) => justify}; From c82aa17785d77e3d3eef65e68472d44a8d9fc132 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9B=94=ED=95=98?= Date: Mon, 22 Jul 2024 16:30:26 +0900 Subject: [PATCH 17/40] =?UTF-8?q?fix(SelectList):=20isSelected=20=EC=8A=A4?= =?UTF-8?q?=ED=83=80=EC=9D=BC=20=EA=B5=AC=EB=AC=B8=20=EC=98=A4=EB=A5=98=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/SelectList/style.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/SelectList/style.ts b/frontend/src/components/SelectList/style.ts index 047b8cd49..0993f0813 100644 --- a/frontend/src/components/SelectList/style.ts +++ b/frontend/src/components/SelectList/style.ts @@ -18,6 +18,6 @@ export const SelectListOption = styled.a` text-decoration: none; - background-color: ${({ isSelected = '#FFEBBB' }) => isSelected}; + background-color: ${({ isSelected }) => isSelected && '#FFEBBB'}; border-radius: 8px; `; From 86652b37d22aa22fb6bcdbf01501900a317ca63f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9B=94=ED=95=98?= Date: Mon, 22 Jul 2024 16:34:11 +0900 Subject: [PATCH 18/40] =?UTF-8?q?refactor(Input):=20formNoValidate=20?= =?UTF-8?q?=EC=A1=B0=EA=B1=B4=20=EA=B0=84=EB=9E=B5=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/Input/Input.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/Input/Input.tsx b/frontend/src/components/Input/Input.tsx index 1ee4b6a85..4c9c68c8e 100644 --- a/frontend/src/components/Input/Input.tsx +++ b/frontend/src/components/Input/Input.tsx @@ -27,7 +27,7 @@ const Input = ({ value, onChange, placeholder, type, disabled, width, height, fo height={height} fontSize={fontSize} fontWeight={fontWeight} - formNoValidate={type === 'email' ? true : undefined} + formNoValidate={type === 'email'} /> ); From af6afd9609cc298c32e7b8c08cd1dc67000ba2a1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9B=94=ED=95=98?= Date: Mon, 22 Jul 2024 16:41:07 +0900 Subject: [PATCH 19/40] =?UTF-8?q?refactor(SnippetEditor):=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=B3=80=EA=B2=BD=EC=82=AC?= =?UTF-8?q?=ED=95=AD=20=EB=A1=A4=EB=B0=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/SnippetEditor/SnippetEditor.tsx | 11 +---------- frontend/src/components/SnippetEditor/style.ts | 15 +++++++++++++++ 2 files changed, 16 insertions(+), 10 deletions(-) diff --git a/frontend/src/components/SnippetEditor/SnippetEditor.tsx b/frontend/src/components/SnippetEditor/SnippetEditor.tsx index ec8d1565c..15a108056 100644 --- a/frontend/src/components/SnippetEditor/SnippetEditor.tsx +++ b/frontend/src/components/SnippetEditor/SnippetEditor.tsx @@ -2,7 +2,6 @@ import { javascript } from '@codemirror/lang-javascript'; import { vscodeDark } from '@uiw/codemirror-theme-vscode'; import ReactCodeMirror from '@uiw/react-codemirror'; import { ChangeEvent } from 'react'; -import { Input } from '../Input'; import * as S from './style'; interface Props { @@ -23,15 +22,7 @@ const SnippetEditor = ({ fileName, content, onChangeContent, onChangeFileName }: return ( - + Date: Mon, 22 Jul 2024 16:42:43 +0900 Subject: [PATCH 20/40] =?UTF-8?q?refactor(SelectList):=20Text-color=20isSe?= =?UTF-8?q?lected=20=EC=A1=B0=EA=B1=B4=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/SelectList/SelectList.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/frontend/src/components/SelectList/SelectList.tsx b/frontend/src/components/SelectList/SelectList.tsx index 69a6adf12..f9fc9c15a 100644 --- a/frontend/src/components/SelectList/SelectList.tsx +++ b/frontend/src/components/SelectList/SelectList.tsx @@ -15,8 +15,9 @@ export interface OptionProps { const SelectListBase = ({ children }: Props) => {children}; const SelectListOption = ({ children, isSelected, onClick }: OptionProps) => ( + // TODO: 삼항연산자 왜 씀? - {children} + {children} ); From b103632aec58733d03b15786a1f7b718dec1aa1a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9B=94=ED=95=98?= Date: Tue, 23 Jul 2024 13:10:22 +0900 Subject: [PATCH 21/40] =?UTF-8?q?refactor(components):=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20Props=EC=97=90=EC=84=9C=20?= =?UTF-8?q?=EB=B6=88=ED=95=84=EC=9A=94=ED=95=9C=20optional=20=EC=A0=9C?= =?UTF-8?q?=EA=B1=B0=20=EB=B0=8F=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/Button/Button.stories.tsx | 6 +++--- frontend/src/components/Button/Button.tsx | 4 ++-- frontend/src/components/Header/Header.tsx | 6 +++--- frontend/src/components/SelectList/SelectList.tsx | 4 ++-- frontend/src/pages/UploadsTemplate.tsx | 4 ++-- 5 files changed, 12 insertions(+), 12 deletions(-) diff --git a/frontend/src/components/Button/Button.stories.tsx b/frontend/src/components/Button/Button.stories.tsx index 0bb51e7df..b5cfea7b4 100644 --- a/frontend/src/components/Button/Button.stories.tsx +++ b/frontend/src/components/Button/Button.stories.tsx @@ -75,13 +75,13 @@ export const Disabled: Story = { export const CustomSized: Story = { render: () => (
- - -

(text 타입 버튼의 사이즈는 텍스트 길이에 비례합니다.)

diff --git a/frontend/src/components/Button/Button.tsx b/frontend/src/components/Button/Button.tsx index 0c6c192aa..9b2708ea3 100644 --- a/frontend/src/components/Button/Button.tsx +++ b/frontend/src/components/Button/Button.tsx @@ -5,8 +5,8 @@ export interface Props { children: React.ReactNode; onClick?: (e?: React.MouseEvent) => void; type?: 'button' | 'submit' | 'reset'; - variant?: 'default' | 'outlined' | 'text'; - size?: 'small' | 'medium'; + variant: 'default' | 'outlined' | 'text'; + size: 'small' | 'medium'; width?: string; disabled?: boolean; } diff --git a/frontend/src/components/Header/Header.tsx b/frontend/src/components/Header/Header.tsx index 90bbefbbd..7e45a7935 100644 --- a/frontend/src/components/Header/Header.tsx +++ b/frontend/src/components/Header/Header.tsx @@ -27,14 +27,14 @@ const Header = () => { - - @@ -50,7 +50,7 @@ const Header = () => { fontSize='1.6rem' /> - - From 45cb24e7bd13b7780bc9028b6a78332ed239c912 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9B=94=ED=95=98?= Date: Tue, 23 Jul 2024 13:11:03 +0900 Subject: [PATCH 22/40] =?UTF-8?q?refactor(components):=20styled-components?= =?UTF-8?q?=EC=97=90=EC=84=9C=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8?= =?UTF-8?q?=EC=9D=98=20Props=20=EC=82=AC=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/Button/style.ts | 4 +--- frontend/src/components/Flex/style.ts | 8 +------- frontend/src/components/Input/style.ts | 4 +--- frontend/src/components/SelectList/SelectList.tsx | 12 +++--------- frontend/src/components/SelectList/style.ts | 4 +--- frontend/src/components/SnippetEditor/style.ts | 3 +++ frontend/src/components/Text/style.ts | 8 ++------ 7 files changed, 12 insertions(+), 31 deletions(-) diff --git a/frontend/src/components/Button/style.ts b/frontend/src/components/Button/style.ts index 493da64e2..d766a5bb1 100644 --- a/frontend/src/components/Button/style.ts +++ b/frontend/src/components/Button/style.ts @@ -2,8 +2,6 @@ import { css } from '@emotion/react'; import styled from '@emotion/styled'; import type { Props } from './Button'; -interface StyleProps extends Pick {} - const variants = { default: css` color: rgb(52 60 72 / 100%); @@ -41,7 +39,7 @@ const sizes = { `, }; -export const Button = styled.button` +export const Button = styled.button` cursor: pointer; display: flex; diff --git a/frontend/src/components/Flex/style.ts b/frontend/src/components/Flex/style.ts index 28470e90f..d9f9e0fff 100644 --- a/frontend/src/components/Flex/style.ts +++ b/frontend/src/components/Flex/style.ts @@ -1,13 +1,7 @@ import styled from '@emotion/styled'; import type { Props } from './Flex'; -interface StyleProps - extends Pick< - Props, - 'flex' | 'width' | 'height' | 'margin' | 'padding' | 'align' | 'direction' | 'wrap' | 'gap' | 'justify' - > {} - -export const FlexContainer = styled.div` +export const FlexContainer = styled.div` display: flex; flex: ${({ flex }) => flex}; flex-direction: ${({ direction }) => direction}; diff --git a/frontend/src/components/Input/style.ts b/frontend/src/components/Input/style.ts index d50eed3d2..8e17c2c29 100644 --- a/frontend/src/components/Input/style.ts +++ b/frontend/src/components/Input/style.ts @@ -1,14 +1,12 @@ import styled from '@emotion/styled'; import type { Props } from './Input'; -interface StyleProps extends Pick {} - export const InputWrapper = styled.div` position: relative; display: inline-block; `; -export const Input = styled.input` +export const Input = styled.input` width: ${({ width }) => width}; height: ${({ height }) => height}; padding: 1.4rem; diff --git a/frontend/src/components/SelectList/SelectList.tsx b/frontend/src/components/SelectList/SelectList.tsx index b72a6beb2..06ce9fb49 100644 --- a/frontend/src/components/SelectList/SelectList.tsx +++ b/frontend/src/components/SelectList/SelectList.tsx @@ -1,21 +1,15 @@ -import React, { ReactNode } from 'react'; +import React, { PropsWithChildren } from 'react'; import { Text } from '../Text'; import * as S from './style'; -interface Props { - children?: ReactNode; -} - export interface OptionProps { - children: string; isSelected: boolean; onClick: (event: React.MouseEvent) => void; } -const SelectListBase = ({ children }: Props) => {children}; +const SelectListBase = ({ children }: PropsWithChildren) => {children}; -const SelectListOption = ({ children, isSelected, onClick }: OptionProps) => ( - // TODO: 삼항연산자 왜 씀? +const SelectListOption = ({ children, isSelected, onClick }: PropsWithChildren) => ( {children} diff --git a/frontend/src/components/SelectList/style.ts b/frontend/src/components/SelectList/style.ts index 0993f0813..9b789e623 100644 --- a/frontend/src/components/SelectList/style.ts +++ b/frontend/src/components/SelectList/style.ts @@ -1,15 +1,13 @@ import styled from '@emotion/styled'; import type { OptionProps } from './SelectList'; -interface OptionStyleProps extends Pick {} - export const SelectListContainer = styled.aside` position: fixed; display: flex; flex-direction: column; `; -export const SelectListOption = styled.a` +export const SelectListOption = styled.a` display: flex; align-items: center; diff --git a/frontend/src/components/SnippetEditor/style.ts b/frontend/src/components/SnippetEditor/style.ts index 158c031d5..a3f02adf3 100644 --- a/frontend/src/components/SnippetEditor/style.ts +++ b/frontend/src/components/SnippetEditor/style.ts @@ -11,11 +11,14 @@ export const SnippetFileNameInput = styled.input` width: 100%; height: 3rem; padding: 1rem 1.5rem; + font-size: 14px; font-weight: 700; color: #ffd369; + background-color: #393e46; border: none; + &:focus { border-bottom: 2px solid #00adb5; outline: none; diff --git a/frontend/src/components/Text/style.ts b/frontend/src/components/Text/style.ts index 229eaae0b..a960e59b8 100644 --- a/frontend/src/components/Text/style.ts +++ b/frontend/src/components/Text/style.ts @@ -1,17 +1,13 @@ import styled from '@emotion/styled'; import type { Props } from './Text'; -interface StyleProps extends Pick { - size: string; -} - const weights = { regular: 400, bold: 700, }; -export const TextWrapper = styled.span` - font-size: ${({ size }) => `${size}rem`}; +export const TextWrapper = styled.span` + font-size: ${({ size }) => size}; font-weight: ${({ weight = 'regular' }) => weights[weight]}; color: ${({ color = 'white' }) => color}; `; From 49fc2d3adbf5be9a5acdbc639138b00bad34ea65 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9B=94=ED=95=98?= Date: Tue, 23 Jul 2024 13:20:12 +0900 Subject: [PATCH 23/40] =?UTF-8?q?refactor(components):=20children=20?= =?UTF-8?q?=EB=8C=80=EC=8B=A0=20PropsWithChildren=20=EC=82=AC=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/Button/Button.tsx | 5 ++--- frontend/src/components/Flex/Flex.tsx | 5 ++--- frontend/src/components/Text/Text.tsx | 15 +++++++-------- frontend/src/hooks/useTemplateListQuery.spec.tsx | 3 ++- 4 files changed, 13 insertions(+), 15 deletions(-) diff --git a/frontend/src/components/Button/Button.tsx b/frontend/src/components/Button/Button.tsx index 9b2708ea3..27aea6276 100644 --- a/frontend/src/components/Button/Button.tsx +++ b/frontend/src/components/Button/Button.tsx @@ -1,8 +1,7 @@ -import React from 'react'; +import React, { PropsWithChildren } from 'react'; import * as S from './style'; export interface Props { - children: React.ReactNode; onClick?: (e?: React.MouseEvent) => void; type?: 'button' | 'submit' | 'reset'; variant: 'default' | 'outlined' | 'text'; @@ -11,7 +10,7 @@ export interface Props { disabled?: boolean; } -const Button = ({ children, onClick, type, variant, size, width, disabled }: Props) => ( +const Button = ({ children, onClick, type, variant, size, width, disabled }: PropsWithChildren) => ( {children} diff --git a/frontend/src/components/Flex/Flex.tsx b/frontend/src/components/Flex/Flex.tsx index b42ee1cba..22c6fa698 100644 --- a/frontend/src/components/Flex/Flex.tsx +++ b/frontend/src/components/Flex/Flex.tsx @@ -1,8 +1,7 @@ -import { ReactNode } from 'react'; +import { PropsWithChildren } from 'react'; import * as S from './style'; export interface Props { - children: ReactNode; direction?: 'row' | 'row-reverse' | 'column' | 'column-reverse'; justify?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly'; align?: 'stretch' | 'flex-start' | 'flex-end' | 'center' | 'baseline'; @@ -28,7 +27,7 @@ const Flex = ({ margin, flex, ...props -}: Props) => ( +}: PropsWithChildren) => ( ( +const Heading = ({ children, weight, color }: PropsWithChildren) => ( {children} ); -const Title = ({ children, weight, color }: Props) => ( +const Title = ({ children, weight, color }: PropsWithChildren) => ( {children} ); -const SubTitle = ({ children, weight, color }: Props) => ( +const SubTitle = ({ children, weight, color }: PropsWithChildren) => ( {children} ); -const Label = ({ children, weight, color }: Props) => ( +const Label = ({ children, weight, color }: PropsWithChildren) => ( {children} ); -const Body = ({ children, weight, color }: Props) => ( +const Body = ({ children, weight, color }: PropsWithChildren) => ( {children} ); -const Caption = ({ children, weight, color }: Props) => ( +const Caption = ({ children, weight, color }: PropsWithChildren) => ( {children} diff --git a/frontend/src/hooks/useTemplateListQuery.spec.tsx b/frontend/src/hooks/useTemplateListQuery.spec.tsx index 892f1a044..9d97b7924 100644 --- a/frontend/src/hooks/useTemplateListQuery.spec.tsx +++ b/frontend/src/hooks/useTemplateListQuery.spec.tsx @@ -1,10 +1,11 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import { renderHook, waitFor } from '@testing-library/react'; +import { PropsWithChildren } from 'react'; import { useTemplateListQuery } from './useTemplateListQuery'; const queryClient = new QueryClient(); -const queryWrapper = ({ children }: { children: React.ReactNode }) => ( +const queryWrapper = ({ children }: PropsWithChildren) => ( {children} ); From 6c3c99641b862d1ab2d2fa58165f2a6a710befaa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9B=94=ED=95=98?= Date: Tue, 23 Jul 2024 13:44:55 +0900 Subject: [PATCH 24/40] =?UTF-8?q?refactor(components):=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=A7=A4=EA=B0=9C=EB=B3=80?= =?UTF-8?q?=EC=88=98=EC=97=90=EC=84=9C=20=EA=B8=B0=EB=B3=B8=EA=B0=92=20?= =?UTF-8?q?=EC=A0=95=EC=9D=98=20=EB=B0=8F=20=EC=88=98=EC=A0=95=EC=82=AC?= =?UTF-8?q?=ED=95=AD=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/Button/Button.tsx | 4 ++-- frontend/src/components/Button/style.ts | 4 ++-- frontend/src/components/Header/Header.tsx | 4 +--- .../src/components/TemplateItem/TemplateItem.tsx | 2 +- frontend/src/components/Text/Text.tsx | 16 +++++++++------- frontend/src/components/Text/style.ts | 10 +++++----- frontend/src/pages/Template.tsx | 2 +- 7 files changed, 21 insertions(+), 21 deletions(-) diff --git a/frontend/src/components/Button/Button.tsx b/frontend/src/components/Button/Button.tsx index 27aea6276..15087dd58 100644 --- a/frontend/src/components/Button/Button.tsx +++ b/frontend/src/components/Button/Button.tsx @@ -10,8 +10,8 @@ export interface Props { disabled?: boolean; } -const Button = ({ children, onClick, type, variant, size, width, disabled }: PropsWithChildren) => ( - +const Button = ({ children, onClick, type = 'button', variant, size, width, disabled }: PropsWithChildren) => ( + {children} ); diff --git a/frontend/src/components/Button/style.ts b/frontend/src/components/Button/style.ts index d766a5bb1..101ed43b0 100644 --- a/frontend/src/components/Button/style.ts +++ b/frontend/src/components/Button/style.ts @@ -54,8 +54,8 @@ export const Button = styled.button` border-radius: 8px; - ${({ size = 'medium' }) => sizes[size]}; - ${({ variant = 'default' }) => variants[variant]}; + ${({ size }) => sizes[size]}; + ${({ variant }) => variants[variant]}; &:disabled { cursor: default; diff --git a/frontend/src/components/Header/Header.tsx b/frontend/src/components/Header/Header.tsx index 7e45a7935..2a901a4ae 100644 --- a/frontend/src/components/Header/Header.tsx +++ b/frontend/src/components/Header/Header.tsx @@ -20,9 +20,7 @@ const Header = () => { - - CodeZap - + CodeZap diff --git a/frontend/src/components/TemplateItem/TemplateItem.tsx b/frontend/src/components/TemplateItem/TemplateItem.tsx index 53e3cb047..e413b587f 100644 --- a/frontend/src/components/TemplateItem/TemplateItem.tsx +++ b/frontend/src/components/TemplateItem/TemplateItem.tsx @@ -15,7 +15,7 @@ const TemplateItem = ({ item }: Props) => { return ( - {title} + {title} {member.nickname} diff --git a/frontend/src/components/Text/Text.tsx b/frontend/src/components/Text/Text.tsx index a7ef2d935..3f2971a54 100644 --- a/frontend/src/components/Text/Text.tsx +++ b/frontend/src/components/Text/Text.tsx @@ -1,42 +1,44 @@ import { PropsWithChildren } from 'react'; import * as S from './style'; +export type TextWeight = 'regular' | 'bold'; + export interface Props { - weight?: 'regular' | 'bold'; + weight?: TextWeight; color?: string; } -const Heading = ({ children, weight, color }: PropsWithChildren) => ( +const Heading = ({ children, weight = 'bold', color }: PropsWithChildren) => ( {children} ); -const Title = ({ children, weight, color }: PropsWithChildren) => ( +const Title = ({ children, weight = 'bold', color }: PropsWithChildren) => ( {children} ); -const SubTitle = ({ children, weight, color }: PropsWithChildren) => ( +const SubTitle = ({ children, weight = 'bold', color }: PropsWithChildren) => ( {children} ); -const Label = ({ children, weight, color }: PropsWithChildren) => ( +const Label = ({ children, weight = 'bold', color }: PropsWithChildren) => ( {children} ); -const Body = ({ children, weight, color }: PropsWithChildren) => ( +const Body = ({ children, weight = 'regular', color }: PropsWithChildren) => ( {children} ); -const Caption = ({ children, weight, color }: PropsWithChildren) => ( +const Caption = ({ children, weight = 'regular', color }: PropsWithChildren) => ( {children} diff --git a/frontend/src/components/Text/style.ts b/frontend/src/components/Text/style.ts index a960e59b8..f147d23fa 100644 --- a/frontend/src/components/Text/style.ts +++ b/frontend/src/components/Text/style.ts @@ -1,13 +1,13 @@ import styled from '@emotion/styled'; -import type { Props } from './Text'; +import type { Props, TextWeight } from './Text'; -const weights = { +const weights: Record = { regular: 400, bold: 700, }; -export const TextWrapper = styled.span` +export const TextWrapper = styled.span` font-size: ${({ size }) => size}; - font-weight: ${({ weight = 'regular' }) => weights[weight]}; - color: ${({ color = 'white' }) => color}; + font-weight: ${({ weight }) => weights[weight]}; + color: ${({ color }) => color}; `; diff --git a/frontend/src/pages/Template.tsx b/frontend/src/pages/Template.tsx index 237066898..d9686fc61 100644 --- a/frontend/src/pages/Template.tsx +++ b/frontend/src/pages/Template.tsx @@ -35,7 +35,7 @@ const Template = () => { <> - {template.title} + {template.title} {template.member.nickname} From 4ea2c246c0b2172084c5dd17a91d703b7d1bf1d5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9B=94=ED=95=98?= Date: Tue, 23 Jul 2024 13:57:46 +0900 Subject: [PATCH 25/40] =?UTF-8?q?refactor(Text):=20Text=20=EC=84=9C?= =?UTF-8?q?=EB=B8=8C=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20assign=20?= =?UTF-8?q?=EB=B0=A9=EC=8B=9D=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit DX(코드 추천)를 위하여 변경 --- frontend/src/components/Text/Text.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/Text/Text.tsx b/frontend/src/components/Text/Text.tsx index 3f2971a54..ded3fc832 100644 --- a/frontend/src/components/Text/Text.tsx +++ b/frontend/src/components/Text/Text.tsx @@ -44,13 +44,13 @@ const Caption = ({ children, weight = 'regular', color }: PropsWithChildren ); -const Text = Object.assign({ +const Text = { Heading, Title, SubTitle, Label, Body, Caption, -}); +}; export default Text; From 0a9c4ac537102b724c8d64287de0278a9fa5b395 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9B=94=ED=95=98?= Date: Tue, 23 Jul 2024 13:58:36 +0900 Subject: [PATCH 26/40] =?UTF-8?q?fix(SelectList):=20Text=20color=20?= =?UTF-8?q?=EA=B0=92=20=EC=98=A4=EB=A5=98=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/SelectList/SelectList.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/SelectList/SelectList.tsx b/frontend/src/components/SelectList/SelectList.tsx index 06ce9fb49..7e4a00d03 100644 --- a/frontend/src/components/SelectList/SelectList.tsx +++ b/frontend/src/components/SelectList/SelectList.tsx @@ -11,7 +11,7 @@ const SelectListBase = ({ children }: PropsWithChildren) => ) => ( - {children} + {children} ); From 968bbb97f0768a7085f0b20728611251ec1bf401 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9B=94=ED=95=98?= Date: Tue, 23 Jul 2024 14:07:33 +0900 Subject: [PATCH 27/40] =?UTF-8?q?refactor(Text):=20Text=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20prop=20color=20Optional=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 --- frontend/src/components/Header/Header.tsx | 4 +++- frontend/src/components/TemplateItem/TemplateItem.tsx | 6 +++--- frontend/src/components/Text/Text.tsx | 2 +- frontend/src/pages/Template.tsx | 2 +- frontend/src/pages/TemplateList.tsx | 4 +++- 5 files changed, 11 insertions(+), 7 deletions(-) diff --git a/frontend/src/components/Header/Header.tsx b/frontend/src/components/Header/Header.tsx index 2a901a4ae..091de3b95 100644 --- a/frontend/src/components/Header/Header.tsx +++ b/frontend/src/components/Header/Header.tsx @@ -33,7 +33,9 @@ const Header = () => { diff --git a/frontend/src/components/TemplateItem/TemplateItem.tsx b/frontend/src/components/TemplateItem/TemplateItem.tsx index e413b587f..1e85a46c0 100644 --- a/frontend/src/components/TemplateItem/TemplateItem.tsx +++ b/frontend/src/components/TemplateItem/TemplateItem.tsx @@ -15,8 +15,8 @@ const TemplateItem = ({ item }: Props) => { return ( - {title} - {member.nickname} + {title} + {member.nickname} { {representative_snippet.content_summary} - + {year}년 {month}월 {day}일 diff --git a/frontend/src/components/Text/Text.tsx b/frontend/src/components/Text/Text.tsx index ded3fc832..a46d37795 100644 --- a/frontend/src/components/Text/Text.tsx +++ b/frontend/src/components/Text/Text.tsx @@ -5,7 +5,7 @@ export type TextWeight = 'regular' | 'bold'; export interface Props { weight?: TextWeight; - color?: string; + color: string; } const Heading = ({ children, weight = 'bold', color }: PropsWithChildren) => ( diff --git a/frontend/src/pages/Template.tsx b/frontend/src/pages/Template.tsx index d9686fc61..5dc950511 100644 --- a/frontend/src/pages/Template.tsx +++ b/frontend/src/pages/Template.tsx @@ -35,7 +35,7 @@ const Template = () => { <> - {template.title} + {template.title} {template.member.nickname} diff --git a/frontend/src/pages/TemplateList.tsx b/frontend/src/pages/TemplateList.tsx index b5aece47e..76e6bbdca 100644 --- a/frontend/src/pages/TemplateList.tsx +++ b/frontend/src/pages/TemplateList.tsx @@ -19,7 +19,9 @@ const TemplateList = () => { return ( - {list.length} Results + + {list.length} Results + {list.map((item) => ( From 06b190909db41f236eb7bf97e94f435b03abe090 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9B=94=ED=95=98?= Date: Tue, 23 Jul 2024 14:32:37 +0900 Subject: [PATCH 28/40] =?UTF-8?q?fix(Text):=20TextWrapper=20'size'=20?= =?UTF-8?q?=EB=8B=A8=EC=9C=84=20'rem'=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/Text/Text.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/frontend/src/components/Text/Text.tsx b/frontend/src/components/Text/Text.tsx index a46d37795..643e58dc8 100644 --- a/frontend/src/components/Text/Text.tsx +++ b/frontend/src/components/Text/Text.tsx @@ -9,37 +9,37 @@ export interface Props { } const Heading = ({ children, weight = 'bold', color }: PropsWithChildren) => ( - + {children} ); const Title = ({ children, weight = 'bold', color }: PropsWithChildren) => ( - + {children} ); const SubTitle = ({ children, weight = 'bold', color }: PropsWithChildren) => ( - + {children} ); const Label = ({ children, weight = 'bold', color }: PropsWithChildren) => ( - + {children} ); const Body = ({ children, weight = 'regular', color }: PropsWithChildren) => ( - + {children} ); const Caption = ({ children, weight = 'regular', color }: PropsWithChildren) => ( - + {children} ); From 68f01171a97dc80ab903ee16039abf220edd01fa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9B=94=ED=95=98?= Date: Tue, 23 Jul 2024 14:34:22 +0900 Subject: [PATCH 29/40] =?UTF-8?q?fix(Flex):=20=ED=83=80=EC=9E=85=20?= =?UTF-8?q?=ED=99=95=EC=9E=A5=20(HTMLAttributes)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/Flex/Flex.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/Flex/Flex.tsx b/frontend/src/components/Flex/Flex.tsx index 22c6fa698..3394ee8be 100644 --- a/frontend/src/components/Flex/Flex.tsx +++ b/frontend/src/components/Flex/Flex.tsx @@ -1,7 +1,7 @@ import { PropsWithChildren } from 'react'; import * as S from './style'; -export interface Props { +export interface Props extends React.HTMLAttributes { direction?: 'row' | 'row-reverse' | 'column' | 'column-reverse'; justify?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly'; align?: 'stretch' | 'flex-start' | 'flex-end' | 'center' | 'baseline'; From 8285a33225a161fee0d58678b7f0a153ac344749 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9B=94=ED=95=98?= Date: Tue, 23 Jul 2024 14:37:19 +0900 Subject: [PATCH 30/40] =?UTF-8?q?refactor(components):=20import=20'React'?= =?UTF-8?q?=20=EC=83=9D=EB=9E=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/Button/Button.tsx | 2 +- frontend/src/components/Header/Header.tsx | 2 +- frontend/src/components/Input/Input.tsx | 1 - frontend/src/components/SelectList/SelectList.tsx | 2 +- frontend/src/pages/Template.tsx | 2 +- 5 files changed, 4 insertions(+), 5 deletions(-) diff --git a/frontend/src/components/Button/Button.tsx b/frontend/src/components/Button/Button.tsx index 15087dd58..02db9d48f 100644 --- a/frontend/src/components/Button/Button.tsx +++ b/frontend/src/components/Button/Button.tsx @@ -1,4 +1,4 @@ -import React, { PropsWithChildren } from 'react'; +import { PropsWithChildren } from 'react'; import * as S from './style'; export interface Props { diff --git a/frontend/src/components/Header/Header.tsx b/frontend/src/components/Header/Header.tsx index 091de3b95..c6c024290 100644 --- a/frontend/src/components/Header/Header.tsx +++ b/frontend/src/components/Header/Header.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import { useState } from 'react'; import { Link } from 'react-router-dom'; import logoIcon from '../../assets/images/logo.png'; import newTemplateIcon from '../../assets/images/newTemplate.png'; diff --git a/frontend/src/components/Input/Input.tsx b/frontend/src/components/Input/Input.tsx index 4c9c68c8e..0ec62cc1e 100644 --- a/frontend/src/components/Input/Input.tsx +++ b/frontend/src/components/Input/Input.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import searchIcon from '../../assets/images/search.png'; import * as S from './style'; diff --git a/frontend/src/components/SelectList/SelectList.tsx b/frontend/src/components/SelectList/SelectList.tsx index 7e4a00d03..e5b3ab211 100644 --- a/frontend/src/components/SelectList/SelectList.tsx +++ b/frontend/src/components/SelectList/SelectList.tsx @@ -1,4 +1,4 @@ -import React, { PropsWithChildren } from 'react'; +import { PropsWithChildren } from 'react'; import { Text } from '../Text'; import * as S from './style'; diff --git a/frontend/src/pages/Template.tsx b/frontend/src/pages/Template.tsx index 5dc950511..4f506e321 100644 --- a/frontend/src/pages/Template.tsx +++ b/frontend/src/pages/Template.tsx @@ -1,4 +1,4 @@ -import React, { useRef, useState } from 'react'; +import { useRef, useState } from 'react'; import { useParams } from 'react-router-dom'; import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'; import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism'; From 290db3d405a5e5c4e54e5105ade6d9fde5ef843e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9B=94=ED=95=98?= Date: Tue, 23 Jul 2024 14:45:49 +0900 Subject: [PATCH 31/40] =?UTF-8?q?refactor(Header):=20=EB=B6=88=ED=95=84?= =?UTF-8?q?=EC=9A=94=ED=95=9C=20styled-component=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/Header/Header.tsx | 4 ++-- frontend/src/components/Header/style.ts | 10 ---------- 2 files changed, 2 insertions(+), 12 deletions(-) diff --git a/frontend/src/components/Header/Header.tsx b/frontend/src/components/Header/Header.tsx index c6c024290..18d3f53f8 100644 --- a/frontend/src/components/Header/Header.tsx +++ b/frontend/src/components/Header/Header.tsx @@ -19,7 +19,7 @@ const Header = () => { - + logo CodeZap @@ -51,7 +51,7 @@ const Header = () => { />
-
@@ -75,7 +75,7 @@ export const Disabled: Story = { export const CustomSized: Story = { render: () => (
- - From a0c3643724021ff31fa946f05efdf68727eb7b54 Mon Sep 17 00:00:00 2001 From: jayming66 Date: Tue, 23 Jul 2024 18:10:48 +0900 Subject: [PATCH 34/40] =?UTF-8?q?refactor(Button):=20Props=20=ED=83=80?= =?UTF-8?q?=EC=9E=85=20=EB=B3=80=EA=B2=BD,=20=EC=86=8D=EC=84=B1=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/Button/Button.stories.tsx | 17 ----------------- frontend/src/components/Button/Button.tsx | 12 ++++-------- frontend/src/components/Button/style.ts | 7 ++++++- frontend/src/components/Header/Header.tsx | 6 +++--- 4 files changed, 13 insertions(+), 29 deletions(-) diff --git a/frontend/src/components/Button/Button.stories.tsx b/frontend/src/components/Button/Button.stories.tsx index 33d480cac..cd73af1b5 100644 --- a/frontend/src/components/Button/Button.stories.tsx +++ b/frontend/src/components/Button/Button.stories.tsx @@ -71,20 +71,3 @@ export const Enabled: Story = { export const Disabled: Story = { render: () => , }; - -export const CustomSized: Story = { - render: () => ( -
- - - -

(text 타입 버튼의 사이즈는 텍스트 길이에 비례합니다.)

-
- ), -}; diff --git a/frontend/src/components/Button/Button.tsx b/frontend/src/components/Button/Button.tsx index bef938fd2..09b522fed 100644 --- a/frontend/src/components/Button/Button.tsx +++ b/frontend/src/components/Button/Button.tsx @@ -1,17 +1,13 @@ -import { PropsWithChildren } from 'react'; +import { ButtonHTMLAttributes } from 'react'; import * as S from './style'; -export interface Props { - onClick?: (e?: React.MouseEvent) => void; - type?: 'button' | 'submit' | 'reset'; +export interface Props extends ButtonHTMLAttributes { variant: 'contained' | 'outlined' | 'text'; size: 'small' | 'medium'; - width?: string; - disabled?: boolean; } -const Button = ({ children, onClick, type = 'button', variant, size, width, disabled }: PropsWithChildren) => ( - +const Button = ({ children, onClick, variant, size, ...rest }: Props) => ( + {children} ); diff --git a/frontend/src/components/Button/style.ts b/frontend/src/components/Button/style.ts index 0c651bbf8..5cd26ef41 100644 --- a/frontend/src/components/Button/style.ts +++ b/frontend/src/components/Button/style.ts @@ -37,6 +37,12 @@ const sizes = { font-size: 1.8rem; font-weight: 700; `, + filled: css` + width: 100%; + height: 4rem; + font-size: 1.8rem; + font-weight: 700%; + `, }; export const Button = styled.button` @@ -47,7 +53,6 @@ export const Button = styled.button` align-items: center; justify-content: center; - width: ${({ width }) => width}; padding: 0.8rem 1.6rem; text-align: center; diff --git a/frontend/src/components/Header/Header.tsx b/frontend/src/components/Header/Header.tsx index 9497b6cff..8bc1fc517 100644 --- a/frontend/src/components/Header/Header.tsx +++ b/frontend/src/components/Header/Header.tsx @@ -1,12 +1,12 @@ import { useState } from 'react'; import { Link } from 'react-router-dom'; -import logoIcon from '@/assets/images/logo.png'; -import newTemplateIcon from '@/assets/images/newTemplate.png'; import { Button } from '../Button'; import { Flex } from '../Flex'; import { Input } from '../Input'; import { Text } from '../Text'; import * as S from './style'; +import logoIcon from '@/assets/images/logo.png'; +import newTemplateIcon from '@/assets/images/newTemplate.png'; const Header = () => { const [searchValue, setSearchValue] = useState(''); @@ -50,7 +50,7 @@ const Header = () => { fontSize='1.6rem' /> -