Merge pull request #83 from team-ppointer/feat/service/home/problem

[Feat/Service/#80] ProblemViewer 적용

Author: ssilver01

apps/service/package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@next/third-parties": "^15.2.4",
     "@repo/pointer-design-system": "workspace:*",
+    "@repo/pointer-editor": "workspace:*",
     "@tanstack/react-query": "^5.66.0",
     "@tanstack/react-query-devtools": "^5.66.0",
     "dayjs": "^1.11.13",

apps/service/public/svg/ic-question-white.svg

@@ -1,7 +1,7 @@
 'use client';
 import { Middleware } from 'openapi-fetch';
 
-import { getAccessToken, setAccessToken, setName, setRefreshToken } from '@utils';
+import { getAccessToken, setAccessToken, setGrade, setName, setRefreshToken } from '@utils';
 import { postRefreshToken } from '@/apis/controller/auth';
 
 const UNPROTECTED_ROUTES = ['/api/student/auth/social/login', '/api/common/auth/refresh'];
@@ -32,6 +32,7 @@ const reissueToken = async () => {
   }
   if (result.data?.name) {
     setName(result.data.name);
+    setGrade(result.data.grade);
   }
   return accessToken;
 };

apps/service/src/apis/authMiddleware.ts

@@ -2,5 +2,12 @@ import useGetWeeklyProgress from './useGetWeeklyProgress';
 import useGetNoticeUnreadCount from './useGetNoticeUnreadCount';
 import useGetNotice from './useGetNotice';
 import putRead from './putRead';
+import useGetWeeklyPublish from './useGetWeeklyPublish';
 
-export { useGetWeeklyProgress, useGetNoticeUnreadCount, useGetNotice, putRead };
+export {
+  useGetWeeklyPublish,
+  useGetWeeklyProgress,
+  useGetNoticeUnreadCount,
+  useGetNotice,
+  putRead,
+};

apps/service/src/apis/controller/home/index.ts

@@ -0,0 +1,7 @@
+import { TanstackQueryClient } from '@apis';
+
+const useGetWeeklyPublish = () => {
+  return TanstackQueryClient.useQuery('get', '/api/student/study/publish/weekly');
+};
+
+export default useGetWeeklyPublish;

apps/service/src/apis/controller/home/useGetWeeklyPublish.ts

@@ -2,11 +2,14 @@
 import { useRouter } from 'next/navigation';
 
 import { Button } from '@components';
-import { IcCalendar } from '@svg';
+import { IcCalendar, IcQuestionWhite } from '@svg';
 import { trackEvent } from '@utils';
 import { HomeHeader, NoticeButton, ProblemSwiper, WeekProgress } from '@/components/home';
+import { useGetWeeklyPublish } from '@/apis/controller/home';
 const Page = () => {
   const router = useRouter();
+  const { data, isLoading } = useGetWeeklyPublish();
+  const problemSets = data?.data ?? [];
 
   const handleClickAllProblem = () => {
     trackEvent('home_all_problem_button_click');
@@ -31,21 +34,22 @@ const Page = () => {
         </div>
       </main>
       <div className='mt-[2.4rem]'>
-        {/* {isLoading ? (
+        {isLoading ? (
           <div className='h-[456px] w-full' />
         ) : problemSets ? (
           <ProblemSwiper problemSets={problemSets} />
         ) : (
           <></>
-        )} */}
+        )}
       </div>
-      <footer className='bg-background mt-[2.4rem] flex flex-col gap-[1rem] px-[2rem] pb-[3.3rem]'>
+
+      <footer className='bg-background flex flex-col gap-[1rem] px-[2rem] pb-[3.3rem]'>
         <Button variant='light' onClick={handleClickAllProblem}>
           <IcCalendar width={24} height={24} />
           날짜별로 보기
         </Button>
         <Button variant='blue' onClick={handleClickQnA}>
-          <IcCalendar width={24} height={24} />
+          <IcQuestionWhite width={24} height={24} />
           QnA 바로가기
         </Button>
       </footer>

apps/service/src/app/(home)/page.tsx

@@ -6,7 +6,7 @@ import { useEffect, useState } from 'react';
 
 import { Button, Header } from '@components';
 import { postUserInfo } from '@/apis/controller/auth';
-import { setName } from '@utils';
+import { setName, setGrade } from '@utils';
 import UserInfoForm from '@/components/onboarding/UserInfoForm';
 
 const Page = () => {
@@ -26,6 +26,7 @@ const Page = () => {
     if (result.isSuccess) {
       if (result.data) {
         setName(result.data.name);
+        setGrade(result.data.grade);
       }
       router.push('/');
     } else {

apps/service/src/app/onboarding/page.tsx

@@ -0,0 +1,20 @@
+import type { SVGProps } from 'react';
+import { memo } from 'react';
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const SvgIcQuestionWhite = ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => (
+  <svg fill='none' xmlns='http://www.w3.org/2000/svg' aria-labelledby={titleId} {...props}>
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path
+      d='M12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1Z'
+      stroke='white'
+      strokeWidth={2}
+      strokeLinecap='round'
+      strokeLinejoin='round'
+    />
+  </svg>
+);
+const Memo = memo(SvgIcQuestionWhite);
+export default Memo;

apps/service/src/assets/svg/IcQuestionWhite.tsx

@@ -22,6 +22,7 @@ export { default as IcPrescription20 } from './IcPrescription20';
 export { default as IcPrevBlack } from './IcPrevBlack';
 export { default as IcPrev } from './IcPrev';
 export { default as IcQuestion18 } from './IcQuestion18';
+export { default as IcQuestionWhite } from './IcQuestionWhite';
 export { default as IcRight } from './IcRight';
 export { default as IcSearch } from './IcSearch';
 export { default as IcSecret } from './IcSecret';

apps/service/src/assets/svg/index.ts

@@ -1,22 +1,23 @@
 import Link from 'next/link';
 import { IcSetting } from '@svg';
 import { LogoHeader } from '@/assets/svg/logo';
+import { getName, getGrade } from '@/utils/common/auth';
 
 const HomeHeader = () => {
+  const name = getName();
+  const grade = getGrade();
   return (
     <header className='bg-background fixed inset-0 z-40 mx-auto flex h-[6rem] max-w-[768px] items-center justify-between px-[2rem]'>
       <Link href='/'>
         <LogoHeader width={106} height={24} title='로고' titleId='logo-icon' />
       </Link>
       <div className='flex items-center gap-[0.8rem]'>
-        {/* TODO: 학년 받아오기 */}
         <div className='font-medium-12 text-main bg-sub2 flex h-[2.2rem] items-center justify-center rounded-[0.4rem] px-[0.8rem]'>
-          2학년
+          {grade}학년
         </div>
         <div className='font-medium-14 text-black'>
-          {/* TODO: 이름 받아오기 */}
           <>
-            <span className='text-main mr-[0.4rem]'>홍길동</span>님
+            <span className='text-main mr-[0.4rem]'>{name}</span>님
           </>
         </div>
         <Link href='/my-page'>