From 3e506ffc3710c19d67c2c7409aaf7731cfbe11af Mon Sep 17 00:00:00 2001 From: YerangPark Date: Thu, 17 Oct 2024 17:06:14 +0900 Subject: [PATCH 1/3] =?UTF-8?q?fix:=20=EC=9D=B4=EB=AF=B8=EC=A7=80/?= =?UTF-8?q?=ED=8C=8C=EC=9D=BC=20=EC=88=98=EC=A0=95=20=EC=8B=9C=20=ED=95=98?= =?UTF-8?q?=EB=82=98=EC=9D=98=20=ED=94=84=EB=A1=9C=EC=A0=9D=ED=8A=B8?= =?UTF-8?q?=EC=97=90=EB=A7=8C=20=EC=A0=81=EC=9A=A9=EB=90=98=EB=8D=98=20?= =?UTF-8?q?=EB=B2=84=EA=B7=B8=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/molecules/InputFile.tsx | 6 ++++-- src/components/molecules/InputImage.tsx | 5 +++-- src/components/organisms/ProjectInputForm.tsx | 7 +++---- 3 files changed, 10 insertions(+), 8 deletions(-) diff --git a/src/components/molecules/InputFile.tsx b/src/components/molecules/InputFile.tsx index a697166..d84dc11 100644 --- a/src/components/molecules/InputFile.tsx +++ b/src/components/molecules/InputFile.tsx @@ -27,6 +27,8 @@ const InputFile: React.FC = ({ formLabel, placeholder, onFileCha } } + const uniqueId = `file-upload-${Math.random().toString(36).substring(2, 9)}` + return ( @@ -45,7 +47,7 @@ const InputFile: React.FC = ({ formLabel, placeholder, onFileCha - + diff --git a/src/components/molecules/InputImage.tsx b/src/components/molecules/InputImage.tsx index 8ce9438..7ecb130 100644 --- a/src/components/molecules/InputImage.tsx +++ b/src/components/molecules/InputImage.tsx @@ -21,6 +21,7 @@ const InputImage: React.FC = ({ formLabel, image, alt, onImageC onImageChange(null) // 파일이 없을 경우 null 전달 } } + const uniqueId = `image-upload-${Math.random().toString(36).substring(2, 9)}` return ( @@ -37,10 +38,10 @@ const InputImage: React.FC = ({ formLabel, image, alt, onImageC mr={4} /> )} - - + {fileName} {/* 업로드한 파일 이름 표시 */} diff --git a/src/components/organisms/ProjectInputForm.tsx b/src/components/organisms/ProjectInputForm.tsx index bb4ca15..5f66250 100644 --- a/src/components/organisms/ProjectInputForm.tsx +++ b/src/components/organisms/ProjectInputForm.tsx @@ -154,11 +154,10 @@ const ProjectInputForm: React.FC = ({ projects, setProjec /> - setProjects((prev) => prev.map((p) => (p.id === project.id ? { ...p, image } : p))) - } + onImageChange={(image : File | null) => handleImageChange(project.id, image)} buttonLabel="사진 추가" /> Date: Thu, 17 Oct 2024 17:06:48 +0900 Subject: [PATCH 2/3] =?UTF-8?q?fix:=20=EC=8A=A4=ED=82=AC=20=EA=B2=80?= =?UTF-8?q?=EC=83=89=20=EB=8F=85=EB=A6=BD=EC=A0=81=EC=9C=BC=EB=A1=9C=20?= =?UTF-8?q?=EB=90=98=EC=A7=80=20=EC=95=8A=EB=8A=94=20=EB=AC=B8=EC=A0=9C=20?= =?UTF-8?q?=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/organisms/ProjectInputForm.tsx | 61 ++++++++++++------- src/components/organisms/SkillCategories.tsx | 2 +- 2 files changed, 41 insertions(+), 22 deletions(-) diff --git a/src/components/organisms/ProjectInputForm.tsx b/src/components/organisms/ProjectInputForm.tsx index 5f66250..7284153 100644 --- a/src/components/organisms/ProjectInputForm.tsx +++ b/src/components/organisms/ProjectInputForm.tsx @@ -38,19 +38,25 @@ interface ProjectInputFormProps { const ProjectInputForm: React.FC = ({ projects, setProjects }) => { const skills = useSelector((state: RootState) => state.skill.skills) - const [searchQuery, setSearchQuery] = useState('') - const [searchResults, setSearchResults] = useState([]) + const [searchQueries, setSearchQueries] = useState(Array(projects.length).fill('')) + const [searchResults, setSearchResults] = useState(Array(projects.length).fill([])) - const handleSearchInputChange = (e: React.ChangeEvent) => { + const handleSearchInputChange = (index: number, e: React.ChangeEvent) => { 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 +81,9 @@ const ProjectInputForm: React.FC = ({ 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,7 +94,7 @@ const ProjectInputForm: React.FC = ({ projects, setProjec selectedTechStack: [], readmeFile: null, } - setProjects([...projects, newProject]) + setProjects((prev) => [...prev, newProject]) } const handleRemoveProject = (projectId: number) => { @@ -95,9 +102,21 @@ const ProjectInputForm: React.FC = ({ projects, setProjec setProjects(tmpProjects) } - const handleFileChange = (projectId: number, file: File | null) => { + const handleFileChange = (projectId: number, readmeFile: File | null) => { + console.log(`projectId : ${projectId}`) + setProjects((prevProjects) => { + return 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 +147,7 @@ const ProjectInputForm: React.FC = ({ projects, setProjec 프로젝트 추가 - {projects.map((project) => ( + {projects.map((project, index) => ( @@ -188,7 +207,7 @@ const ProjectInputForm: React.FC = ({ projects, setProjec } /> @@ -202,8 +221,8 @@ const ProjectInputForm: React.FC = ({ projects, setProjec handleSearchInputChange(index, e)} flex="1" /> @@ -215,10 +234,10 @@ const ProjectInputForm: React.FC = ({ projects, setProjec - {searchQuery && - (searchResults.length > 0 ? ( + {searchQueries[index] && + (searchResults[index].length > 0 ? ( - {searchResults.map((skill) => ( + {searchResults[index].map((skill) => ( handleTechStackSelect(project.id, skill.id)} diff --git a/src/components/organisms/SkillCategories.tsx b/src/components/organisms/SkillCategories.tsx index 47d6859..4ce41e0 100644 --- a/src/components/organisms/SkillCategories.tsx +++ b/src/components/organisms/SkillCategories.tsx @@ -10,7 +10,7 @@ const SkillCategories: React.FC = ({ skills }) => { return Loading... } return ( - + {/* 카테고리별로 반복 */} {Object.entries(skills).map(([category, skillNames]) => ( From b1f9ba2619e871239feddf0ee35c59de6abcf017 Mon Sep 17 00:00:00 2001 From: YerangPark Date: Thu, 17 Oct 2024 17:14:32 +0900 Subject: [PATCH 3/3] =?UTF-8?q?fix:=20ESLint=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/organisms/ProjectInputForm.tsx | 20 +++++++------------ 1 file changed, 7 insertions(+), 13 deletions(-) diff --git a/src/components/organisms/ProjectInputForm.tsx b/src/components/organisms/ProjectInputForm.tsx index 7284153..4a09ec3 100644 --- a/src/components/organisms/ProjectInputForm.tsx +++ b/src/components/organisms/ProjectInputForm.tsx @@ -49,9 +49,7 @@ const ProjectInputForm: React.FC = ({ projects, setProjec return newQueries }) - const results = query - ? skills.filter((skill) => skill.name.toLowerCase().includes(query.toLowerCase())) - : [] + const results = query ? skills.filter((skill) => skill.name.toLowerCase().includes(query.toLowerCase())) : [] setSearchResults((prev) => { const newResults = [...prev] newResults[index] = results @@ -81,7 +79,7 @@ const ProjectInputForm: React.FC = ({ projects, setProjec } const handleAddProject = () => { - const maxId = projects.reduce((max, project) => (project.id > max ? project.id : max), 0); + const maxId = projects.reduce((max, project) => (project.id > max ? project.id : max), 0) const newProject: ProjectInputProps = { id: maxId + 1, name: '', @@ -104,19 +102,15 @@ const ProjectInputForm: React.FC = ({ projects, setProjec const handleFileChange = (projectId: number, readmeFile: File | null) => { console.log(`projectId : ${projectId}`) - setProjects((prevProjects) => { - return prevProjects.map((project) => - project.id === projectId ? { ...project, readmeFile } : project - ) - }) + 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, image } : project, - ), + prevProjects.map((project) => (project.id === projectId ? { ...project, image } : project)), ) } @@ -176,7 +170,7 @@ const ProjectInputForm: React.FC = ({ projects, setProjec key={project.id} image={project.image} alt="대표 사진 미리보기" - onImageChange={(image : File | null) => handleImageChange(project.id, image)} + onImageChange={(image: File | null) => handleImageChange(project.id, image)} buttonLabel="사진 추가" />