[fix] 파일 업로더, 텍스트 포맷팅 수정#192 #173

useTextFileUpload -> useFileUpload로 변경 및 수정
텍스트 파일 외에 wav, mp3, txt 파일 업로드 가능하도록 수정
textSpliter.ts 파일 추가

useFileUpload.ts 파일업로더훅 사용방법

'text/plain'. 'audio/wav', 'audio/mp3' 업로드 가능, 범용으로 사용
여러 파일 동시 업로드 지원
파일 형식 검증
파일 용량 제한 로직 함유

// Example Component
const FileUploadComponent = () => {
 const { handleFiles, isLoading } = useFileUpload<string>({
   maxSizeInMB: 5, // 5mb 까지 업로드 가능하다는뜻
     allowedTypes: ['text/plain'], // 'text/plain'. 'audio/wav',  'audio/mp3' 셋 중에 하나로 파일 형식 지정 가능
   onSuccess: (texts) => {
     // 파일 업로드 이후 로직
     // const processedTexts = texts.flatMap(text => textSplitter(text));
     // console.log(processedTexts);
   },
   onError: (error) => alert(error) // 에러 
 });

 return (
   <input 
     type="file"
     accept=".txt"
     multiple 
     onChange={(e) => handleFiles(e.target.files)}
     disabled={isLoading}
   />
 );
};

textSpilter.ts 포맷터

긴 문자열을 개행문자를 기준으로 각줄로 나눠서 문자열 배열을 리턴하는 함수

crlf, lf 개행문자를 기준으로 줄을 구분함.

/**
* 텍스트를 줄바꿈 문자(\n, \r\n)를 기준으로 분리하고 공백 라인을 제거
* @param {string} text - 분리할 텍스트
* @returns {string[]} - 공백이 아닌 라인들의 배열
*/
export const textSplitter = (text: string) => {
return text.split(/\r?\n/).filter((line) => line.trim() !== '');
};

Sourcery에 의한 요약

파일 업로드 기능을 리팩토링하여 여러 파일 형식을 지원하고 새로운 텍스트 분할 유틸리티를 도입합니다. 텍스트, wav, mp3 파일 업로드를 지원하는 보다 다재다능한 useFileUpload 훅으로 useTextFileUpload 훅을 대체합니다. 텍스트를 줄 바꿈 문자에 따라 줄로 분할하는 textSplitter 유틸리티를 추가합니다.

새로운 기능:

줄 바꿈 문자를 기준으로 긴 문자열을 줄 배열로 분할하는 새로운 textSplitter 유틸리티를 도입합니다.

버그 수정:

wav, mp3, txt를 포함한 여러 파일 형식을 지원하도록 파일 업로더를 수정합니다.

개선 사항:

이전의 useTextFileUpload를 대체하여 보다 일반적인 useFileUpload 훅을 사용하도록 파일 업로드 훅을 리팩토링합니다.

Original summary in English

## Summary by Sourcery Refactor the file upload functionality to support multiple file types and introduce a new text splitting utility. Replace the useTextFileUpload hook with a more versatile useFileUpload hook that supports text, wav, and mp3 file uploads. Add a textSplitter utility to handle splitting text into lines based on newline characters. New Features: - Introduce a new textSplitter utility to split long strings into an array of lines based on newline characters. Bug Fixes: - Fix file uploader to support multiple file types including wav, mp3, and txt. Enhancements: - Refactor file upload hook to use a more generic useFileUpload hook, replacing the previous useTextFileUpload.

리뷰어 가이드 by Sourcery

이 PR은 useTextFileUpload 훅을 더 일반적인 useFileUpload 훅으로 대체하여 파일 업로드 기능을 리팩토링합니다. 이 훅은 여러 파일 유형(txt, wav, mp3)을 지원하며 텍스트 분할 기능을 추가합니다. 구현에는 파일 유효성 검사, 크기 제한, 적절한 오류 처리가 포함됩니다.

파일 업로드 프로세스의 시퀀스 다이어그램

