Merge branch 'main' into result-fetch/#92

README.md

@@ -50,10 +50,6 @@
 - 성적표 기반의 맞춤형 졸업 요건 검사 결과를 제공합니다.
 
 
-### 🎃 조회수 & 사용자 통계
-
-<img width="80%" height="80%" src="https://github.com/Myongji-Graduate/MyongjiGraduate-BE/assets/64758861/86857528-df46-4055-b7f8-bf5cdf0865a4">
-
 ### 🎃 사용자 후기
 
 <img width="30%" height="30%" src="https://github.com/user-attachments/assets/1eeff796-8923-4509-80c3-364ee1c9c4e5">

app/(sub-page)/anonymous/components/anonymous-container.tsx

@@ -0,0 +1,40 @@
+'use client';
+import useFunnel from '@/app/hooks/useFunnel';
+import SignUpTerm from '../../sign-up/components/sign-up-terms';
+import { AnonymousResultType } from '@/app/utils/parser/anonymous';
+import AnonymousUpload from './anonymous-upload';
+import { FormState } from '@/app/ui/view/molecule/form/form-root';
+import { useRouter } from 'next/navigation';
+import { useAnonymousContext } from '../result/provider';
+
+function isAnonymousResultType(formdata: any): formdata is AnonymousResultType {
+  return formdata && 'graduationResult' in formdata && 'user' in formdata;
+}
+
+export default function AnonymousContainer() {
+  const router = useRouter();
+  const { setResult } = useAnonymousContext();
+  const { Funnel, setStep } = useFunnel<'terms' | 'form'>('terms');
+
+  return (
+    <Funnel>
+      <Funnel.Step name="terms">
+        <SignUpTerm
+          onNext={() => {
+            setStep('form');
+          }}
+        />
+      </Funnel.Step>
+      <Funnel.Step name="form">
+        <AnonymousUpload
+          onNext={(formState?: FormState) => {
+            if (isAnonymousResultType(formState?.value)) {
+              setResult(formState.value);
+              router.push('/anonymous/result');
+            }
+          }}
+        />
+      </Funnel.Step>
+    </Funnel>
+  );
+}

app/(sub-page)/anonymous/components/anonymous-upload.tsx

@@ -0,0 +1,10 @@
+import UploadTakenLectureAnonymous from '@/app/ui/lecture/upload-taken-lecture/upload-taken-lectrue-anonymous';
+import { FormState } from '@/app/ui/view/molecule/form/form-root';
+
+interface AnonymousUploadProp {
+  onNext?: (formState?: FormState) => void;
+}
+
+export default function AnonymousUpload({ onNext }: AnonymousUploadProp) {
+  return <UploadTakenLectureAnonymous onSuccess={onNext} />;
+}

app/(sub-page)/anonymous/layout.tsx

@@ -0,0 +1,10 @@
+import ContentContainer from '@/app/ui/view/atom/content-container/content-container';
+import { AnonymousProvider } from './result/provider';
+
+interface AnonymousLayoutProp {
+  children: React.ReactNode;
+}
+
+export default function AnonymousLayout({ children }: AnonymousLayoutProp) {
+  return <AnonymousProvider>{children}</AnonymousProvider>;
+}

app/(sub-page)/anonymous/page.tsx

@@ -0,0 +1,19 @@
+import { Metadata } from 'next';
+import AnonymousContainer from './components/anonymous-container';
+import { Suspense } from 'react';
+import ContentContainer from '@/app/ui/view/atom/content-container/content-container';
+
+export const metadata: Metadata = {
+  title: '비회원으로 검사하기',
+  description: '로그인없이 졸업요건을 간편하게 검사해 보세요.',
+};
+
+export default function AnonymousPage() {
+  return (
+    <Suspense>
+      <ContentContainer className="md:w-[768px] xl:w-[960px] p-4 py-6 md:p-8">
+        <AnonymousContainer />
+      </ContentContainer>
+    </Suspense>
+  );
+}

app/(sub-page)/anonymous/result/component/anonymous-result.tsx

@@ -0,0 +1,42 @@
+'use client';
+import { ResultCategoryViewer } from '@/app/ui/result/result-category/result-category';
+import UserInfoContentViewer from '@/app/ui/user/user-info-card/user-info-content/user-info-content-viewer';
+import { AnonymousResultType, parseCredit, parseCreditDetailInfo, parseUserInfo } from '@/app/utils/parser/anonymous';
+import { useAnonymousContext } from '../provider';
+import { useRouter } from 'next/navigation';
+import ResultCategoryDetailDialog from '@/app/ui/result/result-category-detail/result-category-detail-dialog';
+import { ResultCategoryDetailInfoViewer } from '@/app/ui/result/result-category-detail/result-category-detail-info';
+import { ResultCategoryKey } from '@/app/utils/key/result-category.key';
+
+interface AnonymousResultProp {
+  category: ResultCategoryKey;
+}
+
+const AnonymousResult = ({ category }: AnonymousResultProp) => {
+  const { result } = useAnonymousContext();
+  const router = useRouter();
+  if (!result) {
+    router.back();
+    return <></>;
+  }
+
+  return (
+    <div className="flex flex-col items-center">
+      <div className="w-full">
+        <UserInfoContentViewer data={parseUserInfo(result)} categories={parseCredit(result)} />
+      </div>
+      <ResultCategoryViewer categories={parseCredit(result)} className="top-[20rem] md:top-[27rem]" />
+      {category ? (
+        <ResultCategoryDetailDialog querystring={category}>
+          <ResultCategoryDetailInfoViewer
+            category={category}
+            categories={parseCredit(result)}
+            categoryInfo={parseCreditDetailInfo(result, category)}
+          />
+        </ResultCategoryDetailDialog>
+      ) : null}
+    </div>
+  );
+};
+
+export default AnonymousResult;

