From a7a0a9e2bfde2bad7bb08f8c0e3ae1e4356f121c Mon Sep 17 00:00:00 2001 From: scseong Date: Mon, 27 Nov 2023 11:25:49 +0900 Subject: [PATCH] =?UTF-8?q?style:=20=EB=A9=94=EC=9D=B8=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=88=98?= =?UTF-8?q?=EC=A0=95=20(#67)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Headermodal/style.js | 1 + src/components/Home/ContentContainer.jsx | 3 +- src/components/Home/MainContent.jsx | 29 +++++----- src/components/Home/style.js | 73 ++++++++++++++++-------- src/config/firebase.js | 2 - 5 files changed, 65 insertions(+), 43 deletions(-) diff --git a/src/components/Headermodal/style.js b/src/components/Headermodal/style.js index 1651d8c..ff9cabd 100644 --- 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 index 174c97b..c5b40c3 100644 --- a/src/components/Home/ContentContainer.jsx +++ b/src/components/Home/ContentContainer.jsx @@ -25,10 +25,9 @@ export default function ContentContainer() { .then((data) => { dispatch(setBoards(data)); }); - }, []); + }, [dispatch]); const sliced = boards.slice(0, 4); - console.log(sliced); return ( diff --git a/src/components/Home/MainContent.jsx b/src/components/Home/MainContent.jsx index 06f560b..43d0026 100644 --- 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}`); }} > -
-
- 이미지 -
-
-

{item.title}

- -
-
+ + 이미지 + + +

{item.title}

+ + ); })} diff --git a/src/components/Home/style.js b/src/components/Home/style.js index 92287b1..a94ffec 100644 --- 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%); @@ -103,8 +124,6 @@ export const StContentContainer = styled.div` `; export const StContentBox = styled.div` - width: 600px; - height: 800px; justify-self: center; align-self: center; border-radius: 20px; @@ -117,7 +136,7 @@ export const StContentBox = styled.div` cursor: pointer; transition: 0.4s; display: flex; - + height: 100%; /* -webkit-line-clamp: 4; -webkit-box-orient: vertical; */ @@ -132,7 +151,7 @@ export const StContentBox = styled.div` padding: 30px; } - h2 { + & > h2 { font-size: 40px; color: #333; margin: 30px; @@ -166,12 +185,16 @@ 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; + -webkit-line-clamp: 7; */ + height: 300px; + word-wrap: break-word; + overflow: hidden; h2 { font-size: 1rem !important; + margin: 0 !important; } `; diff --git a/src/config/firebase.js b/src/config/firebase.js index 69fb40d..09ae544 100644 --- 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);