Merge branch 'dev' of https://github.com/PoolC/Dialga into dev

.gitignore

@@ -28,3 +28,5 @@ yarn-error.log*
 
 node_modules
 
+# chrome extension zip files
+baekjoon-hub.zip

.yarnrc.yml

@@ -23,5 +23,6 @@ supportedArchitectures:
   os:
     - darwin
     - linux
+    - win32
 
 yarnPath: .yarn/releases/yarn-3.8.1.cjs

apps/baekjoon-hub/manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "PoolC Baekjoon Hub",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "Yonsei Univ Programming Club PoolC integration with Baekjoon",
   "action": {
     "default_icon": "assets/images/logo-poolc.png",

apps/baekjoon-hub/scripts/background.js

@@ -2,6 +2,10 @@ const POOLC_BASE_URL = 'https://poolc.org/api';
 
 const appFetch = (...args) =>
   fetch(...args).then((res) => {
+    if (res.status === 401) {
+      throw new Error('unauthorized');
+    }
+
     if (res.status >= 400) {
       throw new Error('fetch error. please check network tab');
     }
@@ -29,7 +33,9 @@ function handleMessage(request, _, sendResponse) {
           'Content-Type': 'application/json',
           Authorization: `Bearer ${token}`,
         },
-      }).then(() => sendResponse({ success: true }));
+      })
+        .then(() => sendResponse({ success: true }))
+        .catch(() => sendResponse({ success: false }));
     });
   }
   // login check

apps/baekjoon-hub/scripts/baekjoon/baekjoon.js

@@ -17,7 +17,6 @@ function showToast(message) {
 
   document.body.append(box);
 
-  console.log('toast!');
   setTimeout(() => {
     box.style.opacity = 0;
   }, 2000 - 300);
@@ -27,6 +26,32 @@ function showToast(message) {
   }, 2000);
 }
 
