{/* 콘텐츠 */}
- (null);
+
+ useEffect(() => {
+ const textarea = textareaRef.current;
+ if (textarea) {
+ textarea.style.height = "auto";
+ textarea.style.height = `${textarea.scrollHeight}px`;
+ }
+ }, [value]);
+
+ return (
+
+
diff --git a/src/components/common/RealmatchHeader.tsx b/src/components/common/RealmatchHeader.tsx
index 0349591..ef15fce 100644
--- a/src/components/common/RealmatchHeader.tsx
+++ b/src/components/common/RealmatchHeader.tsx
@@ -19,7 +19,7 @@ export default function RealMatchHeader({
// 가능하면 라우터 상위로, 실패하면 브라우저 히스토리
try {
- navigate({ to: "/matching-test/matching-test/step3" });
+ navigate({ to: "/matching/test/step3" });
} catch {
window.history.back();
}
diff --git a/src/components/form/DateField.tsx b/src/components/form/DateField.tsx
new file mode 100644
index 0000000..f2327c2
--- /dev/null
+++ b/src/components/form/DateField.tsx
@@ -0,0 +1,44 @@
+interface DateFieldProps {
+ placeholder: string;
+ value?: string;
+ onClick: () => void;
+}
+
+// 날짜를 "YYYY년 M월 D일" 형식으로 변환하는 함수
+function formatDateToKorean(dateString: string): string {
+ if (!dateString) return "";
+
+ try {
+ const date = new Date(dateString);
+ if (isNaN(date.getTime())) return dateString;
+
+ const year = date.getFullYear();
+ const month = date.getMonth() + 1;
+ const day = date.getDate();
+
+ return `${year}년 ${month}월 ${day}일`;
+ } catch {
+ return dateString;
+ }
+}
+
+export default function DateField({
+ placeholder,
+ value,
+ onClick,
+}: DateFieldProps) {
+ const displayValue = value ? formatDateToKorean(value) : placeholder;
+
+ return (
+
+ );
+}
diff --git a/src/components/form/FeeInput.tsx b/src/components/form/FeeInput.tsx
new file mode 100644
index 0000000..47028df
--- /dev/null
+++ b/src/components/form/FeeInput.tsx
@@ -0,0 +1,26 @@
+interface FeeInputProps {
+ value: string;
+ onChange: (value: string) => void;
+ placeholder?: string;
+ unit?: string;
+}
+
+export default function FeeInput({
+ value,
+ onChange,
+ placeholder = "",
+ unit = "원",
+}: FeeInputProps) {
+ return (
+
{children}
+ onChange(e.target.value.replace(/[^0-9]/g, ""))}
+ className="flex-1 text-title3 text-text-black placeholder:text-text-gray3 focus:outline-none bg-transparent text-right"
+ placeholder={placeholder}
+ />
+ {unit}
+
+ );
+}
diff --git a/src/components/form/SelectField.tsx b/src/components/form/SelectField.tsx
new file mode 100644
index 0000000..0b1aacb
--- /dev/null
+++ b/src/components/form/SelectField.tsx
@@ -0,0 +1,27 @@
+interface SelectFieldProps {
+ placeholder: string;
+ value?: string;
+ onClick: () => void;
+}
+
+export default function SelectField({
+ placeholder,
+ value,
+ onClick,
+}: SelectFieldProps) {
+ return (
+
+ );
+}
diff --git a/src/components/form/TextArea.tsx b/src/components/form/TextArea.tsx
new file mode 100644
index 0000000..8daa369
--- /dev/null
+++ b/src/components/form/TextArea.tsx
@@ -0,0 +1,41 @@
+import { useRef, useEffect } from "react";
+
+interface TextAreaProps {
+ placeholder: string;
+ maxLength: number;
+ value: string;
+ onChange: (value: string) => void;
+}
+
+export default function TextArea({
+ placeholder,
+ maxLength,
+ value,
+ onChange,
+}: TextAreaProps) {
+ const textareaRef = useRef
+