프론트엔드 최신버전

frontend/package.json

@@ -51,7 +51,8 @@
       "last 1 chrome version",
       "last 1 firefox version",
       "last 1 safari version"
-    ]
+    ],
+    "proxy" : "http://localhost:8080"
   },
   "devDependencies": {
     "@types/navermaps": "^3.7.5",

frontend/src/App.css

@@ -4,6 +4,8 @@
   box-sizing: border-box;
 }
 
+
+
 .a11y-hidden {
   position: absolute;
   width: 1px;

frontend/src/App.tsx

@@ -15,22 +15,3 @@ export default function App() {
   );
 }
 
-// export default function App() {
-//   return <MainPage />;
-//   /*    const [hello, setHello] = useState('')
-
-// export default function App() {
-//    const [hello, setHello] = useState('')
-
-//     useEffect(() => {
-//         axios.get('/api/hello')
-//         .then(response => setHello(response.data))
-//         .catch(error => console.log(error))
-//     }, []);
-
-//     return (
-//         <div>
-//             백엔드에서 가져온 데이터입니다 : {hello}
-//         </div>
-//     ); */
-// }

frontend/src/Layout/headerLayout/HeaderLayout.tsx

@@ -2,16 +2,15 @@ import { Location, Outlet, useLocation, useNavigate } from "react-router";
 
 import style from "./index.module.css";
 import { useEffect, useState } from "react";