+function showErrorToast(message) {
+  const toast = `<div>${message}</div>`;
+  const box = document.createElement('div');
+  box.innerHTML = toast;
+  box.style.position = 'fixed';
+  box.style.top = '20px';
+  box.style.right = '20px';
+  box.style.backgroundColor = '#fa5252';
+  box.style.boxShadow = '0 2px 7px 0 rgba(0, 0, 0, 0.2)';
+  box.style.padding = '20px';
+  box.style.zIndex = 9999;
+  box.style.transition = 'opacity .3s linear';
+  box.style.color = '#fff';
+  box.style.fontWeight = 700;
+
+  document.body.append(box);
+
+  setTimeout(() => {
+    box.style.opacity = 0;
+  }, 4000 - 300);
+
+  setTimeout(() => {
+    box.remove();
+  }, 4000);
+}
+
 function stopLoader() {
   clearInterval(loader);
   loader = null;
@@ -85,14 +110,23 @@ function startLoader() {
 
     const psData = await findData();
 
-    await notifyProblemSolved({
-      language: psData.language,
-      level: psData.level,
-      problemId: psData.problemId,
-      problemTags: psData.tags.map((tag) => tag.key), // 국문 or 영문 어떤게 더 낫지??
-      submissionId: psData.submissionId,
-      title: psData.titles[0].title,
-    });
+    try {
+      await notifyProblemSolved({
+        language: psData.language,
+        level: psData.level,
+        problemId: psData.problemId,
+        problemTags: psData.tags.map((tag) => tag.key), // 국문 or 영문 어떤게 더 낫지??
+        submissionId: psData.submissionId,
+        title: psData.titles[0].title,
+      });
+    } catch (error) {
+      showErrorToast(`
+        인증이 만료되었습니다. 😭<br/>
+        <a href=${`chrome-extension://${chrome.runtime.id}/login.html`} style="color: #212529; font-weight: 700;">해당 링크</a>를 통해 다시 로그인해주세요. 🙏
+      `);
+      console.error(error);
+      return;
+    }
 
     await reIssueToken();
     showToast(`${psData.problemId}번 문제 풀이가 풀씨에 업로드되었습니다. ❤`);

apps/baekjoon-hub/scripts/baekjoon/parsing.js

@@ -122,7 +122,7 @@ async function SolvedApiCall(problemId) {
 }
 
 async function notifyProblemSolved({ language, level, problemId, problemTags, submissionId, title }) {
-  const response = await new Promise((resolve) => {
+  const response = await new Promise((resolve, reject) => {
     chrome.runtime.sendMessage(
       {
         poolc: {
@@ -138,7 +138,13 @@ async function notifyProblemSolved({ language, level, problemId, problemTags, su
           },
         },
       },
-      resolve,
+      (res) => {
+        if (res.success) {
+          resolve();
+        } else {
+          reject();
+        }
+      },
     );
   });
   return response;

apps/web-client/src/components/activity/ActivityDetail/ActivityDetail.jsx

@@ -113,7 +113,7 @@ const ActivityDetail = ({ loading, activity, activityMembers, activityMemberIDs,
               <PlanContainer>
                 <h2 className="title">계획서</h2>
                 <PlanContents>
-                  <Viewer initialValue={activity.description} />
+                  <Viewer initialValue={activity.description} key={activity.description} />
                 </PlanContents>
                 <FileContainerTitle>첨부된 파일 목록</FileContainerTitle>
                 <FileContainer>

apps/web-client/src/components/activity/Session/Session.jsx

@@ -21,7 +21,7 @@ const Session = ({ session, memberInfo, activityID, attendance, host }) => {
         <Date>{date}</Date>
         <Date>({hour}시간 진행)</Date>
         <Description>
-          <Viewer initialValue={description} />
+          <Viewer initialValue={description} key={description} />
         </Description>
         {isLogin && (
           <>

apps/web-client/src/components/board/BoardJobWriteSection.tsx

@@ -8,7 +8,6 @@ import { Link, useHistory } from 'react-router-dom';
 import { stringify } from 'qs';
 import { createStyles } from 'antd-style';
 import { UploadOutlined } from '@ant-design/icons';
-import { useQueryClient } from '@tanstack/react-query';
 import { ApiError, CustomApi, PostControllerService, PostCreateRequest, queryKey, useAppMutation, useAppQuery } from '~/lib/api-v2';
 import { Block, WhiteBlock } from '~/styles/common/Block.styles';
 import { MENU } from '~/constants/menus';
@@ -58,7 +57,6 @@ export default function BoardJobWriteSection({ postId }: { postId: number }) {
   const { styles } = useStyles();
   const message = useMessage();
   const history = useHistory();
-  const queryClient = useQueryClient();
 
   const editorRef = useRef<Editor | null>(null);
   const form = useForm<z.infer<typeof schema>>({
@@ -166,11 +164,7 @@ export default function BoardJobWriteSection({ postId }: { postId: number }) {
         {
           onSuccess() {
             message.success('글이 수정되었습니다.');
-            queryClient
-              .invalidateQueries({
-                queryKey: queryKey.post.post(postId),
-              })
-              .then(() => history.push(`/${MENU.BOARD}/${postId}`));
+            history.push(`/${MENU.BOARD}/${postId}`);
           },
         },
       );
@@ -195,11 +189,7 @@ export default function BoardJobWriteSection({ postId }: { postId: number }) {
         {
           onSuccess() {
             message.success('글이 작성되었습니다.');
-            queryClient
-              .invalidateQueries({
-                queryKey: queryKey.post.all('JOB', 0),
-              })
-              .then(() => history.push(`/${MENU.BOARD}?${stringify({ boardType: 'JOB' })}`));
+            history.push(`/${MENU.BOARD}?${stringify({ boardType: 'JOB' })}`);
           },
         },
       );

apps/web-client/src/components/board/BoardList.tsx

@@ -7,7 +7,7 @@ import { stringify } from 'qs';
 import { CommentOutlined, EditOutlined } from '@ant-design/icons';
 import { MENU } from '~/constants/menus';
 import { PostControllerService, PostResponse, queryKey, useAppQuery } from '~/lib/api-v2';
-import { BoardType, getBoardTitleByBoardType } from '~/lib/utils/boardUtil';
+import { BoardType, getBoardTitleForRequest } from '~/lib/utils/boardUtil';
 import { dayjs } from '~/lib/utils/dayjs';
 import getFileUrl from '~/lib/utils/getFileUrl';
 import { useAppSelector } from '~/hooks/useAppSelector';
@@ -75,7 +75,7 @@ export default function BoardList({ boardType, page }: { boardType: BoardType; p
     queryKey: queryKey.post.all(boardType, page - 1),
     queryFn: () =>
       PostControllerService.viewPostsByBoardUsingGet({
-        boardTitle: getBoardTitleByBoardType(boardType),
+        boardTitle: getBoardTitleForRequest(boardType),
         page: page - 1,
       }),
   });

apps/web-client/src/components/board/BoardNormalWriteSection.tsx

@@ -13,7 +13,7 @@ import { useQueryClient } from '@tanstack/react-query';
 import { ApiError, CustomApi, PostControllerService, queryKey, useAppMutation, useAppQuery } from '~/lib/api-v2';
 import { Block, WhiteBlock } from '~/styles/common/Block.styles';
 import { MENU } from '~/constants/menus';
-import { BoardType, getBoardTitleByBoardType } from '~/lib/utils/boardUtil';
+import { BoardType, getBoardTitle } from '~/lib/utils/boardUtil';
 import { useMessage } from '~/hooks/useMessage';
 import { useAppSelector } from '~/hooks/useAppSelector';
 import getFileUrl from '~/lib/utils/getFileUrl';
@@ -56,7 +56,6 @@ export default function BoardNormalWriteSection({ boardType, postId }: { boardTy
   const history = useHistory();
   const message = useMessage();
   const loginId = useAppSelector((state) => state.auth.user.memberId);
-  const queryClient = useQueryClient();
 
   const editorRef = useRef<Editor | null>(null);
 
@@ -120,11 +119,7 @@ export default function BoardNormalWriteSection({ boardType, postId }: { boardTy
         {
           onSuccess() {
             message.success('글이 수정되었습니다.');
-            queryClient
-              .invalidateQueries({
-                queryKey: queryKey.post.post(postId),
-              })
-              .then(() => history.push(`/${MENU.BOARD}/${postId}`));
+            history.push(`/${MENU.BOARD}/${postId}`);
           },
         },
       );
@@ -145,11 +140,7 @@ export default function BoardNormalWriteSection({ boardType, postId }: { boardTy
         {
           onSuccess() {
             message.success('글이 작성되었습니다.');
-            queryClient
-              .invalidateQueries({
-                queryKey: queryKey.post.all(boardType, 0),
-              })
-              .then(() => history.push(`/${MENU.BOARD}?${stringify({ boardType })}`));
+            history.push(`/${MENU.BOARD}?${stringify({ boardType })}`);
           },
         },
       );
@@ -220,14 +211,14 @@ export default function BoardNormalWriteSection({ boardType, postId }: { boardTy
             items={[
               { title: <Link to={`/${MENU.BOARD}`}>게시판</Link> },
               {
-                title: <Link to={`/${MENU.BOARD}?${stringify({ boardType })}`}>{getBoardTitleByBoardType(boardType)}</Link>,
+                title: <Link to={`/${MENU.BOARD}?${stringify({ boardType })}`}>{getBoardTitle(boardType)}</Link>,
               },
             ]}
           />
           <Form onSubmitCapture={form.onSubmit(onFormSubmit, () => {})}>
             <Space direction="vertical" className={styles.fullWidth} size="middle">
               <Space direction="vertical" className={styles.titleWrap} size={0}>
-                <Typography.Title level={3}>{getBoardTitleByBoardType(boardType)}</Typography.Title>
+                <Typography.Title level={3}>{getBoardTitle(boardType)}</Typography.Title>
                 <Typography>{renderDescription()}</Typography>
               </Space>
               <div className={styles.fullWidth}>

apps/web-client/src/components/header/Header.jsx

@@ -1,4 +1,4 @@
-import { Suspense, useState } from 'react';
+import { useState } from 'react';
 import { Link } from 'react-router-dom';
 import { Avatar, Button, Dropdown } from 'antd';
 import { createStyles } from 'antd-style';
@@ -7,8 +7,7 @@ import poolcIcon from '~/assets/images/poolc-icon.png';
 import { BarsIcon, HeaderBlock, HeaderIconBox, HeaderIcons, LogoImage } from './Header.styles';
 import Menus from './Menus/Menus';
 import { MENU } from '~/constants/menus';
-import Notification from './Notification/Notification.tsx';
-import Spinner from '../common/Spinner/Spinner';
+import Notification from './Notification/Notification';
 
 const useStyles = createStyles(({ css }) => ({
   avatarButton: css`
@@ -23,6 +22,13 @@ const useStyles = createStyles(({ css }) => ({
     gap: 5px;
     margin-right: 10px;
   `,
+  menuInner: css`
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+  `,
 }));
 
 const Header = ({ member, onLogout }) => {
@@ -81,12 +87,9 @@ const Header = ({ member, onLogout }) => {
         </Link>
         <HeaderIconBox>
           {isLogin && (
-            <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center', gap: '8px' }}>
+            <div className={styles.menuInner}>
               {/** Noti */}
-              <Suspense fallback={<Spinner />}>
-                <Notification />
-              </Suspense>
-
+              <Notification />
               {/** Profile */}
               <Dropdown menu={{ items: dropDownItems }}>
                 <Button shape="circle" className={styles.avatarButton}>

apps/web-client/src/components/header/Menus/Menus.tsx

@@ -1,10 +1,22 @@
 import { Avatar, Button, Dropdown, MenuProps } from 'antd';
 import { useLocation } from 'react-router-dom';
+import { createStyles } from 'antd-style';
 import { isAuthorizedRole } from '../../../lib/utils/checkRole';
 import ActionButton from '../../common/Buttons/ActionButton';
 import LinkButton from '../../common/Buttons/LinkButton';
 import { LeftHeaderMenu, MenuBlock, RightHeaderMenu } from './Menus.styles';
 import { MENU } from '~/constants/menus';
+import Notification from '../Notification/Notification';
+
+const useStyles = createStyles(({ css }) => ({
+  menuInner: css`
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+  `,
+}));
 
 const Menus = ({
   menuVisible,
@@ -21,6 +33,8 @@ const Menus = ({
   dropDownItems: MenuProps['items'];
   profileImageURL: string;
 }) => {
+  const { styles } = useStyles();
+
   const links: {
     to: string;
     visible: boolean;
@@ -102,11 +116,15 @@ const Menus = ({
       </LeftHeaderMenu>
       <RightHeaderMenu>
         {isLogin && (
-          <Dropdown menu={{ items: dropDownItems }}>
-            <Button shape="circle" style={{ padding: 0, width: '40px', height: '40px' }}>
-              <Avatar src={profileImageURL} size={36} />
-            </Button>
-          </Dropdown>
+          <div className={styles.menuInner}>
+            {/** Noti */}
+            <Notification />
+            <Dropdown menu={{ items: dropDownItems }}>
+              <Button shape="circle" style={{ padding: 0, width: '40px', height: '40px' }}>
+                <Avatar src={profileImageURL} size={36} />
+              </Button>
+            </Dropdown>
+          </div>
         )}
         {!isLogin && (
           <LinkButton onClick={onToggleMenu} to="/register">