Merge branch 'main' into fix/home

Author: Ubinquitous

src/app/not-found.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import { PageNotFound } from "@/assets/images";
+import { Button } from "@/components/atoms";
+import { ROUTER } from "@/constants";
+import { color, flex } from "@/styles";
+import Image from "next/image";
+import { useRouter } from "next/navigation";
+import React from "react";
+import styled from "styled-components";
+
+const NotFound = () => {
+  const router = useRouter();
+  return (
+    <Container>
+      <StyledImage width={999} height={999} src={PageNotFound} alt="404" />
+      <Button
+        color={color.primary_blue}
+        onClick={() => router.push(ROUTER.HOME)}
+      >
+        홈으로 돌아가기
+      </Button>
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  width: 100%;
+  height: 70vh;
+  ${flex.COLUMN_CENTER};
+`;
+
+const StyledImage = styled(Image)`
+  width: 50%;
+  height: fit-content;
+`;
+
+export default NotFound;

src/assets/images/index.ts

@@ -8,3 +8,4 @@ export { default as ThinkingFace } from "./thinking_face.png";
 export { default as HuggingFace } from "./hugging_face.png";
 export { default as TestBanner } from "./test_banner.png";
 export { default as TestSmallBanner } from "./test_small_banner.png";
+export { default as PageNotFound } from "./page_not_found.png";

src/assets/images/page_not_found.png

@@ -1,29 +1,40 @@
 import styled from "styled-components";
 import { color, flex, font } from "@/styles";
+import useWindow from "@/hooks/useWindow";
 
 const navigationTypes = [
   {
     name: "학교",
+    isDisplayNoneAtResponsive: false,
   },
   {
     name: "기숙사",
+    isDisplayNoneAtResponsive: false,
   },
   {
     name: "커뮤니티",
+    isDisplayNoneAtResponsive: false,
   },
   {
     name: "기타 목록",
+    isDisplayNoneAtResponsive: true,
   },
 ];
 
 const Navigation = () => {
+  const { isWindow } = useWindow();
   return (
     <NavigationList>
-      {navigationTypes.map((navigation) => (
-        <NavigationListItem key={navigation.name}>
-          {navigation.name}
-        </NavigationListItem>
-      ))}
+      {isWindow &&
+        navigationTypes.map((navigation) => {
+          if (navigation.isDisplayNoneAtResponsive && window.innerWidth <= 768)
+            return;
+          return (
+            <NavigationListItem key={navigation.name}>
+              {navigation.name}
+            </NavigationListItem>
+          );
+        })}
     </NavigationList>
   );
 };

src/components/common/Header/Navigation.tsx

@@ -1,6 +1,7 @@
 import styled from "styled-components";
 import { color, flex, font } from "@/styles";
 import Link from "next/link";
+import useWindow from "@/hooks/useWindow";
 
 const navigations = [
   {
@@ -11,13 +12,15 @@ const navigations = [
       { name: "🕐 시간표", href: "/timetable" },
       { name: "🗓️ 캘린더", href: "/calender" },
     ],
+    isDisplayNoneAtResponsive: false,
   },
   {
     key: "기숙사 생활",
     items: [
-      { name: "🚪 입사 체크", href: "https://team-insert.com" },
+      { name: "🚪 (미완)", href: "/" },
       { name: "☕️ 베르실 예약", href: "/reserve" },
     ],
+    isDisplayNoneAtResponsive: false,
   },
   {
     key: "커뮤니티",
@@ -26,25 +29,34 @@ const navigations = [
       { name: "🎋 대나무숲", href: "/bamboo" },
       { name: "📊 랭킹(미완)", href: "/rank" },
     ],
+    isDisplayNoneAtResponsive: false,
   },
   {
     key: "기타",
     items: [{ name: "💼 외부 서비스", href: "/applications" }],
+    isDisplayNoneAtResponsive: true,
   },
 ];
 
 const SubNavigation = () => {
+  const { isWindow } = useWindow();
+
   return (
     <SubNavigationList>
-      {navigations.map((navigation) => (
-        <SubNavigationListItem key={navigation.key}>
-          {navigation.items.map((item) => (
-            <SubNavigationListItemLink key={item.href} href={item.href}>
-              {item.name}
-            </SubNavigationListItemLink>
-          ))}
-        </SubNavigationListItem>
-      ))}
+      {isWindow &&
+        navigations.map((navigation) => {
+          if (navigation.isDisplayNoneAtResponsive && window.innerWidth <= 768)
+            return;
+          return (
+            <SubNavigationListItem key={navigation.key}>
+              {navigation.items.map((item) => (
+                <SubNavigationListItemLink key={item.href} href={item.href}>
+                  {item.name}
+                </SubNavigationListItemLink>
+              ))}
+            </SubNavigationListItem>
+          );
+        })}
     </SubNavigationList>
   );
 };
@@ -68,6 +80,14 @@ const SubNavigationListItemLink = styled(Link)`
   font-weight: 500;
   width: 90px;
   cursor: pointer;
+
+  @media screen and (max-width: 570px) {
+    width: 85px;
+  }
+
+  @media screen and (max-width: 490px) {
+    width: 80px;
+  }
 `;
 
 export default SubNavigation;

src/components/common/Header/SubNavigation.tsx

@@ -16,18 +16,18 @@ const Header = () => {
   >>(null);
 
   const handleMouseEnter = () => {
-    if (isHover) return setIsHover(true);
-    setDelayHandeler(setTimeout(() => setIsHover(true), 400));
+    if (isHover) return setIsHover((prev) => !prev);
+    setDelayHandeler(setTimeout(() => setIsHover((prev) => !prev), 300));
   };
 
   const handleMouseLeave = () => {
     if (!isHover && delayHandler) return clearTimeout(delayHandler);
-    setIsHover(false);
+    setIsHover((prev) => !prev);
   };
 
   return (
     <HeaderLayout
-      onMouseOver={handleMouseEnter}
+      onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
     >
       <Layout>
@@ -46,6 +46,7 @@ const Header = () => {
 
 const HeaderLayout = styled.div`
   ${flex.COLUMN};
+  background-color: green;
 `;
 
 const Layout = styled.div`

src/components/common/Header/index.tsx

@@ -1,17 +1,21 @@
 import Storage from "@/apis/storage";
 import { Logo } from "@/assets/icons";
 import { ROUTER, TOKEN } from "@/constants";
+import useWindow from "@/hooks/useWindow";
 import { color, flex, font } from "@/styles";
 import { useRouter } from "next/navigation";
 import React from "react";
 import styled from "styled-components";
 
 const LoginModal = () => {
   const router = useRouter();
+  const { isWindow } = useWindow();
 
   const handleLoginButtonClick = () => {
-    Storage.setItem(TOKEN.PATH, window.location.pathname);
-    router.push(process.env.NEXT_PUBLIC_OAUTH_URL || ROUTER.HOME);
+    if (isWindow) {
+      Storage.setItem(TOKEN.PATH, window.location.pathname);
+      router.push(process.env.NEXT_PUBLIC_OAUTH_URL || ROUTER.HOME);
+    }
   };
 
   return (

src/components/common/Modal/LoginModal/index.tsx

@@ -7,6 +7,8 @@ import { useAddCalenderPlanMutation } from "@/templates/calender/services/mutati
 import { color, flex, font } from "@/styles";
 import React from "react";
 import styled from "styled-components";
+import { toast } from "react-toastify";
+import getPlanType from "@/helpers/getPlanType.helper";
 
 interface IPlanAddModalProps {
   date: string;
@@ -21,12 +23,16 @@ const PlanAddModal = ({ date }: IPlanAddModalProps) => {
   const textareaRef = React.useRef<HTMLTextAreaElement>(null);
 
   const handleAddButtonClick = () => {
+    if (!title.trim()) return toast.error("내용을 입력해주세요!");
+    const gradeClassType = planType === "학급 일정" ? "CLASS" : "GRADE";
+    const type = planType === "학교 일정" ? "SCHOOL" : gradeClassType;
+
     mutate({
       title,
       priority: 0,
       date,
       color: "#000",
-      type: planType,
+      type,
       grade: user.grade,
       classNumber: user.classNum,
     });
@@ -56,8 +62,8 @@ const PlanAddModal = ({ date }: IPlanAddModalProps) => {
           <Select
             label=""
             width="100px"
-            options={["CLASS", "GRADE", "SCHOOL"]}
-            defaultOption={planType}
+            options={["학급 일정", "학년 일정", "학교 일정"]}
+            defaultOption={getPlanType(planType)}
             handler={setPlanType}
           />
         </Column>