Merge pull request #39 from rlarlduf20/#38-addMate

#38 add mate
rlarlduf20 · Jan 17, 2024 · cfe5063 · cfe5063
2 parents a9b6239 + 3818384
commit cfe5063
Show file tree

Hide file tree

Showing 23 changed files with 465 additions and 9 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -17,6 +17,7 @@
     "autoprefixer": "10.4.16",
     "eslint": "8.49.0",
     "eslint-config-next": "13.5.2",
+    "event-source-polyfill": "^1.0.31",
     "jsonwebtoken": "^9.0.2",
     "konva": "^9.2.3",
     "next": "^13.5.4",
@@ -33,6 +34,7 @@
     "ws": "^8.14.2"
   },
   "devDependencies": {
+    "@types/event-source-polyfill": "^1.0.5",
     "@types/jsonwebtoken": "^9.0.3",
     "@types/sockjs-client": "^1.5.4",
     "@types/ws": "^8.5.10"

diff --git a/src/app/(main)/@modal/(.)addAlbum/page.tsx → ...main)/@addAlbumModal/(.)addAlbum/page.tsx b/src/app/(main)/@modal/(.)addAlbum/page.tsx → ...main)/@addAlbumModal/(.)addAlbum/page.tsx
diff --git a/src/app/(main)/@modal/default.tsx → src/app/(main)/@addAlbumModal/default.tsx b/src/app/(main)/@modal/default.tsx → src/app/(main)/@addAlbumModal/default.tsx
diff --git a/src/app/(main)/@addMateModal/(.)addMate/page.tsx b/src/app/(main)/@addMateModal/(.)addMate/page.tsx
@@ -0,0 +1,12 @@
+import Modal from "@/components/Modal";
+import AddMateSection from "@/templates/AddMateSection";
+
+const AddMateModalPage = () => {
+  return (
+    <Modal>
+      <AddMateSection />
+    </Modal>
+  );
+};
+
+export default AddMateModalPage;
diff --git a/src/app/(main)/@addMateModal/default.tsx b/src/app/(main)/@addMateModal/default.tsx
@@ -0,0 +1,5 @@
+const Default = () => {
+  return null;
+};
+
+export default Default;
diff --git a/src/app/(main)/addMate/page.tsx b/src/app/(main)/addMate/page.tsx
@@ -0,0 +1,11 @@
+import AddMateSection from "@/templates/AddMateSection";
+
+const AddMatePage = () => {
+  return (
+    <section className="pt-[120px] flex items-center justify-center">
+      <AddMateSection />
+    </section>
+  );
+};
+
+export default AddMatePage;
diff --git a/src/app/(main)/layout.tsx b/src/app/(main)/layout.tsx
@@ -12,18 +12,24 @@ export const metadata: Metadata = {
 
 interface RootLayoutProps {
   children: React.ReactNode;
-  modal: React.ReactNode;
+  addAlbumModal: React.ReactNode;
+  addMateModal: React.ReactNode;
 }
 
-const RootLayout = async ({ children, modal }: RootLayoutProps) => {
+const RootLayout = async ({
+  children,
+  addAlbumModal,
+  addMateModal,
+}: RootLayoutProps) => {
   return (
     <html lang="en" className={`${SUITFont.variable}`}>
       <body>
         <AuthSessionProvider>
           <Header />
           <main className="w-inner mx-auto">
             {children}
-            {modal}
+            {addAlbumModal}
+            {addMateModal}
           </main>
           <Footer />
         </AuthSessionProvider>

diff --git a/src/app/api/inviteUser/route.ts b/src/app/api/inviteUser/route.ts
@@ -0,0 +1,20 @@
+import { getServerSession } from "next-auth";
+import { authOptions } from "../auth/[...nextauth]/route";
+
+export async function POST(request: Request) {
+  const { jogakTokens } = await getServerSession(authOptions);
+  const { userID } = await request.json();
+
+  const res = await fetch(
+    `${process.env.SERVER_URL}/user/friend?socialID=${userID}`,
+    {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${jogakTokens.accessToken}`,
+      },
+    }
+  );
+
+  return res;
+}
diff --git a/src/app/api/replyMate/route.ts b/src/app/api/replyMate/route.ts
@@ -0,0 +1,21 @@
+import { getServerSession } from "next-auth";
+import { authOptions } from "../auth/[...nextauth]/route";
+
+export async function POST(request: Request) {
+  const { jogakTokens } = await getServerSession(authOptions);
+
+  const { responseType, userID } = await request.json();
+
+  const res = await fetch(
+    `${process.env.SERVER_URL}/user/friend-reply?socialID=${userID}&reply=${responseType}`,
+    {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${jogakTokens.accessToken}`,
+      },
+    }
+  );
+
+  return res;
+}
diff --git a/src/app/api/searchUser/route.ts b/src/app/api/searchUser/route.ts
@@ -0,0 +1,19 @@
+import { getServerSession } from "next-auth";
+import { authOptions } from "../auth/[...nextauth]/route";
+
+export async function POST(request: Request) {
+  const { jogakTokens } = await getServerSession(authOptions);
+
+  const { debouncedSearchText } = await request.json();
+  const res = await fetch(
+    `${process.env.SERVER_URL}/user/search?nickname=${debouncedSearchText}`,
+    {
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${jogakTokens.accessToken}`,
+      },
+    }
+  );
+
+  return res;
+}
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
@@ -11,7 +11,7 @@ const Modal = ({ children }: ModalProps) => {
   const router = useRouter();
   const pathname = usePathname();
 
-  if (!pathname.includes("addAlbum")) {
+  if (!pathname.includes("addAlbum") && !pathname.includes("addMate")) {
     return null;
   }
   const handleOnOpenChange = (open: boolean) => {

diff --git a/src/components/Notification.tsx b/src/components/Notification.tsx
@@ -0,0 +1,145 @@
+"use client";
+
+import useMouseDownOutside from "@/hooks/useMouseDownOutside";
+import usePushNotification from "@/hooks/usePushNotification";
+import { useEffect, useRef, useState } from "react";
+import type { FriendsType } from "@/types";
+import { useSession } from "next-auth/react";
+
+interface PushNotiPropsType {
+  info: FriendsType | any;
+  handleResponse: (r: string, u: string, n: string) => void;
+  setIsAppear?: any;
+  handleFilterPushMsg: (u: string) => void;
+}
+
+const PushNoti = ({
+  info,
+  handleResponse,
+  setIsAppear,
+  handleFilterPushMsg,
+}: PushNotiPropsType) => {
+  return (
+    <div className="p-2 border-b-2 border-white">
+      <p className="pb-3">{info?.nickname}님이 친구 요청을 보냈습니다.</p>
+      <div>
+        <button
+          onClick={() => {
+            handleResponse("reject", info.socialID, info.nickname);
+            handleFilterPushMsg(info.socialID);
+            setIsAppear(false);
+          }}
+          className="border-[1px] border-white px-3 py-1"
+        >
+          거절
+        </button>
+        <button
+          onClick={() => {
+            handleResponse("accept", info.socialID, info.nickname);
+            handleFilterPushMsg(info.socialID);
+            setIsAppear(false);
+          }}
+          className="bg-white border-[1px]  text-main_black px-3 py-1"
+        >
+          수락
+        </button>
+      </div>
+    </div>
+  );
+};
+
+const Notification = () => {
+  const notificationRef = useRef<HTMLDivElement>(null);
+  const { isOpen, setIsOpen } = useMouseDownOutside(notificationRef);
+  const { pushMsg, isAppear, setIsAppear } = usePushNotification();
+  const [receivedReq, setReceivedReq] = useState<FriendsType[]>([]);
+  const { data: session } = useSession();
+
+  const handleResponse = async (
+    responseType: string,
+    userID: string,
+    nickname: string
+  ) => {
+    const res = await fetch("api/replyMate", {
+      method: "POST",
+      body: JSON.stringify({
+        userID,
+        responseType,
+      }),
+    });
+    if (res.ok) {
+      if (responseType === "reject") alert("거절하셨습니다.");
+      if (responseType === "accept")
+        alert(`${nickname}님과 친구가 되었습니다.`);
+    }
+  };
+  const handleFilterPushMsg = (userID: string) => {
+    const filteredReceivedReq = receivedReq.filter((item) => {
+      return item.socialID !== userID;
+    });
+    setReceivedReq(filteredReceivedReq);
+  };
+
+  useEffect(() => {
+    const getReceivedReq = async () => {
+      const res = await fetch(
+        `${process.env.NEXT_PUBLIC_SERVER_URL}/user/profile`,
+        {
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${session?.jogakTokens.accessToken}`,
+          },
+        }
+      );
+      const data = await res.json();
+      setReceivedReq(data.receivedFriendRequest);
+    };
+    if (session?.jogakTokens.accessToken) {
+      getReceivedReq();
+    }
+    if (pushMsg) {
+      setReceivedReq((prev: any) => {
+        return [...prev, pushMsg];
+      });
+    }
+  }, [session?.jogakTokens.accessToken, pushMsg]);
+
+  return (
+    <section ref={notificationRef} className="relative">
+      <div
+        className="border-[1px] border-white p-3 cursor-pointer flex"
+        onClick={() => setIsOpen((prev) => !prev)}
+      >
+        <p className="grow">알림</p>
+        <div className="border-[1px] border-white w-[24px] text-center">
+          {receivedReq.length}
+        </div>
+      </div>
+      {isOpen && (
+        <div className="absolute w-[200px] h-[400px] border-[1px] border-white bg-main_black">
+          {receivedReq.map((item, index) => (
+            <PushNoti
+              key={index}
+              info={item}
+              handleResponse={handleResponse}
+              setIsAppear={setIsAppear}
+              handleFilterPushMsg={handleFilterPushMsg}
+            />
+          ))}
+        </div>
+      )}
+      {isAppear && (
+        <div className="fixed top-[50px] left-[300px] bg-main_black z-30">
+          <PushNoti
+            info={pushMsg}
+            handleResponse={handleResponse}
+            setIsAppear={setIsAppear}
+            handleFilterPushMsg={handleFilterPushMsg}
+          />
+        </div>
+      )}
+    </section>
+  );
+};
+
+export default Notification;
diff --git a/src/components/header/LogoText.tsx b/src/components/header/LogoText.tsx
@@ -7,7 +7,7 @@ const LogoText = () => {
 
   return (
     <p className="flex-grow font-semibold text-[22px] ml-[10px]">
-      {pathname === "/" ? "내 조각보" : "둘러보기"}
+      {pathname === "/browse" ? "둘러보기" : "내 조각보"}
     </p>
   );
 };

