Merge pull request #227 from 626-ju/React-김성주-sprint8

[김성주] sprint8

Author: addiescode-sj

package-lock.json

@@ -12,16 +12,20 @@
     "format": "prettier --write \"src/**/*.{js,jsx,css,json}\""
   },
   "dependencies": {
+    "@hookform/resolvers": "^5.1.1",
+    "clsx": "^2.1.1",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-hook-form": "^7.59.0",
     "react-router-dom": "^7.6.0",
     "sass": "^1.88.0",
     "styled-components": "^6.1.18",
+    "zod": "^4.0.5",
     "zustand": "^5.0.5"
   },
   "devDependencies": {
     "@eslint/js": "^9.25.0",
+    "@types/node": "^24.0.10",
     "@types/react": "^19.1.2",
     "@types/react-dom": "^19.1.2",
     "@vitejs/plugin-react": "^4.4.1",
@@ -35,6 +39,7 @@
     "eslint-plugin-react-refresh": "^0.4.19",
     "globals": "^16.0.0",
     "prettier": "^3.5.3",
+    "typescript": "^5.8.3",
     "vite": "^6.3.5"
   }
 }

package.json

@@ -1,11 +1,11 @@
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import Header from './components/Header/Header';
-import AddItem from './pages/AddItem/AddItem';
+import AddItem from './pages/AddItem/AddItem.jsx';
 import Login from './pages/Auth/Login';
 import SignUp from './pages/Auth/SignUp';
 import Home from './pages/Home/Home';
-import Items from './pages/Items/Items';
-import ProductDetail from './pages/ProductDetail/ProductDetail';
+import Items from './pages/Items/Items.jsx';
+import ProductDetail from './pages/ProductDetail/ProductDetail.jsx';
 import './styles/reset.css';
 import './styles/global.css';
 import './App.css';

src/App.jsx renamed to src/App.tsx

@@ -7,7 +7,7 @@ import HeaderAuth from './HeaderAuth';
 import Navigations from './Navigations';
 
 function Header() {
-  const [isLoggedIn] = useState(sessionStorage.getItem('loggedIn'));
+  const [isLoggedIn] = useState(!!sessionStorage.getItem('loggedIn'));
 
   return (
     <>

src/components/Header/Header.jsx renamed to src/components/Header/Header.tsx

@@ -2,7 +2,11 @@ import userImg from '@assets/icon/ic_user.png';
 import styles from '@styles/Header.module.css';
 import { Link } from 'react-router-dom';
 
-function HeaderAuth({ isLoggedIn }) {
+interface Props {
+  isLoggedIn: boolean;
+}
+
+function HeaderAuth({ isLoggedIn }: Props) {
   return (
     <>
       {isLoggedIn ? (

src/components/Header/HeaderAuth.jsx renamed to src/components/Header/HeaderAuth.tsx

@@ -1,5 +1,6 @@
 import styles from '@styles/Header.module.css';
 import { Link, NavLink, useLocation } from 'react-router-dom';
+import clsx from 'clsx';
 
 function Navigations() {
   const location = useLocation();
@@ -9,10 +10,10 @@ function Navigations() {
 
   return (
     <div className={styles.navCategory}>
-      <Link>자유게시판</Link>
+      <Link to={'/'}>자유게시판</Link>
       <NavLink
         to="/items"
-        className={() => (isMarketLocation ? `${styles.isActive}` : null)}
+        className={clsx({ [styles.isActive]: isMarketLocation })}
       >
         중고마켓
       </NavLink>

src/components/Header/Navigations.jsx renamed to src/components/Header/Navigations.tsx

@@ -1,5 +1,6 @@
-import { useEffect, useRef, useState } from 'react';
+import { useRef, useState } from 'react';
 import kebabIcon from '@assets/icon/ic_kebab.png';
+import useOutsideClick from '../hooks/useOutsideClick';
 import styles from '../styles/KebabMenu.module.css';
 
 function makeHtmlAttr(selector) {
@@ -24,28 +25,22 @@ function KebabMenu({ dropdownList, onSelect = () => {} }) {
     setIsOpen(false);
   }
 
-  useEffect(() => {
-    function closeDropDown(e) {
-      if (!kebabRef.current.contains(e.target)) {
-        setIsOpen(false);
-      }
-    }
-
-    window.addEventListener('click', closeDropDown);
+  function onCloseDropdown() {
+    setIsOpen(false);
+  }
 
-    return () => window.removeEventListener('click', closeDropDown);
-  }, []);
+  useOutsideClick(kebabRef, onCloseDropdown);
 
   return (
-    <div className={styles.kebab}>
-      <button ref={kebabRef} onClick={handleToggleDropDown}>
+    <div className={styles.kebab} ref={kebabRef}>
+      <button onClick={handleToggleDropDown}>
         <img src={kebabIcon} alt="케밥 아이콘" />
       </button>
       {isOpen && (
         <ul role="listbox">
           {dropdownList?.map((selector) => (
             <li
-              key={`${selector}`}
+              key={selector}
               {...makeHtmlAttr(selector)}
               onClick={() => handleClick(selector)}
             >

src/components/KebabMenu.jsx

@@ -0,0 +1,17 @@
+declare module '*.png';
+
+declare module '*.module.css' {
+  const classes: { [key: string]: string };
+  export default classes;
+}
+
+declare module '*.css' {
+  const classes: { [key: string]: string };
+  export default classes;
+}
+
+declare module '*.jsx' {
+  import * as React from 'react';
+  const component: React.FC<any>;
+  export default component;
+}

src/components/SocialLogin.jsx renamed to src/components/SocialLogin.tsx

@@ -0,0 +1,17 @@
+import { useEffect } from 'react';
+
+function useOutsideClick(ref, onCloseDropdown) {
+  useEffect(() => {
+    function closeDropdownHandler(e) {
+      if (ref.current && !ref.current.contains(e.target)) {
+        onCloseDropdown();
+      }
+    }
+
+    window.addEventListener('click', closeDropdownHandler);
+
+    return () => window.removeEventListener('click', closeDropdownHandler);
+  }, [ref, onCloseDropdown]);
+}
+
+export default useOutsideClick;