feat: 기존 코드에서 타입스크립트 적용 (#110)

Author: changhui-chan

global.d.ts

@@ -0,0 +1,11 @@
+declare module '*.module.css' {
+  const content: { [key: string]: string };
+  export default content;
+}
+
+declare module '*.svg' {
+  import React from 'react';
+  export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
+  const src: string;
+  export default src;
+}

jsconfig.json

@@ -6,10 +6,13 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "@types/react": "^18.3.11",
+    "@types/react-dom": "^18.3.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.26.1",
     "react-scripts": "5.0.1",
+    "typescript": "^5.6.3",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

package-lock.json

@@ -0,0 +1,26 @@
+import { Routes, Route } from 'react-router-dom';
+import Home from 'components/Home';
+import Items from 'pages/items/Items';
+import AddItem from 'pages/additem/AddItem';
+import ProductId from 'pages/items/productId/ProductId';
+
+const App = () => {
+  return (
+    <div>
+      <Routes>
+        <Route path="/" element={<Items />} />
+        <Route path="/login" element={<Home />} />
+        <Route path="/signup" element={<Home />} />
+        <Route path="/signin" element={<Home />} />
+        <Route path="/items" element={<Items />} />
+        <Route path="/items/:id" element={<ProductId />} />
+        <Route path="/additem" element={<AddItem />} />
+        <Route path="/faq" element={<Home />} />
+        <Route path="/privacy" element={<Home />} />
+        <Route path="*" element={<Home />} />
+      </Routes>
+    </div>
+  );
+};
+
+export default App;

package.json

@@ -1,9 +1,31 @@
-export const fetchData = async (url, query = {}, method = 'GET', body = null, headers = {}) => {
+interface FetchDataOptions {
+  url: string;
+  query?: Record<string, any>;
+  method?: string;
+  body?: any;
+  headers?: Record<string, string>;
+}
+
+interface FetchDataResult {
+  data: any;
+  loading: boolean;
+  error: any;
+}
+
+export const fetchData = async ({
+  url,
+  query = {},
+  method = 'GET',
+  body = null,
+  headers = {}
+}: FetchDataOptions): Promise<FetchDataResult> => {
   const queryString = new URLSearchParams(query).toString();
-  let data, error, loading = true;
+  let data: any = null;
+  let error: any = null;
+  let loading: boolean = true;
 
   try {
-    const options = {
+    const options: RequestInit = {
       method,
       headers: {
         'Content-Type': 'application/json',
@@ -28,3 +50,5 @@ export const fetchData = async (url, query = {}, method = 'GET', body = null, he
 
   return { data, loading, error };
 };
+
+export default fetchData;

src/App.jsx

@@ -45,4 +45,4 @@ const Header = () => {
   );
 }
 
-export default Header;
+export default Header;