diff --git a/src/components/header/MainNav.tsx b/src/components/header/MainNav.tsx
@@ -3,12 +3,14 @@ import LogoText from "./LogoText";
 import NavLink from "./NavLink";
 import HomeLogoIcon from "../../../public/images/svg/home-logo.svg";
 import RouteTrapezoidIcon from "../../../public/images/svg/route-trapezoid.svg";
+import Notification from "../Notification";
 
 const MainNav = () => {
   return (
     <nav className="flex h-[80px] w-inner items-center">
       <Image src={HomeLogoIcon} alt="홈 로고 아이콘" />
       <LogoText />
+      <Notification />
       <Image src={RouteTrapezoidIcon} alt="사다리꼴 아이콘" />
       <div className="ml-[3px] flex gap-[3px]">
         <NavLink />

diff --git a/src/components/header/NavLink.tsx b/src/components/header/NavLink.tsx
@@ -8,10 +8,10 @@ const NavLink = () => {
 
   return (
     <>
-      {pathname === "/" ? (
-        <Link href="/browse">둘러보기</Link>
-      ) : (
+      {pathname === "/browse" ? (
         <Link href="/">내 조각보</Link>
+      ) : (
+        <Link href="/browse">둘러보기</Link>
       )}
     </>
   );

diff --git a/src/hooks/useDebounce.tsx b/src/hooks/useDebounce.tsx
@@ -0,0 +1,17 @@
+import { useState, useEffect } from "react";
+
+const useDebounce = (value: string, delay: number) => {
+  const [debouncedValue, setDebouncedValue] = useState<string>(value);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => clearTimeout(timer);
+  }, [value, delay]);
+
+  return debouncedValue;
+};
+
+export default useDebounce;