Merge pull request #98 from Team-INSERT/fix/QA

QA, 버그 픽스

Author: Ubinquitous

next.config.js

@@ -1,5 +1,6 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+  swcMinify: true,
   images: {
     domains: [
       process.env.NEXT_PUBLIC_DOMAIN,

src/app/layout.tsx

@@ -1,4 +1,5 @@
 import Provider from "@/provider/provider.helper";
+import React from "react";
 
 export const metadata = {
   title: "BSM",

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/icons/Arrow.tsx

@@ -14,9 +14,11 @@ const Arrow = ({
   height = 25,
   color = "#727272",
   direction = "bottom",
+  ...props
 }: SVGAttribute) => {
   return (
     <svg
+      {...props}
       width={width}
       height={height}
       viewBox="0 0 41 41"

src/assets/icons/Logo.tsx

@@ -1,12 +1,10 @@
-import { SVGAttribute } from "@/interfaces";
 import styled from "styled-components";
 
-const Logo = ({ isPointable }: SVGAttribute) => {
+const Logo = ({ ...props }: React.SVGProps<SVGSVGElement>) => {
   return (
     <StyledSVG
-      cursor={isPointable ? "pointer" : ""}
-      width={20}
-      height={20}
+      {...props}
+      cursor="pointer"
       viewBox="0 0 41 40"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
@@ -209,9 +207,6 @@ const Logo = ({ isPointable }: SVGAttribute) => {
 };
 
 const StyledSVG = styled.svg`
-  width: 40px;
-  height: 40px;
-
   @media screen and (max-width: 1025px) {
     width: 34px;
     height: 34px;

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,21 +1,32 @@
 import styled from "styled-components";
-import Link from "next/link";
 import { color, font } from "@/styles";
-import { USER, ROUTER } from "@/constants";
+import { USER } from "@/constants";
 import { IUser } from "@/interfaces";
 import { Row, Column } from "@/components/Flex";
 import { getUserRole } from "@/helpers";
 import flex from "@/styles/flex";
 import { ImageWithFallback } from "@/components/atoms";
 import { defaultProfile } from "@/assets/images";
+import useModal from "@/hooks/useModal";
+import { useRouter } from "next/navigation";
+import LoginModal from "../Modal/LoginModal";
 
 interface IInfomationBoxProps {
   user: IUser;
   isLogined: boolean;
 }
 
 const InfomationBox = ({ user, isLogined }: IInfomationBoxProps) => {
-  const ifLoginedStudent = isLogined && user.role === USER.STUDENT;
+  const router = useRouter();
+  const isLoginedStudent = isLogined && user.role === USER.STUDENT;
+  const { openModal } = useModal();
+
+  const handleLoginButtonClick = () => {
+    if (isLogined) router.push("/");
+    openModal({
+      component: <LoginModal />,
+    });
+  };
 
   return (
     <Container>
@@ -29,7 +40,7 @@ const InfomationBox = ({ user, isLogined }: IInfomationBoxProps) => {
           rounded
         />
       )}
-      {ifLoginedStudent && (
+      {isLoginedStudent && (
         <>
           <Column>
             <UserInfoBox>
@@ -42,15 +53,15 @@ const InfomationBox = ({ user, isLogined }: IInfomationBoxProps) => {
               <UserType>{getUserRole(user.role)}</UserType>
             </Row>
           </Column>
-          <InfomationButton href={ROUTER.MYPAGE}>내 정보</InfomationButton>
+          <InfomationButton onClick={handleLoginButtonClick}>
+            내 정보
+          </InfomationButton>
         </>
       )}
       {!isLogined && (
         <>
           <LoginText>로그인이 필요해요</LoginText>
-          <InfomationButton
-            href={process.env.NEXT_PUBLIC_OAUTH_URL || ROUTER.HOME}
-          >
+          <InfomationButton onClick={handleLoginButtonClick}>
             로그인
           </InfomationButton>
         </>
@@ -123,10 +134,11 @@ const UserType = styled.span`
   }
 `;
 
-const InfomationButton = styled(Link)`
+const InfomationButton = styled.button`
   ${flex.CENTER};
   ${font.btn3};
   padding: 4px 10px;
+  border: none;
   background-color: ${color.primary_blue};
   border-radius: 5px;
   margin-left: auto;

src/components/common/Aside/InfomationBox.tsx

@@ -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;