release: 버전 1.0.8 배포 (#109)

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

* release: 버전 1.0.8 업데이트

* feat(Select, newTab/profile): 나의 풀이 tab 문제 유형 select 박스의 옵션들에 푼 문제 개수를 보여주는 기능 추가

Author: dev-redo

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": {

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}
     />
   );
 };

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;

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>
 );
 

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');

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",

src/types/profile/profile-layout.d.ts

@@ -1,4 +1,5 @@
 interface ProblemType {
+  [key: string]: number;
   id: number;
   title: string;
   partTitle: string;

src/types/select.d.ts

@@ -30,6 +30,7 @@ interface SolutionType {
 
 interface PartTitleSelectProps {
   partTitleList: Array<string>;
+  onChangePageIdx: (page: number) => void;
 }
 
 interface SortType {