From a28cac35b461171bcecf856f07e89a1eeebcef45 Mon Sep 17 00:00:00 2001
From: hsy <69149030+dev-redo@users.noreply.github.com>
Date: Fri, 25 Nov 2022 01:20:19 +0900
Subject: [PATCH] =?UTF-8?q?release:=20=EB=B2=84=EC=A0=84=201.0.8=20?=
 =?UTF-8?q?=EB=B0=B0=ED=8F=AC=20(#109)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix(*): 나의 풀이 tab 문제 유형 선택 시 페이지네이션이 초기화되지 않는 이슈 해결

* release: 버전 1.0.8 업데이트

* feat(Select, newTab/profile): 나의 풀이 tab 문제 유형 select 박스의 옵션들에 푼 문제 개수를 보여주는 기능 추가
---
 package.json                              |  2 +-
 src/components/select/PartTitleSelect.tsx |  9 +++++++--
 src/components/select/index.tsx           |  2 +-
 src/pages/newTab/profile/Problems.tsx     |  2 +-
 src/pages/newTab/profile/index.tsx        | 22 +++++++++++++++-------
 src/static/manifest.json                  |  2 +-
 src/types/profile/profile-layout.d.ts     |  1 +
 src/types/select.d.ts                     |  1 +
 8 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/package.json b/package.json
index a8c77dd..69734ca 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "prosolve",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "main": "index.js",
   "pretty": "prettier --write \"src/**/*.(ts|tsx)\"",
   "scripts": {
diff --git a/src/components/select/PartTitleSelect.tsx b/src/components/select/PartTitleSelect.tsx
index 73910ec..68a1f33 100644
--- a/src/components/select/PartTitleSelect.tsx
+++ b/src/components/select/PartTitleSelect.tsx
@@ -6,16 +6,21 @@ import { problemTitleOption } from '@src/store/select';
 import { PartTitleSelectProps } from '@src/types/select';
 import '@src/styles/font.css';
 
-const PartTitleSelect = ({ partTitleList }: PartTitleSelectProps) => {
+const PartTitleSelect = ({ partTitleList, onChangePageIdx }: PartTitleSelectProps) => {
   const [isOpen, setIsOpen] = React.useState(false);
   const [selected, setSelected] = useRecoilState(problemTitleOption);
 
+  const onChangePartTitle = (option: string) => {
+    onChangePageIdx(0);
+    setSelected(option);
+  };
+
   return (
     <Select
       isOpen={isOpen}
       trigger={<CheckOption isOpen={isOpen} value={selected} onModalChange={setIsOpen} />}
       options={partTitleList}
-      onChangeDropdown={setSelected}
+      onChangeDropdown={onChangePartTitle}
     />
   );
 };
diff --git a/src/components/select/index.tsx b/src/components/select/index.tsx
index 1fb63b1..910cdab 100644
--- a/src/components/select/index.tsx
+++ b/src/components/select/index.tsx
@@ -59,7 +59,7 @@ const MenuStyle = styled.ul<{ isOpen: boolean }>`
   display: flex;
   flex-direction: column;
   position: absolute;
-  z-index: 2;
+  z-index: 10;
   top: 3rem;
   padding: 0.5rem 0rem;
   font-size: 1rem;
diff --git a/src/pages/newTab/profile/Problems.tsx b/src/pages/newTab/profile/Problems.tsx
index 4b9c399..5ed4b0e 100644
--- a/src/pages/newTab/profile/Problems.tsx
+++ b/src/pages/newTab/profile/Problems.tsx
@@ -70,7 +70,7 @@ Problems.Sort = ({ onChangePageIdx, partTitleList }: SortProps) => (
         <Problems.SortItem key={uid(idx)} item={item} onChangePageIdx={onChangePageIdx} />
       ))}
     </SortStyle>
-    <PartTitleSelect partTitleList={partTitleList} />
+    <PartTitleSelect partTitleList={partTitleList} onChangePageIdx={onChangePageIdx} />
   </SortContainerStyle>
 );
 
diff --git a/src/pages/newTab/profile/index.tsx b/src/pages/newTab/profile/index.tsx
index 08e6cc8..4d450cf 100644
--- a/src/pages/newTab/profile/index.tsx
+++ b/src/pages/newTab/profile/index.tsx
@@ -123,12 +123,20 @@ const getChartInfoList = ({ allProblems, solvedProblems }: ProblemsCntType) => {
 };
 
 const getPartTitleListOfSolvedProblems = (solvedProblems: SolvedProblemType) => {
-  const partTitleList = solvedProblems.reduce<Set<string>>((partTitleList, { partTitle }) => {
-    partTitleList.add(partTitle);
-    return partTitleList;
-  }, new Set());
+  const problemsTitleMap = solvedProblems.reduce<Record<string, number>>(
+    (partTitleList, { partTitle }) => {
+      partTitleList[partTitle] = (partTitleList[partTitle] ?? 0) + 1;
+      return partTitleList;
+    },
+    {},
+  );
+
+  const partTitleList = Object.entries(problemsTitleMap)
+    .sort(([prevTitle, prevCnt], [currTitle, currCnt]) => currCnt - prevCnt)
+    .map(([title, cnt]) => `${title} (${cnt})`);
 
-  return [...partTitleList];
+  const allProblemTitle = `전체 문제 (${solvedProblems.length})`;
+  return [allProblemTitle, ...partTitleList];
 };
 
 const getFilteredSolvedProblems = (solvedProblems: SolvedProblemType) => {
@@ -149,8 +157,8 @@ const sortSolvedProblems = (solvedProblems: SolvedProblemType) => {
 const filterSolvedProblemsByPartTitle = (solvedProblems: SolvedProblemType) => {
   const selectedPartTitle = useRecoilValue(problemTitleOption);
 
-  if (selectedPartTitle === '전체 문제') return solvedProblems;
-  return solvedProblems.filter(({ partTitle }) => partTitle === selectedPartTitle);
+  if (selectedPartTitle.includes('전체 문제')) return solvedProblems;
+  return solvedProblems.filter(({ partTitle }) => selectedPartTitle.includes(partTitle));
 };
 
 const root = document.createElement('div');
diff --git a/src/static/manifest.json b/src/static/manifest.json
index 1731ed1..714bac5 100644
--- a/src/static/manifest.json
+++ b/src/static/manifest.json
@@ -1,7 +1,7 @@
 {
   "name": "프로솔브(Pro-Solve)",
   "description": "제출한 모든 프로그래머스 풀이를 확인할 수 있게 해주는 크롬 익스텐션",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "manifest_version": 3,
   "icons": {
     "16": "icon.png",
diff --git a/src/types/profile/profile-layout.d.ts b/src/types/profile/profile-layout.d.ts
index 0421091..f10a136 100644
--- a/src/types/profile/profile-layout.d.ts
+++ b/src/types/profile/profile-layout.d.ts
@@ -1,4 +1,5 @@
 interface ProblemType {
+  [key: string]: number;
   id: number;
   title: string;
   partTitle: string;
diff --git a/src/types/select.d.ts b/src/types/select.d.ts
index 50cf904..08bb9b0 100644
--- a/src/types/select.d.ts
+++ b/src/types/select.d.ts
@@ -30,6 +30,7 @@ interface SolutionType {
 
 interface PartTitleSelectProps {
   partTitleList: Array<string>;
+  onChangePageIdx: (page: number) => void;
 }
 
 interface SortType {