MARU-EGG · qwer0114 · Feb 15, 2025 · Feb 14, 2025 · Feb 14, 2025 · Feb 14, 2025
diff --git a/index.html b/index.html
@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>마루에그</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/src/api/api.ts b/src/api/api.ts
@@ -1,12 +1,23 @@
 import { server_axiosInstance } from '@/api';
 import { AdmissionType, ResponseDetailAdmissionType } from '@/types/admission-type';
+import { ResponseCollegeType, ResponseDepartmentType } from '@/types/department';
 import { DefaultPostQuestionParams, PostQuestionResponse } from '@/types/questions';
 
 export const getAdmissionDetail = async (type: AdmissionType): Promise<ResponseDetailAdmissionType[]> => {
   const response = await server_axiosInstance.get(`/api/admissions/details/${type}`);
   return response.data;
 };
 
+export const getCollege = async (college: '인문캠퍼스' | '자연캠퍼스'): Promise<ResponseCollegeType[]> => {
+  const response = await server_axiosInstance.get(`api/campuses/colleges/campus/${college}`);
+  return response.data;
+};
+
+export const getDepartment = async (collegeId: number): Promise<ResponseDepartmentType[]> => {
+  const response = await server_axiosInstance.get(`api/campuses/departments/college/${collegeId}`);
+  return response.data;
+};
+
 export const postQuestion = async ({
   category,
   type,

diff --git a/src/components/bottom-sheet/bottom-sheet.tsx b/src/components/bottom-sheet/bottom-sheet.tsx
@@ -19,7 +19,7 @@ function BottomSheet({ open, onClose, children }: BottomSheetProps) {
     >
       <div
         onClick={(e) => e.stopPropagation()}
-        className={`absolute bottom-0 z-40 h-80 w-full overflow-y-auto rounded-t-2xl bg-white px-4 py-6 transition-transform duration-300 ${animationTrigger ? 'translate-y-0' : 'translate-y-full'}`}
+        className={`scrollbar absolute bottom-0 z-40 h-80 w-full overflow-y-auto rounded-t-2xl bg-white px-4 py-6 transition-transform duration-300 ${animationTrigger ? 'translate-y-0' : 'translate-y-full'}`}
       >
         {children}
       </div>

diff --git a/src/components/menu-items/check-box/check-box.tsx b/src/components/menu-items/check-box/check-box.tsx
@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import { CheckFalseIcon, CheckTrueIcon } from '@/assets/svg';
+import { cn } from '@/utils/style';
 
 interface CheckboxProps {
   label: string;
@@ -19,7 +20,7 @@ function Checkbox({ label, onClick, disabled = false }: CheckboxProps) {
 
   return (
     <label htmlFor={label} onClick={handleClick}>
-      <div className="relative px-4 py-3 hover:bg-gray-50">
+      <div className={cn('relative px-4 py-3', 'hover:rounded-md hover:bg-gray-50', 'cursor-pointer')}>
         <input id={label} type="checkbox" className="sr-only" disabled={disabled}></input>
         <div className="flex items-center gap-2">
           {checked ? <CheckTrueIcon /> : <CheckFalseIcon />}

diff --git a/src/constants/message.ts b/src/constants/message.ts
@@ -6,9 +6,14 @@ const systemMessage = {
   additionalInfo:
     '아래 버튼을 눌러 더 자세한 정보를 확인\n하거나 직접 질문해보세요!\n\n더욱 자세한 상담을 원하시면\n 명지대학교 입학처 02-300-1799,1800으로 전화주시길 바랍니다.',
   referenceGuide: '💡답변 출처를 알려드릴게요!\n출처를 클릭하면 모집요강으로\n확인할 수 있어요!',
+  noReferenceGuide: '해당 답변에 대한 출처가 존재하지 않아요!',
   errorMessage: '서버가 답변을 불러오는데 실패했어요.',
   campusGuide:
     '학과별로 보고싶으신가요?\n명지대학교는 총 2개의 캠퍼스,12개의\n단과대와 63개의 학과(부)로 구성되어\n있습니다.\n아래 질문들을 통해서 궁금하신 학과(부)를\n찾아주세요!',
+  seoulCampusIntro:
+    '명지대학교 인문캠퍼스는 문과 계열\n전체와 일부 ICT 융합대학과가 존재하는\n문과 중심의 캠퍼스입니다.\n\n단과대를 선택해주세요',
+  yonginCampusIntro:
+    '명지대학교 자연캠퍼스는 이과 계열\n전체와 예술체육대학을 중심으로 존재하는\n공과대 중심의 캠퍼스입니다.\n\n단과대를 선택해주세요',
 } as const;
 
 export default systemMessage;
diff --git a/src/hooks/querys/useCollege.ts b/src/hooks/querys/useCollege.ts
@@ -0,0 +1,11 @@
+import { getCollege } from '@/api/api';
+import { useSuspenseQuery } from '@tanstack/react-query';
+
+export default function useCollege(campus: '인문캠퍼스' | '자연캠퍼스') {
+  const { data } = useSuspenseQuery({
+    queryKey: [campus],
+    queryFn: () => getCollege(campus),
+  });
+
+  return data;
+}
diff --git a/src/hooks/querys/useDepartment.ts b/src/hooks/querys/useDepartment.ts
@@ -0,0 +1,11 @@
+import { getDepartment } from '@/api/api';
+import { useSuspenseQuery } from '@tanstack/react-query';
+
+export default function useDepartment(collegeId: number) {
+  const { data } = useSuspenseQuery({
+    queryKey: [collegeId, 'COLLEGE_ID'],
+    queryFn: () => getDepartment(collegeId),
+  });
+
+  return data;
+}
diff --git a/src/hooks/use-question-form-hook.ts b/src/hooks/use-question-form-hook.ts
@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import useAdmissionStore from '@/stores/store/admission-store';
 import useMessagesStore from '@/stores/store/message-store';
-import { ChatSteps } from '@/types/chat';
+import { ChatSteps } from '@/types/steps';
 import { apiEventGATrigger } from '@/utils/ga-trigger';
 import { useIsMutating } from '@tanstack/react-query';
 

diff --git a/src/page/components/chat-step/admission-category-result/admission-category-result.tsx b/src/page/components/chat-step/admission-category-result/admission-category-result.tsx
@@ -1,11 +1,10 @@
-import PresetButton from '@/components/preset-button/preset-button';
-import PRESET_BUTTON, { AdmissionPresetType } from '@/constants/preset-buttons';
+import { AdmissionPresetType } from '@/constants/preset-buttons';
 import useAdmissionQuestionResult from '@/hooks/use-admission-question-result';
+import PresetButtons from '@/page/components/preset-buttons/preset-buttons';
 import useAdmissionStore from '@/stores/store/admission-store';
 import useMessagesStore from '@/stores/store/message-store';
 import { AdmissionType } from '@/types/admission-type';
-import { ChatSteps } from '@/types/chat';
-import { apiEventGATrigger } from '@/utils/ga-trigger';
+import { ChatSteps } from '@/types/steps';
 
 interface Props {
   changeStep: (step: ChatSteps) => void;
@@ -23,77 +22,13 @@ function AdmissionCategoryResult({ admissionType, changeStep, admissionCategory
   });
   const { setMessages } = useMessagesStore();
 
-  const selectQuestion = (question: AdmissionPresetType) => {
+  const handleQuestionSelect = (question: AdmissionPresetType) => {
     changeStep('상세전형 질문 결과');
     setMessages([{ role: 'user', message: question.label }]);
     setQuestion(question);
   };
 
-  if (!isLoading)
-    return (
-      <div>
-        <div className="mt-2 flex w-full justify-end">
-          <div className="flex w-72 flex-wrap justify-end gap-2">
-            <PresetButton
-              onClick={() => {
-                changeStep('질문 출처 결과');
-                setMessages([{ role: 'user', message: '🙋‍♂️ 어디에서 볼 수 있나요?' }]);
-                apiEventGATrigger({
-                  category: 'first preset button click',
-                  action: 'click',
-                  label: '첫 질문의 출처확인하기',
-                  value: 1,
-                });
-              }}
-            >
-              🙋‍♂️ 어디에서 볼 수 있나요?
-            </PresetButton>
-            {PRESET_BUTTON.map((question) => (
-              <PresetButton
-                onClick={() => {
-                  selectQuestion(question);
-                  apiEventGATrigger({
-                    category: 'first preset button click',
-                    action: 'click',
-                    label: `첫 질문의 ${question}질문`,
-                    value: 1,
-                  });
-                }}
-                key={question.label}
-              >
-                {question.label}
-              </PresetButton>
-            ))}
-            <PresetButton
-              onClick={() => {
-                changeStep('상세전형 학과별 입시');
-                apiEventGATrigger({
-                  category: 'first preset button click',
-                  action: 'click',
-                  label: `학과별 입시결과 확인`,
-                  value: 1,
-                });
-              }}
-            >
-              학과별 입시
-            </PresetButton>
-            <PresetButton
-              onClick={() => {
-                window.location.reload();
-                apiEventGATrigger({
-                  category: 'first preset button click',
-                  action: 'click',
-                  label: `조건 재설정`,
-                  value: 1,
-                });
-              }}
-            >
-              조건 재설정
-            </PresetButton>
-          </div>
-        </div>
-      </div>
-    );
+  if (!isLoading) return <PresetButtons changeStep={changeStep} handleQuestionSelect={handleQuestionSelect} />;
 }
 
 export default AdmissionCategoryResult;
diff --git a/src/page/components/chat-step/choose-admission-category/choose-admission-category.tsx b/src/page/components/chat-step/choose-admission-category/choose-admission-category.tsx
@@ -7,7 +7,7 @@ import DraggableScroller from '@/page/components/chat-step/choose-admission-cate
 import useAdmissionStore from '@/stores/store/admission-store';
 import useMessagesStore from '@/stores/store/message-store';
 import { ADDMISSION, AdmissionType } from '@/types/admission-type';
-import { ChatSteps } from '@/types/chat';
+import { ChatSteps } from '@/types/steps';
 import { apiEventGATrigger } from '@/utils/ga-trigger';
 
 interface Props {

diff --git a/src/page/components/chat-step/choose-admission/choose-admission.tsx b/src/page/components/chat-step/choose-admission/choose-admission.tsx
@@ -2,7 +2,7 @@ import PresetButton from '@/components/preset-button/preset-button';
 import useAdmissionStore from '@/stores/store/admission-store';
 import useMessagesStore from '@/stores/store/message-store';
 import { ADDMISSION, AdmissionType } from '@/types/admission-type';
-import { ChatSteps } from '@/types/chat';
+import { ChatSteps } from '@/types/steps';
 import { apiEventGATrigger } from '@/utils/ga-trigger';
 
 interface Props {

diff --git a/src/page/components/chat-step/choose-department/choose-department-steps.tsx b/src/page/components/chat-step/choose-department/choose-department-steps.tsx
@@ -0,0 +1,47 @@
+import { Suspense, useState } from 'react';
+import APIErrorBoundary from '@/components/error/api-error-boundary';
+import ChooseCampus from '@/page/components/chat-step/choose-department/steps/choose-campuse';
+import ChooseCollege from '@/page/components/chat-step/choose-department/steps/choose-college';
+import ChooseDepartment from '@/page/components/chat-step/choose-department/steps/choose-department';
+import Funnel from '@/page/components/funnel/funnel';
+import { ResponseCollegeType } from '@/types/department';
+import { DepartmentSteps } from '@/types/steps';
+import { ChatSteps } from '@/types/steps';
+
+interface ChooseDepartmentStepsProps {
+  changeStep: (step: ChatSteps) => void;
+}
+
+function ChooseDepartmentSteps({ changeStep }: ChooseDepartmentStepsProps) {
+  const [steps, setSteps] = useState<DepartmentSteps>('캠퍼스 선택');
+  const [campus, setCampus] = useState<'인문캠퍼스' | '자연캠퍼스' | null>(null);
+  const [college, setCollege] = useState<ResponseCollegeType | null>(null);
+
+  const changeDepartMentStep = (step: DepartmentSteps) => {
+    setSteps(step);
+  };
+
+  return (
+    <Funnel<DepartmentSteps> step={steps}>
+      <Funnel.Step<DepartmentSteps> step="캠퍼스 선택">
+        <ChooseCampus changeDepartMentStep={changeDepartMentStep} setCampus={setCampus} />
+      </Funnel.Step>
+      <Funnel.Step<DepartmentSteps> step="단과대 선택">
+        <APIErrorBoundary>
+          <Suspense>
+            <ChooseCollege changeDepartMentStep={changeDepartMentStep} campus={campus!} setCollege={setCollege} />
+          </Suspense>
+        </APIErrorBoundary>
+      </Funnel.Step>
+      <Funnel.Step<DepartmentSteps> step="학과 선택">
+        <APIErrorBoundary>
+          <Suspense>
+            <ChooseDepartment changeStep={changeStep} college={college!} />
+          </Suspense>
+        </APIErrorBoundary>
+      </Funnel.Step>
+    </Funnel>
+  );
+}
+
+export default ChooseDepartmentSteps;
diff --git a/src/page/components/chat-step/choose-department/choose-department.tsx b/src/page/components/chat-step/choose-department/choose-department.tsx
diff --git a/src/page/components/chat-step/choose-department/steps/choose-campuse.tsx b/src/page/components/chat-step/choose-department/steps/choose-campuse.tsx
@@ -0,0 +1,37 @@
+import { useEffect } from 'react';
+import Checkbox from '@/components/menu-items/check-box/check-box';
+import MenuList from '@/components/menu-list/menu-list';
+import systemMessage from '@/constants/message';
+import useMessagesStore from '@/stores/store/message-store';
+import { DepartmentSteps } from '@/types/steps';
+
+interface ChooseCampusProps {
+  changeDepartMentStep: (step: DepartmentSteps) => void;
+  setCampus: (campus: '인문캠퍼스' | '자연캠퍼스') => void;
+}
+
+function ChooseCampus({ changeDepartMentStep, setCampus }: ChooseCampusProps) {
+  const { setMessages } = useMessagesStore();
+
+  useEffect(() => {
+    setMessages([{ role: 'system', message: systemMessage.campusGuide }]);
+  }, []);
+
+  const handleClick = (campus: '인문캠퍼스' | '자연캠퍼스') => {
+    changeDepartMentStep('단과대 선택');
+    setCampus(campus);
+    setMessages([{ role: 'user', message: campus }]);
+  };
+
+  return (
+    <div className="mt-3">
+      <MenuList>
+        <MenuList.Title title="캠퍼스를 선택해주세요"></MenuList.Title>
+        <Checkbox label="인문캠퍼스" onClick={() => handleClick('인문캠퍼스')} />
+        <Checkbox label="자연캠퍼스" onClick={() => handleClick('자연캠퍼스')} />
+      </MenuList>
+    </div>
+  );
+}
+
+export default ChooseCampus;
diff --git a/src/page/components/chat-step/choose-department/steps/choose-college.tsx b/src/page/components/chat-step/choose-department/steps/choose-college.tsx
@@ -0,0 +1,42 @@
+import { useEffect } from 'react';
+import Checkbox from '@/components/menu-items/check-box/check-box';
+import MenuList from '@/components/menu-list/menu-list';
+import systemMessage from '@/constants/message';
+import useCollege from '@/hooks/querys/useCollege';
+import useMessagesStore from '@/stores/store/message-store';
+import { ResponseCollegeType } from '@/types/department';
+import { DepartmentSteps } from '@/types/steps';
+
+interface ChooseCollegeProps {
+  changeDepartMentStep: (step: DepartmentSteps) => void;
+  campus: '인문캠퍼스' | '자연캠퍼스';
+  setCollege: (college: ResponseCollegeType) => void;
+}
+function ChooseCollege({ changeDepartMentStep, campus, setCollege }: ChooseCollegeProps) {
+  const colleges = useCollege(campus);
+  const { setMessages } = useMessagesStore();
+
+  useEffect(() => {
+    const message = campus === '인문캠퍼스' ? systemMessage.seoulCampusIntro : systemMessage.yonginCampusIntro;
+    setMessages([{ role: 'system', message }]);
+  }, []);
+
+  const handleClick = (college: ResponseCollegeType) => {
+    changeDepartMentStep('학과 선택');
+    setCollege(college);
+    setMessages([{ role: 'user', message: college.name }]);
+  };
+
+  return (
+    <div className="mt-3">
+      <MenuList>
+        <MenuList.Title title="단과대학을 선택해주세요" />
+        {colleges.map((college) => (
+          <Checkbox label={college.name} key={college.collegeId} onClick={() => handleClick(college)} />
+        ))}
+      </MenuList>
+    </div>
+  );
+}
+
+export default ChooseCollege;