Merge pull request #19 from Sopo2023/feature/#17/post-header

글쓰기 부분 사용되는 postHeader 구현 했습니다.

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/postHeader/index.style.ts

@@ -0,0 +1,154 @@
+import style from 'react-syntax-highlighter/dist/esm/styles/hljs/a11y-dark';
+import styled from 'styled-components';
+
+export const PageTitle = styled.div`
+    display: flex;
+    align-items: center;
+    padding: 41px 36px;
+    box-sizing: border-box;
+    width: 100%;
+    justify-content: space-between;
+    flex-wrap: wrap; 
+    gap: 16px; 
+`;
+
+export const ImgWrap = styled.div`
+    width: 29px;
+    height: 29px;
+    flex-shrink: 0;
+    border-radius: 100px;
+    background: #1A9A18;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+`;
+
+export const PageTitleImg = styled.img`
+    width: 15px;
+    height: 15px;
+    filter: invert(1);
+`;
+
+export const PageTitleText = styled.div`
+    color: #000;
+    font-family: Pretendard;
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 26px; 
+    flex-shrink: 0;
+`;
+
+export const ArrowImg = styled.img`
+    transform: rotate(-45deg);
+    width: 17.399px;
+    height: 13.92px;
+`;
+
+export const LastestImg = styled.img`
+    width: 20px;
+    height: 20px;
+    flex-shrink: 0;
+`;
+
+export const ButtonText = styled.button`
+    display: flex;
+    align-items: center;
+
+    color: var(--DarkGray-60, #787878);
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: normal;
+    border: none;
+    background: none;
+
+    cursor: pointer;
+
+    margin-left: 10px;
+    flex-shrink: 0;
+    white-space: nowrap; 
+
+    transition: all 0.3s ease;
+
+    &:hover{
+        color:#000;
+    }
+
+    img{
+        margin-left: 5px;
+    }
+`;
+
+export const SearchIconWrap = styled.div`
+    border: none;
+    background-color: none;
+`
+
+export const SearchBox = styled.form`
+    display: flex;
+    align-items: center;
+    border-radius: 100px;
+    border: 1.5px solid var(--Primary-Color---Green-500, #1A9A18);
+    background: #FFF;
+    padding: 8px 12px;
+    flex-grow: 1;
+    max-width: 600px;
+    min-width: 200px;
+    margin: 0 16px; 
+    flex: 1 1 auto;
+`;
+
+export const SearchInput = styled.input`
+    color: #000;
+    font-family: Pretendard;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 130%; 
+    border: none;
+    outline: none;
+    flex-grow: 1;
+    min-width: 0; 
+
+    ::placeholder {
+        color: #C5C5C5;
+    }
+`;
+
+export const SearchIconImg = styled.img`
+    width: 25px;
+    height: 25px;
+    flex-shrink: 0;
+
+    &:hover{
+        filter: brightness(70%);
+    }
+`;
+
+export const StartWirteButton = styled.button`
+    padding: 10px 20px;
+    border: none;
+
+    background-color: #1A9A18;
+    color: var(--Neutral-100, #FFF);
+    font-family: Pretendard;
+    font-size: 13px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 20px; /* 153.846% */
+
+    cursor: pointer;
+
+    display: inline-block;
+    border-radius: 4px;
+
+    transition: all 0.3s ease;
+    white-space: nowrap;
+    flex-shrink: 0; 
+    margin: 8px 0; 
+
+    &:hover{
+        background-color: #136D11;
+    }
+`;