Skip to content

Commit

Permalink
Merge branch 'dev' into feature/#10
Browse files Browse the repository at this point in the history
  • Loading branch information
toothlessdev authored May 16, 2024
2 parents ff622a2 + a452768 commit ca04db1
Show file tree
Hide file tree
Showing 29 changed files with 431 additions and 63 deletions.
2 changes: 1 addition & 1 deletion .github/workflows/main.yml
Original file line number Diff line number Diff line change
Expand Up @@ -39,4 +39,4 @@ jobs:

- name: Uploasd to S3
run: aws s3 cp --recursive --region ap-northeast-2 dist
s3://knufest2024
s3://www.hapuruna.info
6 changes: 5 additions & 1 deletion index.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,11 @@
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0 maximum-scale=1.0,
user-scalable=0"
/>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-8Y5Z29FBSV"></script>
<script>
Expand Down
26 changes: 13 additions & 13 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,8 @@
"react-dom": "^18.2.0",
"react-icons": "^5.2.0",
"react-redux": "^9.1.2",
"react-router-dom": "^6.23.0",
"react-zoom-pan-pinch": "^3.4.4",
"react-router-dom": "^6.23.1",
"styled-components": "^6.1.8",
"vite-plugin-html": "^3.2.2",
"vite-tsconfig-paths": "^4.3.2"
Expand Down
Binary file modified src/assets/BackImg.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/Blinker-SemiBold.ttf
Binary file not shown.
Binary file added src/assets/leesangmi.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/leesangmi.webp
Binary file not shown.
Binary file added src/assets/leeyeonghyun.webp
Binary file not shown.
Binary file added src/assets/send.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
18 changes: 0 additions & 18 deletions src/components/display/Booth.styled.ts
Original file line number Diff line number Diff line change
Expand Up @@ -43,21 +43,3 @@ export const Index = styled.div`
color: #fff;
background-color: #9874ff;
`;

export const Heart = styled.div`
flex-shrink: 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: #9874ff;
`;
19 changes: 8 additions & 11 deletions src/components/display/Booth.tsx
Original file line number Diff line number Diff line change
@@ -1,33 +1,30 @@
import { TiHeartFullOutline } from "react-icons/ti";

import { Variants } from "framer-motion";

import { Text } from "@/components/typography/Text";

import { BoothListItem, BoothLink, Index, Heart } from "./Booth.styled";
import { BoothList, BoothLink, Index } from "./Booth.styled";
import { Heart } from "./Heart";

interface IBooth {
index: number;
name: string;
heart: number;
num: number;
likable: boolean;
}
const itemVariants: Variants = {
hidden: { opacity: 0, y: 10 },
visible: { opacity: 1, y: 0 },
};

export const Booth: React.FC<IBooth> = ({ index, name, heart }) => {
export const Booth: React.FC<IBooth> = ({ index, name, num, likable }) => {
return (
<BoothListItem variants={itemVariants}>
<BoothLink href="#">
<BoothList variants={itemVariants}>
<BoothLink href={`booth/${index + 1}`}>
<Index>{index + 1}</Index>
<Text size="m" weight="bold" variant="#5D5A88">
{name}
</Text>
<Heart>
<TiHeartFullOutline size={24} />
{heart}
</Heart>
<Heart num={num} likable={likable} />
</BoothLink>
</BoothListItem>

Check failure on line 29 in src/components/display/Booth.tsx

View workflow job for this annotation

GitHub Actions / build

Expected corresponding JSX closing tag for 'BoothList'.

Check failure on line 29 in src/components/display/Booth.tsx

View workflow job for this annotation

GitHub Actions / compile

Expected corresponding JSX closing tag for 'BoothList'.
);
Expand Down
45 changes: 45 additions & 0 deletions src/components/display/BoothInfo.styled.ts
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;
}
`;
39 changes: 39 additions & 0 deletions src/components/display/BoothInfo.tsx
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;
18 changes: 18 additions & 0 deletions src/components/display/Comment.styled.ts
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;
`;
31 changes: 31 additions & 0 deletions src/components/display/Comment.tsx
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;
27 changes: 27 additions & 0 deletions src/components/display/CommentInfo.styled.ts
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``;
56 changes: 56 additions & 0 deletions src/components/display/CommentInfo.tsx
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;
22 changes: 22 additions & 0 deletions src/components/display/Heart.styled.ts
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")};
`;
Loading

0 comments on commit ca04db1

Please sign in to comment.