Merge pull request #70 from nbcamp-a3/feature/style

style: 메인 페이지 스타일 수정
nbcamp-a3 · Nov 27, 2023 · df01c2f · df01c2f
2 parents b73eb66 + c8b92e0
commit df01c2f
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 40 deletions.
diff --git a/src/components/Headermodal/style.js b/src/components/Headermodal/style.js
@@ -42,6 +42,7 @@ export const StUserInfo = styled.div`
   img {
     margin-top: 30px;
     align-self: flex-start;
+    border: 1px solid #eee;
 
     width: 20%;
     height: 50%;

diff --git a/src/components/Home/ContentContainer.jsx b/src/components/Home/ContentContainer.jsx
@@ -25,7 +25,7 @@ export default function ContentContainer() {
       .then((data) => {
         dispatch(setBoards(data));
       });
-  }, []);
+  }, [dispatch]);
 
   const sliced = boards.slice(0, 4);
 

diff --git a/src/components/Home/MainContent.jsx b/src/components/Home/MainContent.jsx
@@ -1,5 +1,10 @@
 import React, { useEffect } from 'react';
-import { StEditContentBox, StMainContent } from './style';
+import {
+  StEditContentBox,
+  StMainContent,
+  StMainImageBox,
+  StMainInfoBox,
+} from './style';
 import { useSelector } from 'react-redux';
 import { useState } from 'react';
 import { useNavigate } from 'react-router';
@@ -11,12 +16,10 @@ export default function MainContent() {
 
   useEffect(() => {
     const randomNum1 = Math.floor(Math.random() * boards.length);
-
     const filtered = boards.filter((item, index) => {
       return randomNum1 === index;
     });
     setRandomData(filtered);
-    console.log('filtered:', filtered);
   }, [boards]);
 
   return (
@@ -29,17 +32,15 @@ export default function MainContent() {
               navigate(`/boards/${item.id}`);
             }}
           >
-            <div>
-              <div>
-                <img src={item.img} alt="이미지" />
-              </div>
-              <div>
-                <h2>{item.title}</h2>
-                <StEditContentBox
-                  dangerouslySetInnerHTML={{ __html: item.content }}
-                ></StEditContentBox>
-              </div>
-            </div>
+            <StMainImageBox>
+              <img src={item.img} alt="이미지" />
+            </StMainImageBox>
+            <StMainInfoBox>
+              <h2>{item.title}</h2>
+              <StEditContentBox
+                dangerouslySetInnerHTML={{ __html: item.content }}
+              ></StEditContentBox>
+            </StMainInfoBox>
           </StMainContent>
         );
       })}

diff --git a/src/components/Home/style.js b/src/components/Home/style.js
@@ -7,9 +7,9 @@ export const StHomeContainer = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding-left: 30px;
-  padding-right: 30px;
+  padding: 30px;
   height: 100%;
+  margin-bottom: 200px;
 `;
 
 export const StCommentBtnBox = styled.div`
@@ -41,56 +41,77 @@ export const StGoToListBtn = styled.button`
   }
 `;
 export const StMainContent = styled.div`
-  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: stretch;
+  /* position: relative;
   width: 100%;
-  height: 150%;
+  height: 100%;
   background-color: #f9f9f9;
-  margin-bottom: 200px;
   border-radius: 20px;
   display: flex;
   align-items: center;
-  padding: 30px;
+  padding: 30px; */
+  padding: 2rem;
+  width: 100%;
+  background-color: #f9f9f9;
+  border-radius: 20px;
   cursor: pointer;
   transition: 0.4s;
+  margin-bottom: 3rem;
   &:hover {
     background-color: #edebeb;
   }
 
   & > div {
-    display: flex;
-
     @media screen and (max-width: 1200px) {
       display: flex;
-      flex-direction: column-reverse;
+      flex-direction: column;
       align-items: center;
       justify-content: center;
     }
     h2 {
       font-size: 40px;
-      margin: 30px;
+      margin: 30px 0;
       font-weight: 800;
     }
   }
 
-  img {
-    width: 600px;
-    height: 600px;
+  /* div > img {
+    width: 400px;
+    height: 400px;
     border-radius: 20px;
-  }
-
-  p {
-    margin-top: 100px;
-    margin-left: 30px;
-  }
+  } */
 
   @media screen and (max-width: 1200px) {
     width: 100%;
     height: 100%;
     display: flex;
     justify-content: center;
+    margin-bottom: 100px;
+
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    align-items: center;
   }
 `;
 
+export const StMainImageBox = styled.div`
+  width: 40%;
+  text-align: center;
+
+  img {
+    width: 350px;
+    height: 350px;
+    border-radius: 20px;
+  }
+`;
+
+export const StMainInfoBox = styled.div`
+  width: 60%;
+`;
+
 export const StContentContainer = styled.div`
   display: grid;
   grid-template-columns: repeat(2, 50%);
@@ -104,7 +125,7 @@ export const StContentContainer = styled.div`
 
 export const StContentBox = styled.div`
   width: 600px;
-  height: 750px;
+  height: 800px;
   justify-self: center;
   align-self: center;
   border-radius: 20px;
@@ -117,7 +138,7 @@ export const StContentBox = styled.div`
   cursor: pointer;
   transition: 0.4s;
   display: flex;
-
+  height: 100%;
   /* -webkit-line-clamp: 4;
   -webkit-box-orient: vertical; */
 
@@ -132,6 +153,13 @@ export const StContentBox = styled.div`
     padding: 30px;
   }
 
+  h2 {
+    font-size: 40px;
+    color: #333;
+    margin: 30px;
+    font-weight: 800;
+  }
+
   & > div {
     color: #333;
     margin: 30px;
@@ -159,14 +187,14 @@ export const StPtag = styled.p`
 `;
 
 export const StEditContentBox = styled.div`
-  word-break: break-all;
+  /* word-break: break-all;
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 7;
-  text-align: justify;
   h2 {
     font-size: 1rem !important;
+    margin: 0 !important;
   }
 `;
 

diff --git a/src/config/firebase.js b/src/config/firebase.js
@@ -29,7 +29,6 @@ provider.setCustomParameters({ prompt: 'select_account' });
 export const githubLogin = async () => {
   return signInWithPopup(auth, provider)
     .then((result) => {
-      console.log('login successful.');
       const user = result.user;
       return user;
     })
@@ -39,7 +38,6 @@ export const githubLogin = async () => {
 export const logout = async () => {
   return signOut(auth)
     .then(() => {
-      console.log('Sign-out successful.');
       return null;
     })
     .catch(console.error);