[Feat] 반응형 웹페이지 제작 및 버그 수정

width height에 따라 반응형으로 제작하기 디자인 다듬기 하트 기능 수정하기
Likelion12-KNU · Jun 2, 2024 · b1a36af · b1a36af
1 parent ce68100
commit b1a36af
Show file tree

Hide file tree

Showing 16 changed files with 671 additions and 227 deletions.
diff --git a/src/App.css b/src/App.css
@@ -39,5 +39,10 @@
 
 #main_mapper {
   display: flex;
-
+  width: 102%;
+  height: 100%;
+}
+.container{
+  width: 100%;
+  height: 100%;
 }
diff --git a/src/PostList.css b/src/PostList.css
@@ -1,10 +1,12 @@
 #PostList_div{
     width: 100%;
-    height: 80vh;
+    height: 100%;
    overflow-y: auto;
+   overflow-x: hidden;
    border-right: 1px solid#3e3e3e;
    border-left: 1px solid#3e3e3e;
    border-bottom: 1px solid#3e3e3e;
+
 }
 #PostList_div::-webkit-scrollbar{
 
@@ -23,7 +25,7 @@
     /* z-index: 1000; */
 }
 #post-container{
-  
+
   height: 70%;
   overflow-y: auto;
   background-color: antiquewhite;

diff --git a/public/apartment.svg → src/assets/apartment.svg b/public/apartment.svg → src/assets/apartment.svg
diff --git a/src/components/CommentWrite.component.jsx b/src/components/CommentWrite.component.jsx
@@ -47,11 +47,11 @@ export default function CommentWrite({ _id, onCommentAddedListener }) {
   return (
     <div className="comment-write-wrapper">
       <p>새 댓글 쓰기</p>
-      <Space.Compact style={{ width: "100%" }}>
-        <Input style={{ width: '20%' }} placeholder="닉네임" value={commentForm.nickname} onChange={(e) => setCommentForm({ ...commentForm, nickname: e.target.value })}/>
-        <Input style={{ width: '80%' }} placeholder="댓글을 입력하세요" value={commentForm.comment} onChange={(e) => setCommentForm({ ...commentForm, comment: e.target.value })}/>
+      <Space.Compact style={{width: "100%" ,height:'25px'}}>
+        <Input style={{width: '20%' }} placeholder="닉네임" value={commentForm.nickname} onChange={(e) => setCommentForm({ ...commentForm, nickname: e.target.value })}/>
+        <Input style={{width: '80%' }} placeholder="댓글을 입력하세요" value={commentForm.comment} onChange={(e) => setCommentForm({ ...commentForm, comment: e.target.value })}/>
       </Space.Compact>
-      <Button type="default" id="add-comment" onClick={onAddCommentClickListener}>등록</Button>
+      <Button  type="default" id="add-comment" onClick={onAddCommentClickListener}>등록</Button>
     </div>
   )
 }
