[FIX] 마이페이지 뷰 구성 방식 수정 (#32)

job1/src/Main/NavBar/NavBar.css

@@ -1,73 +1,99 @@
-.nav-container{
-    top: 0;
-    left: 0;
-    width: calc(100% - 20%); /*반응형 수정할 수도 있어서 calc 사용*/
-    height: 4.6875rem;
-    flex-shrink: 0;
-    justify-content: space-between;
-    display: flex;
-    align-items: center;
-    padding-left: 10%;
-    padding-right: 10%;
+.nav-container {
+  top: 0;
+  left: 0;
+  width: calc(100% - 20%); /*반응형 수정할 수도 있어서 calc 사용*/
+  height: 4.6875rem;
+  flex-shrink: 0;
+  justify-content: space-between;
+  display: flex;
+  align-items: center;
+  padding-left: 10%;
+  padding-right: 10%;
 }
 
-.navitems-container{
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    gap: 4.375rem;
+.navitems-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 4.375rem;
 }
 
-.navmenus-list{
-    margin: 2rem;
-    padding: 1rem;
-    text-decoration: none;
-    color: #000;
-    text-align: center;
-    font-feature-settings: 'clig' off, 'liga' off;
-    font-family: DM Sans;
-    font-size: 1.125rem;
-    font-style: normal;
-    font-weight: 400;
+.navmenus-list {
+  margin: 2rem;
+  padding: 1rem;
+  text-decoration: none;
+  color: #000;
+  text-align: center;
+  font-feature-settings: "clig" off, "liga" off;
+  font-family: DM Sans;
+  font-size: 1.125rem;
+  font-style: normal;
+  font-weight: 400;
 }
-.navmenus-list1{ /*활성화된 경우*/
-    margin: 2rem;
-    padding: 1rem;
-    text-decoration: none;
-    color: #000;
-    background: #E4EEE3;
-    border-radius: 2rem;
-    text-align: center;
-    font-feature-settings: 'clig' off, 'liga' off;
-    font-family: DM Sans;
-    font-size: 1.125rem;
-    font-style: normal;
-    font-weight: 400;
+.navmenus-list1 {
+  /*활성화된 경우*/
+  margin: 2rem;
+  padding: 1rem;
+  text-decoration: none;
+  color: #000;
+  background: #e4eee3;
+  border-radius: 2rem;
+  text-align: center;
+  font-feature-settings: "clig" off, "liga" off;
+  font-family: DM Sans;
+  font-size: 1.125rem;
+  font-style: normal;
+  font-weight: 400;
 }
 
-.navuser-container{
-    display: flex;
-    justify-content: space-between;
+.navuser-container {
+  display: flex;
+  justify-content: space-between;
 }
 
-.navuser-list{
-    padding: 1rem;
+.navuser-list {
+  padding: 1rem;
 }
 
-#nav-login{
-    width: 4rem;
-    height: 1em;
-    border-radius: 2rem;
-    background: var(--my-green, #31892F);
-    text-decoration: none;
-    color: #FFF;
-    text-align: center;
-    font-family: DM Sans;
-    font-size: 1rem;
-    font-style: normal;
-    font-weight: 700;
+#nav-login {
+  width: 4rem;
+  height: 1em;
+  border-radius: 2rem;
+  background: var(--my-green, #31892f);
+  text-decoration: none;
+  color: #fff;
+  text-align: center;
+  font-family: DM Sans;
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 700;
+
+  /*임시 설정*/
+  display: none;
+}
+
+/*임시 설정*/
+#nav-mypage {
+  /* display: none; */
+  display: flex;
+  text-decoration: none;
+  color: #000;
+}
+
+#user-circle {
+  margin-top: 0.2rem;
+  margin-right: 0.5rem;
+}
+
+.user-name {
+  font-family: DM Sans;
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 1.5rem; /* 150% */
 }
 
-#nav-mypage{
-    display: none;
-}
+#user-sir {
+  color: #727272;
+  margin-left: 0.5rem;
+}

job1/src/Main/NavBar/NavBar.js

@@ -50,11 +50,18 @@ function NavBar() {
         >
           로그인
         </Link>
-        <div className="navuser-list" id="nav-mypage">
-          <Link onClick={() => setNav(0)} to={"/mypage"}>
-            마이페이지
-          </Link>
-        </div>
+        <Link
+          onClick={() => setNav(0)}
+          className="navuser-list"
+          id="nav-mypage"
+          to="/mypage"
+        >
+          <i class="far fa-user-circle" id="user-circle"></i>
+          <div className="user-name">홍길동</div>
+          <div className="user-name" id="user-sir">
+            님
+          </div>
+        </Link>
       </div>
     </div>
   );

job1/src/View/MyPage.js

@@ -4,19 +4,67 @@ import MoreInfo from "../Main/MoreInfo";
 import styled from "styled-components";
 import { Routes, Route } from "react-router-dom";
 import MyPageBoard from "../Component/MyPageBoard";
+import { useState } from "react";
 
 function MyPage() {
+  const [option, setOption] = useState("posts");
+
   return (
     <div>
       <Search />
-      <Routes>
-        <Route path="/posts" element={<MyPageBoard option="posts" />} />
-        <Route path="/comments" element={<MyPageBoard option="comments" />} />
-        <Route path="/scrap" element={<MyPageBoard option="scrap" />} />
-      </Routes>
+      <OptionContainer>
+        <Option onClick={() => setOption("posts")} option={option === "posts"}>
+          ✏️ 내가 쓴 글
+        </Option>
+        <Option
+          onClick={() => setOption("comments")}
+          option={option === "comments"}
+        >
+          💬 댓글 단 글
+        </Option>
+        <Option onClick={() => setOption("scrap")} option={option === "scrap"}>
+          ⭐ 스크랩
+        </Option>
+      </OptionContainer>
+
+      {option === "scrap" ? (
+        <>
+          <Preview typeTitle="새 소식" type="news" view="mypage" />
+          <Preview typeTitle="법률" type="laws" view="mypage" />
+          <Preview typeTitle="게시판" type="community" view="mypage" />
+        </>
+      ) : (
+        <Preview typeTitle="게시판" type="community" view="mypage" />
+      )}
+
       <MoreInfo />
     </div>
   );
 }
 
 export default MyPage;
+
+const OptionContainer = styled.div`
+  display: flex;
+  justify-content: center;
+`;
+
+const Option = styled.div`
+  width: 10.625rem;
+  height: 3.75rem;
+  flex-shrink: 0;
+
+  border-radius: 3.125rem;
+  border: 1px solid #d9d9d9;
+  background: ${({ option }) => (option ? "#D9D9D9" : "#fff")};
+
+  color: #000;
+  text-align: center;
+  font-family: DM Sans;
+  font-size: 1.25rem;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 3rem; /* 120% */
+
+  margin: 2rem 1rem;
+`;