Feat: #115 일정 등록 모달의 파일 업로드 기능 구현

[Seok93]

PR Type

What kind of change does this PR introduce?

• [Feat] 새로운 기능을 추가했어요.
• [UI] CSS 등 사용자 UI 디자인 추가/삭제/변경 했어요.
• [Comment] 필요한 주석 추가/삭제/변경 했어요.
• [Chore] 빌드 프로세스 변경, 의존성 패키지 업데이트 했어요.

Related Issues

• close 파일 업로드 API를 이용하여 일정 등록 모달의 파일 업로드 기능 구현 #115

What does this PR do?

• 일정 파일 업로드 API를 위한 React Query 처리 추가
• 일정 파일 업로드 API를 위한 MSW 처리 추가
• 파일 Validation 추가 (파일 최대 개수, 파일 크기, 파일명, 파일 확장자)
• 여러 개의 일정 파일을 개별 파일 요청으로 분할하여 병렬 요청하도록 기능 구현
• Task 관련 Form 타입 추가
• FileDropZone Props 추가

Other information

1. React Query 공식문서: mutateAsync
2. MSW 공식 문서: File uploads
3. MDN: FormData
4. MDN: Promise.allSettled
5. MDN: Blob
6. MDN: File
7. MDN: Common MIME types
8. iana: Media Types

MSW를 통해 파일 업로드를 모킹할 필요가 있었습니다. 브라우저 요청에 대한 모킹이라 로컬에 파일을 저장할 수 없어서 메모리에 Blob 객체로 넣어두고, 이후 다운로드 API를 테스트할 때 내려주는 방법으로 진행할 예정입니다.

파일의 병렬적 요청에 대해서는 Promise.allSettled와 Promise.all를 고려했습니다. all의 경우 하나라도 실패하면 전체를 실패로 간주함을 알게 되었고, 성공/실패에 상관없이 모두가 실행되어 반영되어야하는 이번 구현 상황에선 allSettled가 적절하다고 판단하여 allSettled를 사용하였습니다.

추가적으로 useForm을 사용하고 있어서 보편적인 파일 업로드라면 register의 validation을 사용했을텐데, 드래그 앤 드롭 파일 업로드 기능이 있어서 register의 validation으로 파일을 걸러낼 수 없었습니다. 그래서 별도의 파일 검증 로직을 만들었습니다. 궁금한 점 있으면 편하게 물어봐 주세요☺️

View

파일 최대 개수 Validation

파일명 Validation

파일 확장자 Validation

파일 용량 Validation

파일 업로드 실패

파일 업로드 성공

---

아래의 화면은 파일의 업로드 성공/실패에 대한 개별적인 처리가 아니라, 파일명을 묶어서 한 번에 보여주는 방법입니다. 원래는 아래와 같은 방법으로 진행하려고 했으나 최대 10개의 파일을 등록이 가능한 상황에서 한 번에 묶어서 보여주면 메시지가 좋아 보이지 않아서 FE 간의 상의 끝에 성공은 묶어서 몇개의 파일이 성공했는지를 피드백으로 주고 있고, 실패는 개별 메시지로 보여주고 있습니다.

이전 성공한 파일 목록을 묶어서 보여주는 경우

이전 실패한 파일 목록을 묶어서 보여주는 경우

[coderabbitai]

Walkthrough

이번 변경 사항은 파일 업로드 기능을 구현하기 위해 여러 컴포넌트와 서비스에 대한 수정이 포함되어 있습니다. FileDropZone 컴포넌트에 파일 유형을 제한하는 accept 속성이 추가되었으며, 파일 업로드를 처리하는 새로운 훅과 API 엔드포인트가 도입되었습니다. 파일 유효성 검사를 위한 새로운 유틸리티 함수와 정규 표현식도 추가되어, 파일 이름 및 크기 검증이 강화되었습니다.

Changes

