Feat: OneLinerInput, TextInput 구현

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<HTMLInputElement> {
+  label?: string;
+  helperText?: string;
+}
+
+const OneLinerInput = forwardRef<HTMLInputElement, OneLinerInputProps>(
+  ({ label, id, placeholder, value, maxLength, helperText, onChange, onBlur }, ref) => {
+    return (
+      <Wrapper>
+        <Label htmlFor={id}>{label}</Label>
+        <Input
+          id={id}
+          placeholder={placeholder}
+          value={value}
+          maxLength={maxLength}
+          onChange={onChange}
+          onBlur={onBlur}
+          ref={ref}
+        />
+        <p>{helperText}</p> {/*아직 스타일은 적용하지 않음*/}
+      </Wrapper>
+    );
+  },
+);
+
+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;
+  }
+`;

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<FormData>;
+}
+
+export default function TextInput({ name, control }: TextInputProps) {
+  return (
+    <Controller
+      name={name}
+      control={control}
+      rules={CONDITIONS[name]}
+      render={({ field, fieldState }) => (
+        <OneLinerInput label={LABEL[name]} helperText={fieldState.error?.message} {...field} />
+      )}
+    />
+  );
+}

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<string, ValidationRule> = {
+  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: "한 줄 소개" };