fix : Migrate React to TypeScript

.gitignore

@@ -21,3 +21,26 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

package.json

@@ -1,17 +1,20 @@
 {
-  "name": "1-weekly-mission",
+  "name": "mission",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-router-dom": "^6.23.1",
+    "@types/jest": "^27.5.2",
+    "@types/node": "^16.18.104",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.25.1",
     "react-scripts": "5.0.1",
-    "react-slick": "^0.30.2",
-    "slick-carousel": "^1.8.1",
+    "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

src/API/CommentsAPI.js → src/API/CommentsAPI.ts

@@ -1,4 +1,21 @@
-export async function getComments(productId = 9, limit = 5) {
+interface comment {
+  id: number;
+  name: string;
+  content: string;
+  createdAt: string;
+  images: string;
+  nickname: string;
+  updatedAt: number;
+}
+
+interface commentList {
+  list: comment[];
+}
+
+export async function getComments(
+  productId = 9,
+  limit = 5
+): Promise<commentList> {
   const path = `/products/${productId}/comments?`;
   const query = `limit=${limit}`;
   const response = await fetch(

src/API/ItemAPI.ts

@@ -0,0 +1,29 @@
+interface Produect {
+  id: number;
+  name: string;
+  price: number;
+  description: string;
+  images: string;
+  createdAt: string;
+  favoriteCount: number;
+  tags: string;
+}
+
+interface ProduectList {
+  list: Produect[];
+}
+
+export async function getProducts(
+  pageSize = 10,
+  orderBy = "recent"
+): Promise<ProduectList> {
+  const query = `pageSize=${pageSize}&orderBy=${orderBy}`;
+  const response = await fetch(
+    `https://panda-market-api.vercel.app/products?${query}`
+  );
+  if (!response.ok) {
+    throw new Error("제품을 불러오는데 실패했습니다");
+  }
+  const result = await response.json();
+  return result;
+}

src/App.js

@@ -1,11 +1,11 @@
 import { BrowserRouter, Route, Routes } from "react-router-dom";
-import Header from "./Layout/Header.jsx";
-import HomePage from "./pages/HomePage/HomePage.jsx";
-import AddItemPage from "./pages/AddItemPage/AddItemPage.jsx";
-import MarketPage from "./pages/MarketPage/MarketPage.jsx";
-import ProductDetail from "./pages/MarketPage/components/ProductDetail.jsx";
-import { React } from "react";
-import { ItemProvider } from "../src/context/ItemContext.jsx";
+import Header from "./Layout/Header.tsx";
+import HomePage from "./pages/HomePage/HomePage.tsx";
+import AddItemPage from "./pages/AddItemPage/AddItemPage.tsx";
+import MarketPage from "./pages/MarketPage/MarketPage.tsx";
+import ProductDetail from "./pages/MarketPage/components/ProductDetail.tsx";
+
+import { ItemProvider } from "../src/context/ItemContext.tsx";
 
 function App() {
   return (

src/Layout/Header.jsx → src/Layout/Header.tsx

@@ -1,16 +1,19 @@
-import React from "react";
 import Logo from "../images/logo/logo.svg";
 import "./Header.css";
 import { NavLink, useLocation } from "react-router-dom";
 
-export function getLinkStyle({ isActive }) {
+interface GetLinkStyleProps {
+  isActive: boolean;
+}
+
+export function getLinkStyle({ isActive }: GetLinkStyleProps) {
   return {
     color: isActive ? "#3692ff" : "",
     textDecoration: isActive ? "none" : "",
   };
 }
 
-function Header() {
+const Header = () => {
   const location = useLocation();
 
   return (
@@ -38,6 +41,6 @@ function Header() {
       <div className="loginbutton">로그인</div>
     </header>
   );
-}
+};
 
 export default Header;

src/Layout/UI/Carousel.jsx → src/Layout/UI/Carousel.tsx

@@ -1,19 +1,13 @@
-import React from "react";
 import { ReactComponent as LeftArrow } from "../../images/icons/arrow_left.svg";
 import { ReactComponent as RightArrow } from "../../images/icons/arrow_right.svg";
 
-
-
-function PaginationBar () {
-
-return(
-<div>
-<LeftArrow/>
-<RightArrow/>
-</div>
-
-);
+function PaginationBar() {
+  return (
+    <div>
+      <LeftArrow />
+      <RightArrow />
+    </div>
+  );
 }
 
 export default PaginationBar;
-

src/Layout/UI/FileInput.jsx → src/Layout/UI/FileInput.tsx

@@ -1,13 +1,20 @@
-import { useEffect, useRef, useState } from "react";
+import { ChangeEvent, useEffect, useRef, useState } from "react";
 import "./FileInput.css";
 import xbutton from "../../images/icons/ic_X.svg";
 
-function FileInput({ name, value, onChange }) {
-  const [preview, setPreview] = useState();
-  const inputRef = useRef();
+interface FileInputProps {
+  id: string;
+  name: string;
+  value: File | null;
+  onChange: (name: string, file: File | null) => void;
+}
+
+function FileInput({ name, value, onChange }: FileInputProps) {
+  const [preview, setPreview] = useState<string>();
+  const inputRef = useRef<HTMLInputElement>(null);
 
-  const handleChange = (e) => {
-    const nextValue = e.target.files[0];
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const nextValue = e.target.files ? e.target.files[0] : null;
     onChange(name, nextValue);
   };
 
@@ -26,7 +33,7 @@ function FileInput({ name, value, onChange }) {
     setPreview(nextPreview);
 
     return () => {
-      setPreview();
+      setPreview(undefined);
       URL.revokeObjectURL(nextPreview);
     };
   }, [value]);

src/Layout/UI/SearchBar.tsx

@@ -0,0 +1,18 @@
+interface DropdownListProps {
+  onSortSelection: (type: string) => void;
+}
+
+const DropdownList = ({ onSortSelection }: DropdownListProps) => {
+  return (
+    <div className="dropdownList">
+      <div className="dropdownItem" onClick={() => onSortSelection("recent")}>
+        최신순
+      </div>
+      <div className="dropdownItem" onClick={() => onSortSelection("favorite")}>
+        인기순
+      </div>
+    </div>
+  );
+};
+
+export default DropdownList;

src/context/ItemContext.tsx

@@ -0,0 +1,39 @@
+import React, { createContext, useState, useEffect, ReactNode } from "react";
+import { getProducts } from "../API/ItemAPI";
+
+interface Product {
+  id: number;
+  name: string;
+  price: number;
+  description: string;
+  images: string;
+  createdAt: string;
+  favoriteCount: number;
+  tags: string;
+}
+
+interface ItemProviderPropt {
+  children: ReactNode;
+}
+
+export const ItemContext = createContext<Product[]>([]);
+
+export const ItemProvider: React.FC<ItemProviderPropt> = ({ children }) => {
+  const [itemList, setItemList] = useState<Product[]>([]);
+
+  useEffect(() => {
+    const fetchAndProcessData = async () => {
+      try {
+        const data = await getProducts();
+        setItemList(data.list);
+      } catch (error) {
+        console.error("데이터를 가져오지 못했습니다", error);
+      }
+    };
+    fetchAndProcessData();
+  }, []);
+
+  return (
+    <ItemContext.Provider value={itemList}>{children}</ItemContext.Provider>
+  );
+};