diff --git a/co-kkiri/src/components/commons/OneLinerInput.tsx b/co-kkiri/src/components/commons/OneLinerInput.tsx new file mode 100644 index 00000000..4f5eaa61 --- /dev/null +++ b/co-kkiri/src/components/commons/OneLinerInput.tsx @@ -0,0 +1,60 @@ +import { InputHTMLAttributes, forwardRef } from "react"; +import { styled } from "styled-components"; +import DESIGN_TOKEN from "@/styles/tokens"; + +interface OneLinerInputProps extends InputHTMLAttributes { + label?: string; + helperText?: string; +} + +const OneLinerInput = forwardRef( + ({ label, id, placeholder, value, maxLength, helperText, onChange, onBlur }, ref) => { + return ( + + + +

{helperText}

{/*아직 스타일은 적용하지 않음*/} +
+ ); + }, +); + +export default OneLinerInput; + +const { + color, + typography: { font16Bold, font16Medium }, +} = DESIGN_TOKEN; + +const Wrapper = styled.div` + display: flex; + flex-direction: column; + gap: 1.2rem; +`; + +const Label = styled.label` + color: ${color.black[1]}; + ${font16Bold}; +`; + +const Input = styled.input` + ${font16Medium}; + background: ${color.white}; + border: 1px solid ${color.gray[2]}; + border-radius: 0.5rem; + color: ${color.black[1]}; + padding: 1.4rem 2rem 1.5rem; + width: 100%; + + &:focus { + outline: none; + } +`; diff --git a/co-kkiri/src/components/domains/myPage/TextInput.tsx b/co-kkiri/src/components/domains/myPage/TextInput.tsx new file mode 100644 index 00000000..ff3e9af9 --- /dev/null +++ b/co-kkiri/src/components/domains/myPage/TextInput.tsx @@ -0,0 +1,27 @@ +import { Control, Controller } from "react-hook-form"; +import OneLinerInput from "@/components/commons/OneLinerInput"; +import { CONDITIONS, LABEL } from "@/constants/textInputRules"; + +interface FormData { + nickname: string; + link: string; + introduction: string; +} + +interface TextInputProps { + name: "nickname" | "link" | "introduction"; + control: Control; +} + +export default function TextInput({ name, control }: TextInputProps) { + return ( + ( + + )} + /> + ); +} diff --git a/co-kkiri/src/constants/textInputRules.ts b/co-kkiri/src/constants/textInputRules.ts new file mode 100644 index 00000000..4915f09c --- /dev/null +++ b/co-kkiri/src/constants/textInputRules.ts @@ -0,0 +1,23 @@ +interface ValidationRule { + required?: string; + maxLength?: { value: number; message: string }; + pattern?: { value: RegExp; message: string }; +} + +export const CONDITIONS: Record = { + nickname: { + required: "닉네임을 입력해 주세요", + maxLength: { value: 10, message: "최대 10글자까지 쓸 수 있어요" }, + }, + link: { + pattern: { + value: /^(https?:\/\/)?([\da-z.-]+)\.([a-z.]{2,6})([/\w .-]*)*\/?$/, // 해당 정규식은 임시입니다. + message: "올바른 url 형식이 아닙니다.", + }, + }, + introduction: { + maxLength: { value: 30, message: "최대 30글자까지 쓸 수 있어요" }, + }, +}; + +export const LABEL = { nickname: "닉네임", link: "대표 링크", introduction: "한 줄 소개" };