app/(sub-page)/anonymous/result/page.tsx

@@ -0,0 +1,37 @@
+import { Metadata } from 'next/types';
+import AnonymousResult from './component/anonymous-result';
+import { ResultCategoryKey } from '@/app/utils/key/result-category.key';
+import ContentContainer from '@/app/ui/view/atom/content-container/content-container';
+
+export const metadata: Metadata = {
+  title: '졸업 요건 검사 결과',
+  description: '회원가입없이 졸업사정 결과와, 카테고리별 미이수 / 이수 과목정보 및 잔여학점을 확인해요',
+  openGraph: {
+    siteName: '졸업을 부탁해',
+    url: 'https://mju-graduate.com/result',
+    images: [
+      {
+        url: 'https://github.com/user-attachments/assets/2093a57f-af35-4280-8acb-d403341fc8ff',
+        width: 1200,
+        height: 630,
+        alt: 'result-page iamge',
+      },
+    ],
+  },
+};
+
+interface AnonymousResultPageProp {
+  searchParams: { category: ResultCategoryKey };
+}
+
+function AnonymousResultPage({ searchParams }: AnonymousResultPageProp) {
+  const { category } = searchParams;
+
+  return (
+    <ContentContainer className="max-md:max-w-[500px] md:w-[700px] p-4 py-6 md:p-8">
+      <AnonymousResult category={category} />
+    </ContentContainer>
+  );
+}
+
+export default AnonymousResultPage;

app/(sub-page)/anonymous/result/provider.tsx

@@ -0,0 +1,24 @@
+'use client';
+import { createContext, useState, ReactNode, useContext } from 'react';
+import { AnonymousResultType } from '@/app/utils/parser/anonymous';
+
+interface AnonymousContextType {
+  result?: AnonymousResultType;
+  setResult: (data: AnonymousResultType) => void;
+}
+
+export const AnonymousContext = createContext<AnonymousContextType | null>(null);
+
+export const AnonymousProvider = ({ children }: { children: ReactNode }) => {
+  const [result, setResult] = useState<AnonymousResultType>();
+
+  return <AnonymousContext.Provider value={{ result, setResult }}>{children}</AnonymousContext.Provider>;
+};
+
+export function useAnonymousContext() {
+  const context = useContext(AnonymousContext);
+  if (!context) {
+    throw new Error('useAnonymousContext must be used within an AnonymousProvider');
+  }
+  return context;
+}

app/(sub-page)/components/navigation-items.tsx

@@ -14,7 +14,10 @@ export default async function NavigationItems() {
           <NavigationItem href={'/result'} label="결과확인" />
         </>
       ) : (
-        <NavigationItem href={'/sign-in'} label="로그인" />
+        <>
+          <NavigationItem href={'/sign-in'} label="로그인" />
+          <NavigationItem href={'/anonymous'} label="비회원 검사" />
+        </>
       )}
       <NavigationItem href={'/tutorial'} label="튜토리얼" />
       <NavigationItem

app/(sub-page)/grade-upload/components/manual.tsx

