From 0c855dd340c16ba2270703964560bf6be4f42312 Mon Sep 17 00:00:00 2001 From: river <130737187+0jenn0@users.noreply.github.com> Date: Wed, 14 Aug 2024 11:07:24 +0900 Subject: [PATCH 1/4] =?UTF-8?q?feat:=20Input=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=EC=97=90=20variants=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - border bottom이 있는 input 추가 - focus 했을 때만 border bottom이 생기는 input 추가 --- .../components/common/Input/Input.styled.ts | 57 ++++++++++++++++--- .../src/components/common/Input/Input.tsx | 8 ++- .../src/components/common/Input/Input.type.ts | 1 + 3 files changed, 56 insertions(+), 10 deletions(-) create mode 100644 frontend/src/components/common/Input/Input.type.ts diff --git a/frontend/src/components/common/Input/Input.styled.ts b/frontend/src/components/common/Input/Input.styled.ts index 900c10f3..a7c4acc1 100644 --- a/frontend/src/components/common/Input/Input.styled.ts +++ b/frontend/src/components/common/Input/Input.styled.ts @@ -1,7 +1,11 @@ +import { css } from "@emotion/react"; import styled from "@emotion/styled"; +import theme from "@styles/theme"; import { PRIMITIVE_COLORS } from "@styles/tokens"; +import type { InputVariants } from "./Input.type"; + export const InputContainer = styled.div` display: flex; flex-direction: column; @@ -15,20 +19,14 @@ export const Label = styled.label` color: ${(props) => props.theme.colors.text.primary}; `; -export const Input = styled.input` +export const Input = styled.input<{ variant: InputVariants }>` width: 100%; padding: 1.2rem 1.6rem; - border: 0.1rem solid ${({ theme }) => theme.colors.border}; border-radius: 8px; ${({ theme }) => theme.typography.mobile.detail} color: ${({ theme }) => theme.colors.text.primary}; - &:focus { - border-color: ${PRIMITIVE_COLORS.black}; - outline: none; - } - &:disabled { background-color: ${({ theme }) => theme.colors.background.disabled}; @@ -38,4 +36,49 @@ export const Input = styled.input` &::placeholder { color: ${({ theme }) => theme.colors.text.secondary}; } + + ${({ variant }) => { + if (variant === "fullBorder") return fullBottomStyle; + if (variant === "bottomBorder") return bottomBorderStyle; + if (variant === "focusBottomBorder") return focusBottomBorderStyle; + }} +`; +export const fullBottomStyle = css` + border: 0.1rem solid ${theme.colors.border}; + + &:focus { + border-color: ${theme.colors.border}; + outline: none; + } +`; + +export const bottomBorderStyle = css` + border: none; + border-bottom: 1px solid ${theme.colors.border}; + border-radius: 0; + + &:focus { + outline: none; + border-bottom: 1px solid ${theme.colors.border}; + } + + &:focus-visible { + outline: none; + border-bottom: 1px solid ${theme.colors.border}; + } +`; + +export const focusBottomBorderStyle = css` + border: none; + border-radius: 0; + + &:focus { + outline: none; + border-bottom: 1px solid ${theme.colors.border}; + } + + &:focus-visible { + outline: none; + border-bottom: 1px solid ${theme.colors.border}; + } `; diff --git a/frontend/src/components/common/Input/Input.tsx b/frontend/src/components/common/Input/Input.tsx index 4e90eb42..b1e4f730 100644 --- a/frontend/src/components/common/Input/Input.tsx +++ b/frontend/src/components/common/Input/Input.tsx @@ -2,19 +2,21 @@ import { forwardRef } from "react"; import CharacterCount from "../CharacterCount/CharacterCount"; import * as S from "./Input.styled"; +import type { InputVariants } from "./Input.type"; -interface InputProps extends React.ComponentPropsWithRef<'input'> { +interface InputProps extends React.ComponentPropsWithRef<"input"> { count?: number; maxCount?: number; label?: string; + variants?: InputVariants; } const Input = forwardRef( - ({ label, count, maxCount, ...props }, ref) => { + ({ label, count, maxCount, variants = "fullBorder", ...props }, ref) => { return ( {label} - + ); diff --git a/frontend/src/components/common/Input/Input.type.ts b/frontend/src/components/common/Input/Input.type.ts new file mode 100644 index 00000000..52774877 --- /dev/null +++ b/frontend/src/components/common/Input/Input.type.ts @@ -0,0 +1 @@ +export type InputVariants = "fullBorder" | "bottomBorder" | "focusBottomBorder"; From 46c7248c75f41a8282d2bc98df32e8fcfa14a18b Mon Sep 17 00:00:00 2001 From: river <130737187+0jenn0@users.noreply.github.com> Date: Wed, 14 Aug 2024 11:07:41 +0900 Subject: [PATCH 2/4] =?UTF-8?q?test:=20=EC=B6=94=EA=B0=80=EB=90=9C=20Input?= =?UTF-8?q?=20storybook=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/common/Input/Input.stories.tsx | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/frontend/src/components/common/Input/Input.stories.tsx b/frontend/src/components/common/Input/Input.stories.tsx index 58f5401e..3b53953d 100644 --- a/frontend/src/components/common/Input/Input.stories.tsx +++ b/frontend/src/components/common/Input/Input.stories.tsx @@ -26,3 +26,19 @@ export const Default: Story = { maxCount: 20, }, }; + +export const BottomBorderInput: Story = { + args: { + label: "제목", + placeholder: "제목을 입력해 주세요.", + variants: "bottomBorder", + }, +}; + +export const FocusBottomBorderInput: Story = { + args: { + label: "제목", + placeholder: "제목을 입력해 주세요.", + variants: "focusBottomBorder", + }, +}; From 7d374d348a0322661e9c938807118fae0a31fa76 Mon Sep 17 00:00:00 2001 From: river <130737187+0jenn0@users.noreply.github.com> Date: Wed, 14 Aug 2024 11:11:27 +0900 Subject: [PATCH 3/4] =?UTF-8?q?fix:=20=EC=95=88=EC=93=B0=EB=8A=94=20import?= =?UTF-8?q?=EB=AC=B8=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/common/Input/Input.styled.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/frontend/src/components/common/Input/Input.styled.ts b/frontend/src/components/common/Input/Input.styled.ts index a7c4acc1..03e03009 100644 --- a/frontend/src/components/common/Input/Input.styled.ts +++ b/frontend/src/components/common/Input/Input.styled.ts @@ -2,7 +2,6 @@ import { css } from "@emotion/react"; import styled from "@emotion/styled"; import theme from "@styles/theme"; -import { PRIMITIVE_COLORS } from "@styles/tokens"; import type { InputVariants } from "./Input.type"; From 24ada3422f3d466703de09520ad1e830ccc50db7 Mon Sep 17 00:00:00 2001 From: river <130737187+0jenn0@users.noreply.github.com> Date: Wed, 14 Aug 2024 11:17:46 +0900 Subject: [PATCH 4/4] =?UTF-8?q?refactor:=20InputVariants=20type=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 --- .../src/components/common/Input/Input.stories.tsx | 4 ++-- frontend/src/components/common/Input/Input.styled.ts | 12 ++++++------ frontend/src/components/common/Input/Input.tsx | 2 +- frontend/src/components/common/Input/Input.type.ts | 2 +- 4 files changed, 10 insertions(+), 10 deletions(-) diff --git a/frontend/src/components/common/Input/Input.stories.tsx b/frontend/src/components/common/Input/Input.stories.tsx index 3b53953d..5e84af4e 100644 --- a/frontend/src/components/common/Input/Input.stories.tsx +++ b/frontend/src/components/common/Input/Input.stories.tsx @@ -31,7 +31,7 @@ export const BottomBorderInput: Story = { args: { label: "제목", placeholder: "제목을 입력해 주세요.", - variants: "bottomBorder", + variants: "bottom", }, }; @@ -39,6 +39,6 @@ export const FocusBottomBorderInput: Story = { args: { label: "제목", placeholder: "제목을 입력해 주세요.", - variants: "focusBottomBorder", + variants: "none", }, }; diff --git a/frontend/src/components/common/Input/Input.styled.ts b/frontend/src/components/common/Input/Input.styled.ts index 03e03009..9af16914 100644 --- a/frontend/src/components/common/Input/Input.styled.ts +++ b/frontend/src/components/common/Input/Input.styled.ts @@ -37,12 +37,12 @@ export const Input = styled.input<{ variant: InputVariants }>` } ${({ variant }) => { - if (variant === "fullBorder") return fullBottomStyle; - if (variant === "bottomBorder") return bottomBorderStyle; - if (variant === "focusBottomBorder") return focusBottomBorderStyle; + if (variant === "round") return roundStyle; + if (variant === "bottom") return bottomStyle; + if (variant === "none") return noneStyle; }} `; -export const fullBottomStyle = css` +export const roundStyle = css` border: 0.1rem solid ${theme.colors.border}; &:focus { @@ -51,7 +51,7 @@ export const fullBottomStyle = css` } `; -export const bottomBorderStyle = css` +export const bottomStyle = css` border: none; border-bottom: 1px solid ${theme.colors.border}; border-radius: 0; @@ -67,7 +67,7 @@ export const bottomBorderStyle = css` } `; -export const focusBottomBorderStyle = css` +export const noneStyle = css` border: none; border-radius: 0; diff --git a/frontend/src/components/common/Input/Input.tsx b/frontend/src/components/common/Input/Input.tsx index b1e4f730..fb4c4db5 100644 --- a/frontend/src/components/common/Input/Input.tsx +++ b/frontend/src/components/common/Input/Input.tsx @@ -12,7 +12,7 @@ interface InputProps extends React.ComponentPropsWithRef<"input"> { } const Input = forwardRef( - ({ label, count, maxCount, variants = "fullBorder", ...props }, ref) => { + ({ label, count, maxCount, variants = "round", ...props }, ref) => { return ( {label} diff --git a/frontend/src/components/common/Input/Input.type.ts b/frontend/src/components/common/Input/Input.type.ts index 52774877..6abff4db 100644 --- a/frontend/src/components/common/Input/Input.type.ts +++ b/frontend/src/components/common/Input/Input.type.ts @@ -1 +1 @@ -export type InputVariants = "fullBorder" | "bottomBorder" | "focusBottomBorder"; +export type InputVariants = "round" | "bottom" | "none";