Merge pull request #5 from YerangPark/dev

포트폴리오 수정 창 버그 해결
YerangPark · Oct 17, 2024 · cf90e44 · cf90e44
2 parents cd82348 + b1f9ba2
commit cf90e44
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 30 deletions.
diff --git a/src/components/molecules/InputFile.tsx b/src/components/molecules/InputFile.tsx
@@ -27,6 +27,8 @@ const InputFile: React.FC<InputFileProps> = ({ formLabel, placeholder, onFileCha
     }
   }
 
+  const uniqueId = `file-upload-${Math.random().toString(36).substring(2, 9)}`
+
   return (
     <FormControl mb={4}>
       <Flex align="center">
@@ -45,15 +47,15 @@ const InputFile: React.FC<InputFileProps> = ({ formLabel, placeholder, onFileCha
           <InputRightElement width="5rem">
             <Button
               as="label"
-              htmlFor="file-upload"
+              htmlFor={uniqueId}
               leftIcon={<Icon as={FiFilePlus} />}
               size="sm"
               variant="outline"
               cursor="pointer"
             >
               추가
             </Button>
-            <Input id="file-upload" type="file" onChange={handleFileChange} hidden />
+            <Input id={uniqueId} type="file" onChange={handleFileChange} hidden />
           </InputRightElement>
         </InputGroup>
       </Flex>

diff --git a/src/components/molecules/InputImage.tsx b/src/components/molecules/InputImage.tsx
@@ -21,6 +21,7 @@ const InputImage: React.FC<InputImageProps> = ({ formLabel, image, alt, onImageC
       onImageChange(null) // 파일이 없을 경우 null 전달
     }
   }
+  const uniqueId = `image-upload-${Math.random().toString(36).substring(2, 9)}`
 
   return (
     <FormControl mb={4}>
@@ -37,10 +38,10 @@ const InputImage: React.FC<InputImageProps> = ({ formLabel, image, alt, onImageC
               mr={4}
             />
           )}
-          <Button as="label" htmlFor="image-upload" variant="outline" mr={4}>
+          <Button as="label" htmlFor={uniqueId} variant="outline" mr={4}>
             {buttonLabel}
           </Button>
-          <Input type="file" id="image-upload" accept="image/*" hidden onChange={handleImageChange} />
+          <Input type="file" id={uniqueId} accept="image/*" hidden onChange={handleImageChange} />
           <Box>{fileName}</Box> {/* 업로드한 파일 이름 표시 */}
         </Box>
       </Box>

diff --git a/src/components/organisms/ProjectInputForm.tsx b/src/components/organisms/ProjectInputForm.tsx
@@ -38,19 +38,23 @@ interface ProjectInputFormProps {
 
 const ProjectInputForm: React.FC<ProjectInputFormProps> = ({ projects, setProjects }) => {
   const skills = useSelector((state: RootState) => state.skill.skills)
-  const [searchQuery, setSearchQuery] = useState('')
-  const [searchResults, setSearchResults] = useState<Skill[]>([])
+  const [searchQueries, setSearchQueries] = useState<string[]>(Array(projects.length).fill(''))
+  const [searchResults, setSearchResults] = useState<Skill[][]>(Array(projects.length).fill([]))
 
-  const handleSearchInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleSearchInputChange = (index: number, e: React.ChangeEvent<HTMLInputElement>) => {
     const query = e.target.value
-    setSearchQuery(query)
+    setSearchQueries((prev) => {
+      const newQueries = [...prev]
+      newQueries[index] = query
+      return newQueries
+    })
 
-    if (query) {
-      const results = skills.filter((skill) => skill.name.toLowerCase().includes(query.toLowerCase()))
-      setSearchResults(results)
-    } else {
-      setSearchResults([])
-    }
+    const results = query ? skills.filter((skill) => skill.name.toLowerCase().includes(query.toLowerCase())) : []
+    setSearchResults((prev) => {
+      const newResults = [...prev]
+      newResults[index] = results
+      return newResults
+    })
   }
 
   const handleTechStackSelect = (projectId: number, val: string | number) => {
@@ -75,8 +79,9 @@ const ProjectInputForm: React.FC<ProjectInputFormProps> = ({ projects, setProjec
   }
 
   const handleAddProject = () => {
+    const maxId = projects.reduce((max, project) => (project.id > max ? project.id : max), 0)
     const newProject: ProjectInputProps = {
-      id: projects.length + 1,
+      id: maxId + 1,
       name: '',
       description: '',
       image: null,
@@ -87,17 +92,25 @@ const ProjectInputForm: React.FC<ProjectInputFormProps> = ({ projects, setProjec
       selectedTechStack: [],
       readmeFile: null,
     }
-    setProjects([...projects, newProject])
+    setProjects((prev) => [...prev, newProject])
   }
 
   const handleRemoveProject = (projectId: number) => {
     const tmpProjects = projects.filter((project) => project.id !== projectId)
     setProjects(tmpProjects)
   }
 
-  const handleFileChange = (projectId: number, file: File | null) => {
+  const handleFileChange = (projectId: number, readmeFile: File | null) => {
+    console.log(`projectId : ${projectId}`)
+    setProjects((prevProjects) =>
+      prevProjects.map((project) => (project.id === projectId ? { ...project, readmeFile } : project)),
+    )
+  }
+
+  const handleImageChange = (projectId: number, image: File | null) => {
+    console.log(`projectId : ${projectId}`)
     setProjects((prevProjects) =>
-      prevProjects.map((project) => (project.id === projectId ? { ...project, readmeFile: file } : project)),
+      prevProjects.map((project) => (project.id === projectId ? { ...project, image } : project)),
     )
   }
 
@@ -128,7 +141,7 @@ const ProjectInputForm: React.FC<ProjectInputFormProps> = ({ projects, setProjec
         프로젝트 추가
       </Button>
 
-      {projects.map((project) => (
+      {projects.map((project, index) => (
         <Box key={project.id}>
           <Divider my={2} />
           <Box display="flex" justifyContent="flex-end" mb={5}>
@@ -154,11 +167,10 @@ const ProjectInputForm: React.FC<ProjectInputFormProps> = ({ projects, setProjec
           />
           <InputImage
             formLabel="대표 사진"
-            image={project.image} // base64로 변환된 이미지를 받게 됨
+            key={project.id}
+            image={project.image}
             alt="대표 사진 미리보기"
-            onImageChange={(image) =>
-              setProjects((prev) => prev.map((p) => (p.id === project.id ? { ...p, image } : p)))
-            }
+            onImageChange={(image: File | null) => handleImageChange(project.id, image)}
             buttonLabel="사진 추가"
           />
           <InputDateRange
@@ -189,7 +201,7 @@ const ProjectInputForm: React.FC<ProjectInputFormProps> = ({ projects, setProjec
             }
           />
           <InputTextbox
-            formLabel="메인 설명"
+            formLabel="메인 설명*"
             placeHolder=""
             value={project.description}
             onChange={(value) =>
@@ -203,8 +215,8 @@ const ProjectInputForm: React.FC<ProjectInputFormProps> = ({ projects, setProjec
               </FormLabel>
               <Input
                 placeholder="기술 스택을 검색해주세요"
-                value={searchQuery}
-                onChange={handleSearchInputChange}
+                value={searchQueries[index] || ''}
+                onChange={(e) => handleSearchInputChange(index, e)}
                 flex="1"
               />
               <InputRightElement>
@@ -216,10 +228,10 @@ const ProjectInputForm: React.FC<ProjectInputFormProps> = ({ projects, setProjec
           <Box mb={4}>
             <Flex align="center">
               <FormLabel mb="0" width={[110, 130, 150]} />
-              {searchQuery &&
-                (searchResults.length > 0 ? (
+              {searchQueries[index] &&
+                (searchResults[index].length > 0 ? (
                   <List spacing={2} borderWidth="1px" borderRadius="md" p={4} width="100" flex="1">
-                    {searchResults.map((skill) => (
+                    {searchResults[index].map((skill) => (
                       <ListItem
                         key={skill.id}
                         onClick={() => handleTechStackSelect(project.id, skill.id)}

diff --git a/src/components/organisms/SkillCategories.tsx b/src/components/organisms/SkillCategories.tsx
@@ -10,7 +10,7 @@ const SkillCategories: React.FC<SkillCategoriesProps> = ({ skills }) => {
     return <Text>Loading...</Text>
   }
   return (
-    <Box width="full" textAlign="start" p={6} w="80%">
+    <Box width="full" textAlign="start" p={6} w={['90%', '70%', '70%']}>
       <VStack spacing={6} align="stretch">
         {/* 카테고리별로 반복 */}
         {Object.entries(skills).map(([category, skillNames]) => (