diff --git a/src/components/Home.component.jsx b/src/components/Home.component.jsx
@@ -13,7 +13,7 @@ export default function HomeComponent() {
   }
 
   return (
-    <section>
+    <section id="section_div">
       <Header sorting={orderBy} onOrderChangedListener={onOrderChangedListener} />
       <ApartmentForm />
       <PostList orderBy={orderBy} page={page} />

diff --git a/src/components/Nav.component.jsx b/src/components/Nav.component.jsx
@@ -1,10 +1,10 @@
 import "../styles/nav.component.css"
-
+import apartment from "../assets/apartment.svg" 
 export default function NavComponent() {
   return (
-    <>
-      <nav>
-        <img src="../../public/apartment.svg"/>
+
+      <nav id="navcomponent_div">
+        <img src={apartment}/>
         <h2>너의 아파트는</h2>
         <h3>멋쟁이사자처럼</h3>
         <h3>야무진친구들</h3>
@@ -19,6 +19,6 @@ export default function NavComponent() {
           <p>이지혜</p>
         </div>
       </nav>
-    </>
+
   );
 }
diff --git a/src/components/PostItem.component.jsx b/src/components/PostItem.component.jsx
@@ -27,17 +27,20 @@ import CommentWrite from "./CommentWrite.component.jsx";
     }
 
     const onPostClickedListener = async () => {
-      if (comments.length === 0) {
+      if(!isCommentClicked){        //댓글창을 여는 경우
         setIsCommentClicked(true)
         const response = await axios.get(`https://apt-api.blbt.app/v1/apartment/${_id}/comments`)
         if (response.status === HttpStatusCode.Ok) {
           setComments(response.data.comments)
         }
-      } else {
-        // 다시 눌러 닫은 경우
+      }
+      else{
         setComments([])
         setIsCommentClicked(false)
       }
+
+
+
     }
 
     const onCommentAddedListener = async () => {
@@ -82,38 +85,41 @@ import CommentWrite from "./CommentWrite.component.jsx";
         </div>
         <p id="apartment-name" onClick={onPostClickedListener}>&quot;{apartmentName}&quot;</p>
         <p id="gpt-score">평가: <span>{gptScore}점</span></p>
-        <div className="like-comment-wrapper">
+        <div className="like-comment-delete-wrapper">
           {
             newIsLiked ? (
-              <div className="icon-text-wrapper" onClick={onLikeClickListener}>
-                <img src={fillHeart} alt="좋아요 취소"/>
+              <div id="like-icon-wrapper" className="icon-text-wrapper" >
+                <img src={fillHeart} alt="좋아요 취소" onClick={onLikeClickListener}/>
                 <p>{newLikeCount}</p>
               </div>
             ) : (
-              <div className="icon-text-wrapper" onClick={onLikeClickListener}>
-                <img src={heart} alt="좋아요 표시"/>
+              <div id="like-icon-wrapper" className="icon-text-wrapper" onClick={onLikeClickListener}>
+                <img src={heart} alt="좋아요 표시" onClick={onLikeClickListener}/>
                 <p>{newLikeCount}</p>
               </div>
             )
           }
-          <div className="icon-text-wrapper" onClick={onPostClickedListener}>
-            <img src={chat} alt="댓글"/>
+          <div id="text-icon-wrapper" className="icon-text-wrapper" >
+            <img src={chat} alt="댓글" onClick={onPostClickedListener}/>
             <p>{commentCount}</p>
           </div>
-          <div style={{flex: 2}}/>
-          <div className="icon-text-wrapper" onClick={showDeleteModal}>
+          {/* <div style={{marginRight:'100px',flex: 2}}/> */}
+          <div id="delete-icon-wrapper" className="icon-text-wrapper" onClick={showDeleteModal}>
             <img src={del} alt="삭제"/>
             <p>삭제</p>
           </div>
         </div>
         <div className="post-comments">
+          <div className="post-comments-list">
           {
             comments.map((comment) => <Comment
               key={comment._id}
               nickname={comment.nickname}
               comment={comment.comment}
               createdAt={comment.createdAt} />)
           }
+          </div>
+
           {
             isCommentClicked ?  <CommentWrite _id={_id} onCommentAddedListener={onCommentAddedListener} /> : <></>
           }

diff --git a/src/index.css b/src/index.css
@@ -1,29 +1,115 @@
-body{
-display: flex;
-height: 100vh;
-justify-content: center;
- background-color: black;
-}
-body::-webkit-scrollbar{
-  width: 0px;
-  background-color: black;
-}
 
-#page_title{
-  position: fixed;
-  left: 80px;
-  top: 80px;
-  color: white;
+
+@media screen and (max-width:400px) {
+  body{
+    display: flex;
+    width: 100%;
+    height: 100vh;
+    justify-content: center;
+    align-items: center;
+     background-color: black;
+    }
+    body::-webkit-scrollbar{
+      width: 0px;
+      background-color: black;
+    }
+    body::-webkit-scrollbar-thumb{
+      width: 0px;
+      background-color: black;
+    }
+
+    #page_title{
+      position: fixed;
+      left: 80px;
+      top: 80px;
+      color: white;
+    }
+    #page_title h1:last-child{
+      color: #B6B6B6;
+    }
+    #root{
+
+
+      width: 102vw;
+      height: 100%;
+      background-color: black;
+
+
+    }
+
 }
-#page_title h1:last-child{
-  color: #B6B6B6;
+
+@media screen and (max-width:770px) {
+  body{
+    display: flex;
+    width: 100vw;
+    height: 100vh;
+    justify-content: center;
+    align-items: center;
+     background-color: black;
+    }
+    body::-webkit-scrollbar{
+      width: 0px;
+      background-color: black;
+    }
+    body::-webkit-scrollbar-thumb{
+      width: 0px;
+      background-color: black;
+    }
+
+    #page_title{
+      position: fixed;
+      left: 80px;
+      top: 80px;
+      color: white;
+    }
+    #page_title h1:last-child{
+      color: #B6B6B6;
+    }
+    #root{
+
+
+      width: 115vw;
+      height: 100%;
+      background-color: black;
+
+
+    }
+
 }
-#root{
-
-  width: 50%;
-  height: 100%;
-  background-color: black;
-
 
+
+
+@media screen and (min-width:770px) {
+  body{
+    display: flex;
+    width: 100%;
+    height: 100vh;
+    justify-content: center;
+     background-color: black;
+    }
+    body::-webkit-scrollbar{
+      width: 0px;
+      background-color: black;
+    }
+
+    #page_title{
+      position: fixed;
+      left: 80px;
+      top: 80px;
+      color: white;
+    }
+    #page_title h1:last-child{
+      color: #B6B6B6;
+    }
+    #root{
+
+      width: 100%;
+      height: 100%;
+      background-color: black;
+
+
+    }
+
 }