v1.1.3 (#93)

* Fix: 포트폴리오 수정 로직 변경

* Fix: 수정시 portfolioType  정의하는 로직 변경

* Fix: 기본 동영상이 추가되는 문제 해결

* Fix: 케밥메뉴 팝업시 케밥버튼이 안가려지는 문제 해결

* Refactor: useUser hooks

* Fix: getPortfolioType 로직 수정

* Feat: add filter type

* Feat: 403 페이지 추가, 버튼 padding 수정

* Feat: 비공개 포트폴리오 403 이동 추가

* Fix: 403 redirect 제거

* Fix: 기본 동영상이 추가되는 문제 해결

* Fix: 케밥메뉴 팝업시 케밥버튼이 안가려지는 문제 해결

* Refactor: useUser hooks

* Fix: CommentContent 컴포넌트 삭제

* Fix: 댓글 컴포넌트 재귀 구현

* Feat: 대댓글 컴포넌트에 !isReply 조건 추가

* Fix: z-100 제거

* Fix: 대댓글 replyList 조건 제거

* Fix: 댓글 케밥버튼 맨 위로 오도록 변경

* Feat: 케밥 바깥 클릭시 케밥 닫히는 이벤트 추가

* Fix: getVideoFileUid 기본값 삭제

* Fix: 포트폴리오 수정 데이터 변경

* Feat: portfolio props is403 추가

* Fix: 대댓글 map key 추가

* Feat: is403 추가

* Feat: useOutsideClick 추가

* e2e: 403 error test

* Feat: 작성자만 조회할 수 있는 로직 추가

* Fix: 포트폴리오 검색SchoolGradeType 0 제거

* Fix: 프로필 페이지 로그인 조건 제거

* Feat: 테마별 삭제

* Feat: 검색 변수 구조 개선

* Fix: 정렬 기준 로직 수정

* Fix: 검색 필터 여러개 선택되는 버그 수정

* Fix: 정렬기준 전체 선택 로직 개선

* Fix: input 업데이트 안되는 문제 수정

* Fix: gradeType 0 제거

* Fix: 검색 테마 삭제

* Fix: user 변수명 수정

* Fix: 검색 레이아웃 overflow hidden 추가

* Fix: 검색 여러번 안되는 버그 수정, 검색 keyword 프로퍼티 이름 search로 변경

* Feat: filter 검색 키워드 기본값 추가

* Feat: theme 검색 추가

* Feat: ChipGroup이 skill 타입에 의존하지 않도록 수정

* Feat: type 상관없이 selected이면 배경 색 칠해지도록 수정

* Feat: skillList 컴포넌트 추가

* Feat: main, portfolio detail chip group 대신 SkillList쓰도록 수정

* Feat: upload select 로직을 Skills 안으로 주입

---------

Co-authored-by: J1min <[email protected]>
Co-authored-by: Jimin Hong <[email protected]>

components/app/CommentList.tsx

@@ -7,8 +7,8 @@ import useUser from "@/hooks/useUser";
 import { CommentForm } from "@/types/portfolio.interface";
 import config from "@/config";
 import InputButton from "../atoms/InputButton";
-import CommentView from "../atoms/Comment";
 import Avatar from "../common/Avatar";
+import CommentView from "../atoms/Comment";
 
 export default function CommentList({ portfolioId }: { portfolioId?: number }) {
   const inputRef = useRef<HTMLInputElement | null>(null);
@@ -75,6 +75,7 @@ export default function CommentList({ portfolioId }: { portfolioId?: number }) {
             isEmptyUser={isEmptyUser}
             portfolioId={Number(portfolioId)}
             key={comment.commentId}
+            isReply={false}
           />
         ))}
       </div>

components/app/PortfolioDetail.tsx

@@ -17,11 +17,11 @@ import PeopleIcon from "../Icon/PeopleIcon";
 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";
 import Kebab from "../common/KebabMenu";
 import TrashCanIcon from "../Icon/TrashCanIcon";
 import RecommendIcon from "../Icon/RecommendIcon";
