[Common] Responsive missionDetail

packages/api/client/src/hooks/solve/usePostSolve.ts

@@ -1,11 +1,12 @@
 import { useMutation } from '@tanstack/react-query';
 
 import { post, solveQueryKeys, solveUrl } from 'api/common';
+import { AxiosError } from 'axios';
 
 export const usePostSolve = (missionId: string) =>
   useMutation<
     void,
-    Error,
+    AxiosError,
     {
       solvation: string;
     }

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

@@ -37,13 +37,11 @@ const Header: React.FC<HeaderProps> = ({ role }) => {
           <S.Title>Stack Knowledge</S.Title>
         </S.LogoContainer>
         <S.MenuNav role={role}>
-
           <S.MenuStrokeItemWrapper
             href='/'
-            isActive={getIsActive('/')}
+            data-isactive={getIsActive('/')}
             onClick={handleLinkClick}
           >
-
             <HomeIcon />
             <S.ItemTitle>홈</S.ItemTitle>
           </S.MenuStrokeItemWrapper>
@@ -52,15 +50,17 @@ const Header: React.FC<HeaderProps> = ({ role }) => {
             <>
               <S.MenuStrokeItemWrapper
                 href='/mission/scoring'
-                isActive={getIsActive('/mission/scoring')}
+                data-isactive={getIsActive('/mission/scoring')}
+                onClick={handleLinkClick}
               >
                 <QuestionIcon />
                 <S.ItemTitle>채점하기</S.ItemTitle>
               </S.MenuStrokeItemWrapper>
 
               <S.MenuFillItemWrapper
                 href='/mission/create'
-                isActive={getIsActive('/mission/create')}
+                data-isactive={getIsActive('/mission/create')}
+                onClick={handleLinkClick}
               >
                 <MadeIcon />
                 <S.ItemTitle>만들기</S.ItemTitle>
@@ -70,18 +70,17 @@ const Header: React.FC<HeaderProps> = ({ role }) => {
             <>
               <S.MenuStrokeItemWrapper
                 href='/mission/list'
-                isActive={getIsActive('/mission/list')}
+                data-isactive={getIsActive('/mission/list')}
+                onClick={handleLinkClick}
               >
                 <QuestionIcon />
                 <S.ItemTitle>문제</S.ItemTitle>
               </S.MenuStrokeItemWrapper>
             </>
           )}
-
-
           <S.MenuFillItemWrapper
             href='/shop'
-            isActive={getIsActive('/shop')}
+            data-isactive={getIsActive('/shop')}
             onClick={handleLinkClick}
           >
             <ShopIcon />
@@ -90,7 +89,8 @@ const Header: React.FC<HeaderProps> = ({ role }) => {
 
           <S.MenuFillItemWrapper
             href='/ranking'
-            isActive={getIsActive('/ranking')}
+            data-isactive={getIsActive('/ranking')}
+            onClick={handleLinkClick}
           >
             <RankingIcon />
             <S.ItemTitle>랭킹</S.ItemTitle>

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

@@ -34,9 +34,9 @@ export const MenuNav = styled.div`
   gap: ${({ role }) => (role === 'admin' ? '1.5rem' : '2.25rem')};
 `;
 
-export const MenuStrokeItemWrapper = styled(Link)<{ isActive?: boolean }>`
-  ${({ isActive, theme }) => {
-    const activeColor = isActive ? theme.color.primary : theme.color.black;
+export const MenuStrokeItemWrapper = styled(Link)<{ $isActive?: boolean }>`
+  ${({ $isActive, theme }) => {
+    const activeColor = $isActive ? theme.color.primary : theme.color.black;
     const hoverColor = theme.color.primary;
     return `
       display: flex;
@@ -63,9 +63,9 @@ export const MenuStrokeItemWrapper = styled(Link)<{ isActive?: boolean }>`
   }}
 `;
 
-export const MenuFillItemWrapper = styled(Link)<{ isActive?: boolean }>`
-  ${({ isActive, theme }) => {
-    const activeColor = isActive ? theme.color.primary : theme.color.black;
+export const MenuFillItemWrapper = styled(Link)<{ $isActive?: boolean }>`
+  ${({ $isActive, theme }) => {
+    const activeColor = $isActive ? theme.color.primary : theme.color.black;
     const hoverColor = theme.color.primary;
     return `
       display: flex;

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

@@ -6,6 +6,10 @@ export const SubmitContainer = styled.div`
   height: 18.75rem;
   border-radius: 0.625rem;
   box-shadow: 0.1875rem 0.1875rem 0.25rem 0rem rgba(120, 120, 120, 0.25);
+
+  @media ${({ theme }) => theme.breakPoint[600]} {
+    width: calc(100vw - 16rem);
+  }
 `;
 export const MissionDetailInputWrapper = styled.div`
   display: flex;
@@ -22,6 +26,11 @@ export const MissionDetailInput = styled.textarea`
   resize: none;
   border: 0;
 
+  @media ${({ theme }) => theme.breakPoint[600]} {
+    width: calc(100vw - 16rem);
+    text-indent: 0.5625rem;
+  }
+
   ::placeholder {
     color: ${({ theme }) => theme.color.gray['050']};
     font-weight: 500;

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

@@ -39,11 +39,13 @@ export const Point = styled.span`
   color: ${({ theme }) => theme.color.black};
   font-weight: 500;
   margin-right: 0.25rem;
+  font-family: Roboto;
 `;
 
 export const PointUnit = styled.span`
   ${({ theme }) => theme.typo.body2};
   color: ${({ theme }) => theme.color.black};
+  font-family: Roboto;
   font-weight: 500;
 `;
 

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

@@ -21,7 +21,9 @@ const TaskCard: React.FC<TaskCardProps> = ({
 }) => (
   <S.CardWrapper onClick={onClick} isShadow={isShadow}>
     <S.UserName>{userName}</S.UserName>
-    <S.TaskTitle>{taskTitle}</S.TaskTitle>
+    <S.TaskWrapper>
+      <S.TaskTitle>{taskTitle}</S.TaskTitle>
+    </S.TaskWrapper>
     <S.MiledgeWrapper>
       <S.Mildege>{slicePoint(miledge)}</S.Mildege>
       <S.MildegeUnit>M</S.MildegeUnit>

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

@@ -22,30 +22,43 @@ export const UserName = styled.span`
   margin: 2.5rem 0 2.25rem;
 `;
 
+export const TaskWrapper = styled.div`
+  width: 100%;
+  height: 6.25rem;
+  word-break: break-all;
+  display: flex;
+  justify-content: center;
+`;
+
 export const TaskTitle = styled.span`
   ${({ theme }) => theme.typo.body1};
   color: ${({ theme }) => theme.color.gray['070']};
   font-weight: 500;
+  text-align: center;
 `;
 
 export const MiledgeWrapper = styled.div`
   width: 14rem;
+  height: auto;
   display: flex;
   gap: 0.25rem;
-  margin-top: 8rem;
+  margin-top: 3rem;
   align-items: center;
   justify-content: center;
 `;
 
 export const Mildege = styled.span`
-  ${({ theme }) => theme.typo.button};
+  ${({ theme }) => theme.typo.body2};
   color: ${({ theme }) => theme.color.black};
   font-weight: 500;
+  position: relative;
+  bottom: 2px;
 `;
 
 export const MildegeUnit = styled.span`
   ${({ theme }) => theme.typo.body2};
   color: ${({ theme }) => theme.color.black};
   font-family: Roboto;
   font-weight: 500;
+  position: relative;
 `;

projects/admin/src/PageContainer/ShopPage/index.tsx

@@ -1,14 +1,19 @@
 'use client';
 
+import { useGetOrderedItemList } from 'api/admin';
 import * as S from './style';
 
 import { ShopCarousel } from 'admin/components';
 
-const ShopPage = () => (
-  <S.PageWrapper>
-    <S.ShopText>상점</S.ShopText>
-    <ShopCarousel />
-  </S.PageWrapper>
-);
+const ShopPage = () => {
+  const { data } = useGetOrderedItemList();
+
+  return (
+    <S.PageWrapper>
+      <S.ShopText>상점</S.ShopText>
+      {data?.length > 0 ? <ShopCarousel /> : <h1>상품이 없습니다...</h1>}
+    </S.PageWrapper>
+  );
+};
 
 export default ShopPage;

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

@@ -64,7 +64,7 @@ const MissionDetailPage: React.FC<MissionDetailProps> = ({ missionId }) => {
     });
   };
 
-  const { mutate, isSuccess, isError } = usePostSolve(missionId);
+  const { mutate, isSuccess, isError, error } = usePostSolve(missionId);
 
   useEffect(() => {
     setMinutes(Math.floor((data?.timeLimit ?? 0) / 60));
@@ -78,7 +78,12 @@ const MissionDetailPage: React.FC<MissionDetailProps> = ({ missionId }) => {
 
   if (isError) {
     push(`/`);
-    toast.error('이미 푼 문제입니다.');
+
+    if (error.response.status === 400) {
+      toast.error('시간 제한을 초과하였습니다.');
+    } else if (error.response.status === 409) {
+      toast.error('이미 푼 문제입니다.');
+    }
   }
 
   return (

projects/client/src/PageContainer/MissionDetailPage/style.ts

@@ -16,6 +16,7 @@ export const Section = styled.div`
   margin-bottom: 1.25rem;
   font-weight: 400;
   max-width: 55.625rem;
+  word-break: break-all;
 `;
 
 export const MissionWrapper = styled.div`

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

@@ -1,14 +1,19 @@
 'use client';
 
+import { useGetMissionList } from 'api/common';
 import * as S from './style';
 
 import { MissionCarousel } from 'client/components';
 
-const MissionListPage = () => (
-  <S.PageWrapper>
-    <S.ScoringText>문제</S.ScoringText>
-    <MissionCarousel />
-  </S.PageWrapper>
-);
+const MissionListPage = () => {
+  const { data } = useGetMissionList();
+
+  return (
+    <S.PageWrapper>
+      <S.ScoringText>문제</S.ScoringText>
+      {data?.length > 0 ? <MissionCarousel /> : <h1>문제가 없습니다...</h1>}
+    </S.PageWrapper>
+  );
+};
 
 export default MissionListPage;