Merge pull request #22 from Team-C0nnect/feature/#20

Feature/#20

src/components/common/header/index.tsx

@@ -11,14 +11,15 @@ const Header = () => {
 
     return (
         <S.headWrap>
+            <S.logoImg src={logoImg} alt="logo" />
+
+            <S.navBar>네비게이션 바</S.navBar>
+
             {getTokenCheck() ? (
-                <>
-                    <S.logoImg src={logoImg} alt="logo" />
-                    <S.nameContainer>
-                        <S.profileImg src={profileImg} alt="profileImg" />
-                        <S.profileName className="name">{data?.name}</S.profileName>
-                    </S.nameContainer>
-                </>
+                <S.nameContainer>
+                    <S.profileImg src={profileImg} alt="profileImg" />
+                    <S.profileName>{data?.data.name}</S.profileName>
+                </S.nameContainer>
             ) : null}
         </S.headWrap>
     );

src/components/common/header/style.ts

@@ -3,33 +3,53 @@ import styled from "styled-components";
 export const headWrap = styled.div`
     width: 100%;
     display: flex;
-    position: absolute;
     align-items: center;
-    justify-content: flex-end;
+    justify-content: space-between;
+    padding: 0 20px;
     background-color: #0389FF;
+    position: relative;
+    height: 80px; 
 `;
 
 export const logoImg = styled.img`
-    width: 32px;
-    height: 32px;
+    width: 90px; 
+    height: 90px;
     flex-shrink: 0;
 `;
 
+export const navBar = styled.nav`
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: white;
+    font-size: 18px;
+    font-weight: bold;
+`;
+
 export const nameContainer = styled.div`
-    width: 100px;
-    height: 100px;
+    display: flex;
+    align-items: center;
     background-color: #FFFFFF;
-    border-radius: 50%;
+    border-radius: 50px;
+    padding: 10px 20px;
+    gap: 10px;
+    margin-right: 25px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    width: 150px;
+    height: 25px;
+;
 `;
 
 export const profileImg = styled.img`
-    width: 20px;
-    height: 20px;
+    width: 30px; 
+    height: 30px;
+    border-radius: 50%;
 `;
 
 export const profileName = styled.span`
-    font-size: 16px;
-    font-style: normal;
+    font-size: 18px;
     font-weight: 700;
-    padding-left: 11px;
-`;
+    color: #000000;
+    margin-left: 20px;
+`;

src/components/home/Main/index.tsx

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

src/components/home/Main/style.ts

@@ -0,0 +1 @@
+import styled from "styled-components";

src/components/routers/index.tsx

@@ -2,12 +2,14 @@ import React from "react";
 import { Route, Routes } from "react-router-dom";
 import Sign from "src/pages/auth/page";
 import Notfound from "src/components/common/notfound";
+import MainPage from "src/pages/Main/page";
 
 const Routers = () => {
     return (
         <Routes>
             <Route path="/sign" element={<Sign />} />
             <Route path="*" element={<Notfound />} />
+            <Route path="/main" element={<MainPage />} />
         </Routes>
     )
 }

src/pages/Main/page.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import MainComponents from "src/components/home/Main/index";
+
+const Page = () => {
+    return (
+        <MainComponents />
+    )
+}
+
+export default Page;

src/types/profile/profile.type.ts

@@ -1,13 +1,14 @@
 export interface profileType {
-    email : string,
-    name : string,
-    password : string,
-    stdId : string,
-    room : string,
-    phoneNum : string,
-    gender : string,
-    userRole : string,
-    isChecked : false,
-    checkedDate : string
-
+    data: {
+        email : string,
+        name : string,
+        password : string,
+        stdId : string,
+        room : string,
+        phoneNum : string,
+        gender : string,
+        userRole : string,
+        isChecked : false,
+        checkedDate : string
+    }
 }