Merge pull request #69 from Stack-Knowledge/hotfix/QA1

[QA] 1

Author: frorong

packages/api/common/src/libs/api/instance.ts

@@ -32,7 +32,7 @@ apiInstance.interceptors.response.use(
   async (error) => {
     if (
       error.config.url === authUrl.auth() &&
-      (error.response.status === 404 || error.response.status === 403)
+      [403, 404].includes(error.response.status)
     ) {
       location.replace('/auth/login');
 

packages/common/src/components/MainContents/style.ts

@@ -24,9 +24,6 @@ export const Contents = styled.div`
   padding: 2.375rem 2.5rem;
   gap: 3rem;
   overflow-x: scroll;
-  &::-webkit-scrollbar {
-    display: none;
-  }
 
   .medalWrapper:nth-of-type(1n) .medal {
     background-color: #ffd79b;

packages/common/src/components/RankingCard/index.tsx

@@ -17,7 +17,7 @@ const RankingCard: React.FC<RankingCardType> = ({
   cumulatePoint,
   user: { profileImage, name },
 }) => (
-  <S.CardWrapper className='medalWrapper'>
+  <S.CardWrapper href={'/ranking'} className='medalWrapper'>
     {rank <= 3 && <S.Medal className='medal'>{rank}</S.Medal>}
     <S.ProfileWrapper>
       <Image

packages/common/src/components/RankingCard/style.ts

@@ -1,6 +1,8 @@
 import styled from '@emotion/styled';
 
-export const CardWrapper = styled.div`
+import Link from 'next/link';
+
+export const CardWrapper = styled(Link)`
   width: 14rem;
   height: 19rem;
   border-radius: 1.25rem;

projects/admin/src/components/Modal/index.tsx

@@ -12,8 +12,8 @@ const Modal: React.FC<ModalProps> = ({ content, onClick }) => (
       <S.ModalContent>{content}</S.ModalContent>
     </S.ModalContentWrapper>
     <S.ModalButtonWrapper method='dialog'>
-      <S.ModalDeleted>취소</S.ModalDeleted>
-      <S.ModalConfirm onClick={onClick}>확인</S.ModalConfirm>
+      <S.ModalButton>취소</S.ModalButton>
+      <S.ModalButton onClick={onClick}>확인</S.ModalButton>
     </S.ModalButtonWrapper>
   </S.ModalWrapper>
 );

projects/admin/src/components/Modal/style.ts

@@ -32,20 +32,19 @@ export const Button = styled.button`
   ${({ theme }) => theme.typo.body2};
   width: 7.25rem;
   border-radius: 0.625rem;
-  margin-right: 0.5rem;
   padding: 0.625rem;
   cursor: pointer;
 `;
 
-export const ModalDeleted = styled(Button)`
-  background-color: ${({ theme }) => theme.color.primary};
-  color: ${({ theme }) => theme.color.white};
-  border: 0;
-  cursor: pointer;
-`;
-
-export const ModalConfirm = styled(Button)`
+export const ModalButton = styled(Button)`
   background-color: ${({ theme }) => theme.color.white};
   border: 0.0625rem solid ${({ theme }) => theme.color.primary};
   color: ${({ theme }) => theme.color.primary};
+  cursor: pointer;
+
+  &:hover {
+    background-color: ${({ theme }) => theme.color.primary};
+    color: ${({ theme }) => theme.color.white};
+    border: 0;
+  }
 `;

projects/client/public/favicon.png

@@ -13,6 +13,8 @@ import { useEffect, useRef, useState } from 'react';
 
 import { useRouter } from 'next/navigation';
 
+import { toast } from 'react-toastify';
+
 interface MissionDetailProps {
   missionId: string;
 }
@@ -57,17 +59,25 @@ const MissionDetailPage: React.FC<MissionDetailProps> = ({ missionId }) => {
     mutate({
       solvation: inputValue,
     });
-    push(`/`);
-    alert('문제를 제출하였습니다.');
   };
 
-  const { mutate } = usePostSolve(missionId);
+  const { mutate, isSuccess, isError } = usePostSolve(missionId);
 
   useEffect(() => {
     setMinutes(Math.floor((data?.timeLimit ?? 0) / 60));
     setSeconds((data?.timeLimit ?? 0) % 60);
   }, [data]);
 
+  if (isSuccess) {
+    push(`/`);
+    toast.success('문제를 제출하였습니다.');
+  }
+
+  if (isError) {
+    push(`/`);
+    toast.error('이미 푼 문제입니다.');
+  }
+
   return (
     <S.PageWrapper>
       {data && (

projects/client/src/PageContainer/MissionDetailPage/index.tsx

@@ -8,10 +8,49 @@ import { Header } from 'common';
 import Providers from './providers';
 
 export const metadata: Metadata = {
-  title: 'Stack Knowledge',
-  description: 'Stack Knowledge',
+  applicationName: 'StackKnowledge',
+  keywords: [
+    'Stack Knowledge',
+    'Stack',
+    'Knowledge',
+    '광주소프트웨어마이스터고등학교',
+    '광주소프트웨어마이스터고',
+    '광소마',
+    '광주',
+    '소프트웨어',
+    '마이스터고',
+    '마이스터고등학교',
+    'GSM',
+    'GwangjuSoftwareMeisterHighSchool',
+    'SoftWare',
+    '학습',
+  ],
+  creator: 'StackKnowledge',
+  publisher: 'StackKnowledge',
+  description: '학습 장려 게임화 플랫폼입니다.',
+  title: {
+    template: 'StackKnowledge - %s',
+    default: 'StackKnowledge',
+  },
+  openGraph: {
+    title: 'StackKnowledge',
+    description: '학습 장려 게임화 플랫폼입니다.',
+    url: 'https://stack-knowledge-client.vercel.app/',
+    siteName: 'StackKnowledge',
+    images: [
+      {
+        url: '/favicon.png',
+        width: 800,
+        height: 800,
+      },
+    ],
+    locale: 'ko',
+    type: 'website',
+  },
+  icons: {
+    icon: '/favicon.png',
+  },
 };
-
 export default function RootLayout({
   children,
 }: {

projects/client/src/app/layout.tsx

@@ -1,5 +1,17 @@
 import { MissionListPage } from 'client/PageContainer';
 
+import { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  description: 'StackKnowledge 문제 목록 페이지입니다.',
+  title: { absolute: '문제 목록' },
+  openGraph: {
+    title: '문제 목록',
+    description: 'StackKnowledge 문제 목록 페이지입니다.',
+    url: 'https://stack-knowledge-client.vercel.app/mission/list/',
+  },
+};
+
 export default function MissionDetail() {
   return <MissionListPage />;
 }

projects/client/src/app/mission/list/page.tsx

@@ -1,9 +1,27 @@
 import { MissionDetailPage } from 'client/PageContainer';
 
+import { useGetMissionDetail } from 'api/common';
+
+import { Metadata } from 'next';
+
 interface SolveProps {
   params: { missionId: string };
 }
 
+export const generateMetadata = async ({
+  params: { missionId },
+}: SolveProps): Promise<Metadata> => {
+  return {
+    title: { absolute: '문제 풀이' },
+    description: 'StackKnowledge 문제 풀이 페이지입니다.',
+    openGraph: {
+      title: '문제 풀이',
+      description: 'StackKnowledge 문제 풀이 페이지입니다.',
+      url: `https://stack-knowledge-client.vercel.app/mission/resolve/${missionId}`,
+    },
+  };
+};
+
 export default function SolvePage({ params: { missionId } }: SolveProps) {
   return <MissionDetailPage missionId={missionId} />;
 }

projects/client/src/app/mission/resolve/[missionId]/page.tsx

@@ -1,5 +1,17 @@
 import { RankingPage } from 'client/PageContainer';
 
+import { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  description: 'StackKnowledge 랭킹 페이지입니다.',
+  title: { absolute: '랭킹' },
+  openGraph: {
+    title: '랭킹',
+    description: 'StackKnowledge 랭킹 페이지입니다.',
+    url: 'https://stack-knowledge-client.vercel.app/ranking/',
+  },
+};
+
 export default function Ranking() {
   return <RankingPage />;
 }

projects/client/src/app/ranking/page.tsx

@@ -1,5 +1,17 @@
 import { ShopPage } from 'client/PageContainer';
 
+import { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  description: 'StackKnowledge 상점 페이지입니다.',
+  title: { absolute: '상점' },
+  openGraph: {
+    title: '상점',
+    description: 'StackKnowledge 상점 페이지입니다.',
+    url: 'https://stack-knowledge-client.vercel.app/shop/',
+  },
+};
+
 export default function Shop() {
   return <ShopPage />;
 }

projects/client/src/app/shop/page.tsx

@@ -15,8 +15,8 @@ const MissionDetailModal: React.FC<MissionDetailModalProps> = ({
       <S.ModalContent>문제를 제출하시겠습니까?</S.ModalContent>
     </S.ModalContentWrapper>
     <S.ModalButtonWrapper method='dialog'>
-      <S.ModalDeleted onClick={onCancel}>취소</S.ModalDeleted>
-      <S.ModalConfirm onClick={onConfirm}>확인</S.ModalConfirm>
+      <S.ModalButton onClick={onCancel}>취소</S.ModalButton>
+      <S.ModalButton onClick={onConfirm}>확인</S.ModalButton>
     </S.ModalButtonWrapper>
   </S.ModalWrapper>
 );

projects/client/src/components/MissionDetailModal/index.tsx

@@ -28,25 +28,23 @@ export const ModalButtonWrapper = styled.form`
   gap: 1rem;
 `;
 
-export const ModalDeleted = styled.button`
-  background-color: ${({ theme }) => theme.color.primary};
-  color: ${({ theme }) => theme.color.white};
+export const Button = styled.button`
   ${({ theme }) => theme.typo.body2};
   width: 7.25rem;
   border-radius: 0.625rem;
-  border: 0;
   padding: 0.625rem;
-  margin-left: 0.5rem;
   cursor: pointer;
 `;
-export const ModalConfirm = styled.button`
+
+export const ModalButton = styled(Button)`
   background-color: ${({ theme }) => theme.color.white};
   border: 0.0625rem solid ${({ theme }) => theme.color.primary};
   color: ${({ theme }) => theme.color.primary};
-  ${({ theme }) => theme.typo.body2};
-  width: 7.25rem;
-  border-radius: 0.625rem;
-  padding: 0.625rem;
-  margin-right: 0.5rem;
   cursor: pointer;
+
+  &:hover {
+    background-color: ${({ theme }) => theme.color.primary};
+    color: ${({ theme }) => theme.color.white};
+    border: 0;
+  }
 `;