feat : 외부 링크 추가 모달 임시 작성

- 외부 링크를 추가할 수 있는 모달을 임시 작성
- 실제 api 연결 시, 해당 모달의 기능을 상세로 추가할 예정

Author: dongind

frontend/src/components/landing/LandingLinkModal.tsx

@@ -1,7 +1,40 @@
+import { MouseEventHandler } from "react";
+
 const LandingLinkModal = ({ close }: { close: () => void }) => {
+  const handleCloseClick: MouseEventHandler<
+    HTMLButtonElement | HTMLDivElement
+  > = ({ target, currentTarget }: React.MouseEvent) => {
+    if (target !== currentTarget) return;
+    close();
+  };
+
   return (
-    <div className="w-full h-full bg-black-30 flex justify-center items-center">
-      <div className="w-[40.625rem]">hello world</div>
+    <div
+      className="top-0 left-0 absolute w-screen h-screen flex justify-center items-center bg-black bg-opacity-30"
+      onClick={handleCloseClick}
+    >
+      <div className="w-[40.625rem] bg-white flex flex-col p-9 gap-9 rounded-lg shadow-box">
+        <p className="text-m font-bold">| 링크 추가하기</p>
+        <div className="flex gap-8 items-center">
+          <p className="text-xs shrink-0">링크 주소</p>
+          <input className="rounded-lg w-full border border-text-gray text-xs py-1 px-2" />
+        </div>
+        <div className="flex gap-8 items-center">
+          <p className="text-xs shrink-0">링크 이름</p>
+          <input className="rounded-lg w-full border border-text-gray text-xs py-1 px-2" />
+        </div>
+        <div className="flex gap-3 justify-end">
+          <button className="rounded-lg bg-middle-green text-white text-xs px-3 py-1 hover:bg-dark-green">
+            완료
+          </button>
+          <button
+            className="rounded-lg border border-light-gray text-xs px-3 py-1 hover:bg-light-gray"
+            onClick={handleCloseClick}
+          >
+            취소
+          </button>
+        </div>
+      </div>
     </div>
   );
 };