[문주영] Sprint8

package.json

@@ -5,7 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "vite build",
+    "build": "tsc -b && vite build",
     "lint": "eslint .",
     "preview": "vite preview"
   },
@@ -17,13 +17,15 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.21.0",
-    "@types/react": "^19.0.10",
-    "@types/react-dom": "^19.0.4",
+    "@types/node": "^22.15.29",
+    "@types/react": "^18.3.23",
+    "@types/react-dom": "^18.3.7",
     "@vitejs/plugin-react": "^4.3.4",
     "eslint": "^9.21.0",
     "eslint-plugin-react-hooks": "^5.1.0",
     "eslint-plugin-react-refresh": "^0.4.19",
     "globals": "^15.15.0",
+    "typescript": "^5.8.3",
     "vite": "^6.2.0"
   }
 }

src/App.jsx → src/App.tsx

@@ -1,12 +1,12 @@
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import { HelmetProvider } from 'react-helmet-async';
-import Index from './pages/Index.jsx';
-import Items from './pages/Items.jsx';
-import ItemProduct from './pages/ItemProduct.jsx';
-import AddItem from './pages/AddItem.jsx';
-import Auth from './pages/Auth.jsx';
-import Login from './pages/Login.jsx';
-import Signup from './pages/Signup.jsx';
+import Index from './pages/Index';
+import Items from './pages/Items';
+import ItemProduct from './pages/ItemProduct';
+import AddItem from './pages/AddItem';
+import Auth from './pages/Auth';
+import Login from './pages/Login';
+import Signup from './pages/Signup';
 import './reset.css';
 import './color.css';
 

src/api/api.ts

@@ -0,0 +1,31 @@
+import type { Comments, Product, Products } from "./apiTypes";
+
+const BASE_URL = "https://panda-market-api.vercel.app";
+
+export async function getProducts({ page=1, pageSize=10, orderBy="recent", keyword='' }: {
+    page?: number;
+    pageSize?: number;
+    orderBy?: "recent" | "favorite";
+    keyword?: string;
+}): Promise<Products> {
+    const response = await fetch(`${BASE_URL}/products?page=${page}&pageSize=${pageSize}&orderBy=${orderBy}${keyword && "&keyword="+keyword}`);
+    if (!response.ok) { throw Error("Request Error"); }
+    return (await response.json()) as Products;
+}
+
+export async function getProduct({ productId }: {
+    productId: number | string;
+}): Promise<Product> {
+    const response = await fetch(`${BASE_URL}/products/${productId}`);
+    if (!response.ok) { throw Error("Request Error"); }
+    return (await response.json()) as Product;
+}
+
+export async function getProductComments({ productId, limit }: {
+    productId: number | string;
+    limit: number;
+}): Promise<Comments> {
+    const response = await fetch(`${BASE_URL}/products/${productId}/comments?limit=${limit}`);
+    if (!response.ok) { throw Error("Request Error"); }
+    return (await response.json()) as Comments;
+}

src/api/apiTypes.ts

@@ -0,0 +1,35 @@
+export interface Product {
+    createdAt: string;
+    favoriteCount: number;
+    ownerNickname: string;
+    ownerId: number;
+    images: string[];
+    tags: string[];
+    price: number;
+    description: string;
+    name: string,
+    id: number;
+    isFavorite: boolean;
+}
+
+export interface Products {
+    totalCount: number;
+    list: Product[];
+}
+
+export interface Comment {
+    writer: {
+        image: string;
+        nickname: string;
+        id: number;
+    };
+    updatedAt: string;
+    createdAt: string;
+    content: string;
+    id: number;
+}
+
+export interface Comments {
+    nextCursor: number;
+    list: Comment[]
+}

src/components/AuthInput.jsx → src/components/AuthInput.tsx

@@ -1,53 +1,61 @@
-import { useState } from "react";
+import { useState, type FocusEvent, type FocusEventHandler, type InputHTMLAttributes } from "react";
 import Input from "./Input";
 import icEyeVisible from "../assets/ic_eye_visible.svg";
 import icEyeInvisible from "../assets/ic_eye_invisible.svg";
 import "./AuthInput.css";
 
