Merge pull request #150 from Myongji-Graduate/tool-setting/#148

Myongji-Graduate · Oct 3, 2024 · ac8b910 · ac8b910
2 parents da8a2cd + 7748eaf
commit ac8b910
Show file tree

Hide file tree

Showing 16 changed files with 188 additions and 80 deletions.
diff --git a/.gitignore b/.gitignore
@@ -25,8 +25,9 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-# local env files
+# env files
 .env*.local
+.env*.production
 
 # vercel
 .vercel

diff --git a/app/(sub-page)/components/navigation-bar.tsx b/app/(sub-page)/components/navigation-bar.tsx
@@ -6,6 +6,7 @@ import UserInfoNavigator from '@/app/ui/user/user-info-navigator/user-info-navig
 import SignButtonGroup from '@/app/ui/user/user-info-navigator/sign-button-group';
 import Link from 'next/link';
 import NavigationItems from './navigation-items';
+import UserDeleteModal from '@/app/ui/user/user-info-navigator/user-delete-modal';
 
 export default function NavigationBar() {
   return (
@@ -19,6 +20,7 @@ export default function NavigationBar() {
       <Responsive minWidth={1024}>
         <NavigationItems />
       </Responsive>
+      <UserDeleteModal />
     </div>
   );
 }
diff --git a/app/(sub-page)/find-id/page.tsx b/app/(sub-page)/find-id/page.tsx
@@ -3,6 +3,12 @@ import TitleBox from '@/app/ui/view/molecule/title-box/title-box';
 import FindIdContainer from './components/find-id-container';
 import { Suspense } from 'react';
 import FindIdFormSkeleton from '@/app/ui/user/find-id-form/find-id-form.skeleton';
+import type { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: '아이디 찾기',
+  description: '학번을 통해 졸업을 부탁해의 아이디를 찾을 수 있어요.',
+};
 
 export default function FindIdPage() {
   return (

diff --git a/app/(sub-page)/find-password/page.tsx b/app/(sub-page)/find-password/page.tsx
@@ -3,6 +3,12 @@ import TitleBox from '@/app/ui/view/molecule/title-box/title-box';
 import FindPasswordContainer from './components/find-password-container';
 import { Suspense } from 'react';
 import FindIdFormSkeleton from '../../ui/user/find-id-form/find-id-form.skeleton';
+import type { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: '비밀번호 재설정',
+  description: '회원정보를 통해 졸업을 부탁해의 비밀번호를 재설정해요.',
+};
 
 function FindPasswordPage() {
   return (

diff --git a/app/(sub-page)/my/page.tsx b/app/(sub-page)/my/page.tsx
@@ -10,6 +10,7 @@ import SignButtonGroup from '@/app/ui/user/user-info-navigator/sign-button-group
 import ContentContainer from '@/app/ui/view/atom/content-container/content-container';
 import TakenLectureSkeleton from '@/app/ui/lecture/taken-lecture/taken-lecture.skeleton';
 import type { Metadata } from 'next';
+import UserDeleteModal from '@/app/ui/user/user-info-navigator/user-delete-modal';
 
 export const metadata: Metadata = {
   title: '마이페이지',
@@ -50,6 +51,7 @@ export default function MyPage() {
       <Drawer drawerKey={DIALOG_KEY.LECTURE_SEARCH}>
         <LectureSearch />
       </Drawer>
+      <UserDeleteModal />
     </>
   );
 }
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,10 +1,11 @@
 import type { Metadata } from 'next';
-import './globals.css';
 import { Toaster } from './ui/view/molecule/toast/toaster';
-import { CypressProvider } from './utils/provider/cypress-provider';
-import { ReactQueryProvider } from './utils/provider/react-query-provider';
+import { CypressProvider } from './utils/global/cypress-provider';
+import { ReactQueryProvider } from './utils/global/react-query-provider';
+import ChannelTalk from './utils/global/channel-talk';
 import MSWComponent from './mocks/msw-component.mock';
-import UserDeleteModal from './ui/user/user-info-navigator/user-delete-modal';
+import { GoogleAnalytics } from '@next/third-parties/google';
+import './globals.css';
 
 export const metadata: Metadata = {
   metadataBase: new URL('https://mju-graduate.com'),
@@ -43,6 +44,7 @@ export default function RootLayout({
         <link href="https://webfontworld.github.io/vitro/VitroCore.css" rel="stylesheet" />
       </head>
       <body>
+        <ChannelTalk />
         <div className="bg-white">
           <ReactQueryProvider>
             <CypressProvider>
@@ -51,8 +53,8 @@ export default function RootLayout({
           </ReactQueryProvider>
         </div>
         <Toaster />
-        <UserDeleteModal />
       </body>
+      <GoogleAnalytics gaId={process.env.NEXT_PUBLIC_GA_ID ?? ''} />
     </html>
   );
 }
diff --git a/app/ui/lecture/lecture-search/lecture-search.stories.tsx b/app/ui/lecture/lecture-search/lecture-search.stories.tsx
@@ -9,7 +9,7 @@ import LectureSearch from '.';
 import { DIALOG_KEY } from '@/app/utils/key/dialog-key.util';
 import Drawer from '../../view/molecule/drawer/drawer';
 import { delay } from 'msw';
-import { ReactQueryProvider } from '@/app/utils/provider/react-query-provider';
+import { ReactQueryProvider } from '@/app/utils/global/react-query-provider';
 
 const meta = {
   title: 'ui/lecture/lecture-search',

diff --git a/app/ui/result/result-category-detail-content/result-category-detail-content.tsx b/app/ui/result/result-category-detail-content/result-category-detail-content.tsx
@@ -5,7 +5,7 @@ import { useState } from 'react';
 import { ResultCategoryDetailLectureToggle } from '../result-category-detail-lecture/result-category-detail-lecture-toggle';
 import ResultCagegoryDetailLecture from '../result-category-detail-lecture/result-cagegory-detail-lecture';
 import { ResultCategoryDetailResponse } from '@/app/store/querys/result';
-import { RESULT_CATEGORY, RESULT_CATEGORY_KO, ResultCategoryKey } from '@/app/utils/key/result-category.key';
+import { RESULT_CATEGORY_KO, ResultCategoryKey } from '@/app/utils/key/result-category.key';
 
 interface ResultCategoryDetailContentProps extends ResultCategoryDetailResponse {
   category: ResultCategoryKey;
@@ -19,8 +19,6 @@ function ResultCategoryDetailContent({
 }: ResultCategoryDetailContentProps) {
   const [isTakenLecture, setIsTakenLectrue] = useState(false);
 
-  const includeChaple = (category: ResultCategoryKey) => category === RESULT_CATEGORY.COMMON_CULTURE;
-
   return (
     <div className="md:w-[80vw] max-w-[1200px] p-2 overflow-scroll">
       <div className={cn('flex justify-between mb-6', 'md:mb-10')}>
@@ -39,15 +37,11 @@ function ResultCategoryDetailContent({
             </div>
             <span>과목이 표시됩니다.</span>
           </div>
-          <div className={includeChaple(category) ? 'font-light text-gray-5 text-xs my-2 md:text-sm' : 'hidden'}>
-            * 채플이 포함된 학점으로, 채플과목의 이수율은 채플 카테고리에서 확인 가능합니다.
-          </div>
         </div>
         <div className={cn('min-w-fit text-2xl font-bold', 'md:text-4xl')}>
           <span className="text-point-blue">{takenCredit}</span> / {totalCredit}
         </div>
       </div>
-
       {detailCategory.map((categoryInfo, index) => (
         <ResultCagegoryDetailLecture isTakenLecture={isTakenLecture} detailCategory={categoryInfo} key={index} />
       ))}

diff --git a/app/ui/result/result-category-detail-lecture/result-cagegory-detail-lecture.tsx b/app/ui/result/result-category-detail-lecture/result-cagegory-detail-lecture.tsx
@@ -29,7 +29,6 @@ function ResultCagegoryDetailLecture({ detailCategory, isTakenLecture }: ResultC
   const { categoryName, totalCredit, takenCredit, takenLectures, haveToLectures, completed } = detailCategory;
 
   const showCompleted = !isTakenLecture && completed;
-
   return (
     <div className={cn('my-4 flex flex-col gap-4 min-h-48', 'md:min-h-60')}>
       <LabelContainer

diff --git a/app/ui/result/result-category-detail/result-category-detail-info.tsx b/app/ui/result/result-category-detail/result-category-detail-info.tsx
@@ -0,0 +1,62 @@
+import ResultCategoryDetailContent from '@/app/ui/result/result-category-detail-content/result-category-detail-content';
+import {
+  CreditResponse,
+  LectureInfoResponse,
+  ResultCategoryDetailLecturesResponse,
+  useFetchCredits,
+  useFetchResultCategoryDetailInfo,
+} from '@/app/store/querys/result';
+import { ResultCategoryKey } from '../result-category-detail-content/result-category-detail-content.stories';
+import { RESULT_CATEGORY } from '@/app/utils/key/result-category.key';
+
+const CHAPEL_TOTAL_CREDIT = 2.0;
+const CHAPEL_TOTAL_COUNT = 4;
+const CHAPEL_CREDIT = CHAPEL_TOTAL_CREDIT / CHAPEL_TOTAL_COUNT;
+
+const CHAPEL_LECTURE_INFO: LectureInfoResponse = {
+  id: 0,
+  lectureCode: 'KMA02101',
+  name: '채플',
+  credit: CHAPEL_CREDIT,
+};
+
+function addChapelToCommonCulture(
+  info: ResultCategoryDetailLecturesResponse[],
+  chapel?: CreditResponse,
+): ResultCategoryDetailLecturesResponse[] {
+  if (!chapel) return info;
+  const takenChapelCount = chapel.takenCredit / CHAPEL_CREDIT;
+  const haveToChapelCount = Math.max(0, CHAPEL_TOTAL_COUNT - takenChapelCount);
+
+  return [
+    ...info,
+    {
+      categoryName: '채플',
+      completed: takenChapelCount >= CHAPEL_TOTAL_COUNT,
+      totalCredit: CHAPEL_TOTAL_CREDIT,
+      takenCredit: chapel.takenCredit,
+      haveToLectures: Array(haveToChapelCount).fill(CHAPEL_LECTURE_INFO),
+      takenLectures: Array(takenChapelCount).fill(CHAPEL_LECTURE_INFO),
+    },
+  ];
+}
+
+export default function ResultCategoryDetailInfo({ category }: { category: ResultCategoryKey }) {
+  const { data: categoryInfo } = useFetchResultCategoryDetailInfo(category);
+  const { data: categories } = useFetchCredits();
+
+  const chapel = categories.find(({ category }) => category === 'CHAPEL');
+  const isCommonCulture = category === RESULT_CATEGORY.COMMON_CULTURE;
+  const detailCategory = isCommonCulture
+    ? addChapelToCommonCulture(categoryInfo.detailCategory, chapel)
+    : categoryInfo.detailCategory;
+
+  return (
+    <ResultCategoryDetailContent
+      takenCredit={categoryInfo.takenCredit}
+      totalCredit={categoryInfo.totalCredit}
+      detailCategory={detailCategory}
+      category={category}
+    />
+  );
+}
diff --git a/app/ui/result/result-category-detail/result-category-detail.tsx b/app/ui/result/result-category-detail/result-category-detail.tsx
@@ -1,10 +1,10 @@
 'use client';
-import ResultCategoryDetailContent from '@/app/ui/result/result-category-detail-content/result-category-detail-content';
-import { useFetchResultCategoryDetailInfo } from '@/app/store/querys/result';
+
 import ResultCategoryDetailContentSkeleton from '@/app/ui/result/result-category-detail-content/result-category-detail-content.skeleton';
 import ResultCategoryDetailDialog from './result-category-detail-dialog';
 import { Suspense } from 'react';
 import { ResultCategoryKey } from '@/app/utils/key/result-category.key';
+import ResultCategoryDetailInfo from './result-category-detail-info';
 
 export default function ResultCategoryDetail({ category }: { category: ResultCategoryKey }) {
   if (!category) return;
@@ -17,15 +17,3 @@ export default function ResultCategoryDetail({ category }: { category: ResultCat
     </ResultCategoryDetailDialog>
   );
 }
-
-function ResultCategoryDetailInfo({ category }: { category: ResultCategoryKey }) {
-  const { data } = useFetchResultCategoryDetailInfo(category);
-  return (
-    <ResultCategoryDetailContent
-      takenCredit={data.takenCredit}
-      totalCredit={data.totalCredit}
-      detailCategory={data.detailCategory}
-      category={category}
-    />
-  );
-}
diff --git a/app/utils/global/channel-talk.tsx b/app/utils/global/channel-talk.tsx
@@ -0,0 +1,16 @@
+'use client';
+import * as ChannelService from '@channel.io/channel-web-sdk-loader';
+
+let channelTalkDidInit = false;
+
+export default function ChannelTalk() {
+  if (typeof window !== 'undefined' && !channelTalkDidInit) {
+    channelTalkDidInit = true;
+    ChannelService.loadScript();
+    ChannelService.boot({
+      pluginKey: process.env.NEXT_PUBLIC_CHANNELTALK_PLUGIN ?? '',
+    });
+  }
+
+  return null;
+}
diff --git a/app/utils/provider/cypress-provider.tsx → app/utils/global/cypress-provider.tsx b/app/utils/provider/cypress-provider.tsx → app/utils/global/cypress-provider.tsx
diff --git a/app/utils/provider/react-query-provider.tsx → app/utils/global/react-query-provider.tsx b/app/utils/provider/react-query-provider.tsx → app/utils/global/react-query-provider.tsx