Merge pull request #207 from 626-ju/React-김성주-sprint7

[김성주] sprint7

Author: addiescode-sj

package-lock.json

@@ -14,6 +14,7 @@
   "dependencies": {
     "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",

package.json

@@ -5,6 +5,7 @@ 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 './styles/reset.css';
 import './styles/global.css';
 import './App.css';
@@ -16,6 +17,7 @@ function App() {
         <Route element={<Header />}>
           <Route path="/" element={<Home />} />
           <Route path="/items" element={<Items />} />
+          <Route path="/items/:id" element={<ProductDetail />} />
           <Route path="/additem" element={<AddItem />} />
         </Route>
         <Route path="/login" element={<Login />} />

src/App.jsx

@@ -0,0 +1,15 @@
+import backLinkIcon from '@assets/icon/ic_back.png';
+import { useNavigate } from 'react-router-dom';
+import styles from '../styles/BackLink.module.css';
+
+function BackLink() {
+  const navigator = useNavigate();
+
+  return (
+    <button className={styles.backLink} onClick={() => navigator('/items')}>
+      목록으로 돌아가기 <img src={backLinkIcon} alt="목록으로 가기 아이콘" />
+    </button>
+  );
+}
+
+export default BackLink;

src/assets/icon/ic_kebab.png

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

src/components/BackLink.jsx

@@ -1,6 +1,6 @@
 import googleIcon from '@assets/icon/login_google.png';
 import kakaoIcon from '@assets/icon/login_kakao.png';
-import styles from '@pages/Auth/styles/Login.module.css';
+import styles from '@pages/Auth/styles/Auth.module.css';
 
 function SocialLogin() {
   return (

src/components/KebabMenu.jsx

@@ -0,0 +1,25 @@
+import profileImage from '@assets/icon/ic_user.png';
+import styles from '../styles/UserProfilCard.module.css';
+
+const classNameByauthority = {
+  post: styles.post,
+  comment: styles.comment,
+};
+
+function UserProfileCard({ authority, name, time, image }) {
+  const userImage = image || profileImage;
+
+  return (
+    <div className={classNameByauthority[authority]}>
+      <div className={styles.userInfo}>
+        <img src={userImage} alt="사용자 프로필 사진" />
+        <div>
+          <div className={styles.userName}>{name}</div>
+          <div className={styles.postTime}>{time}</div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default UserProfileCard;

src/components/SocialLogin.jsx

@@ -0,0 +1,22 @@
+import { useEffect, useRef } from 'react';
+
+export function useIntersectionObserver(targetRef, onIntersect = () => {}) {
+  const observerRef = useRef(null);
+
+  useEffect(() => {
+    if (!targetRef.current) return;
+
+    if (!observerRef.current) {
+      observerRef.current = new IntersectionObserver(
+        (entries) => {
+          if (entries[0].isIntersecting) onIntersect();
+        },
+        { threshold: 1 },
+      );
+    }
+
+    observerRef.current.observe(targetRef.current);
+
+    return () => observerRef.current.disconnect();
+  }, []);
+}

src/components/UserProfileCard.jsx

@@ -14,6 +14,7 @@ export function useLoadItems(queryStrings) {
         setResult(result);
         setLoadFailed(false);
       } catch (err) {
+        console.log('아이템 가져오기 실패', err);
         setLoadFailed(true);
       }
     }