From 20ae63e9fba83fb88e6edb368d9bd01d9738af78 Mon Sep 17 00:00:00 2001 From: junyeokk Date: Sun, 12 May 2024 11:07:34 +0900 Subject: [PATCH 1/5] =?UTF-8?q?feat:=20=ED=85=8D=EC=8A=A4=ED=8A=B8=20?= =?UTF-8?q?=EC=83=89=20=EC=B6=94=EA=B0=80=20(#5)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/typography/Text.tsx | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/src/components/typography/Text.tsx b/src/components/typography/Text.tsx index ab78574..7fd4566 100644 --- a/src/components/typography/Text.tsx +++ b/src/components/typography/Text.tsx @@ -3,6 +3,7 @@ import styled from "styled-components"; export interface IText { size: "xs" | "s" | "m" | "l" | "xl" | string; weight: "bold" | "normal"; + variant?: "darkpurple" | "purple" | "white" | "lightpurple"; } export const Text = styled.span` @@ -24,4 +25,17 @@ export const Text = styled.span` return props.size; } }}; + + color: ${(props) => { + switch (props.variant) { + case "darkpurple": + return "#5d5a88"; + case "purple": + return "#767494"; + case "lightpurple": + return "#adabc3"; + case "white": + return "#ffffff"; + } + }}; `; From 358bc5789da025fc0e8dc5dcbc968378cc5ae4e7 Mon Sep 17 00:00:00 2001 From: Hyoeunkh Date: Sun, 12 May 2024 14:44:10 +0900 Subject: [PATCH 2/5] =?UTF-8?q?feat:=20=ED=85=8D=EC=8A=A4=ED=8A=B8=20?= =?UTF-8?q?=EC=83=89=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/typography/Text.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/typography/Text.tsx b/src/components/typography/Text.tsx index 7fd4566..a7ecf2a 100644 --- a/src/components/typography/Text.tsx +++ b/src/components/typography/Text.tsx @@ -3,7 +3,7 @@ import styled from "styled-components"; export interface IText { size: "xs" | "s" | "m" | "l" | "xl" | string; weight: "bold" | "normal"; - variant?: "darkpurple" | "purple" | "white" | "lightpurple"; + variant?: "darkpurple" | "purple" | "white" | "lightpurple" | string; } export const Text = styled.span` @@ -36,6 +36,8 @@ export const Text = styled.span` return "#adabc3"; case "white": return "#ffffff"; + default: + return props.variant; } }}; `; From 6a37db66126fd6fc4ce979b6d040d65a5a156ac2 Mon Sep 17 00:00:00 2001 From: Hyoeunkh Date: Sun, 12 May 2024 14:44:44 +0900 Subject: [PATCH 3/5] =?UTF-8?q?feat:=20Booth=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/display/Booth.styled.ts | 56 ++++++++++++++++++++++++++ src/components/display/Booth.tsx | 33 +++++++++++++++ 2 files changed, 89 insertions(+) create mode 100644 src/components/display/Booth.styled.ts create mode 100644 src/components/display/Booth.tsx diff --git a/src/components/display/Booth.styled.ts b/src/components/display/Booth.styled.ts new file mode 100644 index 0000000..b02ad90 --- /dev/null +++ b/src/components/display/Booth.styled.ts @@ -0,0 +1,56 @@ +import styled from "styled-components"; +import { motion } from "framer-motion"; + +export const BoothList = styled(motion.li)` + height: 40px; + padding: 20px 25px; + margin: 12px 0; + border-radius: 25px; + background-color: #E9E9FB; + align-content: center; +`; + +export const BoothLink = styled.a` + position: relative; + text-decoration: none; + display: flex; + align-items: center; + + span { + position: absolute; + left: 50px; + } +`; + +export const Index = styled.div` + position: absolute; + left: 0; + width: 30px; + height: 30px; + border-radius: 10px; + align-content: center; + text-align: center; + font-weight: bolder; + font-size: 20px; + + 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 new file mode 100644 index 0000000..f5b3c2d --- /dev/null +++ b/src/components/display/Booth.tsx @@ -0,0 +1,33 @@ +import { Text } from "@/components/typography/Text"; +import { TiHeartFullOutline } from "react-icons/ti"; +import { Variants } from "framer-motion"; +import { + BoothList, + BoothLink, + Index, + Heart } from "./Booth.styled"; + +interface IBooth { + index: number; + name: string; + heart: number; +} +const itemVariants: Variants = { + hidden: { opacity: 0, y: 10 }, + visible: { opacity: 1, y: 0 } +}; + +export const Booth: React.FC = ({ index, name, heart }) => { + return ( + + + {index + 1} + {name} + + + {heart} + + + + ); +} From 1a54e81c60f5a936fe6b44f8bacbba7bc19ac158 Mon Sep 17 00:00:00 2001 From: Hyoeunkh Date: Sun, 12 May 2024 14:45:35 +0900 Subject: [PATCH 4/5] =?UTF-8?q?feat:=20=EB=B6=80=EC=8A=A4=EB=A6=AC?= =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=B6=80?= =?UTF-8?q?=EC=8A=A4=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/BoothListPage.styled.tsx | 31 ++++++++++++++++++ src/pages/BoothListPage.tsx | 50 ++++++++++++++++++++++++++++-- 2 files changed, 78 insertions(+), 3 deletions(-) diff --git a/src/pages/BoothListPage.styled.tsx b/src/pages/BoothListPage.styled.tsx index e69de29..056a9e0 100644 --- a/src/pages/BoothListPage.styled.tsx +++ b/src/pages/BoothListPage.styled.tsx @@ -0,0 +1,31 @@ +import styled from "styled-components"; +import { motion } from "framer-motion"; + +export const PageContainer = styled.div` + width: 100%; + min-height: 100vh; + background-color: white; + display: flex; + flex-direction: column; + justify-content: space-between; +`; + +export const MainContent = styled.div` + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + overflow: hidden; + width: 100%; + position: relative; +`; + +export const VisibleList = styled(motion.ul)` + padding: 40px; + width: 90%; + list-style: none; + + motion.IBooth { + + } +`; diff --git a/src/pages/BoothListPage.tsx b/src/pages/BoothListPage.tsx index afb5b3c..8adcfb1 100644 --- a/src/pages/BoothListPage.tsx +++ b/src/pages/BoothListPage.tsx @@ -1,3 +1,47 @@ -export default function BoothListPage() { - return <>; -} +import React from "react"; +import Navigation from "@/components/navigation/Navigation"; +import { Variants } from "framer-motion"; +// import Map from "./Map"; +import { + PageContainer, + MainContent, + VisibleList +} from "./BoothListPage.styled"; +import { Booth } from "@/components/display/Booth"; + +const listVariants: Variants = { + hidden: { + opacity: 0 + }, + visible: { + opacity: 1, + transition: { + when: "beforeChildren", + staggerChildren: 0.1 + } + } +}; + + + +const BoothListPage: React.FC = () => { + const lists = ["컴퓨터학부 주점이름","전자 주점이름","토목 주점이름","기계 주점이름","식품공학부 주점이름"]; + const heart = 356; + //list랑 index, heart는 받아온 값으로 수정 + + return ( + + + + {/**/} + + {lists.map((name,index) => { + return ( + + )})} + + + + ); +}; +export default BoothListPage; From ebd1639e314f2509a84968f096616d55587a0144 Mon Sep 17 00:00:00 2001 From: Hyoeunkh Date: Sun, 12 May 2024 15:01:40 +0900 Subject: [PATCH 5/5] =?UTF-8?q?refactor:=20=EA=B8=B0=EC=A1=B4=EC=BD=94?= =?UTF-8?q?=EB=93=9C=20lint=20=EB=B0=8F=20=EC=BD=94=EB=93=9C=20=ED=8F=AC?= =?UTF-8?q?=EB=A7=A4=ED=8C=85=20resolve=20#7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/display/Booth.styled.ts | 80 +++++++++++++------------- src/components/display/Booth.tsx | 23 ++++---- src/pages/BoothListPage.styled.tsx | 39 ++++++------- src/pages/BoothListPage.tsx | 66 ++++++++++----------- 4 files changed, 102 insertions(+), 106 deletions(-) diff --git a/src/components/display/Booth.styled.ts b/src/components/display/Booth.styled.ts index b02ad90..82479f5 100644 --- a/src/components/display/Booth.styled.ts +++ b/src/components/display/Booth.styled.ts @@ -1,56 +1,56 @@ -import styled from "styled-components"; import { motion } from "framer-motion"; +import styled from "styled-components"; export const BoothList = styled(motion.li)` - height: 40px; - padding: 20px 25px; - margin: 12px 0; - border-radius: 25px; - background-color: #E9E9FB; - align-content: center; + height: 40px; + padding: 20px 25px; + margin: 12px 0; + border-radius: 25px; + background-color: #e9e9fb; + align-content: center; `; export const BoothLink = styled.a` - position: relative; - text-decoration: none; - display: flex; - align-items: center; + position: relative; + text-decoration: none; + display: flex; + align-items: center; - span { - position: absolute; - left: 50px; - } + span { + position: absolute; + left: 50px; + } `; export const Index = styled.div` - position: absolute; - left: 0; - width: 30px; - height: 30px; - border-radius: 10px; - align-content: center; - text-align: center; - font-weight: bolder; - font-size: 20px; + position: absolute; + left: 0; + width: 30px; + height: 30px; + border-radius: 10px; + align-content: center; + text-align: center; + font-weight: bolder; + font-size: 20px; - color: #fff; - background-color: #9874FF; + color: #fff; + background-color: #9874ff; `; export const Heart = styled.div` - position: absolute; - right: 0; - width: 40px; - height: 40px; - border-radius: 50%; - background-color: #fff; + 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; + 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 index f5b3c2d..70eb889 100644 --- a/src/components/display/Booth.tsx +++ b/src/components/display/Booth.tsx @@ -1,11 +1,10 @@ -import { Text } from "@/components/typography/Text"; import { TiHeartFullOutline } from "react-icons/ti"; + import { Variants } from "framer-motion"; -import { - BoothList, - BoothLink, - Index, - Heart } from "./Booth.styled"; + +import { Text } from "@/components/typography/Text"; + +import { BoothList, BoothLink, Index, Heart } from "./Booth.styled"; interface IBooth { index: number; @@ -13,8 +12,8 @@ interface IBooth { heart: number; } const itemVariants: Variants = { - hidden: { opacity: 0, y: 10 }, - visible: { opacity: 1, y: 0 } + hidden: { opacity: 0, y: 10 }, + visible: { opacity: 1, y: 0 }, }; export const Booth: React.FC = ({ index, name, heart }) => { @@ -22,12 +21,14 @@ export const Booth: React.FC = ({ index, name, heart }) => { {index + 1} - {name} + + {name} + - + {heart} ); -} +}; diff --git a/src/pages/BoothListPage.styled.tsx b/src/pages/BoothListPage.styled.tsx index 056a9e0..5ebd729 100644 --- a/src/pages/BoothListPage.styled.tsx +++ b/src/pages/BoothListPage.styled.tsx @@ -1,31 +1,30 @@ -import styled from "styled-components"; import { motion } from "framer-motion"; +import styled from "styled-components"; export const PageContainer = styled.div` - width: 100%; - min-height: 100vh; - background-color: white; - display: flex; - flex-direction: column; - justify-content: space-between; + width: 100%; + min-height: 100vh; + background-color: white; + display: flex; + flex-direction: column; + justify-content: space-between; `; export const MainContent = styled.div` - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - overflow: hidden; - width: 100%; - position: relative; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + overflow: hidden; + width: 100%; + position: relative; `; export const VisibleList = styled(motion.ul)` - padding: 40px; - width: 90%; - list-style: none; - - motion.IBooth { + padding: 40px; + width: 90%; + list-style: none; - } + motion.IBooth { + } `; diff --git a/src/pages/BoothListPage.tsx b/src/pages/BoothListPage.tsx index 8adcfb1..122e918 100644 --- a/src/pages/BoothListPage.tsx +++ b/src/pages/BoothListPage.tsx @@ -1,47 +1,43 @@ import React from "react"; -import Navigation from "@/components/navigation/Navigation"; + import { Variants } from "framer-motion"; -// import Map from "./Map"; -import { - PageContainer, - MainContent, - VisibleList -} from "./BoothListPage.styled"; + import { Booth } from "@/components/display/Booth"; +import Navigation from "@/components/navigation/Navigation"; + +// import Map from "./Map"; +import { PageContainer, MainContent, VisibleList } from "./BoothListPage.styled"; const listVariants: Variants = { - hidden: { - opacity: 0 - }, - visible: { - opacity: 1, - transition: { - when: "beforeChildren", - staggerChildren: 0.1 - } - } + hidden: { + opacity: 0, + }, + visible: { + opacity: 1, + transition: { + when: "beforeChildren", + staggerChildren: 0.1, + }, + }, }; - - const BoothListPage: React.FC = () => { - const lists = ["컴퓨터학부 주점이름","전자 주점이름","토목 주점이름","기계 주점이름","식품공학부 주점이름"]; - const heart = 356; + const lists = ["컴퓨터학부 주점이름", "전자 주점이름", "토목 주점이름", "기계 주점이름", "식품공학부 주점이름"]; + const heart = 356; //list랑 index, heart는 받아온 값으로 수정 - return ( - - - - {/**/} - - {lists.map((name,index) => { - return ( - - )})} - - - - ); + return ( + + + + {/**/} + + {lists.map((name, index) => { + return ; + })} + + + + ); }; export default BoothListPage;