Merge pull request #232 from summerDev96/React-배수민-sprint8

[배수민] sprint8

Author: addiescode-sj

package-lock.json

@@ -10,7 +10,8 @@
     "react-dom": "^18.2.0",
     "react-router-dom": "^7.6.0",
     "react-scripts": "5.0.1",
-    "web-vitals": "^2.1.4"
+    "web-vitals": "^2.1.4",
+    "zustand": "^5.0.6"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -37,6 +38,9 @@
     ]
   },
   "devDependencies": {
-    "eslint-config-prettier": "^10.1.5"
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@types/node": "^24.0.14",
+    "eslint-config-prettier": "^10.1.5",
+    "typescript": "^4.9.5"
   }
 }

package.json

@@ -1,5 +1,6 @@
 import { Outlet } from "react-router-dom";
 import Nav from "./components/Nav";
+import Footer from "./components/Footer";
 
 function App() {
   return (
@@ -8,6 +9,7 @@ function App() {
       <div>
         <Outlet />
       </div>
+      <Footer />
     </>
   );
 }

src/App.js

@@ -6,17 +6,23 @@ import "./css/base/common.css";
 import ItemsPage from "./pages/ItemsPage";
 import ItemRegisterPage from "./pages/ItemRegisterPage";
 import ItemDetailPage from "./pages/ItemDetailPage";
+import HomePage from "./pages/HomePage";
+import SignupPage from "./pages/SignupPage";
+import LoginPage from "./pages/LoginPage";
 
 const Main = () => {
   return (
     <BrowserRouter>
       <Routes>
         <Route path="/" element={<App />}>
+          <Route index element={<HomePage />} />
           <Route path="items">
             <Route path=":id" element={<ItemDetailPage />}></Route>
             <Route index element={<ItemsPage />}></Route>
           </Route>
           <Route path="additem" element={<ItemRegisterPage />}></Route>
+          <Route path="signup" element={<SignupPage />}></Route>
+          <Route path="login" element={<LoginPage />}></Route>
         </Route>
       </Routes>
     </BrowserRouter>

src/Main.js

@@ -1,13 +1,22 @@
 import "./css/Button.css";
 import backIcon from "../img/back.svg";
+import { ReactNode } from "react";
+
+interface ButtonProps {
+  className?: string;
+  type?: "register" | "return" | "cancel" | "small" | "large";
+  disabled?: boolean;
+  children?: ReactNode;
+  onClick?: () => void;
+}
 
 const Button = ({
-  className,
-  type,
-  disabled,
+  className = "",
+  type = "small",
+  disabled = false,
   children,
   onClick = () => {},
-}) => {
+}: ButtonProps) => {
   const btnStyleClass = {
     register: "btn-register",
     return: "btn-return",

src/components/Button.js src/components/Button.tsxsrc/components/Button.js renamed to src/components/Button.tsx

@@ -11,7 +11,7 @@ const Comment = ({ data }) => {
   const [showDropdown, setShowDropdown] = useState(false);
   const [isEditMode, setIsEditMode] = useState(false);
 
-  const onClickDropdown = () => {
+  const toggleDropdown = () => {
     setShowDropdown(!showDropdown);
   };
 
@@ -20,7 +20,7 @@ const Comment = ({ data }) => {
     { name: "삭제하기", value: "delete" },
   ];
 
-  const onClickDropdownItem = (item) => {
+  const handleDropdownItemClick = (item) => {
     // 동작 실행 후 닫기
     switch (item.value) {
       case "edit":
@@ -52,8 +52,8 @@ const Comment = ({ data }) => {
         <div className="comment__content">
           <span>{content}</span>
           <MoreDropdown
-            onClickDropdown={onClickDropdown}
-            onClickDropdownItem={onClickDropdownItem}
+            onToggleDropdown={toggleDropdown}
+            onDropdownItemClick={handleDropdownItemClick}
             onCloseDropdown={onCloseDropdown}
             dropdownList={dropdownList}
             showDropdown={showDropdown}

src/components/Comment.js

@@ -1,38 +1,29 @@
 import "./css/Dropdown.css";
 import sortIcon from "../img/sort.svg";
 import arrowDownIcon from "../img/arrow_down.svg";
-import { createContext, useContext, useRef, useEffect } from "react";
+import { createContext, useContext, useRef } from "react";
+import useClickOutside from "../hooks/useClickOutside";
 const DropdownContext = createContext();
 
 const Dropdown = ({
   children,
   className = "",
-  onClickDropdown,
-  onClickDropdownItem,
+  onToggleDropdown,
+  onDropdownItemClick,
   onCloseDropdown = () => {},
   dropdownList,
   showDropdown,
   value,
 }) => {
   const dropdownRef = useRef(null);
-
-  // 외부 클릭 시 드롭다운 닫기
-  useEffect(() => {
-    const handleClickOutside = (e) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
-        onCloseDropdown();
-      }
-    };
-    window.addEventListener("click", handleClickOutside);
-    return () => window.removeEventListener("click", handleClickOutside);
-  }, [onCloseDropdown]);
+  useClickOutside(dropdownRef, onCloseDropdown);
 
   return (
     <DropdownContext.Provider
       value={{
         className,
-        onClickDropdown,
-        onClickDropdownItem,
+        onToggleDropdown,
+        onDropdownItemClick,
         onCloseDropdown,
         dropdownList,
         showDropdown,
@@ -47,9 +38,9 @@ const Dropdown = ({
 };
 
 const Button = () => {
-  const { value, onClickDropdown } = useContext(DropdownContext);
+  const { value, onToggleDropdown } = useContext(DropdownContext);
   return (
-    <div className="dropdown__button" onClick={onClickDropdown}>
+    <div className="dropdown__button" onClick={onToggleDropdown}>
       <span className="dropdown__text">{value.name}</span>
       <img
         src={arrowDownIcon}
@@ -62,15 +53,15 @@ const Button = () => {
 };
 
 const List = ({ listClassName = "" }) => {
-  const { showDropdown, dropdownList, onClickDropdownItem } =
+  const { showDropdown, dropdownList, onDropdownItemClick } =
     useContext(DropdownContext);
   if (!showDropdown) return null;
   return (
     <ul className={`dropdown__list ${listClassName}`}>
       {dropdownList?.map((item, index) => (
         <li
           key={`${item.value}-${index}`}
-          onClick={() => onClickDropdownItem(item)}
+          onClick={() => onDropdownItemClick(item)}
         >
           {item.name}
         </li>