-function PasswordInput ({ name, className, onFocusout, valid, wrongMessage, ...props }) {
+interface PasswordProps extends InputHTMLAttributes<HTMLInputElement> {
+    name: string;
+    label: string;
+    className?: string; 
+    onFocusout?: FocusEventHandler; 
+    valid?: string; 
+    wrongMessage: string;
+}
+
+function PasswordInput ({ name, label, className='', onFocusout, valid, wrongMessage, ...props }: PasswordProps) {
     const [isVisible, setIsVisible] = useState(false);
     const onClick = () => {
         setIsVisible((prev) => !prev);
     }
     const passwordMatch = () => {
         try {
-            const password = document.querySelector("input#password");
-            const passwordCheck = document.querySelector("input#password-check");
+            const password = document.querySelector("input#password") as HTMLInputElement;
+            const passwordCheck = document.querySelector("input#password-check") as HTMLInputElement;
             if (password.value === passwordCheck.value) {
                 passwordCheck.classList.add("correct");
                 passwordCheck.classList.remove("wrong");
-                passwordCheck.nextElementSibling.nextElementSibling.textContent = null;
+                (passwordCheck.nextElementSibling as HTMLElement).textContent = null;
             } else if (passwordCheck.value) {
                 passwordCheck.classList.add("wrong");
                 passwordCheck.classList.remove("correct");
-                passwordCheck.nextElementSibling.nextElementSibling.textContent = "비밀번호가 일치하지 않습니다.";
+                (passwordCheck.nextElementSibling as HTMLElement).textContent = "비밀번호가 일치하지 않습니다.";
             }
         } catch (e) {}
     }
 
     return (
-    <Input required name={name}
-        className={"password "+className}
-        type={isVisible ? "text" : "password"} 
-        onChange={passwordMatch}
-        {...(name === "password-check" 
-            ? { onChange: passwordMatch }
-            : { inputClassName: valid, minLength: 8, onBlur: onFocusout })}
-        {...props}
-    >
-        <button className="eye-btn" type="button" onClick={onClick}>
-            <img src={isVisible ? icEyeVisible : icEyeInvisible} />
-        </button>
-        <div className="wrong-message">{wrongMessage}</div>
-    </Input>
+        <Input required name={name} label={label}
+            className={"password "+className}
+            type={isVisible ? "text" : "password"} 
+            onChange={passwordMatch}
+            {...(name === "password-check" ? {}
+                : { inputClassName: valid, minLength: 8, onBlur: onFocusout })}
+            {...props}
+        >
+            <div className="wrong-message">{wrongMessage}</div>
+            <button className="eye-btn" type="button" onClick={onClick}>
+                <img src={isVisible ? icEyeVisible : icEyeInvisible} />
+            </button>
+        </Input>
     );
 }    
 
-export default function AuthInput ({ label, name, type="text", placeholder='', emptyWrongMessage='', invalidWrongMessage='' }) {
+export default function AuthInput ({ label='', name='', type="text", placeholder='', emptyWrongMessage='', invalidWrongMessage='' }) {
     const [valid, setValid] = useState('');
-    const [wrongMessage, setWrongMessage] = useState(null);
+    const [wrongMessage, setWrongMessage] = useState('');
 
-    const onFocusout = (e) => {
+    const onFocusout = (e: FocusEvent<HTMLInputElement>) => {
         if (!e.target.value) {
             setValid("wrong");
             setWrongMessage(emptyWrongMessage);
@@ -56,7 +64,7 @@ export default function AuthInput ({ label, name, type="text", placeholder='', e
             setWrongMessage(invalidWrongMessage);
         } else {
             setValid("correct");
-            setWrongMessage(null);
+            setWrongMessage('');
         }
     }
 

src/components/Button.jsx → src/components/Button.tsx

@@ -1,7 +1,13 @@
+import type { ButtonHTMLAttributes, ReactNode } from "react";
 import styles from "./Button.module.css";
 
-//styleType은 small, medium, large로 나뉜다
-function Button ({ styleType="small", className='', children, ...props }) {
+interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
+    styleType?: "small" | "medium" | "large";
+    className?: string;
+    children?: ReactNode;
+}
+
+function Button ({ styleType="small", className='', children, ...props }: Props) {
     return (
     <button className={`${styles.btn} ${styles[styleType]} ${className}`} {...props}>
         {children}

src/components/ButtonHeart.tsx

@@ -0,0 +1,24 @@
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+import icHeartLargeActive from "../assets/heart/ic_heart_large_active.svg";
+import icHeartLargeInactive from "../assets/heart/ic_heart_large_inactive.svg";
+import icHeartMediumActive from "../assets/heart/ic_heart_medium_active.svg";
+import icHeartMediumInactive from "../assets/heart/ic_heart_medium_inactive.svg";
+import styles from "./ButtonHeart.module.css";
+
+interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
+    isActive?: boolean;
+    className?: string;
+    children?: ReactNode;
+}
+
+function ButtonHeart({ isActive=false, className='', children, ...props }: Props) {
+    return (<button className={styles.btn+' '+className} {...props}>
+        <img className={styles.large+' '+styles[String(isActive)]} src={icHeartLargeActive} />
+        <img className={styles.large+' '+styles[String(!isActive)]} src={icHeartLargeInactive} />
+        <img className={styles.medium+' '+styles[String(isActive)]} src={icHeartMediumActive} />
+        <img className={styles.medium+' '+styles[String(!isActive)]} src={icHeartMediumInactive} />
+        {children}
+    </button>);
+}
+
+export default ButtonHeart;