파일 경로	변경 요약
src/components/common/FileDropZone.tsx	accept 속성 추가 및 기본값 설정, <input> 요소에 적용.
src/components/modal/task/CreateModalTask.tsx	파일 업로드 기능 추가, 비동기 함수 및 성공/실패 토스트 알림 구현.
src/components/modal/task/ModalTaskForm.tsx	파일 업로드 유효성 검증 메커니즘 추가, 파일 변경 처리 로직 수정.
src/components/modal/task/UpdateModalTask.tsx	파일 입력의 accept 속성 수정, 다양한 파일 형식 추가.
src/constants/mimeFileType.ts	다양한 MIME 타입 상수 정의 및 TASK_ACCEPT_FILE_TYPES 배열 추가.
src/constants/regex.ts	파일 이름 검증을 위한 FILE_NAME_REGEX 상수 추가.
src/constants/settings.ts	TASK_SETTINGS에 FILE_TYPES 속성 추가.
src/hooks/query/useTaskQuery.ts	파일 업로드를 위한 useUploadTaskFile 훅 추가, 오류 처리 로직 수정.
src/mocks/mockData.ts	FileInfo 타입 정의 추가, TASK_FILE_DUMMY 수정.
src/mocks/services/taskServiceHandler.ts	파일 업로드를 처리하는 새로운 엔드포인트 추가.
src/services/taskService.ts	파일 업로드를 처리하는 uploadTaskFile 함수 추가, createTask 반환 타입 변경.
src/types/FileType.tsx	파일 업로드 결과를 위한 새로운 타입 FileUploadSuccessResult 및 FileUploadFailureResult 추가.
src/types/TaskType.tsx	TaskFileForm 이름 변경 및 TaskUploadForm 타입 추가.
src/utils/Validator.ts	파일 검증을 위한 여러 유틸리티 메서드 추가.

Assessment against linked issues

