Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: imageInputForm 분리, drag&drop구현 #52

Merged
merged 7 commits into from
Jul 19, 2024

Conversation

5nxtnxtnxt
Copy link
Contributor

Describe your changes

  • 이미지 첨부 컴포넌트 분리
    • Array state, setState 넘겨줘야함
  • 드래그 앤 드롭 구현
  • 실제 FileList 와 preview 순서를 맞춰줌

Photo

default.mov

오늘은 영상으로다가 드래그앤드롭이랑 순서 제대로 올라가는거 확인하면 됩니두

Issue number and link

image input form을 분리했슴다
드래그엔드롭 구현
이미지 삭제시 나머지 파일들에 대해 다시 reader로 읽어왔음
fileList에 의존하는 useEffect제거해서불필요한 re reading 방지
이미지 미리보기랑 실제 파일순서랑 맞춤
@5nxtnxtnxt 5nxtnxtnxt added enhancement New feature refactor Rewrite existing source code labels Jul 18, 2024
@5nxtnxtnxt 5nxtnxtnxt requested a review from esthel7 July 18, 2024 17:49
@5nxtnxtnxt 5nxtnxtnxt self-assigned this Jul 18, 2024
Copy link
Member

@esthel7 esthel7 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

고생많앗심더~🍀

Comment on lines 139 to 143
<ImageInputForm
fileList={files}
setFileList={setFiles}
className="flex flex-col gap-3"
></ImageInputForm>
Copy link
Member

@esthel7 esthel7 Jul 18, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

호오 간단쓰~ 여기 <ImageInputForm {...} /> 이렇게 바꿔주면 센스쟁이~🍀

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

난 안센스쟁이야

Comment on lines +58 to +61
newFileList.splice(index, 1);
newPreview.splice(index, 1);
setFileList(newFileList);
setPreview(newPreview);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

굿쟙👍👍

Comment on lines +32 to +46
files.forEach((file, index) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onloadend = () => {
previews[preview.length + index] = {
src: reader.result as string,
alt: file.name,
};
cnt++;
if (cnt === files.length) {
setPreview(previews);
setIsLoading(false);
}
};
});
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

요렇게 하면 동일 파일도 들가는건가용?? 아 근데 delete를 index로 해서 삭제도 에러 없겟다 굿굿👍

@5nxtnxtnxt 5nxtnxtnxt merged commit 2ad3974 into SSOCK:main Jul 19, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature refactor Rewrite existing source code
Projects
Status: Done
Development

Successfully merging this pull request may close these issues.

2 participants