Skip to content

Commit

Permalink
[Update]MainPage CSS 수정
Browse files Browse the repository at this point in the history
  • Loading branch information
@ChungO5
ChungO5 committed Aug 4, 2024
1 parent f22110e commit 97774dd
Show file tree
Hide file tree
Showing 6 changed files with 115 additions and 100 deletions.
28 changes: 6 additions & 22 deletions src/components/atoms/AdBlock.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,18 @@ import React from "react";
import styled from "styled-components";

const BlockStyle = styled.div`
box-sizing: border-box;
list-style-type: none;
width: 380px;
height: 300px;
margin: 10px 10px -19px 10px;
height: 350px;
margin: 0 10px 10px;
padding: 10px;
display: inline-block;
border-radius: 10px;
box-shadow: 0 0 0 2px #dfdfdf;
.ad {
margin: 10px auto;
box-sizing: border-box;
display: block;
width: 360px;
height: 280px;
Expand All @@ -24,25 +26,7 @@ const BlockStyle = styled.div`
const AdBlock = () => {
return (
<BlockStyle>
<div className="ad">
<script
async
src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3414009965030523"
crossorigin="anonymous"
></script>
{/* <!-- web1 --> */}
<ins
class="adsbygoogle"
style={{ display: "block" }}
data-ad-client="ca-pub-3414009965030523"
data-ad-slot="7615886042"
data-ad-format="auto"
data-full-width-responsive="true"
></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<div className="ad"></div>
</BlockStyle>
);
};
Expand Down
1 change: 0 additions & 1 deletion src/components/atoms/Logo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import React from "react";
import styled from "styled-components";

