💄헤더, 푸터, 네비 디자인 적용 (#139)

components/editor/common/suneditor-contents.css

@@ -15,7 +15,7 @@
   font-size: 0.875rem; /* 수정됨 */
   color: #262626; /* 수정됨 */
   /* background-color: #fff; */ /* 수정됨 */
-  line-height: 1.75; /* 수정됨 */
+  line-height: 2; /* 수정됨 */
   word-break: normal;
   word-wrap: break-word;
   /* padding: 16px; */ /* 수정됨 */
@@ -29,6 +29,7 @@
   font-family: inherit;
   font-size: inherit;
   color: inherit;
+  line-height: 2; /* 수정됨 */
 }
 
 /* RTL - editable */

components/layout/footer/Footer.tsx

@@ -25,16 +25,17 @@ import {
 
 import useModal from '@/hooks/useModal';
 
-import useFooterDesignMode, { FooterMode } from './useFooterToDesignMode';
+import useFooterDesignMode, { FooterMode } from './useFooterDesignMode';
 
 export default function Footer() {
   const mode = useFooterDesignMode();
 
   const topBg = mode === 'light' ? 'bg-neutral-50' : 'bg-neutral-900';
   const bottomBg = mode === 'light' ? 'bg-neutral-100' : 'bg-[rgb(30,30,30)]';
+  const borderTop = mode === 'light' ? 'border-neutral-100' : 'border-neutral-800';
 
   return (
-    <footer>
+    <footer className={`border-t-2 ${borderTop}`}>
       <div className={`${topBg} px-[3.75rem] py-10 flex`}>
         <LinkGroup groupName="About" links={aboutLinks} width="w-[7.5rem]" mode={mode} />
         <LinkGroup groupName="Resources" links={resourcesLinks} width="w-[8.25rem]" mode={mode} />

components/layout/footer/useFooterDesignMode.ts

@@ -0,0 +1,32 @@
+import useCurrentSegmentNode from '@/hooks/useCurrentSegmentNode';
+
+import {
+  SegmentNode,
+  about,
+  academics,
+  admissions,
+  community,
+  main,
+  people,
+  research,
+  reservations,
+} from '@/types/page';
+
+export type FooterMode = 'light' | 'dark';
+
+// TODO: 페이지별 모드 적용하기
+export default function useFooterDesignMode(): FooterMode {
+  const node = useCurrentSegmentNode();
+  return pageWithDarkMode.includes(node) ? 'dark' : 'light';
+}
+
+const pageWithDarkMode: SegmentNode[] = [
+  main,
+  about,
+  community,
+  people,
+  research,
+  admissions,
+  academics,
+  reservations,
+];

components/layout/header/Header.tsx

@@ -18,7 +18,7 @@ export default function Header() {
   const goToMainPage = () => (window.location.href = '/');
 
   return (
-    <header className={`bg-transparent px-[3.75rem] h-[148px] flex items-center justify-between`}>
+    <header className={`bg-[#1f2021] px-[3.75rem] pt-12 pb-[2.44rem] flex justify-between`}>
       <div onClick={goToMainPage} className="cursor-pointer">
         <HeaderLogo />
       </div>

components/layout/navbar/NavbarDetail.tsx

@@ -9,25 +9,33 @@ export default function NavbarDetail({ segmentNode }: { segmentNode: SegmentNode
 
   return (
     // 네비바가 펼쳐질 때 뒷배경이 일시적으로 보이는 문제를 막기 위해 화면 왼쪽부터 시작합니다.
-    <div className="bg-[#1f2021] backdrop-blur-[2px] pt-[8.8125rem] pl-[14.75rem] w-[33rem] overflow-y-scroll no-scrollbar absolute left-0 top-0 bottom-0 z-40">
-      <NavTree node={segmentNode} curNode={curNode} isRoot />
+    <div className="bg-[#1f2021] backdrop-blur-[2px] pt-[9.62rem] pl-[14.75rem] w-[33rem] overflow-y-scroll no-scrollbar absolute left-0 top-0 bottom-0 z-40">
+      <NavTree node={segmentNode} curNode={curNode} />
     </div>
   );
 }
 
 interface NavTreeProps {
   node: SegmentNode;
   curNode: SegmentNode;
-  isRoot?: boolean;
+  depth?: number;
 }
 
-function NavTree({ node, isRoot = false, curNode }: NavTreeProps) {
+function NavTree({ node, curNode, depth = 0 }: NavTreeProps) {
+  const marginBottom = depth === 0 ? '1.75rem' : '1.5rem';
+
   return (
     <>
-      {!isRoot && <NavTreeRow segmentNode={node} highlight={curNode === node} />}
-      <div className="ml-5">
-        {node.children?.map((child, i) => <NavTree key={i} node={child} curNode={curNode} />)}
-      </div>
+      {depth !== 0 && (
+        <NavTreeRow segmentNode={node} highlight={curNode === node} marginBottom={marginBottom} />
+      )}
+      {node.children !== null && 0 < node.children.length && (
+        <div className="ml-5 mb-11">
+          {node.children.map((child, i) => (
+            <NavTree key={i} node={child} curNode={curNode} depth={depth + 1} />
+          ))}
+        </div>
+      )}
     </>
   );
 }

components/layout/navbar/NavbarRoot.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { useTranslations } from 'next-intl';
 
 import { NavbarState } from '@/contexts/NavbarContext';
@@ -26,7 +24,7 @@ export default function NavbarRoot({
   return (
     // 상하로 짧은 경우를 대비해 overflow-scroll
     <div
-      className={`flex flex-col items-center py-[2.25rem] ${width} transition-all duration-300 ease-in-out z-50 bg-[#323235] overflow-scroll no-scrollbar`}
+      className={`flex flex-col items-center py-[2.88rem] ${width} transition-all duration-300 ease-in-out z-50 bg-[#323235] overflow-scroll no-scrollbar`}
       onMouseEnter={() => setState({ type: 'expanded' })}
     >
       <SNUButton />
@@ -49,14 +47,20 @@ function SNUButton() {
 
 function DotList() {
   const cur = useCurrentSegmentNode();
+  const dotArr =
+    mainSegmentNode.children?.map((node) => (isAncestorNode(node, cur) ? 'fill' : 'empty')) ?? [];
+  const mt = dotArr[0] === 'fill' ? 'mt-[2.7rem]' : 'mt-[3.38rem]';
 
   return (
-    <div className="flex flex-col items-center mt-[3.38rem]">
-      {mainSegmentNode.children?.map((node, idx) => {
-        return isAncestorNode(node, cur) ? (
-          <DotFill key={idx} className="mb-[2.2rem] -translate-y-2" />
+    <div className={`flex flex-col items-center ${mt}`}>
+      {dotArr.map((dotType, idx) => {
+        let mb = dotType === 'fill' ? 'mb-[2.2rem]' : 'mb-[2.7rem]';
+        if (dotArr[idx + 1] === 'fill') mb = 'mb-[2.2rem]';
+
+        return dotType === 'fill' ? (
+          <DotFill key={idx} className={mb} />
         ) : (
-          <DotEmpty key={idx} className="mb-12" />
+          <DotEmpty key={idx} className={mb} />
         );
       })}
     </div>
@@ -108,7 +112,7 @@ function NavListRow({
   const color = highlight ? 'text-white' : 'text-neutral-500';
   return (
     <li
-      className={`text-[0.9375rem] font-medium ${color} cursor-pointer whitespace-nowrap`}
+      className={`text-[0.9375rem] font-medium ${color} cursor-pointer whitespace-nowrap leading-[1.125rem]`}
       onMouseEnter={onMouseEnter}
     >
       <Link href={href} className="block">

components/layout/navbar/NavtreeRow.tsx

@@ -13,42 +13,69 @@ import { getPath } from '@/utils/page';
 type NavTreeRowProps = {
   segmentNode: SegmentNode;
   highlight: boolean;
+  marginBottom: string;
 };
 
-export default function NavTreeRow({ segmentNode, highlight }: NavTreeRowProps) {
+export default function NavTreeRow({ segmentNode, highlight, marginBottom }: NavTreeRowProps) {
   const href = getPath(segmentNode);
 
   if (highlight) {
-    return <HighlightedRow href={href} text={segmentNode.name} />;
+    return <HighlightedRow href={href} text={segmentNode.name} marginBottom={marginBottom} />;
   } else if (segmentNode.isPage) {
-    return <LinkRow href={href} text={segmentNode.name} />;
+    return <LinkRow href={href} text={segmentNode.name} marginBottom={marginBottom} />;
   } else {
-    return <TextRow text={segmentNode.name} />;
+    return <TextRow text={segmentNode.name} marginBottom={marginBottom} />;
   }
 }
 
-function HighlightedRow({ href, text }: { href: string; text: string }) {
+function HighlightedRow({
+  href,
+  text,
+  marginBottom,
+}: {
+  href: string;
+  text: string;
+  marginBottom: string;
+}) {
   return (
-    <div className="flex items-center mb-6">
-      <Link href={href} className="text-md mr-4 font-medium text-main-orange shrink-0">
+    <div className="flex items-center" style={{ marginBottom }}>
+      <Link
+        href={href}
+        className="text-md mr-4 font-medium text-main-orange shrink-0 h-[1.0625rem]"
+      >
         <FormattedText text={text} />
       </Link>
       <StraightNode />
     </div>
   );
 }
 
-function LinkRow({ href, text }: { href: string; text: string }) {
+function LinkRow({
+  href,
+  text,
+  marginBottom,
+}: {
+  href: string;
+  text: string;
+  marginBottom: string;
+}) {
   return (
-    <Link href={href} className="block text-md font-medium mb-6 text-white hover:text-main-orange ">
+    <Link
+      href={href}
+      className="block text-md leading-5 font-medium mb-6 text-white hover:text-main-orange h-[1.0625rem]"
+      style={{ marginBottom }}
+    >
       <FormattedText text={text} />
     </Link>
   );
 }
 
-function TextRow({ text }: { text: string }) {
+function TextRow({ text, marginBottom }: { text: string; marginBottom: string }) {
   return (
-    <p className="block text-md font-medium mb-6 text-white">
+    <p
+      className="block text-md leading-5 font-medium mb-6 text-white h-[1.0625rem]"
+      style={{ marginBottom }}
+    >
       <FormattedText text={text} />
     </p>
   );
@@ -64,7 +91,7 @@ const FormattedText = ({ text }: { text: string }) => {
   return (
     <>
       {text.slice(0, idx)}
-      <span className="text-xs">{text.slice(idx)}</span>
+      <span className="text-xs leading-5 font-medium">{text.slice(idx)}</span>
     </>
   );
 };

components/reservations/calendar/CalendarToolbar.tsx

@@ -1,3 +1,5 @@
+import LoginUserVisible from '@/components/common/LoginUserVisible';
+
 import {
   ChangeDateButton,
   MakeReservationButton,
@@ -20,10 +22,9 @@ export default function Toolbar({ date, roomId }: { date: Date; roomId: number }
         <ChangeDateButton targetDate={addDayToDate(date, 7)} symbolName="navigate_next" />
         {showTodayButton && <TodayButton />}
       </div>
-      {/* TODO: 권한 있는 계정 얻을 때까지 주석 처리 */}
-      {/* <LoginUserVisible> */}
-      <MakeReservationButton roomId={roomId} />
-      {/* </LoginUserVisible> */}
+      <LoginUserVisible>
+        <MakeReservationButton roomId={roomId} />
+      </LoginUserVisible>
     </div>
   );
 }

components/reservations/calendar/NavigateButtons.tsx

@@ -30,7 +30,7 @@ export function SelectDayButton({ date }: { date: Date }) {
   return (
     <div>
       <BasicButton
-        className="h-full px-[0.625rem] flex gap-1 items-center justify-center"
+        className="h-full px-[0.625rem] flex gap-1 items-center justify-center w-24"
         onClick={toggleCalendar}
       >
         {isDateToday ? (

styles/globals.css

@@ -10,6 +10,7 @@
   html,
   body {
     @apply h-full;
+
     font-family:
       'Pretendard Variable',
       Pretendard,
@@ -26,11 +27,9 @@
       'Segoe UI Emoji',
       'Segoe UI Symbol',
       sans-serif;
-  }
-}
 
-:root {
-  color-scheme: dark;
+    -webkit-font-smoothing: antialiased;
+  }
 }
 
 /* 출처  */