Merge branch 'develop' of https://github.com/codeit9-temporary/linkbrary into Refactor/LinkCardStore

Author: 99minji

components/modal/DeleteFolderModal.tsx

@@ -6,17 +6,22 @@ import toast from "react-hot-toast";
 import toastMessages from "@/lib/toastMessage";
 
 const DeleteFolderModal = ({
-  folderName,
+  // folderName,
   folderId,
+  linkCount,
 }: {
-  folderName: string;
+  // folderName: string;
   folderId: number;
+  linkCount: number;
 }) => {
   const { closeModal } = useModalStore();
-  let linkCount: number;
+  // let linkCount: number;
   const handleSubmit = async () => {
     // 폴더 내에 링크 개수 0 일때만 폴더 삭제 가능 -> 링크 1개 이상이면 error toast 띄우고 있음 or 전체 링크 삭제 후 폴더 삭제
-    if (linkCount === 0) {
+    if (!linkCount) {
+      toast.error(toastMessages.error.invalidLinkCount);
+      closeModal();
+    } else if (linkCount === 0) {
       try {
         await deleteFolder(folderId);
         toast.success(toastMessages.success.deleteFolder);
@@ -32,7 +37,10 @@ const DeleteFolderModal = ({
   };
 
   return (
-    <ModalContainer title="폴더 삭제" subtitle={folderName}>
+    <ModalContainer
+      title="폴더 삭제"
+      // subtitle={folderName}
+    >
       <SubmitButton
         type="button"
         onClick={handleSubmit}

components/modal/EditModal.tsx

@@ -8,10 +8,10 @@ import toast from "react-hot-toast";
 import toastMessages from "@/lib/toastMessage";
 
 const EditModal = ({
-  folderName,
+  // folderName,
   folderId,
 }: {
-  folderName: string;
+  // folderName: string;
   folderId: number;
 }) => {
   const [value, setValue] = useState("");
@@ -25,25 +25,27 @@ const EditModal = ({
     const body = {
       name: value,
     };
-    if (value === folderName) {
-      toast.error(toastMessages.error.sameFolderName);
+    if (!folderId) {
+      toast.error(toastMessages.error.invalidLinkCount);
+      closeModal();
     } else if (value === "") {
       toast.error(toastMessages.error.inputFolderName);
     } else {
       try {
         await putFolder(folderId, body);
         toast.success(toastMessages.success.editFolder);
+        closeModal();
       } catch (error) {
         toast.error(toastMessages.error.editFolder);
+        closeModal();
       }
     }
-    closeModal();
   };
   return (
     <ModalContainer title="폴더 이름 변경">
       <ModalInput
-        placeholder={folderName}
-        name={folderName}
+        placeholder="수정할 이름을 입력해 주세요"
+        name="folderName"
         value={value}
         onChange={handleChange}
       />

components/modal/modalComponents/ModalShare.tsx

@@ -1,19 +1,28 @@
+import { handleCopyUrl } from "@/util/copyUrl";
+import { handleShareFacebook, handleShareKakao } from "@/util/shareSNS";
 import ModalShareItem from "./ModalShareItem";
+import { useEffect } from "react";
 
 const ModalShare = () => {
+  useEffect(() => {
+    if (!window.Kakao.isInitialized()) {
+      window.Kakao.init(process.env.NEXT_PUBLIC_KAKAO_API_KEY);
+    }
+  }, []);
+
   return (
     <div className="flex gap-8">
-      <div>
+      <div onClick={handleShareKakao}>
         <ModalShareItem src="/icons/Kakao.svg" text="카카오톡" bg="#FEE500" />
       </div>
-      <div>
+      <div onClick={handleShareFacebook}>
         <ModalShareItem
           src="/icons/Facebook.svg"
           text="페이스북"
           bg="#1877F2"
         />
       </div>
-      <div>
+      <div onClick={handleCopyUrl}>
         <ModalShareItem
           src="/icons/link.svg"
           text="링크 복사"

components/modal/modalComponents/ModalShareItem.tsx

@@ -12,7 +12,7 @@ const ModalShareItem = ({
   color?: string;
 }) => {
   return (
-    <div className="flex flex-col justify-center items-center gap-[10px]">
+    <div className="flex flex-col justify-center items-center gap-[10px] cursor-pointer hover:scale-105">
       <div
         style={{ backgroundColor: bg }}
         className={`bg-[${bg}] size-[42px] rounded-full flex justify-center items-center`}

components/modal/modalManager/ModalManager.tsx

@@ -31,8 +31,9 @@ export const Modal = () => {
     case "DeleteFolderModal":
       return (
         <DeleteFolderModal
-          folderName={props.folderName || "폴더이름"}
+          // folderName={props.folderName || "폴더이름"}
           folderId={Number(props.folderId)}
+          linkCount={Number(props.linkCount)}
         />
       );
     case "DeleteLinkModal":
@@ -45,7 +46,7 @@ export const Modal = () => {
     case "EditModal":
       return (
         <EditModal
-          folderName={props.folderName || "폴더이름"}
+          // folderName={props.folderName || "폴더이름"}
           folderId={Number(props.folderId)}
         />
       );

globals.d.ts

@@ -0,0 +1,7 @@
+declare global {
+  interface Window {
+    Kakao: any;
+  }
+}
+
+export {};

lib/toastMessage.ts

@@ -30,6 +30,7 @@ const toastMessages = {
     sameLink: "이미 저장된 링크 주소입니다",
     sameFolderName: "같은 이름으로는 수정할 수 없습니다",
     invalidLink: "잘못된 링크 형식입니다",
+    invalidLinkCount: "폴더 정보를 받아오는데 실패했습니다",
   },
 };
 

pages/_app.tsx

@@ -2,6 +2,7 @@ import Footer from "@/components/Layout/Footer";
 import Header from "@/components/Layout/Header";
 import "@/styles/globals.css";
 import type { AppProps } from "next/app";
+import Head from "next/head";
 import { useRouter } from "next/router";
 import { Toaster } from "react-hot-toast";
 
@@ -10,15 +11,34 @@ export default function App({ Component, pageProps }: AppProps) {
   const hidePaths = ["/login", "/signup", "/404"];
 
   return (
-    <div className="min-h-screen flex flex-col">
-      <div>
-        <Toaster />
-      </div>
-      {!hidePaths.includes(router.pathname) && <Header />}
-      <div className="flex-grow">
-        <Component {...pageProps} />
+    <>
+      <Head>
+        <meta property="og:type" content="website" />
+        {/* <meta property="og:url" content="https://linkbrary.app" /> 배포 후 실제 도메인으로 변경 필요 */}
+        <meta property="og:title" content="Linkbrary" />
+        <meta
+          property="og:description"
+          content="나만의 링크를 관리하는 Linkbrary"
+        />
+        <meta property="og:image" content="/images/home_main.png" />
+        <title>Linkbrary</title>
+      </Head>
+
+      <script
+        defer
+        src="https://developers.kakao.com/sdk/js/kakao.min.js"
+      ></script>
+
+      <div className="min-h-screen flex flex-col">
+        <div>
+          <Toaster />
+        </div>
+        {!hidePaths.includes(router.pathname) && <Header />}
+        <div className="flex-grow">
+          <Component {...pageProps} />
+        </div>
+        {!hidePaths.includes(router.pathname) && <Footer />}
       </div>
-      {!hidePaths.includes(router.pathname) && <Footer />}
-    </div>
+    </>
   );
 }

pages/_document.tsx

@@ -2,7 +2,7 @@ import { Html, Head, Main, NextScript } from "next/document";
 
 export default function Document() {
   return (
-    <Html lang="en">
+    <Html lang="ko">
       <Head />
       <body className="antialiased">
         <Main />

types/modalTypes.ts

@@ -9,6 +9,7 @@ export interface ModalPropType {
   list?: FolderItemType[];
   link?: string;
   linkId?: number | null;
+  linkCount?: number;
 }
 
 export interface FolderItemType {