From be94fb0a29238ecb866f39cce72ce05fa65a3345 Mon Sep 17 00:00:00 2001 From: constantly-dev Date: Mon, 13 Jan 2025 23:49:51 +0900 Subject: [PATCH 1/6] =?UTF-8?q?feat:=20Input=20=EA=B3=B5=ED=86=B5=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84=20(#3?= =?UTF-8?q?5)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Input/index.css.ts | 53 +++++++++++++++++++++++++++++++ src/components/Input/index.tsx | 18 +++++++++++ 2 files changed, 71 insertions(+) create mode 100644 src/components/Input/index.css.ts create mode 100644 src/components/Input/index.tsx diff --git a/src/components/Input/index.css.ts b/src/components/Input/index.css.ts new file mode 100644 index 0000000..386cba7 --- /dev/null +++ b/src/components/Input/index.css.ts @@ -0,0 +1,53 @@ +import { style } from '@vanilla-extract/css'; +import { recipe } from '@vanilla-extract/recipes'; +import { vars } from '@/styles/theme.css'; + +export const containerStyle = style({ + width: '100%', + display: 'flex', + flexDirection: 'column', + gap: '0.8rem', +}); + +export const inputStyle = recipe({ + base: { + width: '100%', + height: '5.2rem', + border: 'none', + borderRadius: '0.4rem', + padding: '1.4rem 1.8rem', + ...vars.fonts.b5, + backgroundColor: vars.colors.gray01, + + '::placeholder': { + color: vars.colors.gray05, + }, + }, + variants: { + isError: { + true: { + border: `1px solid ${vars.colors.alert03}`, + }, + false: { + border: `1px solid ${vars.colors.main04}`, + }, + }, + }, +}); + +export const helperTextStyle = recipe({ + base: { + ...vars.fonts.b6, + color: vars.colors.gray05, + }, + variants: { + isError: { + true: { + color: vars.colors.alert03, + }, + false: { + color: vars.colors.main04, + }, + }, + }, +}); diff --git a/src/components/Input/index.tsx b/src/components/Input/index.tsx new file mode 100644 index 0000000..4b8e24e --- /dev/null +++ b/src/components/Input/index.tsx @@ -0,0 +1,18 @@ +import { InputHTMLAttributes } from 'react'; +import * as style from './index.css'; + +interface InputProps extends InputHTMLAttributes { + isError?: boolean; + helperText?: string; +} + +const Input = ({ isError, helperText }: InputProps) => { + return ( +
+ + {helperText &&

{helperText}

} +
+ ); +}; + +export default Input; From a5d9041e2a72c37e9d84f28e2ac3aac7f8f52687 Mon Sep 17 00:00:00 2001 From: constantly-dev Date: Tue, 14 Jan 2025 17:39:36 +0900 Subject: [PATCH 2/6] =?UTF-8?q?feat:=20input=20ref=20=EC=A7=80=EC=A0=95=20?= =?UTF-8?q?(#35)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Input/index.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/Input/index.tsx b/src/components/Input/index.tsx index 4b8e24e..34e6243 100644 --- a/src/components/Input/index.tsx +++ b/src/components/Input/index.tsx @@ -1,4 +1,4 @@ -import { InputHTMLAttributes } from 'react'; +import { ForwardedRef, forwardRef, InputHTMLAttributes } from 'react'; import * as style from './index.css'; interface InputProps extends InputHTMLAttributes { @@ -6,13 +6,13 @@ interface InputProps extends InputHTMLAttributes { helperText?: string; } -const Input = ({ isError, helperText }: InputProps) => { +const Input = ({ isError, helperText, ...props }: InputProps, ref: ForwardedRef) => { return (
- + {helperText &&

{helperText}

}
); }; -export default Input; +export default forwardRef(Input); From ad15c860091831741c8665d43a0a4378116bff15 Mon Sep 17 00:00:00 2001 From: constantly-dev Date: Tue, 14 Jan 2025 20:46:38 +0900 Subject: [PATCH 3/6] =?UTF-8?q?fix:=20input=EC=97=90=EC=84=9C=20helpertext?= =?UTF-8?q?=20=EC=82=AD=EC=A0=9C=20(#35)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Input/index.tsx | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/src/components/Input/index.tsx b/src/components/Input/index.tsx index 34e6243..6d57e63 100644 --- a/src/components/Input/index.tsx +++ b/src/components/Input/index.tsx @@ -3,15 +3,11 @@ import * as style from './index.css'; interface InputProps extends InputHTMLAttributes { isError?: boolean; - helperText?: string; } -const Input = ({ isError, helperText, ...props }: InputProps, ref: ForwardedRef) => { +const Input = ({ isError, ...props }: InputProps, ref: ForwardedRef) => { return ( -
- - {helperText &&

{helperText}

} -
+ ); }; From 7243cfd3f94acbde319e4f0ee7994bb4b4b65e33 Mon Sep 17 00:00:00 2001 From: KIMGEONHWI Date: Tue, 14 Jan 2025 22:53:52 +0900 Subject: [PATCH 4/6] =?UTF-8?q?fix:=20=EC=8A=A4=ED=83=80=EC=9D=BC=20?= =?UTF-8?q?=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95(#51)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Header/index.tsx | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx index 7006a86..7b5e21f 100644 --- a/src/components/Header/index.tsx +++ b/src/components/Header/index.tsx @@ -1,8 +1,7 @@ import React from 'react'; import Head from '@/components/Head'; import * as styles from '@/components/Header/index.css'; -import { IcClose } from '@/assets/svg'; -import { IcBack } from '@/assets/svg'; +import { IcBack, IcClose } from '@/assets/svg'; interface HeaderRootProps { children: React.ReactNode; @@ -21,29 +20,29 @@ interface CloseIconProps { } const HeaderRoot = ({ children }: HeaderRootProps): JSX.Element => { - return ( - - {children} - - ); + return
{children}
; }; const BackIcon = ({ onClick }: BackIconProps): JSX.Element => { return ( ); }; const Title = ({ title }: TitleProps): JSX.Element => { - return

{title}

; + return ( + + {title} + + ); }; const CloseIcon = ({ onClick }: CloseIconProps): JSX.Element => { return ( ); }; From 69edd78ef6fecd6f0737a1600f72fa4e91c2ef23 Mon Sep 17 00:00:00 2001 From: KIMGEONHWI Date: Tue, 14 Jan 2025 23:08:46 +0900 Subject: [PATCH 5/6] =?UTF-8?q?fix:=20variant=EB=A1=9C=20background=20?= =?UTF-8?q?=EB=8F=99=EC=A0=81=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=A0=81?= =?UTF-8?q?=EC=9A=A9(#51)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Header/index.css.ts | 30 ++++++++++++++++++++++-------- src/components/Header/index.tsx | 13 +++++++------ 2 files changed, 29 insertions(+), 14 deletions(-) diff --git a/src/components/Header/index.css.ts b/src/components/Header/index.css.ts index fb6d801..3a8881f 100644 --- a/src/components/Header/index.css.ts +++ b/src/components/Header/index.css.ts @@ -1,13 +1,27 @@ import { style } from '@vanilla-extract/css'; +import { recipe } from '@vanilla-extract/recipes'; +import { vars } from '@/styles/theme.css'; -export const headerRootStyle = style({ - position: 'fixed', - display: 'grid', - gridTemplateColumns: '1fr auto 1fr', - alignItems: 'center', - width: '100%', - height: '6rem', - padding: '1.8rem 2rem', +export const headerRootStyle = recipe({ + base: { + position: 'fixed', + display: 'grid', + gridTemplateColumns: '1fr auto 1fr', + alignItems: 'center', + width: '100%', + height: '6rem', + padding: '1.8rem 2rem', + transition: 'background-color 0.3s ease', + }, + variants: { + isColor: { + true: { backgroundColor: vars.colors.white }, + false: { backgroundColor: 'transparent' }, + }, + }, + defaultVariants: { + isColor: false, + }, }); export const backIconStyle = style({ diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx index 7b5e21f..d6182b0 100644 --- a/src/components/Header/index.tsx +++ b/src/components/Header/index.tsx @@ -1,10 +1,11 @@ import React from 'react'; import Head from '@/components/Head'; -import * as styles from '@/components/Header/index.css'; +import { headerRootStyle, backIconStyle, titleStyle, closeIconStyle } from '@/components/Header/index.css'; import { IcBack, IcClose } from '@/assets/svg'; interface HeaderRootProps { children: React.ReactNode; + isColor?: boolean; } interface BackIconProps { @@ -19,13 +20,13 @@ interface CloseIconProps { onClick: () => void; } -const HeaderRoot = ({ children }: HeaderRootProps): JSX.Element => { - return
{children}
; +const HeaderRoot = ({ children, isColor = false }: HeaderRootProps): JSX.Element => { + return
{children}
; }; const BackIcon = ({ onClick }: BackIconProps): JSX.Element => { return ( - ); @@ -33,7 +34,7 @@ const BackIcon = ({ onClick }: BackIconProps): JSX.Element => { const Title = ({ title }: TitleProps): JSX.Element => { return ( - + {title} ); @@ -41,7 +42,7 @@ const Title = ({ title }: TitleProps): JSX.Element => { const CloseIcon = ({ onClick }: CloseIconProps): JSX.Element => { return ( - ); From 7a289c17793b6178073a7073d3cf9aad98d87acc Mon Sep 17 00:00:00 2001 From: constantly-dev Date: Wed, 15 Jan 2025 20:13:26 +0900 Subject: [PATCH 6/6] =?UTF-8?q?feat:=20search=20input=20=EA=B3=A0=EB=A0=A4?= =?UTF-8?q?=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EB=B6=84=EA=B8=B0=20=EC=B2=98?= =?UTF-8?q?=EB=A6=AC=20(#35)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Input/index.css.ts | 7 ++++++- src/components/Input/index.tsx | 11 +++++++++-- 2 files changed, 15 insertions(+), 3 deletions(-) diff --git a/src/components/Input/index.css.ts b/src/components/Input/index.css.ts index 386cba7..b159f26 100644 --- a/src/components/Input/index.css.ts +++ b/src/components/Input/index.css.ts @@ -14,7 +14,7 @@ export const inputStyle = recipe({ width: '100%', height: '5.2rem', border: 'none', - borderRadius: '0.4rem', + borderRadius: '4px', padding: '1.4rem 1.8rem', ...vars.fonts.b5, backgroundColor: vars.colors.gray01, @@ -32,6 +32,11 @@ export const inputStyle = recipe({ border: `1px solid ${vars.colors.main04}`, }, }, + isSearch: { + true: { + borderRadius: '90px', + }, + }, }, }); diff --git a/src/components/Input/index.tsx b/src/components/Input/index.tsx index 6d57e63..293c4e7 100644 --- a/src/components/Input/index.tsx +++ b/src/components/Input/index.tsx @@ -3,11 +3,18 @@ import * as style from './index.css'; interface InputProps extends InputHTMLAttributes { isError?: boolean; + isSearch?: boolean; } -const Input = ({ isError, ...props }: InputProps, ref: ForwardedRef) => { +const Input = ({ isError, isSearch = false, ...props }: InputProps, ref: ForwardedRef) => { return ( - + ); };