Merge pull request #9 from YerangPark/dev

feat: 포트폴리오 추가/수정 창 입력 필드 글자 수 제한 적용
YerangPark · Oct 22, 2024 · d0601a8 · d0601a8
2 parents 1acbffc + e980198
commit d0601a8
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 8 deletions.
diff --git a/src/components/molecules/InputTextbox.tsx b/src/components/molecules/InputTextbox.tsx
@@ -6,22 +6,30 @@ interface InputTextBoxProps {
   value: string
   onChange?: (arg: string) => void
   isDisabled?: boolean
+  maxLength?: number
 }
 
-const InputTextbox: React.FC<InputTextBoxProps> = ({ formLabel, placeHolder, value, onChange, isDisabled = false }) => {
+const InputTextbox: React.FC<InputTextBoxProps> = ({
+  formLabel,
+  placeHolder,
+  value,
+  onChange,
+  isDisabled = false,
+  maxLength = 20,
+}) => {
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const inputValue = e.target.value
+    if (inputValue.length <= maxLength && onChange) {
+      onChange(inputValue)
+    }
+  }
   return (
     <FormControl mb={4}>
       <Flex align="center">
         <FormLabel mb="0" width={[110, 130, 150]} fontSize="base">
           {formLabel}
         </FormLabel>
-        <Input
-          placeholder={placeHolder}
-          value={value}
-          flex="1"
-          isDisabled={isDisabled}
-          onChange={(e) => (onChange ? onChange(e.target.value) : undefined)}
-        />
+        <Input placeholder={placeHolder} value={value} flex="1" isDisabled={isDisabled} onChange={handleChange} />
       </Flex>
     </FormControl>
   )

diff --git a/src/components/organisms/PortfolioInputForm.tsx b/src/components/organisms/PortfolioInputForm.tsx
@@ -169,12 +169,14 @@ const PortfolioInputForm: React.FC<PortfolioInputFormProps> = ({
         placeHolder="깃허브 링크를 입력하세요"
         value={githubLink}
         onChange={setGithubLink}
+        maxLength={50}
       />
       <InputTextbox
         formLabel="블로그 링크"
         placeHolder="블로그 링크를 입력하세요"
         value={blogLink}
         onChange={setBlogLink}
+        maxLength={50}
       />
 
       {/* 기술 스택 */}

diff --git a/src/components/organisms/ProjectInputForm.tsx b/src/components/organisms/ProjectInputForm.tsx
@@ -164,6 +164,7 @@ const ProjectInputForm: React.FC<ProjectInputFormProps> = ({ projects, setProjec
             onChange={(value) =>
               setProjects((prev) => prev.map((p) => (p.id === project.id ? { ...p, name: value } : p)))
             }
+            maxLength={20}
           />
           <InputImage
             formLabel="대표 사진"
@@ -191,6 +192,7 @@ const ProjectInputForm: React.FC<ProjectInputFormProps> = ({ projects, setProjec
             onChange={(value) =>
               setProjects((prev) => prev.map((p) => (p.id === project.id ? { ...p, githubLink: value } : p)))
             }
+            maxLength={50}
           />
           <InputTextbox
             formLabel="사이트 URL"
@@ -199,6 +201,7 @@ const ProjectInputForm: React.FC<ProjectInputFormProps> = ({ projects, setProjec
             onChange={(value) =>
               setProjects((prev) => prev.map((p) => (p.id === project.id ? { ...p, siteLink: value } : p)))
             }
+            maxLength={50}
           />
           <InputTextbox
             formLabel="메인 설명*"
@@ -207,6 +210,7 @@ const ProjectInputForm: React.FC<ProjectInputFormProps> = ({ projects, setProjec
             onChange={(value) =>
               setProjects((prev) => prev.map((p) => (p.id === project.id ? { ...p, description: value } : p)))
             }
+            maxLength={300}
           />
           <FormControl mb={4}>
             <InputGroup>