@@ -22,9 +22,6 @@ export default function Manual() {
           <div>3. 우측 상단 조회버튼 → 프린트 아이콘 </div>
           <div>4. 인쇄 정보의 대상(PDF로 저장) 설정 → 하단 저장 버튼 </div>
           <div>5. 저장한 파일 업로드 </div>
-          <div className="text-xs md:text-sm text-primary">
-            • 회원 가입한 학번과 일치하는 학번의 성적표를 입력해야 합니다.
-          </div>
         </div>
       </div>
     </div>

app/(sub-page)/grade-upload/page.tsx

@@ -12,7 +12,7 @@ export const metadata: Metadata = {
 
 export default function GradeUploadPage() {
   return (
-    <ContentContainer className="flex flex-col justify-center gap-8 min-h-[70vh] max-md:max-w-[600px]">
+    <ContentContainer className="flex flex-col justify-center gap-6 min-h-[70vh] max-md:max-w-[600px]">
       <Manual />
       <UploadTakenLecture />
     </ContentContainer>

app/business/services/lecture/taken-lecture.command.ts

@@ -4,6 +4,8 @@ import { API_PATH } from '../../api-path';
 import { BadRequestError, HttpError } from '@/app/utils/http/http-error';
 import { instance } from '@/app/utils/api/instance';
 import { ERROR_CODE } from '@/app/utils/api/constant';
+import { revalidateTag } from 'next/cache';
+import { TAG } from '@/app/utils/http/tag';
 
 export const registerUserGrade = async (prevState: FormState, formData: FormData) => {
   try {
@@ -33,6 +35,47 @@ export const registerUserGrade = async (prevState: FormState, formData: FormData
   }
 };
 
+export const registerAnonymousGrade = async (prevState: FormState, formData: FormData) => {
+  const engLv = formData.get('engLv');
+  const file = formData.get('file');
+  if (!(file instanceof File)) {
+    return {
+      isSuccess: false,
+      isFailure: true,
+      validationError: {},
+      message: '등록할 수 없는 파일입니다.',
+    };
+  }
+
+  const gradePDF = new FormData();
+  gradePDF.append('file', file);
+
+  const parsingText = await parsePDFtoText(gradePDF);
+  const res = await fetch(`${API_PATH.graduations}/check`, {
+    method: 'POST',
+    body: JSON.stringify({ engLv, parsingText }),
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+
+  if (!res.ok) {
+    return {
+      isSuccess: false,
+      isFailure: true,
+      validationError: {},
+      message: 'fail upload grade',
+    };
+  }
+  return {
+    isSuccess: true,
+    isFailure: false,
+    validationError: {},
+    message: 'success upload grade',
+    value: await res.json(),
+  };
+};
+
 export const parsePDFtoText = async (formData: FormData) => {
   return (await fetch(API_PATH.parsePDFtoText, { method: 'POST', body: formData })).text();
 };
@@ -42,7 +85,6 @@ export const deleteTakenLecture = async (lectureId: number) => {
     await instance.delete(`${API_PATH.takenLectures}/${lectureId}`, {
       responseType: 'text',
     });
-
     return {
       isSuccess: true,
     };
@@ -66,6 +108,7 @@ export const addTakenLecture = async (lectureId: string) => {
         responseType: 'text',
       },
     );
+    revalidateTag(TAG.GET_TAKEN_LECTURES);
     return {
       isSuccess: true,
       isFailure: false,

app/business/services/lecture/taken-lecture.query.ts

@@ -1,5 +1,6 @@
 import { instance } from '@/app/utils/api/instance';
 import { API_PATH } from '../../api-path';
+import { TAG } from '@/app/utils/http/tag';
 
 export interface TakenLecturesResponse {
   totalCredit: number;
@@ -17,6 +18,10 @@ export interface TakenLectureInfoResponse {
 }
 
 export const fetchTakenLectures = async () => {
-  const response = await instance.get<TakenLecturesResponse>(API_PATH.takenLectures);
+  const response = await instance.get<TakenLecturesResponse>(API_PATH.takenLectures, {
+    next: {
+      tags: [TAG.GET_TAKEN_LECTURES],
+    },
+  });
   return response.data;
 };

app/page.tsx

@@ -42,9 +42,11 @@ export default function HomePage() {
           </div>
           <div className="text-md sm:text-lg text-gray-400 font-medium">명지인을 위한 간편 졸업요건 검사 사이트</div>
         </p>
-        <Link href="/result">
-          <Button label="검사 시작" variant="dark" size="xl" />
-        </Link>
+        <div className="flex flex-col gap-2 md:gap-4">
+          <Link href="/result">
+            <Button label="검사 시작" variant="dark" size="xl" />
+          </Link>
+        </div>
       </div>
     </div>
   );

app/ui/lecture/upload-taken-lecture/upload-taken-lectrue-anonymous.tsx

@@ -0,0 +1,41 @@
+'use client';
+import Manual from '@/app/(sub-page)/grade-upload/components/manual';
+import { registerAnonymousGrade } from '@/app/business/services/lecture/taken-lecture.command';
+import Form from '@/app/ui/view/molecule/form';
+import UploadPdf from '@/app/ui/view/molecule/upload-pdf/upload-pdf';
+
+interface UploadTakenLectureAnonymousProp {
+  onSuccess?: (data: any) => void;
+}
+
+function UploadTakenLectureAnonymous({ onSuccess }: UploadTakenLectureAnonymousProp) {
+  const handleSuccess = (data: any) => {
+    onSuccess?.(data);
+  };
+
+  return (
+    <Form action={registerAnonymousGrade} id="성적업로드" onSuccess={handleSuccess}>
+      <Manual />
+      <div className="mt-8 md:w-96 w-80 m-auto flex flex-col gap-4">
+        <Form.Select
+          required={true}
+          label="영어성적"
+          id="engLv"
+          placeholder="선택하세요"
+          options={[
+            { value: 'BASIC', placeholder: '기초영어' },
+            { value: 'ENG12', placeholder: 'Level12' },
+            { value: 'ENG34', placeholder: 'Level34' },
+            { value: 'FREE', placeholder: '면제' },
+          ]}
+        />
+        <UploadPdf />
+      </div>
+      <div className="py-6">
+        <Form.SubmitButton label="결과 보러가기" position="center" size="md" />
+      </div>
+    </Form>
+  );
+}
+
+export default UploadTakenLectureAnonymous;