Merge pull request #301 from boostcampwm2023/fix/project-link

fix: 외부 링크 추가, 삭제 기능 오류 수정
boostcampwm2023 · Jul 5, 2024 · 25a9421 · 25a9421
2 parents ba92c9e + a565cdd
commit 25a9421
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 14 deletions.
diff --git 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
@@ -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>

diff --git 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;
     }
   };