diff --git a/docs/docs/react/hooks/useFileReader.mdx b/docs/docs/react/hooks/useFileReader.mdx index 7e2975e46..0b3985e79 100644 --- a/docs/docs/react/hooks/useFileReader.mdx +++ b/docs/docs/react/hooks/useFileReader.mdx @@ -22,8 +22,9 @@ interface ReadFileOptions { readType: ReadType; accepts?: string[]; } - -const useFileReader: () => { +``` +```ts title="typescript" +function useFileReader(): { readFile: ({ file, readType, @@ -40,12 +41,14 @@ import React, { useState } from 'react'; import { useFileReader } from '@modern-kit/react'; const Example = () => { - const { readFile, fileContents, loading } = useFileReader() + const { readFile, fileContents, isLoading } = useFileReader() const handleChange = (e: React.ChangeEvent) => { if(!e.target.files) return; - readFile({ file: e.target.files, readType: 'readAsText' }); + const data = await readFile({ file: e.target.files, readType: 'readAsText' }); + // data 처리 + /* * 1. readFile은 Promise 반환합니다. 해당 값은 fileContents와 동일합니다. * ex) const data = await readFile(e.target.files, 'readAsDataURL'); diff --git a/packages/react/src/hooks/useFileReader/index.ts b/packages/react/src/hooks/useFileReader/index.ts index c46d09003..c69b3c3e5 100644 --- a/packages/react/src/hooks/useFileReader/index.ts +++ b/packages/react/src/hooks/useFileReader/index.ts @@ -4,7 +4,7 @@ import { getFiles, getReaderPromise, inValidFileType, -} from './internal'; +} from './useFileReader.utils'; type ReadType = 'readAsText' | 'readAsDataURL' | 'readAsArrayBuffer'; @@ -14,7 +14,38 @@ interface ReadFileOptions { accepts?: string[]; } -export function useFileReader() { +interface UseFileReaderReturnType { + readFile: ({ + file, + readType, + accepts, + }: ReadFileOptions) => Promise; + fileContents: FileContent[]; + isLoading: boolean; +} + +/** + * @description `File` 객체를 원하는 읽기 메서드(`readAsText`,`readAsDataURL`,`readAsArrayBuffer`)로 읽고, 읽은 파일 컨텐츠를 반환하는 커스텀 훅입니다. + * + * @returns {UseFileReaderReturnType} - 파일 읽기 함수, 파일 내용, 로딩 상태를 포함하는 객체를 반환합니다. + * @property {{file, readType, accepts}: ReadFileOptions} readFile - 파일을 읽는 비동기 함수입니다. + * - `file`: 읽을 파일 또는 파일 목록입니다. + * - `readType`: 파일을 읽는 방법을 지정합니다. ('readAsText', 'readAsDataURL', 'readAsArrayBuffer' 중 하나) + * - `accepts`: 허용되는 파일 유형의 배열입니다. + * @property {FileContent[]} fileContents - 읽은 파일의 내용을 저장하는 상태입니다. + * @property {boolean} isLoading - 파일을 읽는 동안 로딩 상태를 나타내는 상태입니다. + * + * @example + * ```tsx + * const { readFile, fileContents, isLoading } = useFileReader(); + * + * const handleChange = (e: React.ChangeEvent) => { + * if(!e.target.files) return; + * readFile({ file: e.target.files, readType: 'readAsText' }); + * } + * ``` + */ +export function useFileReader(): UseFileReaderReturnType { const [fileContents, setFileContents] = useState([]); const [isLoading, setIsLoading] = useState(false); diff --git a/packages/react/src/hooks/useFileReader/useFileReader.spec.ts b/packages/react/src/hooks/useFileReader/useFileReader.spec.ts index cacc02430..227be3970 100644 --- a/packages/react/src/hooks/useFileReader/useFileReader.spec.ts +++ b/packages/react/src/hooks/useFileReader/useFileReader.spec.ts @@ -32,8 +32,8 @@ const errorFileContent = { }; describe('useFileReader', () => { - describe('Success Case', () => { - it('should return the normal file contents in "fileContents" when a value of type "File" is passed as an argument to "readFile"', async () => { + describe('성공 케이스', () => { + it('"readFile"의 인자로 "File" 타입의 값이 전달되면 "fileContents"에 정상적인 파일 내용을 반환해야 합니다.', async () => { const { result } = renderHook(() => useFileReader()); const expectedSuccessFileContents = [getSuccessFileContent(testFile1)]; @@ -55,7 +55,7 @@ describe('useFileReader', () => { }); }); - it('should return the normal file contents in "fileContents" when a value of type "FileList" is passed as an argument to "readFile"', async () => { + it('"readFile"의 인자로 "FileList" 타입의 값이 전달되면 "fileContents"에 정상적인 파일 내용을 반환해야 합니다.', async () => { const { result } = renderHook(() => useFileReader()); const expectedSuccessFileContents = [ getSuccessFileContent(testFile1), @@ -80,7 +80,7 @@ describe('useFileReader', () => { }); }); - it('should only read files of types specified in the "accepts" attribute', async () => { + it('"accepts" 속성에 지정된 타입의 파일만 읽어야 합니다.', async () => { const { result } = renderHook(() => useFileReader()); const expectedSuccessFileContents = [getSuccessFileContent(testFile2)]; @@ -103,9 +103,9 @@ describe('useFileReader', () => { }); }); - describe('Error Case', () => { + describe('에러 케이스', () => { // Line: getReaderPromise - reader.onerror - it('should return the error contents in "fileContents" when "reader.onerror" is called', async () => { + it('"reader.onerror"가 호출되면 "fileContents"에 에러 내용을 반환해야 합니다.', async () => { const { result } = renderHook(() => useFileReader()); const failedExpectedFileContents = [errorFileContent]; @@ -125,7 +125,7 @@ describe('useFileReader', () => { }); // Line: readerPromises - catch - it('should return the error contents in "fileContents" if an error occurs during the call to "reader[readType]"', async () => { + it('"reader[readType]" 호출 중 에러가 발생하면 "fileContents"에 에러 내용을 반환해야 합니다.', async () => { const { result } = renderHook(() => useFileReader()); const failedExpectedFileContents = [errorFileContent]; @@ -146,7 +146,7 @@ describe('useFileReader', () => { }); // Line: inValidFileType - it('should return an empty array for "fileContents" if the argument to "readFile" is neither of type "File" nor "FileList"', async () => { + it('"readFile"의 인자가 "File" 또는 "FileList" 타입이 아닌 경우 "fileContents"에 빈 배열을 반환해야 합니다.', async () => { const { result } = renderHook(() => useFileReader()); await waitFor(async () => { diff --git a/packages/react/src/hooks/useFileReader/internal.ts b/packages/react/src/hooks/useFileReader/useFileReader.utils.ts similarity index 100% rename from packages/react/src/hooks/useFileReader/internal.ts rename to packages/react/src/hooks/useFileReader/useFileReader.utils.ts