[FEAT-8] 헤더 세부 기능 구현

src/assets/svg/index.ts

@@ -6,3 +6,5 @@ export { default as SendIcon } from '@assets/svg/send.svg?react';
 export { default as CheckTrueIcon } from '@assets/svg/check-true.svg?react';
 export { default as CheckFalseIcon } from '@assets/svg/check-false.svg?react';
 export { default as WarningIcon } from '@assets/svg/warning.svg?react';
+export { default as HamburgerIcon } from '@assets/svg/hamburger.svg?react';
+export { default as CloseIcon } from '@assets/svg/close.svg?react';

src/components/chip/chip.tsx

@@ -1,6 +1,6 @@
 function Chip({ label }: { label: string }) {
   return (
-    <div className="bg-primary-egg rounded-2xl px-2 py-1">
+    <div className="flex max-h-6 items-center rounded-2xl bg-primary-egg px-2 py-1">
       <span className="text-label font-semibold text-primary">{label}</span>
     </div>
   );

src/components/header/bottom-sheet/admission-quick-link-tabs.tsx

@@ -0,0 +1,34 @@
+import { useState } from 'react';
+import PresetButton from '@/components/preset-button/preset-button';
+import ADMISSION_QUICK_LINK from '@/constants/admission-quick-link';
+import { AdmissionType } from '@/types/admission-type';
+import { ADDMISSION } from '@/types/admission-type';
+
+function AdmissionQuickLinkTabs({ initialAdmissionType }: { initialAdmissionType: AdmissionType | null }) {
+  const [selectedAdmissionType, setSelectedAdmissionType] = useState(initialAdmissionType ?? 'SUSI');
+
+  return (
+    <div>
+      <div className="flex gap-2">
+        {Object.entries(ADDMISSION).map(([type, label]) => (
+          <PresetButton
+            key={type}
+            selected={type === selectedAdmissionType}
+            onClick={() => setSelectedAdmissionType(type as AdmissionType)}
+          >
+            {label}
+          </PresetButton>
+        ))}
+      </div>
+      <div className="mt-6 flex flex-col gap-6 text-headline">
+        {ADMISSION_QUICK_LINK[selectedAdmissionType].map((link) => (
+          <a key={link.id} className="cursor-pointer" href={link.link} target="_blank">
+            {link.label}
+          </a>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default AdmissionQuickLinkTabs;

src/components/header/bottom-sheet/contact.tsx

@@ -0,0 +1,33 @@
+interface ContactItemProps {
+  title: string;
+  department: string;
+  numbers: number[];
+}
+function ContactItem({ title, department, numbers }: ContactItemProps) {
+  return (
+    <div className="flex text-label text-gray-500">
+      <span className="w-1/2">{title}</span>
+      <span className="flex-1 whitespace-nowrap">
+        {department} :{' '}
+        <a href={`tel:02-300-${numbers[0]}`} className="underline underline-offset-4">
+          02)300-{numbers[0]}
+        </a>
+        ,{' '}
+        <a href={`tel:02-300-${numbers[1]}`} className="underline underline-offset-4">
+          {numbers[1]}
+        </a>
+      </span>
+    </div>
+  );
+}
+
+function Contact() {
+  return (
+    <div className="flex flex-col gap-3">
+      <ContactItem title="학생부교과, 실기/실적 위주 문의" department="입학관리팀" numbers={[1799, 1800]} />
+      <ContactItem title="학생부종합 문의" department="인재발굴팀" numbers={[1794, 1844]} />
+    </div>
+  );
+}
+
+export default Contact;

src/components/header/header.tsx

@@ -1,16 +1,43 @@
-import { ReloadIcon } from '@/assets/svg';
+import { CloseIcon, HamburgerIcon, ReloadIcon } from '@/assets/svg';
+import BottomSheet from '@/components/bottom-sheet/bottom-sheet';
+import Chip from '@/components/chip/chip';
+import AdmissionQuickLinkTabs from '@/components/header/bottom-sheet/admission-quick-link-tabs';
+import Contact from '@/components/header/bottom-sheet/contact';
 import IconButton from '@/components/icon-button/icon-button';
+import CHIP_LABEL from '@/constants/header-chip-labels';
+import { useBottomSheet } from '@/hooks/use-bottom-sheet-hooks';
+import useAdmissionStore from '@/stores/store/admission-store';
 
 function Header() {
+  const { admissionType } = useAdmissionStore();
+  const { open, onOpen, onClose } = useBottomSheet();
+
   return (
-    <header className="sticky top-0 z-10 h-16 w-full bg-white">
-      <div className="flex h-full items-center justify-center px-4">
-        <h1 className="text-primary text-title flex-1 text-center">명지대 입학처 챗봇</h1>
-        <IconButton aria-label="새로고침">
-          <ReloadIcon />
-        </IconButton>
-      </div>
-    </header>
+    <>
+      <header className="sticky top-0 z-10 h-16 w-full bg-white">
+        <div className="flex h-full items-center justify-between px-4">
+          <IconButton aria-label="새로고침" onClick={() => window.location.reload()}>
+            <ReloadIcon />
+          </IconButton>
+          <div className="flex items-center gap-2">
+            <h1 className="text-center text-headline text-primary">명지대 입학처 챗봇</h1>
+            {admissionType && <Chip label={CHIP_LABEL[admissionType]} />}
+          </div>
+          <IconButton aria-label="메뉴" onClick={onOpen}>
+            <HamburgerIcon />
+          </IconButton>
+        </div>
+      </header>
+      <BottomSheet open={open} onClose={onClose}>
+        <div className="flex h-full w-full flex-col justify-between gap-3">
+          <IconButton onClick={onClose} className="absolute right-10 top-10" aria-label="닫기 버튼">
+            <CloseIcon />
+          </IconButton>
+          <AdmissionQuickLinkTabs initialAdmissionType={admissionType} />
+          <Contact />
+        </div>
+      </BottomSheet>
+    </>
   );
 }
 

src/components/preset-button/preset-button.tsx

@@ -2,14 +2,16 @@ import { cn } from '@/utils/style';
 
 interface PresetButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   children: React.ReactNode;
+  selected?: boolean;
 }
 
-function PresetButton({ children, ...props }: PresetButtonProps) {
+function PresetButton({ children, selected, ...props }: PresetButtonProps) {
   const buttonClasses = cn(
     'cursor-pointer rounded-lg border border-category_border bg-white px-4 py-3 text-black transition-colors text-sm',
-    'hover:border-primary hover:text-primary',
+    'hover:bg-primary hover:text-white',
     'disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-gray-400',
     'disabled:hover:border-gray-200 disabled:hover:text-gray-400',
+    selected && 'bg-primary text-white',
   );
 
   return (

src/constants/admission-quick-link.ts

@@ -0,0 +1,43 @@
+const ADMISSION_QUICK_LINK = {
+  SUSI: [
+    {
+      id: 'faq',
+      label: '수시 FAQ 바로가기',
+      link: 'https://iphak.mju.ac.kr/pages/?p=33&b=B_1_5&cate=%EC%88%98%EC%8B%9C',
+    },
+    {
+      id: 'results',
+      label: '수시 입시결과 바로가기',
+      link: 'https://iphak.mju.ac.kr/pages/?p=11&b=B_1_2&cate=%EC%88%98%EC%8B%9C',
+    },
+    { id: 'guide', label: '수시 모집요강 바로가기', link: 'https://iphak.mju.ac.kr/pages/?p=10&mj=01' },
+  ],
+  JEONGSI: [
+    {
+      id: 'faq',
+      label: '정시 FAQ 바로가기',
+      link: 'https://iphak.mju.ac.kr/pages/?p=33&b=B_1_5&cate=%EC%A0%95%EC%8B%9C',
+    },
+    {
+      id: 'results',
+      label: '정시 입시결과 바로가기',
+      link: 'https://iphak.mju.ac.kr/pages/?p=17&b=B_1_2&cate=%EC%A0%95%EC%8B%9C',
+    },
+    { id: 'guide', label: '정시 모집요강 바로가기', link: 'https://iphak.mju.ac.kr/pages/?p=16&mj=02' },
+  ],
+  PYEONIP: [
+    {
+      id: 'faq',
+      label: '편입 FAQ 바로가기',
+      link: 'https://iphak.mju.ac.kr/pages/?p=33&b=B_1_5&cate=%ED%8E%B8%EC%9E%85%ED%95%99',
+    },
+    {
+      id: 'results',
+      label: '편입 입시결과 바로가기',
+      link: 'https://iphak.mju.ac.kr/pages/?p=27&b=B_1_2&cate=%ED%8E%B8%EC%9E%85%ED%95%99',
+    },
+    { id: 'guide', label: '편입 모집요강 바로가기', link: 'https://iphak.mju.ac.kr/pages/?p=26&mj=04' },
+  ],
+};
+
+export default ADMISSION_QUICK_LINK;

src/constants/header-chip-labels.ts

@@ -0,0 +1,7 @@
+const CHIP_LABEL = {
+  SUSI: '수시 질문중',
+  JEONGSI: '정시 질문중',
+  PYEONIP: '편입 질문중',
+};
+
+export default CHIP_LABEL;