-
-
-
+import { createMemberSlice } from "../../store/bound/slice/member";
+import { useToastStore } from "../../store/ui/toast";
 
 const NavList = ({
   list,
-  location
+  location,
 }: {
-  list: { url: string; name: string; },
-  location:Location<any> 
+  list: { url: string; name: string };
+  location: Location<any>;
 }) => {
   const navigate = useNavigate();
   const [active, setActive] = useState<boolean>(false);
@@ -37,38 +36,61 @@ export default function HeaderLayout() {
 
   const navigate = useNavigate();
   const location = useLocation();
+  const user = createMemberSlice((state) => state.consultingMember);
+  const user_logout = createMemberSlice((state) => state.resetMember);
+
+  const { addToast } = useToastStore();
 
+  const logout = () => {
+    user_logout();
+    addToast("😃로그아웃이 정상처리되었습니다.");
+    navigate("/");
+  };
 
   const navList = [
     {
-      url: "/",
-      name: "Home",
+      url: "/main",
+      name: "Main",
     },
-    /* {
-      url: "/community",
-      name: "community",
-    }, */
   ];
   return (
     <>
       <header
         className={location.pathname === "/" ? style.overmain : style.header}
       >
         <div className={style.wrap}>
-          <div className={style.main}>
-            <button
-              className={style.logo}
-              onClick={() => navigate("/")}
-            ></button>
-            <nav>
-              {navList.map((list) => (
-                <NavList list={list} location={location} key={list.name}/>
-              ))}
-            </nav>
+          <div className={style.container}>
+            <div className={style.main}>
+              <button className={style.logo} onClick={() => navigate("/main")}>
+                <div className={style.logo_text}>
+                  <p className={style.logo_line_one}>
+                    <span style={{ color: "#20c997" }}>DOR</span>AN
+                  </p>
+                  <p className={style.logo_line_two}>
+                    DOR<span style={{ color: "#20c997" }}>AN</span>
+                  </p>
+                </div>
+              </button>
+              <nav>
+                {navList.map((list) => (
+                  <NavList list={list} location={location} key={list.name} />
+                ))}
+              </nav>
+            </div>
+            <div>
+              <button className={style.myself}>
+                <span className={style.name}>{user?.name}</span>님 반갑습니다!
+              </button>
+              <button
+                className={style.logout}
+                onClick={() => {
+                  logout();
+                }}
+              >
+                로그아웃
+              </button>
+            </div>
           </div>
-          <button className={style.myself} onClick={() => navigate("/my")}>
-            000님
-          </button>
         </div>
       </header>
       <main>

frontend/src/Layout/headerLayout/index.module.css

@@ -1,6 +1,12 @@
 .header {
+  width: 100%;
+  z-index: 999;
+  top: 0;
+  position: fixed;
   height: 56px;
   box-shadow: 0px 0px 10px 0px gray;
+  left: 0;
+  background: #fff;
 }
 
 .overmain {
@@ -22,9 +28,16 @@
   height: 100%;
   margin: 0 auto;
   display: flex;
+  align-items: center;
+}
+
+.container {
+  width: 100%;
+  display: flex;
   justify-content: space-between;
   align-items: center;
 }
+
 .main {
   display: flex;
   align-items: center;
@@ -42,20 +55,39 @@
 }
 .main nav button:hover,
 .main nav button.active {
-  color: var(--color-main);
+  color: #20c997;
 }
 .logo {
   cursor: pointer;
   border: none;
   width: 56px;
   height: 56px;
-  background: url("../../../public/logo.png");
-  background-position: center;
-  background-size: cover;
+  background-color: #fff;
 }
 
-.myself {
+.logo_text {
+  font-size: 16px;
+  font-family: "AppleSDGothic";
+  font-weight: 900;
+  font-style: italic;
+  color: #000;
+}
+
+.name{
+  color: rgb(32, 201, 151);
+}
+
+.myself, .logout {
   background-color: inherit;
   border: none;
   cursor: pointer;
 }
+
+.myself{
+  margin-right: 20px;
+  cursor: auto;
+}
+
+.logout:hover{
+  color: red;
+}

frontend/src/Layout/userLayout/UserLayout.tsx

@@ -13,16 +13,20 @@ export default function UserLayout() {
     if (location.pathname === "/signup") {
       setTitle("계정 생성");
     }
-    if (location.pathname === "/help") {
-      setTitle("계정 찾기");
-    }
   }, []);
   return (
     <div className={style.bg}>
-      <Container width={"var(--length-width)"} height={"70vh"}>
+      <Container width={"var(--length-width)"} height={"90vh"}>
         <div className={style.row}>
           <div className={style.titleWrap}>
-            <div className={style.logo}></div>
+            <div className={style.logo}>
+              <p className={style.logo_line_one}>
+                <span style={{ color: "#20c997" }}>DOR</span>AN
+              </p>
+              <p className={style.logo_line_two}>
+                DOR<span style={{ color: "#20c997" }}>AN</span>
+              </p>
+            </div>
             <div className={style.subTitle}>{title}</div>
           </div>
           <div className={style.contentWrap}>

frontend/src/Layout/userLayout/index.module.css

@@ -15,15 +15,28 @@
   width: 100%;
   height: 100%;
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
   font-size: 40px;
+  padding-bottom: 40px;
 }
-.logo {
-  width: 150px;
-  height: 150px;
-  background: url("../../../public/logo.png");
-  background-size: cover;
+.logo{
+  font-size: 92px;
+  font-family: "AppleSDGothic";
+  font-weight: 900;
+  font-style: italic;
+  color: #000;
+}
+
+.logo_line_two{
+  margin-left: 30px;
+}
+
+.subTitle{
+  font-family: "AppleSDGothic";
+  font-weight: 900;
+  color: #474646;
 }
 
 .contentWrap {

frontend/src/assets/fonts/font.css

@@ -1,3 +1,6 @@
+/* 
+  NotoSans KR
+*/
 @font-face{
   font-family: "NotoSansKR";
   src: url("./NotoSansKR-Thin.ttf") format("ttf");
@@ -59,4 +62,49 @@
   src: url("./NotoSansKR-Black.ttf") format("ttf");
   font-weight: 900;
   font-style: normal;
+}
+
+/* 
+  Apple font
+*/
+@font-face{
+  font-family: "AppleSDGothic";
+  src: url("./AppleSDGothicNeoH.ttf") format("ttf");
+  font-weight: 900;
+  font-style: normal;
+}
+
+@font-face{
+  font-family: "AppleSDGothic";
+  src: url("./AppleSDGothicNeoEB.ttf") format("ttf");
+  font-weight: 800;
+  font-style: normal;
+}
+
+@font-face{
+  font-family: "AppleSDGothic";
+  src: url("./AppleSDGothicNeoSB.ttf") format("ttf");
+  font-weight: 700;
+  font-style: normal;
+}
+
+@font-face{
+  font-family: "AppleSDGothic";
+  src: url("./AppleSDGothicNeoM.ttf") format("ttf");
+  font-weight: 600;
+  font-style: normal;
+}
+
+@font-face{
+  font-family: "AppleSDGothic";
+  src: url("./AppleSDGothicNeoL.ttf") format("ttf");
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face{
+  font-family: "AppleSDGothic";
+  src: url("./AppleSDGothicNeoT.ttf") format("ttf");
+  font-weight: 300;
+  font-style: normal;
 }

frontend/src/components/ItemPage/Comment/Comment.tsx

@@ -0,0 +1,22 @@
+import dog2 from "../../../assets/dog2.png";
+import Profile from "../../commons/profile/Profile";
+import style from "./comment.module.css"
+
+const COMMENTS = [
+  {
+    id: "9999",
+    profile: dog2,
+    comment: `댓글입니다 안녕하세요`,
+  },
+];
+
+export default function Comment() {
+  return (
+    <div className={style.wrap}>
+      <Profile />
+      <div className={style.comment_container}>
+        <p className={style.comment}>{COMMENTS[0].comment}</p>
+      </div>
+    </div>
+  );
+}

frontend/src/components/ItemPage/Comment/comment.module.css

@@ -0,0 +1,11 @@
+.wrap {
+  margin-top: 20px;
+  height: 500px;
+  overflow: scroll;
+}
+
+.comment_container {
+  margin-top: 10px;
+  border-bottom: 1px solid #c2c2c2;
+  padding-bottom: 10px;
+}