Merge pull request #97 from LikeLionHGU/mang_#17/profile

🎨 Profile page 하다가 말음

src/App.js

@@ -10,6 +10,8 @@ import Board from "./pages/Board";
 import Setting from "./pages/project/manager/Setting";
 import Galpi from "./pages/project/manager/Galpi";
 import Approval from "./pages/project/manager/Approval";
+import Profile from "./pages/Profile";
+
 import { RecoilRoot } from "recoil";
 import BoardDetail from "./pages/BoardDetail";
 
@@ -30,6 +32,7 @@ function App() {
           <Route path="/mypage/manage" element={<Setting />} />
           <Route path="/approval" element={<Approval />} />
           <Route path="/boardDetail/" element={<BoardDetail/>} />
+          <Route path="/profile" element={<Profile/>}/>
         </Routes>
       </BrowserRouter>
     </RecoilRoot>

src/components/Slide.jsx

@@ -110,7 +110,13 @@ export default function Slide({ mode, data }) {
   return (
     <div
       className="slide-container"
-      style={mode === 1 ? { height: "345px" } : { height: "380px" }}
+      style={
+        mode === 1 
+        ? { height: "345px" } 
+        : mode === 2 
+        ? { height: "380px", backgroundColor: 'rgba(0, 0, 0, 0)', zIndex : 10} // 100% 투명도
+        : { height: "380px" }
+      }
     >
       {mode === 1 ? (
         // <div className="arrow"></div>

src/pages/Mypage.jsx

@@ -76,20 +76,20 @@ export default function Mypage() {
           <img className="wall-pape-cover" src={wallpaper} alt="img" />
           <div className="overlay-content">
             <h1>나의 프로필</h1>
-            <div className="profile-section">
-              <img className="profile-cover" src={profile} alt="img" />
+            <div className="my-page-profile-section">
+              <img className="my-page-profile-cover" src={profile} alt="img" />
             </div>
           </div>
         </div>
 
-        <div className="profile-details">
-          <div className="profile-details-exp">
-            <div className="profile-details-edit">
+        <div className="my-page-profile-details">
+          <div className="my-page-profile-details-exp">
+            <div className="my-page-profile-details-edit">
               <div>{userInfo.name}</div>
               <button>
                 <div>
                   <img
-                    className="profile-edit"
+                    className="my-page-profile-edit"
                     src={EditImg}
                     alt="profile/edit"
                     onClick={() => {
@@ -103,16 +103,16 @@ export default function Mypage() {
             <div>이메일</div>
             <div>{userInfo.email}</div>
           </div>
-          <div className="profile-details-count">
-            <div className="books-progress-count">
+          <div className="my-page-profile-details-count">
+            <div className="my-page-books-progress-count">
               <div>진행 중인 책</div>
               <div>{userInfo.progressProjects}권</div>
             </div>
-            <div className="books-completed-count">
+            <div className="my-page-books-completed-count">
               <div>완결된 책</div>
               <div>{userInfo.finishedProjects}권</div>
             </div>
-            <div className="books-subscribe-count">
+            <div className="my-page-books-subscribe-count">
               <div>구독자</div>
               <div>{userInfo.subscribeUserCounts}명</div>
             </div>
@@ -122,7 +122,6 @@ export default function Mypage() {
         <div className="my-book-lists">
           <div className="books-progress">
             <h3>진행 중인 책</h3>
-
             <Slide mode={2} data={userInfo.progressProjectList || []} />
           </div>
           <div className="books-completed">

src/pages/Profile.jsx

@@ -1,5 +1,91 @@
 // 상대방 프로필 보이는 페이지
+import React, { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+import EditImg from "../imgs/edit.svg";
+import ImgNone from "../imgs/img_none.svg";
+import Header from "../components/Header";
+import Slide from "../components/Slide";
+import axios from "axios";
+
+import "../styles/profile.scss";
+
 export default function Profile() {
-    return <>Hi</>;
-  }
+  const navigate = useNavigate();
+  const [wallpaper, setWallPaper] = useState(`${ImgNone}`);
+  const [profile, setProFile] = useState(`${ImgNone}`);
+  const [userInfo, setUserInfo] = useState([]);
+  const [isSubscribed, setIsSubscribed] = useState(false);
+
+  const handleSubscribe = () => {
+    setIsSubscribed(!isSubscribed);
+  };
+
+  return(
+    <div className="profile-page">
+      <Header mode={2} />
+    <div className="profile-container">
+      <div className="profile-wall-paper-section">
+        <img className="profile-wall-pape-cover" src={wallpaper} alt="img" />
+
+        <div className="profile-img-section">
+              <img className="profile-img-cover" src={profile} alt="img" />
+        </div>
+      </div>
+
+
+      <div className="profile-details">
+          <div className="profile-details-exp">
+            <div className="profile-details-edit">
+              <div>{userInfo.name}</div>
+            </div>
+            <div>{userInfo.userOneliner}</div>
+            <div>이메일</div>
+            <div>{userInfo.email}</div>
+          </div>
+          <div className="profile-details-count">
+            <div className="books-progress-count">
+              <div>진행 중인 책</div>
+              <div>{userInfo.progressProjects}권</div>
+            </div>
+            <div className="books-completed-count">
+              <div>완결된 책</div>
+              <div>{userInfo.finishedProjects}권</div>
+            </div>
+            <div className="books-subscribe-count">
+              <div>구독자</div>
+              <div>{userInfo.subscribeUserCounts}명</div>
+            </div>
+          </div>
+
+          <div>
+          <button onClick={handleSubscribe}>
+            {isSubscribed ? '구독중' : '구독하기'}
+          </button>
+          </div>
+
+        </div>
+
+        <div className="profile-book-lists">
+          <div className="profile-book-projects">
+            <div>
+              프로젝트
+            </div>
+            <Slide mode={2} data={userInfo.progressProjectList || []} />
+          </div>
+        </div>
+        </div>
+
+    </div>
+
+
+
+
+
+
+
+
+  )
+
+}
 

src/pages/project/Detail.jsx

@@ -1,4 +1,5 @@
 import Header from "../../components/Header";
+import PeopleSlide from "../../components/PeopleSlide";
 
 import TestImg from "../../imgs/test5.png";
 import LikeImg from "../../imgs/like.svg";
@@ -325,6 +326,10 @@ export default function Detail() {
             </div>
           </div>
         </div>
+        <div id="about-the-writer">
+          <div className="detail-title">작가 소개</div>
+              {/* <PeopleSlide/> */}
+        </div>
         <div id="detail-bookinfo">
           <div className="detail-title">책 소개</div>
           <div id="detail-contents">{project.information}</div>

src/styles/detail.css

@@ -8,6 +8,8 @@
   flex-direction: column;
   align-items: center;
 
+  margin-bottom: 80px;
+
   /* padding: 0 9.17vw; */
 
 }
@@ -48,6 +50,7 @@
 
 #detail-img-cover {
   position: relative;
+  object-fit: cover;
   z-index: 1;
   width: 11.11vw;
   height: 220px;
@@ -130,6 +133,11 @@
   cursor: pointer;
 }
 
+#about-the-writer{
+  width: 100%;
+  margin-top: 80px;
+}
+
 #detail-bookinfo {
   width: 100%;
   margin-top: 80px;

src/styles/mypage.css

@@ -10,7 +10,7 @@
 
 .wall-paper-section {
   width: 100%;
-  height: 400px;
+  height: 362px;
   overflow: hidden;
   padding: 0 !important;
   margin-bottom: 100px;
@@ -28,7 +28,6 @@
   position: absolute;
   top: 70%;
   text-align: center;
-
   z-index: 10;
   color: var(--black);
   padding: 0 9.17vw;
@@ -67,6 +66,10 @@
   text-align: left;
 }
 
+.profile-details-exp div {
+  margin-bottom: 10px;
+}
+
 .profile-details-edit {
   width: 40vw;
   display: flex;
@@ -108,4 +111,4 @@
 
 .my-book-lists {
   width: 100%;
-}
+}/*# sourceMappingURL=mypage.css.map */

src/styles/mypage.scss

@@ -13,7 +13,7 @@
 
 .wall-paper-section {
   width: 100%;
-  height: 400px;
+  height: 362px;
   overflow: hidden;
   padding: 0 !important; // 패딩을 확실하게 제거하기 위해 !important 사용
   margin-bottom: 100px;

src/styles/mypageedit.css

@@ -10,6 +10,8 @@
 
 .edit-wall-paper-section {
   width: 100%;
+  height: 362px;
+  overflow: hidden;
   padding: 0 !important;
   margin-bottom: 100px;
   position: relative;

src/styles/mypageedit.scss

@@ -13,6 +13,8 @@
 
 .edit-wall-paper-section {
     width: 100%;
+    height: 362px;
+    overflow: hidden;
     padding: 0 !important;  // 패딩을 확실하게 제거하기 위해 !important 사용
     margin-bottom: 100px;
     position: relative;

src/styles/profile.css

@@ -0,0 +1,40 @@
+.profile-page {
+  height: 100vh;
+}
+
+.profile-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.profile-wall-paper-section {
+  width: 100%;
+  height: 362px;
+  overflow: hidden;
+  padding: 0 !important;
+  position: relative;
+}
+
+.profile-wall-pape-cover {
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+
+.profile-img-section {
+  top: 10px;
+  width: 100px;
+  height: 100px;
+  z-index: 10;
+  position: relative;
+  margin-top: 20px;
+}
+
+.profile-img-cover {
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+}/*# sourceMappingURL=profile.css.map */

src/styles/profile.scss

@@ -0,0 +1,38 @@
+.profile-page{
+    height: 100vh;
+}
+
+.profile-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.profile-wall-paper-section {
+    width: 100%;
+    height: 362px;
+    overflow: hidden;
+    padding: 0 !important; // 패딩을 확실하게 제거하기 위해 !important 사용
+    position: relative;
+}
+
+.profile-wall-pape-cover {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.profile-img-section {
+    top: 10px; // 필요한 위치에 맞게 조정
+    width: 100px;
+    height: 100px;
+    z-index: 10;
+    position: relative;
+    margin-top: 20px; // 여백 추가
+}
+
+.profile-img-cover {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}