From 542209bc64ce9660ed675a183263ae244ff0dd16 Mon Sep 17 00:00:00 2001 From: jayming66 Date: Thu, 1 Aug 2024 11:59:06 +0900 Subject: [PATCH 1/3] =?UTF-8?q?refactor(Layout):=20=ED=97=A4=EB=8D=94?= =?UTF-8?q?=EC=9D=98=20=EB=86=92=EC=9D=B4=EB=A7=8C=ED=81=BC=20=EB=A0=88?= =?UTF-8?q?=EC=9D=B4=EC=95=84=EC=9B=83=EC=97=90=EC=84=9C=20padding=20top?= =?UTF-8?q?=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/Layout/{style.ts => Layout.style.ts} | 7 +++++++ frontend/src/components/Layout/Layout.tsx | 6 ++++-- 2 files changed, 11 insertions(+), 2 deletions(-) rename frontend/src/components/Layout/{style.ts => Layout.style.ts} (59%) diff --git a/frontend/src/components/Layout/style.ts b/frontend/src/components/Layout/Layout.style.ts similarity index 59% rename from frontend/src/components/Layout/style.ts rename to frontend/src/components/Layout/Layout.style.ts index fceb3ab4e..19228dd1d 100644 --- a/frontend/src/components/Layout/style.ts +++ b/frontend/src/components/Layout/Layout.style.ts @@ -1,8 +1,15 @@ import styled from '@emotion/styled'; export const LayoutContainer = styled.div` + --header-height: 4rem; + max-width: 86rem; margin: auto; margin-bottom: 3rem; padding: 0 3rem; `; + +export const Wrapper = styled.div` + flex: 1; + padding-top: var(--header-height); +`; diff --git a/frontend/src/components/Layout/Layout.tsx b/frontend/src/components/Layout/Layout.tsx index bdc2e0ed8..e5f99b131 100644 --- a/frontend/src/components/Layout/Layout.tsx +++ b/frontend/src/components/Layout/Layout.tsx @@ -1,12 +1,14 @@ import { Outlet } from 'react-router-dom'; import { Header } from '@/components'; -import * as S from './style'; +import * as S from './Layout.style'; const Layout = () => (
- + + + ); From fcc19f95b4995a03004f6c7df6a975d4c9f48cfd Mon Sep 17 00:00:00 2001 From: jayming66 Date: Thu, 1 Aug 2024 12:02:01 +0900 Subject: [PATCH 2/3] =?UTF-8?q?refactor(Input):=20Input=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=EC=97=90=20Label=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80,=20Input.style=EC=9D=98=20rem=20=EC=88=98=EC=B9=98=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 --- .../Input/{style.ts => Input.style.ts} | 48 +++++++++++-------- frontend/src/components/Input/Input.tsx | 31 +++++++++--- 2 files changed, 52 insertions(+), 27 deletions(-) rename frontend/src/components/Input/{style.ts => Input.style.ts} (69%) diff --git a/frontend/src/components/Input/style.ts b/frontend/src/components/Input/Input.style.ts similarity index 69% rename from frontend/src/components/Input/style.ts rename to frontend/src/components/Input/Input.style.ts index a9da6ff97..8bfe7d91c 100644 --- a/frontend/src/components/Input/style.ts +++ b/frontend/src/components/Input/Input.style.ts @@ -5,26 +5,26 @@ import type { BaseProps, TextFieldProps } from './Input'; const sizes = { small: css` - gap: 0.8rem; + gap: 0.5rem; - height: 3.2rem; - padding: 1rem 1.2rem; + height: 2rem; + padding: 0.625rem 0.75rem; - font-size: 1.2rem; + font-size: 0.75rem; line-height: 100%; - border-radius: '0.8rem'; + border-radius: 8px; `, medium: css` - gap: 1.2rem; + gap: 0.75rem; - height: 4.8rem; - padding: 1.6rem; + height: 3rem; + padding: 1rem; - font-size: 1.6rem; - line-height: '100%'; + font-size: 1rem; + line-height: 100%; - border-radius: 1.2rem; + border-radius: 12px; `, }; @@ -34,17 +34,18 @@ const variants = { `, outlined: css` background: none; - border: 0.1rem solid #808080; + border: 1px solid #808080; `, text: css` background: none; `, }; -export const Wrapper = styled.div` +export const Container = styled.div` display: flex; flex-direction: column; - gap: 8px; + gap: 0.5rem; + width: 100%; `; export const Base = styled.div` @@ -56,7 +57,7 @@ export const Base = styled.div` ${({ isValid }) => isValid === false && css` - border: 0.1rem solid red; + border: 1px solid red; `}; /* for Adornment size */ @@ -64,15 +65,15 @@ export const Base = styled.div` ${({ size }) => size === 'small' && css` - width: 1.2rem; - height: 1.2rem; + width: 0.75rem; + height: 0.75rem; `} ${({ size }) => size === 'medium' && css` - width: 1.6rem; - height: 1.6rem; + width: 1rem; + height: 1rem; `} } `; @@ -102,11 +103,18 @@ export const TextField = styled.input` } `; +export const Label = styled.label` + font-size: 1rem; + line-height: 100%; +`; + export const Adornment = styled.div` display: flex; `; export const HelperText = styled.span` - margin-left: 8px; + height: 1rem; + margin-left: 0.5rem; + font-size: 1rem; color: red; `; diff --git a/frontend/src/components/Input/Input.tsx b/frontend/src/components/Input/Input.tsx index 1c268fd47..043607d0e 100644 --- a/frontend/src/components/Input/Input.tsx +++ b/frontend/src/components/Input/Input.tsx @@ -1,6 +1,14 @@ -import { Children, HTMLAttributes, InputHTMLAttributes, isValidElement, PropsWithChildren, ReactNode } from 'react'; +import { + Children, + HTMLAttributes, + InputHTMLAttributes, + isValidElement, + LabelHTMLAttributes, + PropsWithChildren, + ReactNode, +} from 'react'; -import * as S from './style'; +import * as S from './Input.style'; export interface BaseProps extends HTMLAttributes { size?: 'small' | 'medium'; @@ -10,6 +18,9 @@ export interface BaseProps extends HTMLAttributes { export interface TextFieldProps extends InputHTMLAttributes { inputSize?: 'small' | 'medium'; } + +export interface LabelProps extends LabelHTMLAttributes {} + export interface AdornmentProps extends HTMLAttributes {} export interface HelperTextProps extends HTMLAttributes {} @@ -20,14 +31,16 @@ const getChildOfType = (children: ReactNode, type: unknown) => { return childrenArray.find((child) => isValidElement(child) && child.type === type); }; -const getChildrenWithoutType = (children: ReactNode, type: unknown) => { +const getChildrenWithoutTypes = (children: ReactNode, types: unknown[]) => { const childrenArray = Children.toArray(children); - return childrenArray.filter((child) => !(isValidElement(child) && child.type === type)); + return childrenArray.filter((child) => !(isValidElement(child) && types.includes(child.type))); }; const TextField = ({ ...rests }: TextFieldProps) => ; +const Label = ({ children, ...rests }: PropsWithChildren) => {children}; + const Adornment = ({ children, ...rests }: PropsWithChildren) => ( {children} ); @@ -37,6 +50,7 @@ const HelperText = ({ children, ...rests }: PropsWithChildren) ); const HelperTextType = ().type; +const LabelType = (