From 929028823b68921f5c1fc667669f8d4c7a3f962b Mon Sep 17 00:00:00 2001
From: Haeun <han.kim0904@gmail.com>
Date: Fri, 15 Mar 2024 18:58:57 +0900
Subject: [PATCH 1/2] =?UTF-8?q?Feat:=20OneLinerInput=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/commons/OneLinerInput.tsx  | 58 +++++++++++++++++++
 1 file changed, 58 insertions(+)
 create mode 100644 co-kkiri/src/components/commons/OneLinerInput.tsx

diff --git a/co-kkiri/src/components/commons/OneLinerInput.tsx b/co-kkiri/src/components/commons/OneLinerInput.tsx
new file mode 100644
index 00000000..f5bdcc78
--- /dev/null
+++ b/co-kkiri/src/components/commons/OneLinerInput.tsx
@@ -0,0 +1,58 @@
+import { InputHTMLAttributes, forwardRef } from "react";
+import { styled } from "styled-components";
+import DESIGN_TOKEN from "@/styles/tokens";
+
+interface OneLinerInputProps extends InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+}
+
+const OneLinerInput = forwardRef<HTMLInputElement, OneLinerInputProps>(
+  ({ label, id, placeholder, value, maxLength, 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}
+        />
+      </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;
+  }
+`;

From 5cbe413fef83f4111d1009e1c48832fe30ffa148 Mon Sep 17 00:00:00 2001
From: Haeun <han.kim0904@gmail.com>
Date: Sat, 16 Mar 2024 10:19:33 +0900
Subject: [PATCH 2/2] =?UTF-8?q?Feat:=20OneLineInput=EC=97=90=20react=20hoo?=
 =?UTF-8?q?k=20form=EC=9D=84=20=EC=A0=81=EC=9A=A9=ED=95=9C=20TextInput=20?=
 =?UTF-8?q?=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/commons/OneLinerInput.tsx  |  4 ++-
 .../components/domains/myPage/TextInput.tsx   | 27 +++++++++++++++++++
 co-kkiri/src/constants/textInputRules.ts      | 23 ++++++++++++++++
 3 files changed, 53 insertions(+), 1 deletion(-)
 create mode 100644 co-kkiri/src/components/domains/myPage/TextInput.tsx
 create mode 100644 co-kkiri/src/constants/textInputRules.ts

diff --git a/co-kkiri/src/components/commons/OneLinerInput.tsx b/co-kkiri/src/components/commons/OneLinerInput.tsx
index f5bdcc78..4f5eaa61 100644
--- a/co-kkiri/src/components/commons/OneLinerInput.tsx
+++ b/co-kkiri/src/components/commons/OneLinerInput.tsx
@@ -4,10 +4,11 @@ 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, onChange, onBlur }, ref) => {
+  ({ label, id, placeholder, value, maxLength, helperText, onChange, onBlur }, ref) => {
     return (
       <Wrapper>
         <Label htmlFor={id}>{label}</Label>
@@ -20,6 +21,7 @@ const OneLinerInput = forwardRef<HTMLInputElement, OneLinerInputProps>(
           onBlur={onBlur}
           ref={ref}
         />
+        <p>{helperText}</p> {/*아직 스타일은 적용하지 않음*/}
       </Wrapper>
     );
   },
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<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} />
+      )}
+    />
+  );
+}
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<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: "한 줄 소개" };