From aa6992c0972193803c7e7e2b0a242b55f170ea13 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EC=84=B1=EC=97=B4?= <yeolyi1310@gmail.com>
Date: Tue, 27 Feb 2024 15:50:00 +0900
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=ED=97=A4=EB=8D=94,=20=ED=91=B8?=
 =?UTF-8?q?=ED=84=B0,=20=EB=84=A4=EB=B9=84=20=EB=94=94=EC=9E=90=EC=9D=B8?=
 =?UTF-8?q?=20=EC=A0=81=EC=9A=A9=20(#139)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../editor/common/suneditor-contents.css      |  3 +-
 components/layout/footer/Footer.tsx           |  5 +-
 .../layout/footer/useFooterDesignMode.ts      | 32 ++++++++++++
 .../layout/footer/useFooterToDesignMode.ts    | 12 -----
 components/layout/header/Header.tsx           |  2 +-
 components/layout/navbar/NavbarDetail.tsx     | 24 ++++++---
 components/layout/navbar/NavbarRoot.tsx       | 22 ++++----
 components/layout/navbar/NavtreeRow.tsx       | 51 ++++++++++++++-----
 .../reservations/calendar/CalendarToolbar.tsx |  9 ++--
 .../reservations/calendar/NavigateButtons.tsx |  2 +-
 styles/globals.css                            |  7 ++-
 11 files changed, 115 insertions(+), 54 deletions(-)
 create mode 100644 components/layout/footer/useFooterDesignMode.ts
 delete mode 100644 components/layout/footer/useFooterToDesignMode.ts

diff --git a/components/editor/common/suneditor-contents.css b/components/editor/common/suneditor-contents.css
index 846f7443f..b2d7c4c2f 100644
--- a/components/editor/common/suneditor-contents.css
+++ b/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 */
diff --git a/components/layout/footer/Footer.tsx b/components/layout/footer/Footer.tsx
index 7ea222189..1a122027f 100644
--- a/components/layout/footer/Footer.tsx
+++ b/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} />
diff --git a/components/layout/footer/useFooterDesignMode.ts b/components/layout/footer/useFooterDesignMode.ts
new file mode 100644
index 000000000..47aac93b3
--- /dev/null
+++ b/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,
+];
diff --git a/components/layout/footer/useFooterToDesignMode.ts b/components/layout/footer/useFooterToDesignMode.ts
deleted file mode 100644
index 14db35e1c..000000000
--- a/components/layout/footer/useFooterToDesignMode.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import useCurrentSegmentNode from '@/hooks/useCurrentSegmentNode';
-
-import { main } from '@/types/page';
-
-export type FooterMode = 'light' | 'dark';
-
-// TODO: 페이지별 모드 적용하기
-export default function useFooterDesignMode(): FooterMode {
-  const node = useCurrentSegmentNode();
-  if (node === main) return 'dark';
-  else return 'light';
-}
diff --git a/components/layout/header/Header.tsx b/components/layout/header/Header.tsx
index b656699a6..454a9dbe4 100644
--- a/components/layout/header/Header.tsx
+++ b/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>
diff --git a/components/layout/navbar/NavbarDetail.tsx b/components/layout/navbar/NavbarDetail.tsx
index d9d4d96eb..ae335fc5b 100644
--- a/components/layout/navbar/NavbarDetail.tsx
+++ b/components/layout/navbar/NavbarDetail.tsx
@@ -9,8 +9,8 @@ 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>
   );
 }
@@ -18,16 +18,24 @@ export default function NavbarDetail({ segmentNode }: { segmentNode: SegmentNode
 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>
+      )}
     </>
   );
 }
diff --git a/components/layout/navbar/NavbarRoot.tsx b/components/layout/navbar/NavbarRoot.tsx
index a64af0f21..ace6f3b82 100644
--- a/components/layout/navbar/NavbarRoot.tsx
+++ b/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">
diff --git a/components/layout/navbar/NavtreeRow.tsx b/components/layout/navbar/NavtreeRow.tsx
index 0dbda08b8..01ec4012c 100644
--- a/components/layout/navbar/NavtreeRow.tsx
+++ b/components/layout/navbar/NavtreeRow.tsx
@@ -13,24 +13,36 @@ 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 />
@@ -38,17 +50,32 @@ function HighlightedRow({ href, text }: { href: string; text: string }) {
   );
 }
 
-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>
     </>
   );
 };
diff --git a/components/reservations/calendar/CalendarToolbar.tsx b/components/reservations/calendar/CalendarToolbar.tsx
index 0c14df726..12c73eead 100644
--- a/components/reservations/calendar/CalendarToolbar.tsx
+++ b/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>
   );
 }
diff --git a/components/reservations/calendar/NavigateButtons.tsx b/components/reservations/calendar/NavigateButtons.tsx
index ff19efea7..6a70e857c 100644
--- a/components/reservations/calendar/NavigateButtons.tsx
+++ b/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 ? (
diff --git a/styles/globals.css b/styles/globals.css
index c00c93a6d..ce4eff103 100644
--- a/styles/globals.css
+++ b/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;
+  }
 }
 
 /* 출처  */