const Logoblock = styled.div`
margin: 10px;
position: relative;
width: 80px;
height: 80px;
Expand Down
29 changes: 21 additions & 8 deletions src/components/molecules/GameItem.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,38 +2,49 @@ import React from "react";
import styled from "styled-components";

const GameItemBlock = styled.div`
box-sizing: border-box;
background-color: #fff;
list-style-type: none;
width: 380px;
height: 300px;
height: 350px;
margin: 10px;
display: inline-block;
border-radius: 10px;
padding: 10px;
box-shadow: 0 0 0 2px #ddddff;
cursor: pointer;
text-align: left;
position: relative;
overflow: hidden;
img {
margin: 10px auto;
display: block;
width: 360px;
height: 220px;
height: 260px;
object-fit: cover;
background-color: #dfdfdf;
border-radius: 10px;
color: #000;
transition: all 0.2s linear;
position: relative;
&:hover {
width: 360px;
height: 330px;
top: 0;
}
}
.title {
font-size: 18px;
margin: 0px 10px 5px 10px;
color: #000;
font-weight: bold;
margin: 10px 0;
}
.text {
font-size: 14px;
margin: 0px 0px 10px 10px;
color: #000;
}
&:hover {
box-shadow: 0px 5px 10px 5px rgb(77, 71, 71, 0.2);
}
`;

const GameItem = ({ item }) => {
Expand All @@ -44,8 +55,10 @@ const GameItem = ({ item }) => {
src={item.gameImage || require("../../assets/img/tino.png")}
alt={item.gameName}
/>
<p className="title">{item.gameName}</p>
<p className="text">조회수: {item.viewCount}</p>
<div>
<p className="title">{item.gameName}</p>
<p className="text">조회수: {item.viewCount}</p>
</div>
</GameItemBlock>
);
};
Expand Down
9 changes: 7 additions & 2 deletions src/components/organisms/GameList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,8 +54,13 @@ const GameList = ({ data, isLoading, gameSort, setGameSort }) => {
return <GameItemSkeleton key={i} />;
})
: data.map((item, i) =>
item.gameId === "ad" ? (
<AdBlock />
(i + 1) % 5 === 0 ? (
<>
<Link to={`/game/${item.gameId}`}>
<GameItem key={item.gameId} item={item} />
</Link>
<AdBlock />
</>
) : (
<Link to={`/game/${item.gameId}`}>
<GameItem key={item.gameId} item={item} />
Expand Down
138 changes: 78 additions & 60 deletions src/components/organisms/TopNavigationBar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,18 +27,32 @@ const customStyles = {
};

const TopBar = styled.div`
@media (max-width: 950px) {
width: 900px;
}
width: 100%;
background-color: #5383e8;
height: 100px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 200px;
.space {
flex: 1;
.menu {
display: flex;
justify-content: space-between;
margin: auto;
padding: 0 30px;
@media (max-width: 1200px) {
width: 800px;
}
@media (min-width: 1200px) {
width: 1200px;
}
@media (min-width: 1600px) {
width: 1600px;
}
@media (min-width: 2000px) {
width: 2000px;
}
@media (min-width: 2400px) {
width: 2400px;
}
}
.nav-link-activev {
color: #fff;
Expand All @@ -49,14 +63,16 @@ const TopBar = styled.div`
width: auto;
font-size: 22px;
font-weight: bold;
margin-left: 15px;
}
a:hover {
color: #fff;
}
.leftMenu {
display: flex;
align-items: center;
a {
margin-right: 30px;
}
}
.rightMenu {
display: flex;
Expand All @@ -75,7 +91,7 @@ const TopBar = styled.div`
font-size: 25px;
}
&.login {
color: #ccc;
color: #b3cdff;
}
&.login:hover {
color: #ffffff;
Expand Down Expand Up @@ -108,61 +124,63 @@ const TopNavigationBar = () => {

return (
<TopBar>
<div className="leftMenu">
<Link to="/">
<Logo />
</Link>
<NavLink
to="/"
className={({ isActive }) =>
isActive ? "nav-link-active" : "nav-link"
}
>
홈
</NavLink>
<Link
to="/ranking"
className={({ isActive }) =>
isActive ? "nav-link-active" : "nav-link"
}
>
랭킹
</Link>
</div>
{userId === null ? (
<div className="rightMenu">
<Link to="/login" className="button login">
로그인
<div className="menu">
<div className="leftMenu">
<Link to="/">
<Logo />
</Link>
</div>
) : (
<div className="rightMenu">
<button className="button">
<i
class="fa-solid fa-users fa-sm"
style={{
cursor: "pointer",
justifyContent: "center",
}}
onClick={openModal}
/>
</button>
<Link to={`/mypage`}>
<ProfileImg />
<NavLink
to="/"
className={({ isActive }) =>
isActive ? "nav-link-active" : "nav-link"
}
>
홈
</NavLink>
<Link
to="/ranking"
className={({ isActive }) =>
isActive ? "nav-link-active" : "nav-link"
}
>
랭킹
</Link>
</div>
)}
<Modal
isOpen={isModalOpen}
onRequestClose={closeModal}
contentLabel="Friend Modal"
style={customStyles}
>
<FriendPage
{userId === null ? (
<div className="rightMenu">
<Link to="/login" className="button login">
로그인
</Link>
</div>
) : (
<div className="rightMenu">
<button className="button">
<i
class="fa-solid fa-users fa-sm"
style={{
cursor: "pointer",
justifyContent: "center",
}}
onClick={openModal}
/>
</button>
<Link to={`/mypage`}>
<ProfileImg />
</Link>
</div>
)}
<Modal
isOpen={isModalOpen}
closeModal={closeModal}
></FriendPage>
</Modal>
onRequestClose={closeModal}
contentLabel="Friend Modal"
style={customStyles}
>
<FriendPage
isOpen={isModalOpen}
closeModal={closeModal}
></FriendPage>
</Modal>
</div>
</TopBar>
);
};
Expand Down
10 changes: 3 additions & 7 deletions src/pages/Main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ const Main = () => {
useEffect(() => {
const getData = async () => {
try {
const params = { page: 0, size: 5, sort: gameSort };
const params = { page: 0, size: 10, sort: gameSort };
const apiData = await getGameRanking(params);
setGameList(apiData);
setIsLoading(false);
Expand All @@ -31,17 +31,13 @@ const Main = () => {
setTimeout(async () => {
const newList = await getGameRanking({
page: page,
size: 5,
size: 10,
sort: gameSort,
});
if (newList.length === 0) {
return;
}
setGameList((prevList) => [
...prevList,
{ gameId: "ad" },
...newList,
]);
setGameList((prevList) => [...prevList, ...newList]);
setPage((prevPage) => prevPage + 1);
}, 100);
} catch (error) {
Expand Down

0 comments on commit 97774dd

Please sign in to comment.