typescript로 변환

package.json

@@ -6,6 +6,10 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^29.5.12",
+    "@types/node": "^20.14.6",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "dotenv": "^16.4.5",
     "react": "^18.3.1",
     "react-dom": "^18.2.0",
@@ -37,5 +41,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "typescript": "^5.4.5"
   }
 }

src/App.js → src/App.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { BrowserRouter, Route, Routes } from "react-router-dom";
 import HomePage from "./pages/HomePage/HomePage";
 import LoginPage from "./pages/LoginPage/LoginPage";

src/api/itemApi.js → src/api/itemApi.ts

@@ -17,7 +17,7 @@ export async function getProducts(params = {}) {
   }
 }
 
-export async function getProductInformation(itemId) {
+export async function getProductInformation(itemId: number) {
   try {
     const response = await fetch(
       `${baseurl}/products/${itemId}`
@@ -33,7 +33,7 @@ export async function getProductInformation(itemId) {
   }
 }
 
-export async function getComments(itemId) {
+export async function getComments(itemId: number) {
   try {
     const response = await fetch(
       `${baseurl}/products/${itemId}/comments/?limit=100`

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

@@ -1,4 +1,4 @@
-
+import React from 'react';
 import Logo from "../../assets/images/logo/logo.svg";
 import { Link, NavLink } from "react-router-dom";
 import "./Header.css";
@@ -11,7 +11,7 @@ const UserLogo = styled.div`
 `
 
 // react-router-dom의 NavLink를 이용하면 활성화된 네비게이션 항목을 하이라이트해줄 수 있어요!
-function getLinkStyle({ isActive }) {
+function getLinkStyle({ isActive }: { isActive: boolean }) {
   return { color: isActive ? "var(--blue)" : undefined };
 }
 

src/components/UI/DropdownList.jsx → src/components/UI/DropdownList.tsx

@@ -1,7 +1,11 @@
 import React from "react";
 import "./DropdownList.css";
 
-function DropdownList({ onSortSelection }) {
+interface DropdownListProps {
+  onSortSelection: (sortType: string) => void;
+}
+
+function DropdownList({ onSortSelection }: DropdownListProps) {
   return (
     <div className="dropdownList">
       <div className="dropdownItem" onClick={() => onSortSelection("recent")}>

src/components/UI/PaginationBar.jsx → src/components/UI/PaginationBar.tsx

@@ -3,7 +3,13 @@ import "./PaginationBar.css";
 import { ReactComponent as LeftArrow } from "../../assets/images/icons/arrow_left.svg";
 import { ReactComponent as RightArrow } from "../../assets/images/icons/arrow_right.svg";
 
-const PaginationBar = ({ totalPageNum, activePageNum, onPageChange }) => {
+interface PaginationBarProps {
+  totalPageNum: number;
+  activePageNum: number;
+  onPageChange: (page: number) => void;
+}
+
+const PaginationBar = ({ totalPageNum, activePageNum, onPageChange }: PaginationBarProps) => {
   const maxVisiblePages = 5;
   let startPage;
 

src/index.js → src/index.tsx

@@ -3,9 +3,7 @@ import ReactDOM from "react-dom/client";
 import App from "./App";
 import "./styles/global.css"; // index.js에서 global stylesheet을 import하면 전역적으로 스타일이 적용돼요
 
-const root = ReactDOM.createRoot(document.getElementById("root"));
+const root = ReactDOM.createRoot(document.getElementById("root")  as HTMLElement);
 root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
+  <App />
 );

src/pages/AddItemPage/AddItemPage.jsx → src/pages/AddItemPage/AddItemPage.tsx

@@ -5,7 +5,7 @@ import TagClose from '../../assets/images/icons/tag_close.png'
 import '../../styles/global.css'
 
 function AddItemPage() {
-  const [tags, setTags] = useState([]);
+  const [tags, setTags] = useState<string[]>([]);
   const [values, setValues] = useState({
     productName: '',
     productItd: '',
@@ -14,34 +14,36 @@ function AddItemPage() {
     imgFile: null,
   })
 
-  const onKeyPress = e => {
-    if(tags.includes(e.target.value)) return;
-    if (e.target.value.length !== 0 && e.key === 'Enter') {
+  const onKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    const target = e.target as HTMLInputElement;
+    if(tags.includes(target.value)) return;
+    if (target.value.length !== 0 && e.key === 'Enter') {
       setTags([
         ...tags,
-        e.target.value
+        target.value
       ])
     }
     values.tag = '';
   }
-  const DeleteTag = e => {
-    const newTags = tags.filter((item) => item !== e.target.id);
+  const DeleteTag = (e: React.MouseEvent<HTMLImageElement>) => {
+    const id = e.currentTarget.id;
+    const newTags = tags.filter((item) => item !== id);
     setTags(newTags);
   }
 
-  const handleChange = (name, value) => {
+  const handleChange = (name: string, value: any) => {
     setValues({
       ...values,
       [name] : value,
     })
   }
 
-  const handleInputChange = (e) => {
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
     const { name, value } = e.target;
     handleChange(name, value);
   }
 
-  const handleSubmit = (e) => {
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
   }
   const disabled = () => {

src/pages/AddItemPage/components/FileInput.jsx → src/pages/AddItemPage/components/FileInput.tsx

@@ -1,14 +1,21 @@
+import React from 'react';
 import { useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
 import PlusImg from '../../../assets/images/icons/ic_plus.svg';
 import CloseBtn from '../../../assets/images/icons/close_btn.png'
 
-function FileInput({ name, value, onChange }) {
-  const [preview, setPreview] = useState();
-  const inputRef = useRef();
+interface FileInputProps {
+  name: string;
+  value: File | null;
+  onChange: (name: string, value: File | null) => void;
+}
+
+function FileInput({ name, value, onChange }: FileInputProps) {
+  const [preview, setPreview] = useState<string | undefined>(undefined);
+  const inputRef = useRef<HTMLInputElement>(null); 
 
-  const handleChange = (e) => {
-    const nextValue = e.target.files[0];
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const nextValue = e.target.files ? e.target.files[0] : null;
     onChange(name, nextValue);
   }
   const handleClearClick = () => {
@@ -26,7 +33,7 @@ function FileInput({ name, value, onChange }) {
     setPreview(nextPreview);
 
     return () => {
-      setPreview();
+      setPreview(undefined);
       URL.revokeObjectURL(nextPreview);
     }
   },[value])

src/pages/MarketPage/components/AllItemsSection.jsx → src/pages/MarketPage/components/AllItemsSection.tsx

@@ -7,6 +7,22 @@ import { Link } from "react-router-dom";
 import DropdownList from "../../../components/UI/DropdownList";
 import PaginationBar from "../../../components/UI/PaginationBar";
 
+// Product 타입 정의
+interface Product {
+  id: number;
+  images: string[];
+  name: string;
+  price: number;
+  favoriteCount: number;
+}
+
+// getProducts 함수의 매개변수 타입 정의
+interface GetProductsParams {
+  orderBy: string;
+  page: number;
+  pageSize: number;
+}
+
 const getPageSize = () => {
   const width = window.innerWidth;
   if (width < 768) {
@@ -25,17 +41,17 @@ function AllItemsSection() {
   const [orderBy, setOrderBy] = useState("recent");
   const [page, setPage] = useState(1);
   const [pageSize, setPageSize] = useState(getPageSize());
-  const [itemList, setItemList] = useState([]);
+  const [itemList, setItemList] = useState<Product[]>([]);
   const [isDropdownVisible, setIsDropdownVisible] = useState(false);
-  const [totalPageNum, setTotalPageNum] = useState();
+  const [totalPageNum, setTotalPageNum] = useState<number>();
 
-  const fetchSortedData = async ({ orderBy, page, pageSize }) => {
+  const fetchSortedData = async ({ orderBy, page, pageSize }: GetProductsParams) => {
     const products = await getProducts({ orderBy, page, pageSize });
     setItemList(products.list);
     setTotalPageNum(Math.ceil(products.totalCount / pageSize));
   };
 
-  const handleSortSelection = (sortOption) => {
+  const handleSortSelection = (sortOption: string) => {
     setOrderBy(sortOption);
     setIsDropdownVisible(false);
   };
@@ -59,7 +75,7 @@ function AllItemsSection() {
     setIsDropdownVisible(!isDropdownVisible);
   };
 
-  const onPageChange = (pageNumber) => {
+  const onPageChange = (pageNumber: number) => {
     setPage(pageNumber);
   };
 
@@ -101,7 +117,7 @@ function AllItemsSection() {
 
       <div className="paginationBarWrapper">
         <PaginationBar
-          totalPageNum={totalPageNum}
+          totalPageNum={totalPageNum || 0} 
           activePageNum={page}
           onPageChange={onPageChange}
         />