Merge remote-tracking branch 'origin/origin/feat/main/#12' into feature/

#17/senior-to-junior-view

package.json

@@ -13,7 +13,6 @@
     "@types/react-dom": "^18.0.0",
     "axios": "^1.7.2",
     "concurrently": "^8.2.2",
-    "cors": "^2.8.5",
     "jotai": "^2.8.3",
     "js-cookie": "^3.0.5",
     "react": "^18.3.1",
@@ -28,21 +27,17 @@
     "styled-reset": "^4.5.2",
     "sweetalert2": "^11.11.1",
     "typescript": "^4.4.2",
+    "unified": "^11.0.5",
+    "unist-util-position": "^5.0.0",
+    "vfile-message": "^4.0.2",
     "web-vitals": "^2.1.0"
   },
   "scripts": {
+    "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "client": "react-scripts start",
-    "server": "node server/server.js",
-    "start": "concurrently \"npm run server\" \"npm run client\""
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
+    "server": "node server/server.js"
   },
   "browserslist": {
     "production": [

src/App.tsx

@@ -1,4 +1,4 @@
-import Provider from "./components/common/Provider";
+import Provider from "./components/common/providers";
 
 function App() {
   return <Provider/>;

src/components/common/layout/layout.tsx

@@ -1,24 +1,6 @@
-import React, { ReactNode } from 'react';
-import SideBar from 'src/components/common/sidebar';
-import Header from 'src/components/common/header';
-import * as S from "src/components/common/layout/index.style"
-
-interface LayoutProps {
-  children: React.ReactNode;
-}
-
-const Layout: React.FC<LayoutProps> = ({ children }) => {
-  return (
-      <S.LayoutContainer>
-          <Header />
-          <S.MainContent>
-              <SideBar />
-              <S.ContentArea>
-                  {children}
-              </S.ContentArea>
-          </S.MainContent>
-      </S.LayoutContainer>
-  );
+import { ProvidersProps } from "../providers/type";
+const Layout = ({ children }: ProvidersProps) => {
+  return <>{children}</>;
 };
 
-export default Layout;
+export default Layout;

src/components/common/notfound/index.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
+import styled from "styled-components";
+
+const NotFound = () => {
+  const navigate = useNavigate();
+
+  const handleGoBack = () => {
+    navigate("/");
+  };
+
+  return (
+    <Container>
+      <Title>404 - Page Not Found</Title>
+      <Description>없는 페이지</Description>
+      <Button onClick={handleGoBack}>홈으로 돌아가</Button>
+    </Container>
+  );
+};
+
+export default NotFound;
+
+const Container = styled.div`
+  position: absolute;
+  z-index: 7;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100vw;
+  height: 100vh;
+  text-align: center;
+  background-color: #fff;
+`;
+
+const Title = styled.h1`
+  font-size: 4rem;
+  margin-bottom: 1rem;
+`;
+
+const Description = styled.p`
+  font-size: 1.5rem;
+  margin-bottom: 2rem;
+`;
+
+const Button = styled.button`
+  padding: 1rem 2rem;
+  font-size: 1rem;
+  border: none;
+
+  cursor: pointer;
+`;

src/components/common/pageTemplate/index.tsx

@@ -0,0 +1,32 @@
+import { useLocation } from "react-router-dom";
+import { ProvidersProps } from "../providers/type";
+import SideBar from "../sidebar/index";
+import styled from "styled-components";
+import Header from "../header/index";
+import Layout from "../layout/layout";
+import useExceptionHandling from "src/constants/exceptionHandling/constants"
+
+const pageTemplate = ({ children }: ProvidersProps) => {
+  const exceptionHandling = useExceptionHandling();
+  return (
+    <LayoutContainer>
+       {exceptionHandling && <Header />}
+       {exceptionHandling && <SideBar />}
+        <Layout>{children}</Layout>
+    </LayoutContainer>
+  );
+};
+export default pageTemplate;
+
+export const LayoutContainer = styled.div`
+  height: 100vh;
+  display: flex;
+  user-select: none;
+  background-color: #f7fff3;
+`;
+
+export const MainContent = styled.div`
+  display: flex;
+  flex: 1;
+`;
+

src/components/common/Provider/index.tsx → src/components/common/providers/index.tsx

@@ -1,6 +1,8 @@
 import GlobalStyles from "src/styles/global";
-import Router from "../../Router/index";
+import Router from "../../routers/index";
+import PageTemplate from "../pageTemplate";
 import { QueryClient, QueryClientProvider } from "react-query";
+import { BrowserRouter } from "react-router-dom";
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -18,8 +20,13 @@ const Provider = () => {
   return (
     <QueryClientProvider client={queryClient}>
       <GlobalStyles />
-      <Router />
+      <BrowserRouter>
+        <PageTemplate>
+          <Router />
+        </PageTemplate>
+      </BrowserRouter>
     </QueryClientProvider>
   );
 };
+
 export default Provider;

src/components/common/providers/type.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from "react";
+
+export interface ProvidersProps {
+    children: React.ReactNode;
+  }

src/components/common/sidebar/index.tsx

@@ -21,14 +21,14 @@ const Index = () => {
   return (
     <S.SidebarContainer>
       <S.SideBarWrap>
-        <S.MainLogo onClick={() => handleMenuItemClick('home', '/main')}>
+        <S.MainLogo onClick={() => handleMenuItemClick('home', '/')}>
           <S.SopoLogoImg src={SopoLogo} alt='error' />
           <S.MainTitle>소포</S.MainTitle>
         </S.MainLogo>
         <S.Menu>
           <S.MenuItem
             active={activeItem === 'home'}
-            onClick={() => handleMenuItemClick('home', '/main')}
+            onClick={() => handleMenuItemClick('home', '/')}
           >
             <S.MenuIcon src={HomeIcon} alt='error' />
             <S.MenuText>홈</S.MenuText>

src/components/home/competition/index.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+
+const Competition=()=>{
+    return(
+        <>
+
+        </>
+    )
+}
+export default Competition

src/components/home/main/alarm/index.style.ts

@@ -0,0 +1,88 @@
+import styled, { keyframes, css } from "styled-components";
+
+const slideIn = keyframes`
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+`;
+
+export const Layout = styled.div`
+  width: 620px;
+  height: 270px;
+  border-radius: 13px;
+  background: #fff;
+  box-shadow: 0px 3px 9px 0px rgba(0, 0, 0, 0.12);
+`;
+export const Padding = styled.div`
+  width: 90%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  padding: 20px 40px 30px 25px;
+`;
+export const Head = styled.div`
+  width: 70px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 20px;
+`;
+export const HeadImg = styled.img`
+  width: 30px;
+  height: 30px;
+`;
+export const HeadText = styled.p`
+  font-family: Pretendard;
+  font-size: 15px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 26px;
+`;
+export const BodyHead = styled.div`
+  width: 200px;
+  height: 30px;
+  display: flex;
+  gap: 30px;
+  align-items: center;
+`;
+
+interface TypeProps {
+  isActive: boolean;
+}
+
+export const Type = styled.p<TypeProps>`
+  color: ${(props) => (props.isActive ? "#0e0e0e" : "#797979")};
+  font-family: Pretendard;
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 26px;
+  cursor: pointer;
+`;
+
+export const NotificationItem = styled.div`
+  display: flex;
+  justify-content: space-between;
+  padding: 10px;
+  margin: 5px 0;
+  background-color: #f1f1f1;
+  border-radius: 4px;
+`;
+
+export const NotificationText = styled.span`
+  color: #333;
+`;
+
+export const ApprovalButton = styled.button`
+  color: #2e7d32;
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  &:hover {
+    text-decoration: underline;
+  }
+`;