Merge pull request #72 from bssm-portfolio/hotfix/contents-layout

채널 콘텐츠 레이아웃 수정 및 상세보기에 깃허브 주소 추가
bssm-portfolio · Mar 13, 2023 · cf9965d · cf9965d
2 parents fb9c51a + 42648c0
commit cf9965d
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 8 deletions.
diff --git a/components/Icon/GithubIcon.tsx b/components/Icon/GithubIcon.tsx
@@ -0,0 +1,16 @@
+export default function GithubIcon() {
+  return (
+    <svg
+      width="30"
+      height="30"
+      viewBox="0 0 30 30"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M15 2.5C13.3585 2.5 11.733 2.82332 10.2165 3.45151C8.69989 4.07969 7.3219 5.00043 6.16117 6.16116C3.81696 8.50537 2.5 11.6848 2.5 15C2.5 20.525 6.0875 25.2125 11.05 26.875C11.675 26.975 11.875 26.5875 11.875 26.25V24.1375C8.4125 24.8875 7.675 22.4625 7.675 22.4625C7.1 21.0125 6.2875 20.625 6.2875 20.625C5.15 19.85 6.375 19.875 6.375 19.875C7.625 19.9625 8.2875 21.1625 8.2875 21.1625C9.375 23.0625 11.2125 22.5 11.925 22.2C12.0375 21.3875 12.3625 20.8375 12.7125 20.525C9.9375 20.2125 7.025 19.1375 7.025 14.375C7.025 12.9875 7.5 11.875 8.3125 10.9875C8.1875 10.675 7.75 9.375 8.4375 7.6875C8.4375 7.6875 9.4875 7.35 11.875 8.9625C12.8625 8.6875 13.9375 8.55 15 8.55C16.0625 8.55 17.1375 8.6875 18.125 8.9625C20.5125 7.35 21.5625 7.6875 21.5625 7.6875C22.25 9.375 21.8125 10.675 21.6875 10.9875C22.5 11.875 22.975 12.9875 22.975 14.375C22.975 19.15 20.05 20.2 17.2625 20.5125C17.7125 20.9 18.125 21.6625 18.125 22.825V26.25C18.125 26.5875 18.325 26.9875 18.9625 26.875C23.925 25.2 27.5 20.525 27.5 15C27.5 13.3585 27.1767 11.733 26.5485 10.2165C25.9203 8.69989 24.9996 7.3219 23.8388 6.16116C22.6781 5.00043 21.3001 4.07969 19.7835 3.45151C18.267 2.82332 16.6415 2.5 15 2.5Z"
+        fill="black"
+      />
+    </svg>
+  );
+}
diff --git a/components/app/Detail.tsx → components/app/PortfolioDetail.tsx b/components/app/Detail.tsx → components/app/PortfolioDetail.tsx
@@ -1,6 +1,7 @@
 import { getKoreanDate } from "@/utils/date";
 import type { Portfolio } from "@/types/portfolio.interface";
 import { CopyToClipboard } from "react-copy-to-clipboard";
+import Link from "next/link";
 import { useRouter } from "next/router";
 import useOverlay from "@/hooks/useOverlay";
 import config from "@/config";
@@ -17,6 +18,7 @@ import EmptyHeartIcon from "../Icon/EmptyHeartIcon";
 import FilledHeartIcon from "../Icon/FilledHeartIcon";
 import EditIcon from "../Icon/EditIcon";
 import ChipGroup from "../atoms/ChipGroup";
+import GithubIcon from "../Icon/GithubIcon";
 
 interface PortfolioDetailProps {
   portfolio: Portfolio;
@@ -78,7 +80,10 @@ export default function Detail({
     <div className="mt-small bg-white p-4 rounded">
       <div className="w-full h-full flex justify-between flex-col sm:flex-row">
         <div>
-          <h2 className="font-bold text-large mr-2">
+          <h2 className="flex gap-1 font-bold text-large mr-2">
+            <Link href={portfolio.gitUrl}>
+              <GithubIcon />
+            </Link>
             <span className="text-blue">({portfolio.portfolioTheme}) </span>
             <span className="break-all">{portfolio.title}</span>
           </h2>

diff --git a/components/common/Avatar.tsx b/components/common/Avatar.tsx
@@ -8,14 +8,16 @@ interface AvatarProps {
   height?: number;
   onClick?: () => void;
   className?: string;
+  sizes?: string;
 }
 
 export default function Avatar({
-  imageUrl = "",
+  imageUrl,
   width = 50,
   height = 50,
   onClick,
   className,
+  sizes,
 }: AvatarProps) {
   return (
     <Image
@@ -24,10 +26,10 @@ export default function Avatar({
         "h-[40px]": height === 40,
       })}
       src={imageUrl || config.defaultProfile}
-      alt="사용자 아바타"
+      alt="사용자"
       width={width}
       height={height}
-      sizes="40px"
+      sizes={sizes}
       priority
     />
   );

diff --git a/components/contents/DataGridItem.tsx b/components/contents/DataGridItem.tsx
@@ -88,15 +88,17 @@ export default function DataGridItem({
                   onError={() => setImageUrl(config.defaultThumbnail)}
                 />
               </div>
-              <h2 className="font-bold">{portfolio.title}</h2>
+              <h2 className="font-bold w-96 break-words line-clamp-2">
+                {portfolio.title}
+              </h2>
             </div>
           </div>
           <span>{portfolio.views}</span>
           <span>{portfolio.comments}</span>
           <span>{portfolio.bookmarks}</span>
           <Button
             varient="secondary"
-            className="!bg-white border border-black"
+            className="!bg-white border border-black whitespace-nowrap"
             onClick={() =>
               router.push(`/portfolio/${portfolio.portfolioId}/edit`)
             }

diff --git a/components/index.ts b/components/index.ts
@@ -6,7 +6,7 @@ export { default as Menu } from "./common/Menu";
 export { default as SearchBar } from "./common/SearchBar";
 export { default as Portfolio } from "./common/Portfolio";
 
-export { default as AppDetail } from "./app/Detail";
+export { default as AppDetail } from "./app/PortfolioDetail";
 export { default as PortfolioPlayer } from "./app/PortfolioPlayer";
 export { default as AppSideMenu } from "./app/SideMenu";
 export { default as AppComment } from "./app/CommentList";

diff --git a/components/profile/ProfileDetail.tsx b/components/profile/ProfileDetail.tsx
@@ -22,7 +22,7 @@ export default function ProfileDescription({
 }: ProfileDescriptionProps) {
   return (
     <div className="flex flex-col items-center py-8 px-14 bg-primary-light_gray max-h-[33.75rem]">
-      <Avatar className="mb-5" imageUrl={avatarUrl} width={128} height={128} />
+      <Avatar className="mb-5" imageUrl={avatarUrl} sizes="128px" />
       <h2 className="text-2xl font-bold mb-1">{username}</h2>
       <h3 className="text-xs font-bold mb-5">{role}</h3>
       <div className="w-full flex font-bold">