fix: 프로그래머스 문제 api가 변경되어 fetch방법 수정 (#83)

* fix: 프로그래머스 문제 api가 변경되어 fetch방법 수정

* fix: 나의 문제 tab 생성 및 문제 제출시마다 성공한 문제를 fetch하도록 수정

* fix: 로그인이 안 된 상태일 때 나의 문제 tab을 생성하지 못하게끔 변경

Author: dev-redo

src/components/box/RefreshRequestBox.tsx

@@ -2,14 +2,15 @@ import styled from 'styled-components';
 import { theme } from '../../styles/theme';
 
 type BoxProps = {
+  children: React.ReactNode;
   backgroundColor?: string;
   color?: string;
 };
 
-const RefreshRequestBox = ({ backgroundColor, color }: BoxProps) => {
+const RefreshRequestBox = ({ children, backgroundColor, color }: BoxProps) => {
   return (
     <BoxStyle backgroundColor={backgroundColor} color={color}>
-      새로고침을 해주세요!
+      {children}
     </BoxStyle>
   );
 };

src/components/button/CreateSolutionsButton.tsx

@@ -26,7 +26,7 @@ const CreateSolutionsButton = (href: ButtonProps) => {
   return (
     <>
       <Modal isOpen={isModalOpen} closeModal={() => setIsModalOpen(false)}>
-        <RefreshRequestBox />
+        <RefreshRequestBox>새로고침을 해주세요!</RefreshRequestBox>
       </Modal>
       <ButtonStyle onClick={createSolutionTab}>저장된 모든 풀이</ButtonStyle>
     </>

src/constants/url.ts

@@ -6,4 +6,6 @@ const PROBLEM_URL =
 
 const SOLVING_PROBLEM_URL = 'https://school.programmers.co.kr/learn/courses/30/lessons/';
 
-export { ALL_PROBLEM_URL, PROBLEM_URL, SOLVING_PROBLEM_URL };
+const USER_INFO_URL = 'https://school.programmers.co.kr/api/v1/users/current';
+
+export { ALL_PROBLEM_URL, PROBLEM_URL, SOLVING_PROBLEM_URL, USER_INFO_URL };

src/pages/background/getSuccessProblems.ts

@@ -1,14 +1,14 @@
 import { fetchRequest } from '../../utils/fetchRequest';
 import { PROBLEM_URL } from '../../constants/url';
-import { Message } from '../../types/global';
 
 const getSuccessProblemIdList = async () => {
-  const lastPage = await getEndPageNumber();
-  const promisedFetchedDataList = [...new Array(lastPage)].map((_, idx) =>
+  const { totalPages } = await fetchRequest({ url: PROBLEM_URL + 1 });
+
+  const promisedFetchedDataList = [...new Array(totalPages)].map((_, idx) =>
     fetchProblemPageList(idx + 1),
   );
-  const fetchedDataList = await Promise.all(promisedFetchedDataList);
 
+  const fetchedDataList = await Promise.all(promisedFetchedDataList);
   return fetchedDataList
     .reduce((prev, curr) => [...prev, ...curr], [])
     .map(({ id }: { id: string }) => id);
@@ -18,51 +18,3 @@ export { getSuccessProblemIdList };
 
 const fetchProblemPageList = async (pageNum: number) =>
   (await fetchRequest({ url: PROBLEM_URL + pageNum })).result;
-
-const getEndPageNumber = async () => {
-  const end = await initEndPageNum();
-  return binarySearch({ start: end / 2, end });
-};
-
-const initEndPageNum = async () => {
-  let pageNum = 1;
-
-  while (true) {
-    const isProblemListEmpty = await checkProblemListEmpty(pageNum);
-
-    if (isProblemListEmpty) {
-      break;
-    }
-    pageNum *= 2;
-  }
-
-  return pageNum;
-};
-
-const checkProblemListEmpty = async (pageNum: number) => {
-  const problemPageList = await fetchProblemPageList(pageNum);
-  return problemPageList.length === 0;
-};
-
-type binarySearchType = {
-  start: number;
-  end: number;
-};
-const binarySearch = async ({ start, end }: binarySearchType) => {
-  while (start <= end) {
-    let mid = Math.floor((start + end) / 2);
-    const isMidPageEmpty = (await fetchProblemPageList(mid)).length;
-
-    if (isMidPageEmpty) {
-      start = mid + 1;
-      continue;
-    }
-
-    const isPrevMidPageEmpty = (await fetchProblemPageList(mid - 1)).length;
-
-    if (isPrevMidPageEmpty) {
-      return mid - 1;
-    }
-    end = mid - 1;
-  }
-};

src/pages/background/index.ts

@@ -2,24 +2,16 @@ import { postCurrentSolution } from './postCurrentSolution';
 import { getAllSolutions } from './getAllSolutions';
 import { createSolutionsTab } from './createSolutionsTab';
 import { createSuccessProblemTab } from './createSuccessProblemTab';
-import { getSuccessProblemIdList } from './getSuccessProblems';
+import { setSolvedProblems } from './setSolvedProblems';
 
 export const createChromeTab = (url: string) =>
   chrome.tabs.query({ active: true, currentWindow: true }, tabs => {
     const tabIndex = tabs[0]!.index;
     chrome.tabs.create({ url, index: tabIndex + 1 });
   });
 
-chrome.runtime.onInstalled.addListener(details => {
-  chrome.storage.local.get(['solvedProblem'], async response => {
-    const { solvedProblem } = response;
-    chrome.storage.local.set({
-      solvedProblem: 'solvedProblem' in response ? solvedProblem : await getSuccessProblemIdList(),
-    });
-  });
-});
-
 chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
+  setSolvedProblems();
   const message = { request, sender, sendResponse };
 
   if (request.method === 'postCurrentSolution') {

src/pages/background/setSolvedProblems.ts

@@ -0,0 +1,11 @@
+import { getSuccessProblemIdList } from './getSuccessProblems';
+
+const setSolvedProblems = () => {
+  chrome.storage.local.get(['solvedProblem'], async response => {
+    chrome.storage.local.set({
+      solvedProblem: await getSuccessProblemIdList(),
+    });
+  });
+};
+
+export { setSolvedProblems };

src/pages/content/problemPage.tsx

@@ -6,34 +6,57 @@ import { theme } from '../../styles/theme';
 import Profile from '../../../assets/icons/Profile.svg';
 import Modal from '../../components/modal/Modal';
 import RefreshRequestBox from '../../components/box/RefreshRequestBox';
+import { USER_INFO_URL as url } from '../../constants/url';
+import { fetchRequest } from '../../utils/fetchRequest';
 
 const OpenSuccessTabButton = () => {
   const [isModalOpen, setIsModalOpen] = React.useState(false);
+  const [isLoggedIn, setIsLoggedIn] = React.useState(false);
 
-  const createSuccessProblemTab = () => {
-    if (chrome.runtime?.id === undefined) {
-      setIsModalOpen(true);
-      return;
-    }
-
-    chrome.runtime.sendMessage({
-      method: 'createSuccessProblemTab',
-    });
-  };
+  React.useEffect(() => {
+    (async () => {
+      const { isLoggedIn } = await fetchRequest({ url });
+      setIsLoggedIn(isLoggedIn);
+    })();
+  }, []);
 
   return (
     <>
       <Modal isOpen={isModalOpen} closeModal={() => setIsModalOpen(false)}>
-        <RefreshRequestBox backgroundColor={theme.color.jetBlack} color={theme.color.white} />
+        <RefreshRequestBox backgroundColor={theme.color.jetBlack} color={theme.color.white}>
+          새로고침을 해주세요!
+        </RefreshRequestBox>
       </Modal>
-      <ButtonStyle onClick={createSuccessProblemTab}>
-        <ToolTipStyle>나의 풀이 바로가기</ToolTipStyle>
+      <ButtonStyle onClick={() => createSuccessProblemTab({ isLoggedIn, setIsLoggedIn })}>
+        {isLoggedIn && <ToolTipStyle>나의 풀이 바로가기</ToolTipStyle>}
+        {isLoggedIn || <ToolTipStyle>로그인을 해주세요!</ToolTipStyle>}
         <Profile />
       </ButtonStyle>
     </>
   );
 };
 
+type ProblemTabType = {
+  isLoggedIn: boolean;
+  setIsLoggedIn: (isModalOpen: boolean) => void;
+};
+
+const createSuccessProblemTab = ({ isLoggedIn, setIsLoggedIn }: ProblemTabType) => {
+  if (!isLoggedIn) {
+    alert(`프로그래머스에 로그아웃이 된 상태입니다.\n로그인을 해주세요!`);
+    return;
+  }
+
+  if (chrome.runtime?.id === undefined) {
+    setIsLoggedIn(true);
+    return;
+  }
+
+  chrome.runtime.sendMessage({
+    method: 'createSuccessProblemTab',
+  });
+};
+
 const ButtonStyle = styled.button`
   display: flex;
   justify-content: space-between;
@@ -42,6 +65,8 @@ const ButtonStyle = styled.button`
   top: 85%;
   right: 5%;
   z-index: 10000;
+  border: none;
+  background: none;
   svg {
     filter: drop-shadow(#707373 0px 5px 5px);
     transition: all 0.2s linear;