sequenceDiagram
    actor User
    participant useFileUpload
    participant File
    participant textSplitter

    User->>useFileUpload: handleFiles(files)
    useFileUpload->>File: validateFile(file)
    useFileUpload->>File: file.text()
    File-->>useFileUpload: text
    useFileUpload->>textSplitter: textSplitter(text)
    textSplitter-->>useFileUpload: sentences
    useFileUpload-->>User: onSuccess(sentences)
    useFileUpload->>User: onError(error)

useFileUpload 훅의 클래스 다이어그램

classDiagram
    class useFileUpload {
        - isLoading: boolean
        + handleFiles(files: FileList | null): Promise<void>
        + validateFile(file: File): void
    }

    class UseFileUploadProps {
        + maxSizeInMB: number
        + allowedTypes: AllowedFileType[]
        + onSuccess(texts: string[]): void
        + onError(error: string): void
    }

    useFileUpload --> UseFileUploadProps

    class ALLOWED_FILE_TYPES {
        + TEXT: string
        + WAV: string
        + MP3: string
    }

    class textSplitter {
        + textSplitter(text: string): string[]
    }

파일 수준 변경 사항

변경 사항	세부 사항	파일
향상된 기능을 갖춘 새로운 일반 파일 업로드 훅 도입	여러 파일 유형(text/plain, audio/wav, audio/mp3) 지원 추가 구성 가능한 최대 크기로 파일 크기 유효성 검사 구현 허용된 유형에 대한 파일 유형 유효성 검사 추가 다중 파일 업로드 지원 활성화 사용자 정의 오류 메시지를 통한 적절한 오류 처리 구현	`src/hooks/useFileUpload.ts`
줄 바꿈 처리를 위한 텍스트 처리 유틸리티 추가	CRLF 및 LF 줄 끝을 처리하는 텍스트 분할 함수 생성 빈 줄 제거를 위한 필터링 추가	`src/utils/textSpliter.ts`
새로운 파일 업로드 훅을 사용하도록 테이블 콘텐츠 구성 요소 업데이트	useTextFileUpload를 useFileUpload로 대체 새로운 textSplitter 유틸리티를 사용하여 텍스트 분할 로직 추가 파일 크기 및 유형 제한 구성	`src/components/custom/tables/project/common/TableContents.tsx`

관련 문제일 가능성 있음

#192: PR은 파일 업로드 및 텍스트 포맷팅 기능을 수정하여 문제를 해결합니다.
#192: PR은 문제의 요구 사항에 맞춰 텍스트 포맷팅 및 문장 분할을 처리합니다.

팁 및 명령어

#### Sourcery와 상호작용하기 - **새로운 리뷰 트리거:** 풀 리퀘스트에 `@sourcery-ai review`라고 댓글을 남깁니다. - **토론 계속하기:** Sourcery의 리뷰 댓글에 직접 답장합니다. - **리뷰 댓글에서 GitHub 이슈 생성:** 리뷰 댓글에 답장하여 Sourcery에게 이슈 생성을 요청합니다. - **풀 리퀘스트 제목 생성:** 풀 리퀘스트 제목 어디에나 `@sourcery-ai`를 작성하여 언제든지 제목을 생성합니다. - **풀 리퀘스트 요약 생성:** 풀 리퀘스트 본문 어디에나 `@sourcery-ai summary`를 작성하여 언제든지 PR 요약을 생성합니다. 이 명령어를 사용하여 요약을 삽입할 위치를 지정할 수도 있습니다. #### 경험 맞춤화하기 [대시보드](https://app.sourcery.ai)에 접속하여: - Sourcery가 생성한 풀 리퀘스트 요약, 리뷰어 가이드 등과 같은 리뷰 기능을 활성화하거나 비활성화합니다. - 리뷰 언어를 변경합니다. - 사용자 정의 리뷰 지침을 추가, 제거 또는 편집합니다. - 기타 리뷰 설정을 조정합니다. #### 도움 받기 - 질문이나 피드백이 있는 경우 [지원 팀에 문의](mailto:support@sourcery.ai)하세요. - 자세한 가이드와 정보를 보려면 [문서](https://docs.sourcery.ai)를 방문하세요. - [X/Twitter](https://x.com/SourceryAI), [LinkedIn](https://www.linkedin.com/company/sourcery-ai/) 또는 [GitHub](https://github.com/sourcery-ai)에서 Sourcery 팀을 팔로우하여 소식을 받아보세요.

