Merge pull request #68 from bssm-portfolio/develop

bssm-portfolio · Mar 8, 2023 · 5cc780e · 5cc780e · vercel · Mar 8, 2023
2 parents 4dc8fcd + 22c6215
commit 5cc780e
Show file tree

Hide file tree

Showing 22 changed files with 107 additions and 127 deletions.
diff --git a/components/Icon/FilledHeartIcon.tsx b/components/Icon/FilledHeartIcon.tsx
@@ -10,8 +10,8 @@ export default function FilledHeartIcon({ ...props }) {
     >
       <path
         d="M4.63184 1C2.62608 1 1 2.72173 1 4.84548C1 8.69096 5.29218 12.1869 7.60335 13C9.91452 12.1869 14.2067 8.69096 14.2067 4.84548C14.2067 2.72173 12.5806 1 10.5749 1C9.34664 1 8.26039 1.64569 7.60335 2.63398C7.26846 2.1289 6.82355 1.71669 6.3063 1.43226C5.78905 1.14784 5.21469 0.999565 4.63184 1Z"
-        fill="#FAAF3D"
-        stroke="#FAAF3D"
+        fill="#FFCA31"
+        stroke="#FFCA31"
         strokeLinecap="round"
         strokeLinejoin="round"
       />

diff --git a/components/Icon/OrangeFilterIcon.tsx b/components/Icon/OrangeFilterIcon.tsx
diff --git a/components/app/CommentList.tsx b/components/app/CommentList.tsx
@@ -5,6 +5,7 @@ import { useRef, useState } from "react";
 import { checkInputValueIsNull } from "@/utils/input";
 import httpClient from "@/apis";
 import useUser from "@/hooks/useUser";
+import config from "@/config";
 import Comment from "../atoms/Comment";
 import InputButton from "../atoms/InputButton";
 
@@ -41,7 +42,7 @@ export default function CommentList({ portfolioId }: { portfolioId?: number }) {
     <div className="bg-white mt-2 p-3 box-border rounded">
       <form className="flex mt-base relative" onSubmit={handleSubmit(onValid)}>
         <Image
-          src={userInfo.profileImageUrl}
+          src={userInfo.profileImageUrl || config.defaultProfile}
           alt="프로필"
           width={40}
           height={40}

diff --git a/components/app/PortfolioItem.tsx b/components/app/PortfolioItem.tsx
@@ -28,7 +28,8 @@ export default function PortfolioItem({
   const getTitleCss = () => {
     return `
     font-bold 
-    text-middle 
+    text-[0.875rem]
+    leading-4
     xl:w-36
     w-96
     overflow-hidden 

diff --git a/components/app/PortfolioPlayer.tsx b/components/app/PortfolioPlayer.tsx
@@ -26,9 +26,9 @@ export default function PortfolioPlayer({
       <div className="flex items-end gap-1">
         <Button
           className={classNames(
-            "h-10 disabled:bg-slate-600 disabled:text-white disabled:cursor-not-allowed rounded-b-none rounded-t-2xl",
+            "h-8 disabled:bg-slate-600 disabled:text-white disabled:cursor-not-allowed rounded-b-none rounded-t-2xl",
             {
-              "!bg-blue !text-white !h-11": selected === "web",
+              "!bg-blue !text-white !h-9": selected === "web",
               "hover:bg-slate-300": selected !== "web",
             },
           )}
@@ -40,9 +40,9 @@ export default function PortfolioPlayer({
         </Button>
         <Button
           className={classNames(
-            "h-10 disabled:bg-slate-600 disabled:text-white disabled:cursor-not-allowed rounded-b-none rounded-t-2xl",
+            "h-8 disabled:bg-slate-600 disabled:text-white disabled:cursor-not-allowed rounded-b-none rounded-t-2xl",
             {
-              "!bg-blue !text-white !h-11": selected === "video",
+              "!bg-blue !text-white !h-9": selected === "video",
               "hover:bg-slate-300": selected !== "video",
             },
           )}

diff --git a/components/app/SideMenu.tsx b/components/app/SideMenu.tsx
@@ -3,7 +3,7 @@ import PortfolioList from "../portfolio/PortfolioList";
 export default function SideMenu() {
   return (
     <div className="ml-0 xl:ml-xlarge ">
-      <h2 className="text-base font-bold text-white">추천 프로젝트</h2>
+      <h2 className="text-base font-bold xl:text-white">추천 프로젝트</h2>
       <PortfolioList type="portfolio" />
     </div>
   );

diff --git a/components/app/UploadModal/Navigator.tsx b/components/app/UploadModal/Navigator.tsx
@@ -12,13 +12,11 @@ export default function Navigator({
   goPrev,
   goNext,
   isLast,
+  className = "",
   ...props
 }: FileUploadViewProps) {
   return (
-    <div
-      {...props}
-      className={classNames("flex justify-between", props.className)}
-    >
+    <div {...props} className={classNames("flex justify-between", className)}>
       {goPrev ? (
         <Button onClick={goPrev} varient="secondary">
           이전

diff --git a/components/app/UploadModal/Skills.tsx b/components/app/UploadModal/Skills.tsx
@@ -1,4 +1,3 @@
-import Chip from "@/components/atoms/Chip";
 import ChipGroup from "@/components/atoms/ChipGroup";
 import { Skill } from "@/types/skill.interface";
 
@@ -9,21 +8,8 @@ interface SkillsProps {
   setSelectedSkills: (skill: Skill) => void;
 }
 
-function SkillsView({
-  className,
-  skills,
-  selectedSkills,
-  setSelectedSkills,
-}: SkillsProps) {
-  return (
-    <ChipGroup
-      skillList={skills}
-      selectedSkills={selectedSkills}
-      setSelectedSkills={setSelectedSkills}
-      type="upload"
-      className={className}
-    />
-  );
+function SkillsView({ skills, ...props }: SkillsProps) {
+  return <ChipGroup skillList={skills} type="upload" {...props} />;
 }
 
 export default function Skills(props: SkillsProps) {

diff --git a/components/app/UploadModal/SubmitView.tsx b/components/app/UploadModal/SubmitView.tsx
@@ -2,13 +2,15 @@ import Radio from "@/components/atoms/Radio";
 import { PortfolioForm } from "@/types/portfolio.interface";
 import { UseFormRegister } from "react-hook-form";
 
-export default function SubmitView({
-  register,
-  className,
-}: {
+interface SubmitViewProps {
   register: UseFormRegister<PortfolioForm>;
   className?: string;
-}) {
+}
+
+export default function SubmitView({
+  register,
+  className = "",
+}: SubmitViewProps) {
   return (
     <div className={className}>
       <h2 className="text-base mb-large">공개범위</h2>

diff --git a/components/atoms/Chip.tsx b/components/atoms/Chip.tsx
@@ -44,12 +44,11 @@ function Item({
     <div
       onClick={() => onClick?.(children)}
       className={classNames(
-        "px-3 py-1 text-center border border-blue rounded-full text-sxx whitespace-nowrap text-ellipsis overflow-hidden",
+        "px-3 py-1 text-center text-blue border border-blue rounded-full text-sxx whitespace-nowrap text-ellipsis overflow-hidden",
         className,
         {
           "w-16": type === "portfolio",
           "w-20": type === "main",
-          "text-blue": type === "main" || (type === "upload" && !selected),
           "cursor-pointer py-3": type === "upload",
           "bg-blue text-white": type === "upload" && selected,
         },

diff --git a/components/atoms/ChipGroup.tsx b/components/atoms/ChipGroup.tsx
@@ -18,8 +18,9 @@ export default function ChipGroup({
   selectedSkills,
   setSelectedSkills,
 }: ChipGroupProps) {
+  const isShorten = ["main", "portfolio"].includes(type);
   const getFilteredSkillList = () => {
-    if (type !== "detail") return skillList.filter((_, idx) => idx < 3);
+    if (isShorten) return skillList.filter((_, idx) => idx < 3);
     return skillList;
   };
 
@@ -39,7 +40,7 @@ export default function ChipGroup({
           {skillData.skillName}
         </Chip.Item>
       ))}
-      {type !== "detail" && skillList.length > 2 && (
+      {isShorten && skillList.length >= 4 && (
         <Chip.Item type={type}>더보기</Chip.Item>
       )}
     </Chip.Group>

diff --git a/components/common/Avatar.tsx b/components/common/Avatar.tsx
@@ -23,15 +23,12 @@ export default function Avatar({
       className={classNames(className, "rounded-full", {
         "h-[40px]": height === 40,
       })}
-      src={imageUrl || ""}
+      src={imageUrl || config.defaultProfile}
       alt="사용자 아바타"
       width={width}
       height={height}
       sizes="40px"
       priority
-      onError={(event) => {
-        event.currentTarget.src = config.defaultProfile;
-      }}
     />
   );
 }
diff --git a/components/common/Portfolio.tsx b/components/common/Portfolio.tsx
@@ -39,44 +39,43 @@ export default function PortfolioView({ portfolio, onClick }: PortfolioProps) {
           onError={() => setImageSrc(config.defaultThumbnail)}
         />
       </div>
-      <div className="flex mt-3 mb-[3.125rem] ">
-        <div className="flex flex-col">
-          <div className="flex">
-            <div className="flex gap-4">
-              <Avatar
-                width={40}
-                height={40}
-                imageUrl={portfolio.writer.profileImageUrl}
-              />
-              <div className="flex-1">
-                <div className="font-bold text-sm line-clamp-2 break-all">
-                  {portfolio.title}
-                </div>
-                <div className="text-xs">
-                  {portfolio.writer.name}
-                  {portfolio.contributorList.length > 0
-                    ? `외 ${portfolio.contributorList.length} 명`
-                    : ""}
-                </div>
-                <ChipGroup skillList={portfolio.skillList} />
-              </div>
-            </div>
-            <div className="flex gap-3 items-start">
-              <div className={countViewCss}>
-                <HeartIcon
-                  className={classNames(
-                    portfolio.bookmarkYn
-                      ? "[&_path]:!fill-somago_yellow"
-                      : undefined,
-                    "mr-[0.1rem]",
-                  )}
-                />
-                {portfolio.bookmarks}
+      <div className="mt-3 mb-[3.125rem]">
+        <div className="flex justify-between">
+          <div className="flex gap-4">
+            <Avatar
+              width={40}
+              height={40}
+              imageUrl={portfolio.writer.profileImageUrl}
+            />
+            <div className="flex-1">
+              <div className="font-bold text-sm line-clamp-2 break-all">
+                {portfolio.title}
               </div>
-              <div className={countViewCss}>
-                <CommentIcon className={classNames("mr-[0.1rem]")} />
-                {portfolio.comments}
+              <div className="text-xs">
+                {portfolio.writer.name}
+                {portfolio.contributorList.length > 0
+                  ? `외 ${portfolio.contributorList.length} 명`
+                  : ""}
               </div>
+              <ChipGroup skillList={portfolio.skillList} />
+            </div>
+          </div>
+
+          <div className="flex gap-3 items-start">
+            <div className={countViewCss}>
+              <HeartIcon
+                className={classNames(
+                  portfolio.bookmarkYn
+                    ? "[&_path]:!fill-somago_yellow"
+                    : undefined,
+                  "mr-[0.1rem]",
+                )}
+              />
+              {portfolio.bookmarks}
+            </div>
+            <div className={countViewCss}>
+              <CommentIcon className={classNames("mr-[0.1rem]")} />
+              {portfolio.comments}
             </div>
           </div>
         </div>

diff --git a/components/main/MainPortfolioList.tsx b/components/main/MainPortfolioList.tsx
@@ -6,23 +6,27 @@ import { useEffect } from "react";
 import { useInView } from "react-intersection-observer";
 import Loading from "../common/Loading";
 
+interface MainPortfolioListProps {
+  pages: PortfolioList[] | { list: never[] }[];
+  customHasNextPage: boolean;
+  fetchNextPage: FetchNextPageType;
+  isFetchingNextPage: boolean;
+}
+
 export default function MainPortfolioList({
   pages,
-  hasNextPage,
+  customHasNextPage,
   fetchNextPage,
   isFetchingNextPage,
-}: {
-  pages: PortfolioList[] | { list: never[] }[];
-  hasNextPage: boolean;
-  fetchNextPage: FetchNextPageType;
-  isFetchingNextPage: boolean;
-}) {
+}: MainPortfolioListProps) {
   const router = useRouter();
   const [ref, inView] = useInView();
 
   useEffect(() => {
-    if (inView && hasNextPage) fetchNextPage();
-  }, [inView, fetchNextPage, hasNextPage]);
+    if (inView && customHasNextPage) {
+      fetchNextPage();
+    }
+  }, [inView, fetchNextPage, customHasNextPage]);
 
   return (
     <>
@@ -43,7 +47,7 @@ export default function MainPortfolioList({
             className="mt-8 mx-auto"
             width={60}
             height={60}
-            color="#FAAF3D"
+            color="#FFCA31"
           />
         )}
       </div>

diff --git a/components/portfolio/PortfolioList.tsx b/components/portfolio/PortfolioList.tsx
@@ -24,14 +24,14 @@ export default function PortfolioList({
     return filter;
   };
 
-  const { pages, fetchNextPage, hasNextPage, isFetchingNextPage } =
+  const { pages, fetchNextPage, customHasNextPage, isFetchingNextPage } =
     usePortfolioList({ size: 12 }, { search: keyword, ...filterSortType() });
 
   const { ref, inView } = useInView();
 
   useEffect(() => {
-    if (inView && hasNextPage) fetchNextPage();
-  }, [inView, hasNextPage, fetchNextPage]);
+    if (inView && customHasNextPage) fetchNextPage();
+  }, [inView, customHasNextPage, fetchNextPage]);
 
   return (
     <div className="flex flex-col items-start">
@@ -49,7 +49,7 @@ export default function PortfolioList({
         <p className="text-white mx-auto text-2xl">검색결과가 없습니다.</p>
       )}
       <div ref={ref} className="h-36 mx-auto">
-        {isFetchingNextPage && hasNextPage && (
+        {isFetchingNextPage && customHasNextPage && (
           <Loading className="mt-8" width={60} height={60} type="spin" />
         )}
       </div>

diff --git a/components/profile/Detail.tsx b/components/profile/Detail.tsx
diff --git a/components/profile/ProfileDescription.tsx → components/profile/ProfileDetail.tsx b/components/profile/ProfileDescription.tsx → components/profile/ProfileDetail.tsx
diff --git a/e2e/tests/portfolio.spec.ts b/e2e/tests/portfolio.spec.ts
@@ -1,4 +1,4 @@
-import { test, expect } from "@playwright/test";
+import { test } from "@playwright/test";
 
 test("portfolio should render", async ({ page }) => {
   await page.goto("http://localhost:3000/portfolio/1");

diff --git a/models/portfolio/index.ts b/models/portfolio/index.ts
@@ -1,7 +1,7 @@
 import httpClient from "@/apis";
 import fixture from "@/fixtures";
 import {
-  Comment,
+  CommentList,
   Filter,
   PaginationRequest,
   Portfolio,
@@ -10,12 +10,8 @@ import {
 import { useInfiniteQuery, useQuery } from "@tanstack/react-query";
 import KEY from "../key";
 
-interface CommentList {
-  list: Comment[];
-}
-
 const usePortfolioList = (pagination: PaginationRequest, filter?: Filter) => {
-  const { data, isFetchingNextPage, fetchNextPage, hasNextPage } =
+  const { data, isFetchingNextPage, fetchNextPage } =
     useInfiniteQuery<PortfolioList>(
       [KEY.PORTFOLIO_LIST, filter],
       ({ pageParam = 0 }) =>
@@ -30,10 +26,14 @@ const usePortfolioList = (pagination: PaginationRequest, filter?: Filter) => {
       },
     );
 
+  const customHasNextPage =
+    (data?.pageParams[data.pageParams.length - 1] || 1) <
+    (data?.pages[0].pagination.totalPages || 0);
+
   return {
-    pages: data?.pages ?? [{ list: [] }],
+    pages: data?.pages || [{ list: [] }],
     isFetchingNextPage,
-    hasNextPage,
+    customHasNextPage,
     fetchNextPage,
   };
 };