docs: useFileReader 한글화 및 테스트 코드 개선

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<HTMLInputElement>) => {
     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<FileContent[]> 반환합니다. 해당 값은 fileContents와 동일합니다.
      * ex) const data = await readFile(e.target.files, 'readAsDataURL'); 

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<FileContent[]>;
+  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<HTMLInputElement>) => {
+ *   if(!e.target.files) return;
+ *   readFile({ file: e.target.files, readType: 'readAsText' });
+ * }
+ * ```
+ */
+export function useFileReader(): UseFileReaderReturnType {
   const [fileContents, setFileContents] = useState<FileContent[]>([]);
   const [isLoading, setIsLoading] = useState(false);
 

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 () => {