From 400072fcbf0999636bd189dc308f17deaace6265 Mon Sep 17 00:00:00 2001
From: surinkwon <tnfls7070@gmail.com>
Date: Mon, 24 Jun 2024 17:15:29 +0900
Subject: [PATCH 1/2] =?UTF-8?q?fix:=20=EC=99=B8=EB=B6=80=20=EB=A7=81?=
 =?UTF-8?q?=ED=81=AC=20=EC=B6=94=EA=B0=80,=20=EC=82=AD=EC=A0=9C=20?=
 =?UTF-8?q?=EC=8B=9C=20=EC=A0=9C=EB=8C=80=EB=A1=9C=20=EB=B0=98=EC=98=81?=
 =?UTF-8?q?=EB=90=98=EC=A7=80=20=EC=95=8A=EB=8A=94=20=EB=AC=B8=EC=A0=9C=20?=
 =?UTF-8?q?=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/hooks/common/landing/useLandingLinkSocket.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/frontend/src/hooks/common/landing/useLandingLinkSocket.ts b/frontend/src/hooks/common/landing/useLandingLinkSocket.ts
index 33165cf..7d66bfb 100644
--- a/frontend/src/hooks/common/landing/useLandingLinkSocket.ts
+++ b/frontend/src/hooks/common/landing/useLandingLinkSocket.ts
@@ -20,10 +20,12 @@ const useLandingLinkSocket = (socket: Socket) => {
   ) => {
     switch (action) {
       case LandingSocketLinkAction.CREATE:
-        setLinkList([...linkList, content]);
+        setLinkList((prevLinkList) => [...prevLinkList, content]);
         break;
       case LandingSocketLinkAction.DELETE:
-        setLinkList(linkList.filter(({ id }) => id !== content.id));
+        setLinkList((prevLinkList) =>
+          prevLinkList.filter(({ id }) => id !== content.id)
+        );
         break;
     }
   };

From a565cddf07b7444dfec6f9c9fc559a4dffe52e94 Mon Sep 17 00:00:00 2001
From: surinkwon <tnfls7070@gmail.com>
Date: Mon, 24 Jun 2024 22:11:00 +0900
Subject: [PATCH 2/2] =?UTF-8?q?fix:=20=EC=99=B8=EB=B6=80=20=EB=A7=81?=
 =?UTF-8?q?=ED=81=AC=20=EC=9D=B4=EB=AF=B8=EC=A7=80=EA=B0=80=20=EC=A0=9C?=
 =?UTF-8?q?=EB=8C=80=EB=A1=9C=20=EB=B3=B4=EC=9D=B4=EC=A7=80=20=EC=95=8A?=
 =?UTF-8?q?=EB=8A=94=20=EB=AC=B8=EC=A0=9C=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

알맞은 이미지가 없을 시 링크 이미지로 대체
미리 정의해둔 이미지가 나오도록 함
링크 이름이 길 경우 말줄임표로 대체
---
 .../src/components/common/ProfileImage.tsx    | 24 +++++++++++--------
 .../landing/link/LandingLinkBlock.tsx         |  9 +++++--
 2 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/common/ProfileImage.tsx b/frontend/src/components/common/ProfileImage.tsx
index 58774cd..adba8b0 100644
--- a/frontend/src/components/common/ProfileImage.tsx
+++ b/frontend/src/components/common/ProfileImage.tsx
@@ -1,12 +1,16 @@
-const ProfileImage = ({ imageUrl, pxSize }: { imageUrl: string; pxSize: number }) => {
-  return (
-    <div
-      className="ml-[0.46875rem] rounded-full overflow-hidden"
-      style={{ height: pxSize, width: pxSize }}
-    >
-      <img src={imageUrl} alt="프로필 이미지 사진" />
-    </div>
-  );
-};
+const ProfileImage = ({
+  imageUrl,
+  pxSize,
+}: {
+  imageUrl: string;
+  pxSize: number;
+}) => (
+  <div
+    className="ml-[0.46875rem] rounded-full overflow-hidden flex justify-center items-center"
+    style={{ height: pxSize, width: pxSize }}
+  >
+    <img src={imageUrl} alt="프로필 이미지 사진" />
+  </div>
+);
 
 export default ProfileImage;
diff --git a/frontend/src/components/landing/link/LandingLinkBlock.tsx b/frontend/src/components/landing/link/LandingLinkBlock.tsx
index e45d50f..d3e2f88 100644
--- a/frontend/src/components/landing/link/LandingLinkBlock.tsx
+++ b/frontend/src/components/landing/link/LandingLinkBlock.tsx
@@ -1,6 +1,8 @@
 import { LandingLinkDTO } from "../../../types/DTO/landingDTO";
 import ProfileImage from "../../common/ProfileImage";
 import TrashCan from "../../../assets/icons/trash-can.svg?react";
+import getLinkType from "../../../utils/getLinkType";
+import { LINK_LOGO_URL } from "../../../constants/landing";
 
 interface LandingLinkBlockProps extends LandingLinkDTO {
   emitLinkDeleteEvent: ({ id }: { id: number }) => void;
@@ -12,7 +14,7 @@ const LandingLinkBlock = ({
   url,
   emitLinkDeleteEvent,
 }: LandingLinkBlockProps) => {
-  const linkLogoUrl = `${new URL(url).origin}/favicon.ico`;
+  const linkLogoUrl = LINK_LOGO_URL[getLinkType(url)];
 
   const handleDeleteClick = () => {
     emitLinkDeleteEvent({ id });
@@ -26,7 +28,10 @@ const LandingLinkBlock = ({
         target="_blank"
       >
         <ProfileImage imageUrl={linkLogoUrl} pxSize={40} />
-        <p className="text-xs font-bold truncate text-dark-green">
+        <p
+          title={description}
+          className="max-w-[8.5rem] overflow-hidden text-xs font-bold truncate whitespace-nowrap text-ellipsis text-dark-green"
+        >
           {description}
         </p>
       </a>