diff --git a/src/components/header/NavLink.tsx b/src/components/header/NavLink.tsx
index 199799a..cbdf5eb 100644
--- a/src/components/header/NavLink.tsx
+++ b/src/components/header/NavLink.tsx
@@ -8,10 +8,10 @@ const NavLink = () => {
return (
<>
- {pathname === "/" ? (
-
둘러보기
- ) : (
+ {pathname === "/browse" ? (
내 조각보
+ ) : (
+
둘러보기
)}
);
diff --git a/src/hooks/useDebounce.tsx b/src/hooks/useDebounce.tsx
new file mode 100644
index 0000000..431ef68
--- /dev/null
+++ b/src/hooks/useDebounce.tsx
@@ -0,0 +1,17 @@
+import { useState, useEffect } from "react";
+
+const useDebounce = (value: string, delay: number) => {
+ const [debouncedValue, setDebouncedValue] = useState
(value);
+
+ useEffect(() => {
+ const timer = setTimeout(() => {
+ setDebouncedValue(value);
+ }, delay);
+
+ return () => clearTimeout(timer);
+ }, [value, delay]);
+
+ return debouncedValue;
+};
+
+export default useDebounce;
diff --git a/src/hooks/useMouseDownOutside.tsx b/src/hooks/useMouseDownOutside.tsx
new file mode 100644
index 0000000..59d1e15
--- /dev/null
+++ b/src/hooks/useMouseDownOutside.tsx
@@ -0,0 +1,21 @@
+import { useState, useEffect } from "react";
+
+const useMouseDownOutside = (ref: any) => {
+ const [isOpen, setIsOpen] = useState(false);
+
+ useEffect(() => {
+ const outsideMouseDown = (e: any) => {
+ if (isOpen && ref.current && !ref.current.contains(e.target)) {
+ setIsOpen(false);
+ }
+ };
+ document.addEventListener("mousedown", outsideMouseDown);
+ return () => {
+ document.removeEventListener("mousedown", outsideMouseDown);
+ };
+ }, [isOpen, ref]);
+
+ return { isOpen, setIsOpen };
+};
+
+export default useMouseDownOutside;
diff --git a/src/hooks/usePushNotification.tsx b/src/hooks/usePushNotification.tsx
new file mode 100644
index 0000000..4714d72
--- /dev/null
+++ b/src/hooks/usePushNotification.tsx
@@ -0,0 +1,47 @@
+import { useState, useEffect } from "react";
+import { EventSourcePolyfill, NativeEventSource } from "event-source-polyfill";
+import { useSession } from "next-auth/react";
+import { FriendsType } from "@/types";
+
+const usePushNotification = () => {
+ const { data: session } = useSession();
+ const [isAppear, setIsAppear] = useState(false);
+ const [pushMsg, setPushMsg] = useState();
+
+ useEffect(() => {
+ const EventSource = EventSourcePolyfill || NativeEventSource;
+
+ let eventSource: any;
+ if (session?.jogakTokens.accessToken) {
+ eventSource = new EventSource(
+ `${process.env.NEXT_PUBLIC_SERVER_URL}/user/sse`,
+ {
+ headers: {
+ Authorization: `Bearer ${session?.jogakTokens.accessToken}`,
+ Connetction: "keep-alive",
+ Accept: "text/event-stream",
+ },
+ heartbeatTimeout: 86400000,
+ }
+ );
+ }
+ let timer: any;
+ eventSource?.addEventListener("friendRequest", (e: any) => {
+ setIsAppear(true);
+ const data = JSON.parse(e.data);
+ timer = setTimeout(() => {
+ setIsAppear(false);
+ }, 3000);
+
+ setPushMsg(data);
+ });
+ return () => {
+ eventSource?.close();
+ clearTimeout(timer);
+ };
+ }, [session?.jogakTokens.accessToken]);
+
+ return { pushMsg, isAppear, setIsAppear };
+};
+
+export default usePushNotification;
diff --git a/src/templates/AddMateSection/SearchBox.tsx b/src/templates/AddMateSection/SearchBox.tsx
new file mode 100644
index 0000000..6fc9abf
--- /dev/null
+++ b/src/templates/AddMateSection/SearchBox.tsx
@@ -0,0 +1,88 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import useDebounce from "@/hooks/useDebounce";
+import type { SearchUsersType } from "@/types";
+import Trapezoid from "@/components/Trapezoid";
+
+const SearchBox = () => {
+ const [searchText, setSearchText] = useState("");
+ const [searchedUser, setSearchedUser] = useState([]);
+ const debouncedSearchText = useDebounce(searchText, 500);
+ const handleSearch = (e: React.ChangeEvent) => {
+ setSearchText(e.target.value);
+ };
+ const handleInvite = async (userID: string) => {
+ const res = await fetch("api/inviteUser", {
+ method: "POST",
+ body: JSON.stringify({
+ userID,
+ }),
+ });
+ if (!res.ok) {
+ alert("요청에 실패했습니다. 다시 시도해주세요.");
+ return;
+ }
+
+ alert("초대 메시지가 발송됐습니다.");
+ };
+
+ useEffect(() => {
+ const getSearchedUserList = async () => {
+ const res = await fetch("api/searchUser", {
+ method: "POST",
+ body: JSON.stringify({
+ debouncedSearchText,
+ }),
+ });
+ const data = await res.json();
+ setSearchedUser(data);
+ };
+ getSearchedUserList();
+ }, [debouncedSearchText]);
+
+ return (
+
+
+ {!searchText ? (
+
친구를 추가하고 함께 조각을 완성해봐요.
+ ) : searchedUser.length === 0 ? (
+
일치하는 유저가 없습니다.
+ ) : (
+
+ {searchedUser.map((item, index) => (
+
+
+
+
{item.nickname}
+
+ #{item.socialID.slice(0, 6)}
+
+
+
handleInvite(item.socialID)}>
+
초대
+
+
+ ))}
+
+ )}
+