Merge pull request #20 from LikeLion-KNU/feature/#6

Feature/#6
LikeLion-KNU · May 16, 2024 · a452768 · a452768
2 parents c36fa15 + fa6200e
commit a452768
Show file tree

Hide file tree

Showing 19 changed files with 402 additions and 46 deletions.
diff --git a/index.html b/index.html
@@ -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>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -23,7 +23,7 @@
         "react-dom": "^18.2.0",
         "react-icons": "^5.2.0",
         "react-redux": "^9.1.2",
-        "react-router-dom": "^6.23.0",
+        "react-router-dom": "^6.23.1",
         "styled-components": "^6.1.8",
         "vite-plugin-html": "^3.2.2",
         "vite-tsconfig-paths": "^4.3.2"

diff --git a/src/assets/send.png b/src/assets/send.png
diff --git a/src/components/display/Booth.styled.ts b/src/components/display/Booth.styled.ts
@@ -36,21 +36,3 @@ export const Index = styled.div`
     color: #fff;
     background-color: #9874ff;
 `;
-
-export const Heart = styled.div`
-    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: #9874ff;
-`;
diff --git a/src/components/display/Booth.tsx b/src/components/display/Booth.tsx
@@ -1,33 +1,30 @@
-import { TiHeartFullOutline } from "react-icons/ti";
-
 import { Variants } from "framer-motion";
 
 import { Text } from "@/components/typography/Text";
 
-import { BoothList, 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 (
         <BoothList variants={itemVariants}>
-            <BoothLink href="#">
+            <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>
         </BoothList>
     );

diff --git a/src/components/display/BoothInfo.styled.ts b/src/components/display/BoothInfo.styled.ts
@@ -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;
+    }
+`;
diff --git a/src/components/display/BoothInfo.tsx b/src/components/display/BoothInfo.tsx
@@ -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;
diff --git a/src/components/display/Comment.styled.ts b/src/components/display/Comment.styled.ts
@@ -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;
+`;
diff --git a/src/components/display/Comment.tsx b/src/components/display/Comment.tsx
@@ -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;
diff --git a/src/components/display/CommentInfo.styled.ts b/src/components/display/CommentInfo.styled.ts
@@ -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``;
diff --git a/src/components/display/CommentInfo.tsx b/src/components/display/CommentInfo.tsx
@@ -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;
diff --git a/src/components/display/Heart.styled.ts b/src/components/display/Heart.styled.ts
@@ -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")};
+`;