Original review guide in English

## Reviewer's Guide by Sourcery This PR refactors the file upload functionality by replacing the `useTextFileUpload` hook with a more generic `useFileUpload` hook that supports multiple file types (txt, wav, mp3) and adds text splitting capabilities. The implementation includes file validation, size restrictions, and proper error handling. #### Sequence diagram for File Upload Process ```mermaid sequenceDiagram actor User participant useFileUpload participant File participant textSplitter User->>useFileUpload: handleFiles(files) useFileUpload->>File: validateFile(file) useFileUpload->>File: file.text() File-->>useFileUpload: text useFileUpload->>textSplitter: textSplitter(text) textSplitter-->>useFileUpload: sentences useFileUpload-->>User: onSuccess(sentences) useFileUpload->>User: onError(error) ``` #### Class diagram for useFileUpload Hook ```mermaid classDiagram class useFileUpload { - isLoading: boolean + handleFiles(files: FileList | null): Promise + validateFile(file: File): void } class UseFileUploadProps { + maxSizeInMB: number + allowedTypes: AllowedFileType[] + onSuccess(texts: string[]): void + onError(error: string): void } useFileUpload --> UseFileUploadProps class ALLOWED_FILE_TYPES { + TEXT: string + WAV: string + MP3: string } class textSplitter { + textSplitter(text: string): string[] } ``` ### File-Level Changes | Change | Details | Files | | ------ | ------- | ----- | | Introduced a new generic file upload hook with enhanced functionality |

Added support for multiple file types (text/plain, audio/wav, audio/mp3)
Implemented file size validation with configurable max size
Added file type validation against allowed types
Enabled multiple file upload support
Implemented proper error handling with custom error messages

| `src/hooks/useFileUpload.ts` | | Added text processing utility for handling line breaks |

Created a text splitter function that handles both CRLF and LF line endings
Added filtering to remove empty lines

| `src/utils/textSpliter.ts` | | Updated table contents component to use the new file upload hook |

Replaced useTextFileUpload with useFileUpload
Added text splitting logic using the new textSplitter utility
Configured file size and type restrictions

| `src/components/custom/tables/project/common/TableContents.tsx` | ### Possibly linked issues - **#192**: PR addresses the issue by modifying file upload and text formatting functionalities. - **#192**: PR addresses text formatting and sentence splitting, matching the issue's requirements. ---

Tips and commands

#### Interacting with Sourcery - **Trigger a new review:** Comment `@sourcery-ai review` on the pull request. - **Continue discussions:** Reply directly to Sourcery's review comments. - **Generate a GitHub issue from a review comment:** Ask Sourcery to create an issue from a review comment by replying to it. - **Generate a pull request title:** Write `@sourcery-ai` anywhere in the pull request title to generate a title at any time. - **Generate a pull request summary:** Write `@sourcery-ai summary` anywhere in the pull request body to generate a PR summary at any time. You can also use this command to specify where the summary should be inserted. #### Customizing Your Experience Access your [dashboard](https://app.sourcery.ai) to: - Enable or disable review features such as the Sourcery-generated pull request summary, the reviewer's guide, and others. - Change the review language. - Add, remove or edit custom review instructions. - Adjust other review settings. #### Getting Help - [Contact our support team](mailto:support@sourcery.ai) for questions or feedback. - Visit our [documentation](https://docs.sourcery.ai) for detailed guides and information. - Keep in touch with the Sourcery team by following us on [X/Twitter](https://x.com/SourceryAI), [LinkedIn](https://www.linkedin.com/company/sourcery-ai/) or [GitHub](https://github.com/sourcery-ai).

FC-DEV-FinalProject / final-fe-team4