Objective	Addressed	Explanation
파일 업로드 API를 이용하여 파일 업로드 기능을 구현 ( #115 )	✅
제한 파일 설정 (accept) ( #115 )	✅

Possibly related PRs

• UI: #127 일정 등록 입력 양식들을 컴포넌트로 분리 #131: FileDropZone 컴포넌트의 기능을 향상시키기 위해 수정된 PR.
• Feat: 일정 수정 모달 UI 변경 사항 반영 #155: FileDropZone 컴포넌트의 prop 타입이 FileInfo를 사용하도록 업데이트된 PR.
• Feat: #149 일정 수정 모달 수행자 추가 기능 구현 #157: UpdateModalTask 컴포넌트에 새로운 기능 추가와 관련된 PR.
• Feat: #156 일정 수정 모달 일정 정보 변경 기능 구현 #160: UpdateModalTask 컴포넌트의 업데이트 기능과 관련된 PR.

Suggested labels

🛠️ Refactor

Suggested reviewers

• Yoonyesol
• ice-bear98

🐇 변화의 바람이 불어와,
파일을 담아 주머니에 쏙!
업로드의 즐거움이 가득해,
새로운 기능이 춤추네.
모두 함께 기뻐해요,
파일과 함께 행복을 나눠요! 🌈

---

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[coderabbitai]

Actionable comments posted: 13

🧹 Outside diff range and nitpick comments (15)

src/constants/mimeFileType.ts (3)

1-5: 이미지 파일 상수가 잘 정의되었습니다.

이미지 파일 MIME 타입이 정확하게 정의되어 있습니다. 코드가 깔끔하고 일관성 있게 작성되었습니다.

추가적으로 GIF 형식도 고려해 보는 것이 어떨까요? 다음과 같이 추가할 수 있습니다:

export const GIF = 'image/gif';

---

14-23: 문서 파일 상수가 잘 정의되었습니다.

문서 파일 MIME 타입이 정확하게 정의되어 있습니다. 다양한 문서 형식을 포함하고 있어 좋습니다.

HWP 형식은 한국 시장에 특화된 형식입니다. 이에 대한 간단한 주석을 추가하는 것이 좋을 것 같습니다. 예를 들어:

// HWP: 한글 워드 프로세서 파일 형식
export const HWP = 'application/x-hwp';

---

25-44: TASK_ACCEPT_FILE_TYPES 배열이 잘 정의되었습니다.

모든 정의된 MIME 타입을 포함하고 있어 편리하게 사용할 수 있을 것 같습니다.

향후 확장성을 고려하여, 파일 유형별로 별도의 배열을 만드는 것도 좋은 방법일 수 있습니다. 예를 들어:

export const IMAGE_FILE_TYPES = [JPG, PNG, SVG, WEBP];
export const COMPRESSED_FILE_TYPES = [ZIP, RAR, Z7, ALZ, EGG];
export const DOCUMENT_FILE_TYPES = [TXT, PDF, HWP, DOC, XLS, PPT, DOCX, XLSX, PPTX];

export const TASK_ACCEPT_FILE_TYPES = [
  ...IMAGE_FILE_TYPES,
  ...COMPRESSED_FILE_TYPES,
  ...DOCUMENT_FILE_TYPES,
];

이렇게 하면 필요에 따라 특정 유형의 파일만 사용하거나, 새로운 파일 유형을 쉽게 추가할 수 있습니다.

src/types/TaskType.tsx (1)

32-32: 새로운 TaskUploadForm 타입 추가

TaskUploadForm 타입의 추가는 파일 업로드 기능 구현이라는 PR 목표에 잘 부합합니다. 특정 태스크와 연관된 개별 파일 업로드를 위한 타입으로 적절하게 정의되었습니다.

제안: 타입의 목적을 더 명확히 하기 위해 주석을 추가하는 것이 좋을 것 같습니다. 예를 들어:

// 개별 태스크에 대한 파일 업로드를 위한 타입
export type TaskUploadForm = Pick<Task, 'taskId'> & { file: File };

이렇게 하면 이 타입의 용도를 더 쉽게 이해할 수 있을 것입니다.

src/utils/Validator.ts (2)

35-40: 구현이 잘 되었습니다. 작은 개선 사항이 있습니다.

이 메서드는 파일 수 유효성 검사를 잘 수행하고 있습니다. 음수 검사와 에러 처리가 잘 되어 있습니다.

개선 제안: 에러 메시지를 상수로 분리하여 재사용성을 높이는 것이 좋습니다. 예를 들어:

private static readonly NEGATIVE_FILE_COUNT_ERROR = '최대 파일수와 현재 파일 수는 음수가 될 수 없습니다.';

public static isValidFileCount(maxCount: number, currentCount: number) {
  if (!Validator.isPositiveNumberWithZero(maxCount) || !Validator.isPositiveNumberWithZero(currentCount)) {
    throw Error(Validator.NEGATIVE_FILE_COUNT_ERROR);
  }
  return maxCount >= currentCount;
}

---

50-53: 파일 이름 유효성 검사가 잘 구현되었습니다.

이 메서드는 가져온 정규 표현식 상수를 올바르게 사용하고 있으며, 구현이 간단하고 명확합니다.

개선 제안: FILE_NAME_REGEX의 패턴을 설명하는 주석을 추가하면 좋을 것 같습니다. 예를 들어:

public static isValidFileName(fileName: string) {
  // FILE_NAME_REGEX: 파일 이름에 허용되는 문자와 형식을 정의하는 정규 표현식
  // (예: 영숫자, 특수 문자 '_-.' 허용, 최대 길이 255자 등)
  const fileNameRegex = new RegExp(FILE_NAME_REGEX);
  return fileNameRegex.test(fileName);
}

이렇게 하면 코드의 가독성과 유지보수성이 향상됩니다.

src/components/common/FileDropZone.tsx (2)

22-22: FileDropZone 함수에 accept 매개변수 추가 승인

FileDropZone 함수에 accept = '*'를 추가한 것은 적절합니다. 이는 컴포넌트의 유연성을 유지하면서 파일 유형 제한 기능을 구현합니다.

가독성을 높이기 위해 기본값에 대한 간단한 주석을 추가하는 것이 좋을 것 같습니다. 예를 들어:

accept = '*', // 기본값: 모든 파일 유형 허용

---

45-53: 파일 업로드를 위한 input 요소 추가 승인

파일 업로드를 위한 input 요소를 추가하고 accept 속성을 적용한 것은 PR의 목표를 잘 달성하고 있습니다. 이는 파일 유형 제한 기능을 효과적으로 구현합니다.

접근성을 개선하기 위해 aria-label 속성을 추가하는 것이 좋을 것 같습니다. 예를 들어:

<input
  id={id}
  type="file"
  accept={accept}
  className="h-0 w-0 opacity-0"
  onChange={handleFileChange}
  multiple
  hidden
  aria-label="파일 선택"
/>

이렇게 하면 스크린 리더 사용자에게 입력 필드의 목적을 더 명확히 전달할 수 있습니다.

src/services/taskService.ts (1)

39-58: uploadTaskFile 함수 추가를 승인하며, 에러 처리 개선을 제안합니다.

새로 추가된 uploadTaskFile 함수는 잘 구현되었습니다. FormData를 사용한 파일 업로드 처리, RESTful 엔드포인트 구조, 그리고 상세한 JSDoc 문서화가 잘 되어 있습니다.

개선을 위한 제안:

1. 파일 크기나 타입에 대한 클라이언트 측 유효성 검사를 추가하는 것이 좋습니다.
2. 네트워크 오류나 서버 오류에 대한 에러 처리를 추가하는 것이 좋습니다.

에러 처리를 위해 다음과 같은 코드를 추가할 수 있습니다:

try {
  return await authAxios.postForm(`/project/${projectId}/task/${taskId}/upload`, fileFormData, axiosConfig);
} catch (error) {
  console.error('파일 업로드 중 오류 발생:', error);
  throw error; // 또는 사용자 정의 에러 객체를 throw
}

src/hooks/query/useTaskQuery.ts (2)

39-47: 에러 처리 개선이 잘 되었습니다. 작은 개선 사항을 제안합니다.

에러 발생 시 사용자에게 알림을 주는 toastError 추가는 좋은 개선입니다. 사용자 경험을 더욱 향상시키기 위해, 에러 메시지에 구체적인 오류 정보를 포함시키는 것을 고려해 보세요.

다음과 같이 에러 메시지를 더 구체적으로 만들 수 있습니다:

-toastError('프로젝트 일정 등록 중 오류가 발생했습니다. 잠시후 다시 등록해주세요.');
+toastError(`프로젝트 일정 등록 중 오류가 발생했습니다: ${error.message}. 잠시후 다시 등록해주세요.`);

---

57-69: 파일 업로드 기능이 잘 구현되었습니다. 성공 처리를 추가하면 좋겠습니다.

useUploadTaskFile 함수는 PR의 주요 목적인 파일 업로드 기능을 잘 구현하고 있습니다. 에러 처리도 적절히 되어 있어 좋습니다.

사용자 경험을 더욱 개선하기 위해, 파일 업로드 성공 시에도 알림을 추가하는 것이 좋겠습니다. 다음과 같이 onSuccess 핸들러를 추가할 수 있습니다:

export function useUploadTaskFile(projectId: Project['projectId']) {
-  const { toastError } = useToast();
+  const { toastError, toastSuccess } = useToast();
  const mutation = useMutation({
    mutationFn: ({ taskId, file }: TaskUploadForm) =>
      uploadTaskFile(projectId, taskId, file, {
        headers: { 'Content-Type': 'multipart/form-data' },
      }),
    onError: (error, { file }) => toastError(`${file.name} 파일 업로드에 실패 했습니다.`),
+   onSuccess: (_, { file }) => toastSuccess(`${file.name} 파일이 성공적으로 업로드되었습니다.`),
  });

  return mutation;
}

src/mocks/services/taskServiceHandler.ts (2)

55-59: 일정 생성 API 응답 개선이 좋습니다.

새로 생성된 task 객체를 반환하도록 변경한 것은 좋은 개선입니다. 이는 RESTful API 모범 사례와 일치하며, 클라이언트에게 즉각적인 피드백을 제공합니다.

다음과 같이 상태 코드를 201(Created)로 변경하는 것을 고려해보세요:

-    return HttpResponse.json(newTask);
+    return HttpResponse.json(newTask, { status: 201 });

이는 리소스 생성 성공을 더 명확히 나타냅니다.

---

Line range hint 1-268: 전반적인 변경 사항이 PR 목표와 잘 일치합니다.

파일 업로드 기능 추가와 기존 엔드포인트의 개선이 잘 이루어졌습니다. 타입 처리와 응답 형식이 개선되어 전체적인 코드 품질이 향상되었습니다.

코드의 가독성과 유지보수성을 더욱 향상시키기 위해, 공통으로 사용되는 유효성 검사 로직(예: 프로젝트 및 작업 존재 여부 확인)을 별도의 함수로 추출하는 것을 고려해보세요. 이렇게 하면 코드 중복을 줄이고 일관성을 유지할 수 있습니다.

예를 들어:

function validateProjectAndTask(projectId: number, taskId: number) {
  const project = PROJECT_DUMMY.find((project) => project.projectId === projectId);
  if (!project) return new HttpResponse('프로젝트를 찾을 수 없습니다.', { status: 404 });

  const task = TASK_DUMMY.find((task) => task.taskId === taskId);
  if (!task) return new HttpResponse('일정을 찾을 수 없습니다.', { status: 404 });

  return { project, task };
}

이 함수를 여러 핸들러에서 재사용할 수 있습니다.

src/mocks/mockData.ts (1)

715-732: FILE_DUMMY 상수가 적절히 추가되었습니다.

MSW를 위한 임시 파일 저장 목적으로 FILE_DUMMY 상수를 추가한 것은 좋은 접근입니다. 파일 업로드 기능 테스트에 유용할 것입니다.

파일 크기를 다양하게 설정하여 파일 크기 제한 테스트도 가능하게 만드는 것이 좋을 것 같습니다. 예를 들어:

 export const FILE_DUMMY: FileInfo[] = [
   {
     fileId: 1,
     taskId: 1,
-    file: new Blob(['최종본 내용'], { type: 'text/plain' }),
+    file: new Blob([new Array(1024 * 1024).join('a')], { type: 'text/plain' }), // 약 1MB 크기
   },
   // ... 다른 파일들
 ];

src/components/modal/task/CreateModalTask.tsx (1)

59-60: 실패한 파일 업로드에 대한 에러 토스트를 추가해주세요

성공한 파일 업로드에 대한 토스트는 표시하고 있지만, 실패한 파일 업로드에 대한 에러 토스트가 없습니다. 다음과 같이 실패한 업로드 수를 알려주는 코드를 추가하면 사용자 경험이 향상될 것입니다.

 if (fulfilledFileList.length > 0) toastSuccess(`${fulfilledFileList.length}개의 파일 업로드에 성공했습니다.`);
+ if (rejectedFileList.length > 0) toastError(`${rejectedFileList.length}개의 파일 업로드에 실패했습니다.`);

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Files that changed from the base of the PR and between 34718f7 and ed0ca33.

📒 Files selected for processing (15)

• src/components/common/FileDropZone.tsx (3 hunks)
• src/components/modal/task/CreateModalTask.tsx (2 hunks)
• src/components/modal/task/ModalTaskForm.tsx (4 hunks)
• src/components/modal/task/UpdateModalTask.tsx (1 hunks)
• src/constants/mimeFileType.ts (1 hunks)
• src/constants/regex.ts (1 hunks)
• src/constants/settings.ts (2 hunks)
• src/hooks/query/useTaskQuery.ts (4 hunks)
• src/mocks/mockData.ts (2 hunks)
• src/mocks/mockHash.ts (1 hunks)
• src/mocks/services/taskServiceHandler.ts (3 hunks)
• src/services/taskService.ts (1 hunks)
• src/types/FileType.tsx (1 hunks)
• src/types/TaskType.tsx (1 hunks)
• src/utils/Validator.ts (2 hunks)

✅ Files skipped from review due to trivial changes (1)

• src/mocks/mockHash.ts

🧰 Additional context used

📓 Learnings (2)

📓 Common learnings

Learnt from: Seok93
PR: GU-99/grow-up-fe#131
File: src/components/common/FileDropZone.tsx:26-26
Timestamp: 2024-09-14T04:03:37.675Z
Learning: 파일 업로드 작업과 함께 `FileDropZone.tsx`의 `accept` 속성을 추가할 예정입니다.

src/components/common/FileDropZone.tsx (1)

Learnt from: Seok93
PR: GU-99/grow-up-fe#131
File: src/components/common/FileDropZone.tsx:26-26
Timestamp: 2024-09-14T04:03:37.675Z
Learning: 파일 업로드 작업과 함께 `FileDropZone.tsx`의 `accept` 속성을 추가할 예정입니다.

🔇 Additional comments (16)

src/types/FileType.tsx (1)

15-23: 새로운 타입 정의가 잘 구현되었습니다.

FileUploadSuccessResult와 FileUploadFailureResult 타입이 파일 업로드 기능의 결과를 잘 표현하고 있습니다. 이는 PR의 목표와 일치하며, Promise.allSettled의 결과 처리에 적합합니다.

다만, 일관성을 위해 다음과 같은 작은 개선을 제안합니다:

 export type FileUploadSuccessResult = {
   status: 'fulfilled';
-  file: File;
+  file: CustomFile;
 };
 export type FileUploadFailureResult = {
   status: 'rejected';
-  file: File;
+  file: CustomFile;
   error: unknown;
 };

이렇게 하면 CustomFile 타입과 일관성을 유지하면서, 파일 ID와 파일 이름 정보도 포함할 수 있습니다.

src/constants/regex.ts (1)

3-3: 파일 이름 정규식이 추가되었습니다.

새로운 FILE_NAME_REGEX 상수가 추가된 것을 확인했습니다. 이는 파일 업로드 기능 구현을 위한 PR 목표와 일치합니다.

다만, 몇 가지 고려사항을 제안드립니다:

1. 파일 이름의 최대 길이를 제한하는 것이 좋을 수 있습니다. 예를 들어:

   export const FILE_NAME_REGEX = /^[가-힣a-zA-Z0-9 _\-.]{1,255}$/;

2. 파일 이름에 공백을 허용하는 것이 의도적인지 확인해주세요. 일부 시스템에서는 파일 이름에 공백이 문제를 일으킬 수 있습니다.

3. 파일 이름 시작과 끝에 공백, 밑줄, 하이픈, 마침표가 오지 않도록 정규식을 더 엄격하게 만들 수 있습니다:

   export const FILE_NAME_REGEX = /^[가-힣a-zA-Z0-9][가-힣a-zA-Z0-9 _\-.]*[가-힣a-zA-Z0-9]$/;

이러한 변경사항들이 프로젝트의 요구사항과 일치하는지 검토해주시기 바랍니다.

src/constants/mimeFileType.ts (1)

7-12: 압축 파일 상수가 잘 정의되었습니다.

압축 파일 MIME 타입이 정확하게 정의되어 있습니다. 코드가 깔끔하고 일관성 있게 작성되었습니다.

ALZ와 EGG 형식은 상대적으로 덜 일반적입니다. 이 형식들이 프로젝트에서 특별히 필요한 이유가 있는지 확인해 주시겠습니까? 만약 특정 지역이나 애플리케이션에 특화된 형식이라면, 주석으로 그 이유를 설명하는 것이 좋을 것 같습니다.

src/types/TaskType.tsx (2)

26-26: 타입 이름 변경이 적절합니다.

TaskFileForm에서 TaskFilesForm으로의 이름 변경은 타입의 의미를 더 정확하게 반영합니다. 복수의 파일을 다루는 형태를 명확히 나타내므로 좋은 변경입니다.

---

31-31: TaskForm 타입 정의의 개선

TaskForm을 TaskCreationForm과 TaskFilesForm의 조합으로 정의한 것은 매우 적절합니다. 이 변경으로 태스크 생성과 파일 업로드 정보를 하나의 타입으로 통합하여 폼 처리를 단순화할 수 있습니다. 코드의 가독성과 유지보수성이 향상될 것으로 보입니다.

src/utils/Validator.ts (1)

31-33: LGTM! 메서드가 잘 구현되었습니다.

이 메서드는 숫자의 타입과 값을 정확하게 확인하고 있습니다. 메서드 이름도 명확하고 설명적입니다.

src/components/common/FileDropZone.tsx (2)

9-9: FileDropZoneProps에 accept 속성 추가 승인

FileDropZoneProps 타입에 accept: string 속성을 추가한 것은 PR의 목표와 일치하며, 파일 업로드 기능 구현에 필요한 변경사항입니다. 이는 컴포넌트의 타입 안정성을 향상시키고, 파일 유형 제한 기능을 지원합니다.

---

Line range hint 1-86: 전체적인 변경 사항에 대한 검토

FileDropZone 컴포넌트에 대한 변경 사항은 PR의 목표를 잘 달성하고 있습니다. accept 속성의 추가는 파일 업로드 기능을 효과적으로 개선하며, 타입 안정성과 하위 호환성을 유지하고 있습니다.

주요 개선 사항:

1. FileDropZoneProps에 accept 속성 추가
2. FileDropZone 함수에 accept 매개변수 추가 (기본값 설정)
3. input 요소에 accept 속성 적용

이러한 변경으로 파일 유형 제한 기능이 성공적으로 구현되었습니다. 제안된 minor 개선 사항들(주석 추가, 접근성 개선)을 적용하면 코드의 품질을 더욱 향상시킬 수 있을 것입니다.

전반적으로 잘 구현되었으며, PR의 목표를 충족하고 있습니다. 제안된 minor 개선 사항들을 고려해 보시기 바랍니다.

src/services/taskService.ts (2)

29-37: createTask 함수의 반환 타입 개선을 승인합니다.

createTask 함수의 반환 타입을 Promise<AxiosResponse<void>>에서 Promise<AxiosResponse<Task>>로 변경한 것은 좋은 개선입니다. 이 변경으로 API 응답에서 생성된 작업에 대한 더 자세한 정보를 얻을 수 있게 되었습니다. 이는 API 설계 모범 사례에 부합하며, 클라이언트 측에서 새로 생성된 작업의 세부 정보를 즉시 활용할 수 있게 해줍니다.

---

Line range hint 1-58: 전체적인 변경 사항이 PR 목표와 잘 부합합니다.

이 파일의 변경 사항은 일정 등록 모달의 파일 업로드 기능 구현이라는 PR 목표를 잘 반영하고 있습니다. createTask 함수의 반환 타입 개선과 uploadTaskFile 함수의 추가는 파일 업로드 기능을 효과적으로 지원합니다.

이러한 변경 사항은 AI 생성 요약 및 이전에 학습한 FileDropZone.tsx의 accept 속성 추가 계획과도 일관성이 있습니다. 전반적으로 잘 구현되었으며, 제안된 minor 개선 사항을 적용하면 더욱 견고한 코드가 될 것 같습니다.

src/hooks/query/useTaskQuery.ts (1)

12-12: 파일 업로드 기능을 위한 import 및 타입 추가가 적절합니다.

uploadTaskFile 함수와 TaskUploadForm 타입의 추가는 새로운 파일 업로드 기능 구현에 필요한 변경사항으로 보입니다. 이는 PR의 목적과 일치하며 적절해 보입니다.

Also applies to: 24-24

src/components/modal/task/UpdateModalTask.tsx (1)

196-196: 파일 업로드 기능 구현에 대한 승인

FileDropZone 컴포넌트에 accept 속성을 추가한 것은 PR의 목표와 일치하며, 다양한 파일 형식을 지원하는 좋은 구현입니다.

다만, 가독성 향상을 위해 다음과 같이 파일 확장자를 그룹화하는 것을 고려해보세요:

accept={`
  .jpg,.jpeg,.png,.svg,.webp,  // 이미지
  .pdf,.txt,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.hwp,  // 문서
  .zip,.rar,.7z,.alz,.egg  // 압축 파일
`}

이렇게 하면 나중에 파일 형식을 추가하거나 수정할 때 더 쉽게 관리할 수 있습니다.

src/mocks/services/taskServiceHandler.ts (2)

3-3: 가져오기 문 및 타입 정의 추가가 적절합니다.

FILE_DUMMY 가져오기와 task 관련 폼 타입들의 추가는 파일 업로드 기능 구현과 일정한 관련이 있으며, PR의 목표와 일치합니다.

Also applies to: 15-15

---

Line range hint 193-194: 일정 정보 수정 API에서 타입 변환이 개선되었습니다.

statusId를 명시적으로 숫자로 변환한 것은 좋은 변경입니다. 이는 타입 일관성을 보장하고 잠재적인 타입 강제 변환 문제를 방지합니다.

src/mocks/mockData.ts (2)

35-39: 새로운 FileInfo 타입이 적절히 정의되었습니다.

FileInfo 타입은 파일 업로드 기능 구현에 필요한 정보를 잘 캡슐화하고 있습니다. file 속성에 Blob 타입을 사용한 것은 파일 데이터 처리에 적합합니다.

---

698-710: TASK_FILE_DUMMY의 파일 확장자 변경이 적절합니다.

파일 확장자를 PDF에서 TXT로 변경한 것은 새로운 FILE_DUMMY 상수의 텍스트 콘텐츠와 일관성이 있습니다. 이는 파일 업로드 기능 구현에 도움이 될 것입니다.

[Yoonyesol]

다수의 파일을 전송한다는 특수한 상황 덕분에 이렇게 map 메서드를 사용해서 네트워크 요청을 보내는 코드도 접하게 되는군요😂 여러 개의 파일 업로드 성공 실패 분기 처리가 어려우셨을 것 같은데 고생 많으셨습니다! 이번에도 AI와 하신 대화와 작성하신 코드 보면서 많이 배워갑니다.

[ice-bear98]

파일 업로드 기능 구현 수고하셨습니다. mimefile과 valid 만드는데 고생했을거같아요

[Seok93]

@Yoonyesol @ice-bear98 리뷰 감사합니다!