-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
29 changed files
with
431 additions
and
63 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
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
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
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
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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
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
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,45 @@ | ||
import styled from "styled-components"; | ||
|
||
export const ImgWrapper = styled.div` | ||
overflow: hidden; | ||
width: 90%; | ||
aspect-ratio: 1 / 1; | ||
border-radius: 20px; | ||
margin-bottom: 30px; | ||
`; | ||
|
||
export const BoothImg = styled.img` | ||
width: 100%; | ||
height: 100%; | ||
object-fit: cover; | ||
object-position: 50% 50%; | ||
`; | ||
|
||
export const InfoWrapper = styled.div` | ||
display: flex; | ||
flex-direction: column; | ||
gap: 26px; | ||
width: 90%; | ||
`; | ||
|
||
export const BoothName = styled.div` | ||
background-color: #e7e6f2; | ||
border-radius: 20px; | ||
padding: 15px 20px; | ||
display: flex; | ||
align-items: center; | ||
position: relative; | ||
flex-grow: 3; | ||
div { | ||
position: absolute; | ||
right: 10px; | ||
} | ||
`; | ||
|
||
export const BoothDetail = styled.div` | ||
padding: 0px 10px; | ||
hr { | ||
margin: 38px 0px; | ||
border: 1px solid #dddddd; | ||
} | ||
`; |
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,39 @@ | ||
import React from "react"; | ||
|
||
import mainPageImage from "@/assets/main_page.jpg"; | ||
|
||
import { Text } from "../typography/Text"; | ||
import { BoothDetail, BoothImg, BoothName, ImgWrapper, InfoWrapper } from "./BoothInfo.styled"; | ||
import { Heart } from "./Heart"; | ||
|
||
//zustand 로 refactor 필요 | ||
const BoothInfo: React.FC = () => { | ||
const boothdetail = | ||
"멋쟁이사자처럼 주점에서는 노래방 마이크로 김대건이 노래를 하고 춤도 추고 히어로 서사에 대해 설명할 것입니다."; | ||
const boothName = "멋쟁이 사자처럼 주점"; | ||
const num = 365; | ||
|
||
return ( | ||
<> | ||
<ImgWrapper> | ||
<BoothImg src={mainPageImage} /> | ||
</ImgWrapper> | ||
<InfoWrapper> | ||
<BoothName> | ||
<Text size="20px" weight="bold" variant="#3F3A6C"> | ||
{boothName} | ||
</Text> | ||
<Heart num={num} likable={true} /> | ||
</BoothName> | ||
<BoothDetail> | ||
<Text size="s" weight="normal"> | ||
{boothdetail} | ||
</Text> | ||
<hr /> | ||
</BoothDetail> | ||
</InfoWrapper> | ||
</> | ||
); | ||
}; | ||
|
||
export default BoothInfo; |
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,18 @@ | ||
import styled from "styled-components"; | ||
|
||
export const CommentContent = styled.div` | ||
display: flex; | ||
flex-direction: row; | ||
align-items: center; | ||
justify-content: space-between; | ||
p { | ||
display: flex; | ||
} | ||
`; | ||
|
||
export const CommentInfoWrapper = styled.div` | ||
display: flex; | ||
gap: 8px; | ||
align-items: flex-end; | ||
`; |
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,31 @@ | ||
import { FaRegTrashAlt } from "react-icons/fa"; | ||
|
||
import { Paragraph } from "../typography/Paragraph"; | ||
import { Text } from "../typography/Text"; | ||
import { CommentContent, CommentInfoWrapper } from "./Comment.styled"; | ||
import { IComment } from "./CommentInfo"; | ||
|
||
//zustand로 refactor 필요 | ||
|
||
const Comment = ({ name, time, content, deletable }: IComment) => { | ||
return ( | ||
<> | ||
<CommentContent> | ||
<Text size="m" weight="bold" variant="#3F3A6C"> | ||
<CommentInfoWrapper> | ||
{name} | ||
<Text size="xs" weight="normal" variant="#A3A3A3"> | ||
{time} | ||
</Text> | ||
</CommentInfoWrapper> | ||
</Text> | ||
{deletable ? <FaRegTrashAlt color="#3F3A6C" size={"24px"} /> : null} | ||
</CommentContent> | ||
<Paragraph size="s" weight="normal"> | ||
{content} | ||
</Paragraph> | ||
</> | ||
); | ||
}; | ||
|
||
export default Comment; |
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,27 @@ | ||
import styled from "styled-components"; | ||
|
||
export const CommentWrapper = styled.div` | ||
display: flex; | ||
flex-direction: column; | ||
justify-content: center; | ||
align-items: center; | ||
width: 90%; | ||
gap: 40px; | ||
`; | ||
export const Title = styled.div` | ||
display: flex; | ||
gap: 4px; | ||
align-items: flex-end; | ||
`; | ||
export const CommentList = styled.div` | ||
display: flex; | ||
flex-direction: column; | ||
gap: 15px; | ||
width: 95%; | ||
div > hr { | ||
margin-top: 38px; | ||
border: 1px solid #dddddd; | ||
} | ||
`; | ||
|
||
export const CommentContainer = styled.div``; |
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,56 @@ | ||
import React, { useState } from "react"; | ||
|
||
import { Pagination } from "@/components/navigation/Pagination"; | ||
|
||
import { Text } from "../typography/Text"; | ||
import Comment from "./Comment"; | ||
import { CommentList, CommentWrapper, CommentContainer, Title } from "./CommentInfo.styled"; | ||
|
||
export interface IComment { | ||
name: string; | ||
time: string; | ||
content: string; | ||
deletable: boolean; | ||
} | ||
|
||
const CommentInfo: React.FC = () => { | ||
const [commentnum] = useState<number>(221); | ||
|
||
const comments: IComment[] = [ | ||
{ name: "User1", time: "2024-05-13", content: "첫 번째 댓글입니다.", deletable: false }, | ||
{ name: "User2", time: "2024-05-14", content: "두 번째 댓글입니다.", deletable: true }, | ||
{ name: "User3", time: "2024-05-15", content: "세 번째 댓글입니다.", deletable: false }, | ||
]; | ||
|
||
return ( | ||
<CommentWrapper> | ||
<Text size="20px" weight="bold"> | ||
<Title> | ||
댓글 | ||
<Text size="m" weight="bold" variant="#3F3A6C"> | ||
{commentnum} | ||
</Text> | ||
</Title> | ||
</Text> | ||
<CommentList> | ||
{comments.map((comment, index) => ( | ||
<div> | ||
<CommentContainer> | ||
<Comment | ||
key={index} | ||
name={comment.name} | ||
time={comment.time} | ||
content={comment.content} | ||
deletable={comment.deletable} | ||
/> | ||
</CommentContainer> | ||
<hr /> | ||
</div> | ||
))} | ||
</CommentList> | ||
<Pagination /> | ||
</CommentWrapper> | ||
); | ||
}; | ||
|
||
export default CommentInfo; |
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,22 @@ | ||
import styled from "styled-components"; | ||
|
||
interface IHeart { | ||
likable: boolean; | ||
} | ||
export const HeartWrapper = styled.div<IHeart>` | ||
position: absolute; | ||
right: 0; | ||
width: 40px; | ||
height: 40px; | ||
border-radius: 50%; | ||
background-color: #fff; | ||
display: flex; | ||
flex-direction: column; | ||
justify-content: center; | ||
align-items: center; | ||
padding: 5px; | ||
font-size: 12px; | ||
line-height: 8px; | ||
color: ${(props) => (props.likable ? "#9874FF" : "#A4A4A4")}; | ||
`; |
Oops, something went wrong.