From 2aea10d86a49fb4ee803f74dcb04710722a47b8a Mon Sep 17 00:00:00 2001 From: rachel4w2 Date: Sat, 30 Sep 2023 19:37:13 +0900 Subject: [PATCH] =?UTF-8?q?feat=20:=20=EC=9C=A0=EC=A0=80=20=EA=B2=80?= =?UTF-8?q?=EC=83=89=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=A7=88=EC=9D=B4?= =?UTF-8?q?=EA=B7=B8=EB=A0=88=EC=9D=B4=EC=85=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - api 호출 방식 변경 axios → fetch - useNavigate → useRouter - react-router-dom의 URL 파라미터 라우팅 방식 → Next.js dynamic routing 방식 - useParams → Next.js dynamic routing - img 태그 → 'next/image’의 Image 태그로 변경 --- frontend/package.json | 4 +- .../(search)/search-user/[nickname]/page.tsx | 138 ++++++++++++++++++ .../src/app/(search)/search-user/page.tsx | 0 frontend/yarn.lock | 10 ++ 4 files changed, 151 insertions(+), 1 deletion(-) create mode 100644 frontend/src/app/(search)/search-user/[nickname]/page.tsx delete mode 100644 frontend/src/app/(search)/search-user/page.tsx diff --git a/frontend/package.json b/frontend/package.json index 43008934..3f9df1d2 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -11,11 +11,12 @@ "format:fix": "prettier --write --ignore-path .gitignore ." }, "dependencies": { - "@tanstack/react-query": "^4.35.3", "@hookform/resolvers": "^3.3.1", + "@tanstack/react-query": "^4.35.3", "@types/node": "20.6.3", "@types/react": "18.2.22", "@types/react-dom": "18.2.7", + "@types/uuid": "^9.0.4", "@typescript-eslint/eslint-plugin": "^6.0.0", "@typescript-eslint/parser": "^6.0.0", "autoprefixer": "10.4.15", @@ -36,6 +37,7 @@ "swiper": "^10.3.0", "tailwindcss": "3.3.3", "typescript": "5.2.2", + "uuid": "^9.0.1", "yup": "^1.3.0" }, "devDependencies": { diff --git a/frontend/src/app/(search)/search-user/[nickname]/page.tsx b/frontend/src/app/(search)/search-user/[nickname]/page.tsx new file mode 100644 index 00000000..8ef225f8 --- /dev/null +++ b/frontend/src/app/(search)/search-user/[nickname]/page.tsx @@ -0,0 +1,138 @@ +'use client' + +import { useEffect, useState } from 'react' +import { useRouter } from 'next/navigation' +import { v4 as uuidv4 } from 'uuid' +import Image from 'next/image' + +import WriteIcon from '../../../../../public/images/svg/pencil-square.svg' +import ProfileIcon from '../../../../../public/images/svg/profileIcon.svg' +// TODO: import NavBar from '../../../components/general/NavBar' +import Banner from '../../../../components/main/Banner' + +type DataObject = { + nickname: string + email: string +} + +type ParamsType = { + params: { + nickname: string + } +} + +export default function SearchUserPage({ params }: ParamsType) { + const [data, setData] = useState([]) // 데이터를 담을 state 선언 + const [hoveredEmail, setHoveredEmail] = useState('') + const router = useRouter() + const accessToken = + typeof window !== 'undefined' ? sessionStorage.getItem('accessToken') : null + const persistToken = + typeof window !== 'undefined' ? localStorage.getItem('persistToken') : null + + function handleMouseEnter(email: string) { + setHoveredEmail(email) + } + + function handleMouseLeave() { + setHoveredEmail('') + } + + function toWrite() { + router.push('/write') + } + + async function getData() { + const res = await fetch( + `${process.env.NEXT_PUBLIC_BASE_URL}/members?nickname=${params.nickname}`, + { + headers: { + 'Content-Type': 'application/json', + Authorization: `Bearer ${accessToken || persistToken}`, + }, + }, + ) + + const resData = await res.json() + + if (resData.data.length === 0) { + setData([{ nickname: '검색 결과가 없습니다.', email: '' }]) + } else { + setData(resData.data) + } + + if (!res.ok) { + alert('검색 결과가 없습니다.') + router.push('/') + throw new Error('검색 결과가 없습니다.') + } + } + + useEffect(() => { + getData() + }, [params]) + + return ( +
+ {/* TODO: */} + + +
+ {/* 프로젝트 공유 버튼 */} + + +
+ {/* All */} +
+
+
+ {data.map((item) => ( +
+ {item.nickname === '검색 결과가 없습니다.' ? ( +
+ {item.nickname} +
+ ) : ( +
handleMouseEnter(item.email)} + onMouseLeave={handleMouseLeave} + > + ProfileIcon + + {item.nickname} + {hoveredEmail === item.email && ( + + {item.email} + + )} + +
+ )} +
+ ))} +
+
+
+
+ ) +} diff --git a/frontend/src/app/(search)/search-user/page.tsx b/frontend/src/app/(search)/search-user/page.tsx deleted file mode 100644 index e69de29b..00000000 diff --git a/frontend/yarn.lock b/frontend/yarn.lock index 0bb05eee..e4d706fc 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -261,6 +261,11 @@ resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.5.3.tgz#9a726e116beb26c24f1ccd6850201e1246122e04" integrity sha512-OxepLK9EuNEIPxWNME+C6WwbRAOOI2o2BaQEGzz5Lu2e4Z5eDnEo+/aVEDMIXywoJitJ7xWd641wrGLZdtwRyw== +"@types/uuid@^9.0.4": + version "9.0.4" + resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-9.0.4.tgz#e884a59338da907bda8d2ed03e01c5c49d036f1c" + integrity sha512-zAuJWQflfx6dYJM62vna+Sn5aeSWhh3OB+wfUEACNcqUSc0AGc5JKl+ycL1vrH7frGTXhJchYjE1Hak8L819dA== + "@typescript-eslint/eslint-plugin@^6.0.0": version "6.7.3" resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.7.3.tgz#d98046e9f7102d49a93d944d413c6055c47fafd7" @@ -2636,6 +2641,11 @@ util-deprecate@^1.0.2: resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf" integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw== +uuid@^9.0.1: + version "9.0.1" + resolved "https://registry.yarnpkg.com/uuid/-/uuid-9.0.1.tgz#e188d4c8853cc722220392c424cd637f32293f30" + integrity sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA== + watchpack@2.4.0: version "2.4.0" resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-2.4.0.tgz#fa33032374962c78113f93c7f2fb4c54c9862a5d"