+import SkillList from "../common/Portfolio/SkillList";
 
 interface PortfolioDetailProps {
   portfolio: Portfolio;
@@ -124,7 +124,7 @@ export default function Detail({
           >
             {portfolio.writer.name}
           </span>
-          <ChipGroup
+          <SkillList
             skillList={portfolio.skillList}
             className="mt-small"
             type="detail"

components/app/PortfolioItem.tsx

@@ -5,7 +5,7 @@ import { getFileDownloadUrl } from "@/utils/file";
 import classNames from "classnames";
 import Image from "next/image";
 import { useState } from "react";
-import ChipGroup from "../atoms/ChipGroup";
+import SkillList from "../common/Portfolio/SkillList";
 import { CommentIcon, HeartIcon } from "../Icon";
 
 interface SideMenuPortfolioProps {
@@ -80,7 +80,11 @@ export default function PortfolioItem({
         </span>
 
         {portfolio.skillList.length > 0 && (
-          <ChipGroup skillList={portfolio.skillList} type="portfolio" />
+          <SkillList
+            skillList={portfolio.skillList}
+            type="portfolio"
+            isShorten
+          />
         )}
 
         <div className="text-xsmall mt-2">

components/app/UploadModal/Skills.tsx

@@ -1,17 +1,52 @@
-import ChipGroup from "@/components/atoms/ChipGroup";
+import ChipGroup, { ChipItem } from "@/components/atoms/ChipGroup";
 import { Skill } from "@/types/skill.interface";
+import { Dispatch, SetStateAction } from "react";
 
 interface SkillsProps {
   className?: string;
   skills: Skill[];
-  selectedSkills: Skill[];
-  setSelectedSkills: (skill: Skill) => void;
+  selectedSkills?: Skill[];
+  setSelectedSkills?: Dispatch<SetStateAction<Skill[]>>;
 }
 
-function SkillsView({ skills, ...props }: SkillsProps) {
-  return <ChipGroup skillList={skills} type="upload" {...props} />;
+interface SkillsViewProps {
+  items: ChipItem[];
+  className?: string;
+}
+
+function SkillsView({ ...props }: SkillsViewProps) {
+  return <ChipGroup type="upload" {...props} />;
 }
 
-export default function Skills(props: SkillsProps) {
-  return <SkillsView {...props} />;
+export default function Skills({
+  skills,
+  selectedSkills,
+  setSelectedSkills,
+  ...props
+}: SkillsProps) {
+  return (
+    <SkillsView
+      items={skills.map((skill) => ({
+        id: skill.skillId,
+        label: skill.skillName,
+        onClick: () =>
+          setSelectedSkills?.((originSelectedSkills) => {
+            if (
+              originSelectedSkills.find(
+                (selectedSkill) => selectedSkill.skillId === skill.skillId,
+              )
+            ) {
+              return originSelectedSkills.filter(
+                (v) => v.skillId !== skill.skillId,
+              );
+            }
+            return [...originSelectedSkills, skill];
+          }),
+        selected: selectedSkills?.some(
+          (selectedSkill) => selectedSkill.skillId === skill.skillId,
+        ),
+      }))}
+      {...props}
+    />
+  );
 }

components/atoms/CheckBoxText.tsx

@@ -7,33 +7,37 @@ interface RadioProps {
   id: string;
   label: string;
   name: SearchFilterPropertyType;
-  value: string;
-  checkedId: string;
-  setCheckedId: Dispatch<SetStateAction<string>>;
+  value?: string;
   filter: Filter;
   setFilter: Dispatch<SetStateAction<Filter>>;
+  checkBoxPropertyId: string;
+  setCheckBoxPropertyId: Dispatch<SetStateAction<string>>;
 }
 
 export default function CheckBoxText({
   id,
   label,
   name,
   value,
-  checkedId,
-  setCheckedId,
   filter,
   setFilter,
+  checkBoxPropertyId,
+  setCheckBoxPropertyId,
   ...props
 }: RadioProps) {
-  const isChecked = checkedId === id;
+  const isChecked = checkBoxPropertyId === id;
   const handleFilterChange = (event: ChangeEvent<HTMLInputElement>) => {
-    if (checkedId === id) {
-      setCheckedId("");
+    if (checkBoxPropertyId === id) {
+      setCheckBoxPropertyId("");
       setFilter((prev) => ({ ...prev, [name]: undefined }));
       return;
     }
-    setCheckedId(id);
-    setFilter((prev) => ({ ...prev, [name]: event.target.value }));
+    setCheckBoxPropertyId(id);
+    setFilter((prev) => {
+      if (name === "sortType" && event.target.value === "ALL")
+        return { ...prev, [name]: undefined };
+      return { ...prev, [name]: event.target.value };
+    });
   };
 
   return (

components/atoms/Chip.tsx

@@ -50,7 +50,7 @@ function Item({
           "w-16": type === "portfolio",
           "w-20": type === "main",
           "cursor-pointer py-3": type === "upload",
-          "bg-blue text-white": type === "upload" && selected,
+          "bg-blue text-white": selected,
         },
       )}
     >

components/atoms/ChipGroup.tsx

@@ -1,46 +1,46 @@
 import { PortfolioListType } from "@/types/portfolio.interface";
-import { Skill } from "@/types/skill.interface";
 import classNames from "classnames";
 import Chip from "./Chip";
 
+export interface ChipItem {
+  id: number | string;
+  label: string;
+  selected?: boolean;
+  onClick?: () => void;
+}
 interface ChipGroupProps {
-  skillList: Skill[];
+  items: ChipItem[];
   type?: PortfolioListType;
   className?: string;
-  selectedSkills?: Skill[];
-  setSelectedSkills?: (skill: Skill) => void;
+  isShorten?: boolean;
 }
 
 export default function ChipGroup({
-  skillList,
+  items,
   type = "main",
   className = "",
-  selectedSkills,
-  setSelectedSkills,
+  isShorten = false,
 }: ChipGroupProps) {
-  const isShorten = ["main", "portfolio"].includes(type);
-  const getFilteredSkillList = () => {
-    if (isShorten) return skillList.filter((_, idx) => idx < 3);
-    return skillList;
+  const getFilteredItems = () => {
+    if (isShorten) return items.filter((_, idx) => idx < 3);
+    return items;
   };
 
   return (
     <Chip.Group className={classNames(className, "pt-2")} type={type}>
-      {getFilteredSkillList().map((skillData) => (
+      {getFilteredItems().map((item) => (
         <Chip.Item
           type={type}
-          key={skillData.skillId}
-          {...(type === "upload" && {
-            selected: selectedSkills?.some(
-              (selectedSkill) => selectedSkill.skillId === skillData.skillId,
-            ),
-            onClick: () => setSelectedSkills?.(skillData),
-          })}
+          key={item.id}
+          {...{
+            selected: item.selected,
+            onClick: item.onClick,
+          }}
         >
-          {skillData.skillName}
+          {item.label}
         </Chip.Item>
       ))}
-      {isShorten && skillList.length >= 4 && (
+      {isShorten && items.length >= 4 && (
         <Chip.Item type={type}>더보기</Chip.Item>
       )}
     </Chip.Group>