-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #6 from team-nerd-planet/feature/woowon
네비게이션 메뉴 추가, 컬렉션 추가, 구독하기 기업명 드롭다운 기능 추가
- Loading branch information
Showing
12 changed files
with
547 additions
and
22 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,95 @@ | ||
"use client"; | ||
|
||
import styled from "@emotion/styled"; | ||
import { companyList } from "constants/company"; | ||
|
||
const CollectionPage = () => { | ||
return ( | ||
<Container> | ||
<Grid> | ||
{companyList.map((post, index) => { | ||
return ( | ||
<Item key={index}> | ||
<Title>{post.companyName}</Title> | ||
</Item> | ||
); | ||
})} | ||
</Grid> | ||
</Container> | ||
); | ||
}; | ||
export default CollectionPage; | ||
|
||
const Container = styled.div` | ||
display: flex; | ||
flex-direction: row; | ||
justify-content: center; | ||
align-items: center; | ||
width: 100%; | ||
max-width: 1140px; | ||
margin: 0 auto; | ||
padding: 20px 20px; | ||
gap: 40px; | ||
`; | ||
|
||
const Grid = styled.div` | ||
display: grid; | ||
grid-template-columns: repeat(3, 1fr); | ||
gap: 40px; | ||
width: 790px; | ||
@media (max-width: 768px) { | ||
grid-template-columns: repeat(2, 1fr); | ||
width: 100%; | ||
height: 100%; | ||
} | ||
@media (max-width: 480px) { | ||
grid-template-columns: repeat(1, 1fr); | ||
width: 100%; | ||
height: 100%; | ||
} | ||
`; | ||
|
||
// Item을 클릭하면 뱅그그그 도는거 추가하기 | ||
const Item = styled.div` | ||
display: flex; | ||
flex-direction: column; | ||
align-items: center; | ||
justify-content: center; | ||
width: 100%; | ||
height: 100px; | ||
background-color: #26272b; | ||
border-radius: 10px; | ||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); | ||
transition: 0.3s ease-in-out all 0s; | ||
gap: 10px; | ||
animation: fadeIn 0.5s ease-in-out; | ||
@keyframes fadeIn { | ||
from { | ||
opacity: 0; | ||
transform: translateY(20px); | ||
} | ||
to { | ||
opacity: 1; | ||
transform: translateY(0); | ||
} | ||
} | ||
&:hover { | ||
transform: translateY(-10px); | ||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); | ||
} | ||
&:active { | ||
transform: translateY(0); | ||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); | ||
} | ||
`; | ||
|
||
const Title = styled.div` | ||
font-size: 24px; | ||
font-weight: 700; | ||
color: white; | ||
`; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,81 @@ | ||
"use client"; | ||
|
||
import styled from "@emotion/styled"; | ||
import Image from "next/image"; | ||
|
||
const RushPage = () => { | ||
return ( | ||
<Container> | ||
<Content> | ||
<div | ||
style={{ | ||
display: "flex", | ||
flexDirection: "column", | ||
justifyContent: "center", | ||
alignItems: "center", | ||
gap: "20px", | ||
}} | ||
> | ||
<Image | ||
src={ | ||
"https://imagedelivery.net/6qzLODAqs2g1LZbVYqtuQw/c128208d-c3ff-488f-93d7-4ba3ce866c00/public" | ||
} | ||
alt="mail" | ||
width={64} | ||
height={64} | ||
/> | ||
<div | ||
style={{ | ||
display: "flex", | ||
flexDirection: "column", | ||
justifyContent: "center", | ||
alignItems: "center", | ||
}} | ||
> | ||
<div | ||
style={{ | ||
fontSize: "20px", | ||
fontWeight: "bold", | ||
color: "#f8f9fe", | ||
}} | ||
> | ||
러쉬는 준비중이에요! | ||
</div> | ||
<div | ||
style={{ | ||
fontSize: "12px", | ||
color: "#f8f9fe", | ||
}} | ||
> | ||
너드플래닛의 숏폼 서비스인 러쉬를 기대해주세요! | ||
</div> | ||
</div> | ||
</div> | ||
</Content> | ||
</Container> | ||
); | ||
}; | ||
export default RushPage; | ||
|
||
const Container = styled.div` | ||
display: flex; | ||
flex-direction: row; | ||
justify-content: center; | ||
align-items: center; | ||
width: 100%; | ||
max-width: 1140px; | ||
margin: 0 auto; | ||
padding: 20px 20px; | ||
gap: 40px; | ||
`; | ||
|
||
const Content = styled.div` | ||
background-color: #1c1c20; | ||
padding: 36px 24px; | ||
width: 400px; | ||
height: 200px; | ||
border-radius: 10px; | ||
margin-bottom: 100px; | ||
color: #f8f9fe; | ||
position: relative; | ||
`; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.