diff --git a/assets/svg/One.svg b/assets/svg/One.svg new file mode 100644 index 0000000..adc4997 --- /dev/null +++ b/assets/svg/One.svg @@ -0,0 +1,4 @@ + + + + diff --git a/assets/svg/Three.svg b/assets/svg/Three.svg new file mode 100644 index 0000000..84b57c3 --- /dev/null +++ b/assets/svg/Three.svg @@ -0,0 +1,4 @@ + + + + diff --git a/assets/svg/Two.svg b/assets/svg/Two.svg new file mode 100644 index 0000000..82de1f5 --- /dev/null +++ b/assets/svg/Two.svg @@ -0,0 +1,4 @@ + + + + diff --git a/assets/svg/background.gif b/assets/svg/background.gif new file mode 100644 index 0000000..e9b3104 Binary files /dev/null and b/assets/svg/background.gif differ diff --git a/assets/svg/background2.png b/assets/svg/background2.png new file mode 100644 index 0000000..882b55d Binary files /dev/null and b/assets/svg/background2.png differ diff --git a/components/atoms/CouponBackground.svg b/components/atoms/CouponBackground.svg new file mode 100644 index 0000000..9f838bd --- /dev/null +++ b/components/atoms/CouponBackground.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/components/atoms/Konkuk.svg b/components/atoms/Konkuk.svg index 38aa534..6cc7c65 100644 --- a/components/atoms/Konkuk.svg +++ b/components/atoms/Konkuk.svg @@ -1,9 +1,137 @@ - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/components/atoms/MypageBackground.svg b/components/atoms/MypageBackground.svg index 4a2a6ba..c091413 100644 --- a/components/atoms/MypageBackground.svg +++ b/components/atoms/MypageBackground.svg @@ -1,4 +1,4 @@ - - - + + + diff --git a/components/hooks/useUserData.ts b/components/hooks/useUserData.ts index 916e3ff..06f6b0f 100644 --- a/components/hooks/useUserData.ts +++ b/components/hooks/useUserData.ts @@ -13,7 +13,7 @@ export const useUserData = () => { }; const exData = { - name: "건국대학교 예술대학학생회 ‘뿡뿡’", + name: "건국대학교 예술대학학생회", phoneNum: "010-5340-5490", - email: "konkuk.admin@gmail.com", + email: "konkuk@gmail.com", }; diff --git a/components/organisms/Header.tsx b/components/organisms/Header.tsx index a02b0a8..d9c9a4b 100644 --- a/components/organisms/Header.tsx +++ b/components/organisms/Header.tsx @@ -13,8 +13,6 @@ import { Logout } from "@/pages/api/login"; import { Box, Button, Modal } from "@mui/material"; import { css } from "@emotion/css"; - - const Header = () => { const [modalOpen, setModalOpen] = useState(false); const handleOpen = () => { @@ -39,15 +37,11 @@ const Header = () => { }, [userSessionData]); const logoutHandler = async () => { - - console.log("logout합니다"); const result = await Logout(); console.log(result); setLogData({ - - logined: false, email: "", type: "", @@ -124,22 +118,14 @@ const Header = () => { { if (userSessionData) { - - setModalOpen(true); logoutHandler(); - - } else { openModal(); } }} > - - {userSessionData ? "로그아웃" : "로그인"} - - @@ -166,7 +152,6 @@ const Header = () => { 학생관리 - 팝업관리 @@ -258,7 +243,6 @@ const SubDropdownMenuItem = styled.div` width: 100px; height: 1.5rem; - padding: 3px 0px; &:hover { @@ -274,7 +258,7 @@ const LowerMenuItem = styled.li` text-align: center; font-family: Pretendard; - font-size: 16px; + font-size: 20px; font-style: normal; font-weight: 400; line-height: 17.818px; /* 111.364% */ @@ -299,7 +283,7 @@ const UpperMenuItem = styled.li` color: #000; text-align: center; font-family: Pretendard; - font-size: 10px; + font-size: 15px; font-style: normal; font-weight: 400; line-height: 14px; /* 140% */ diff --git a/components/organisms/Modal.tsx b/components/organisms/Modal.tsx index 9107c2b..c0ddfd3 100644 --- a/components/organisms/Modal.tsx +++ b/components/organisms/Modal.tsx @@ -19,10 +19,8 @@ const LoginModal: React.FC = () => { const { closeModal } = useModal(); - const router = useRouter(); - const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const setLoginedUserState = useSetRecoilState(initialState); @@ -148,6 +146,7 @@ const SignUpWrapper = styled.div` `; const Container = styled.div` + padding-top: 10px 0px; position: fixed; top: 50%; left: 50%; @@ -236,8 +235,6 @@ const SocialLoginOptions = styled.div` column-gap: 20px; padding: 10px 5px; - border-top: 0.5px solid gray; - width: 100%; `; diff --git a/components/organisms/Modal/OperateModal.tsx b/components/organisms/Modal/OperateModal.tsx new file mode 100644 index 0000000..3b9d454 --- /dev/null +++ b/components/organisms/Modal/OperateModal.tsx @@ -0,0 +1,306 @@ +import Modal from "./Modal"; +import styled from "@emotion/styled"; +import CloseIcon from "@/assets/svg/Close.svg"; +import One from "@/assets/svg/One.svg"; +import Two from "@/assets/svg/Two.svg"; +import Three from "@/assets/svg/Three.svg"; + +interface props { + setIsOperate: Function; +} + +const OperateModal = ({ setIsOperate }: props) => { + return ( + + + { + setIsOperate(false); + }} + > + + + + 정산관리 + + 가게 사장님들과의 서비스 수수료 정산을 관리해보세요. + + + + 2023.10.01 ~ 2023.10.31 사이 데이터입니다. + + + + + + + 무무 스테이크 + + + + + + 가게명 + 무무 스테이크 + + + 전화번호 + 010 1234 5678 + + + + + 총 방문자 + 58명 + + + 지난대비이익 상승률 + 25% + + + + + + + + + + 탕화쿵푸 + + + + + + 가게명 + 탕화쿵푸 + + + 전화번호 + 010 1234 5678 + + + + + 총 방문자 + 48명 + + + 지난대비이익 상승률 + 19% + + + + + + + + + + 카페토이토이 + + + + + + 가게명 + 무무 스테이크 + + + 전화번호 + 010 1234 5678 + + + + + 총 방문자 + 38명 + + + 지난대비이익 상승률 + 37% + + + + + + + ); +}; + +const Container = styled.div` + width: 556px; + flex-shrink: 0; + background-color: white; + border-radius: 15px; + padding: 19px; + display: flex; + flex-direction: column; +`; + +const CloseBox = styled.div` + margin-left: auto; +`; + +const TopBox = styled.div` + margin-left: 30px; +`; + +const TitleBox = styled.div` + color: var(--, #1c1c1e); + font-family: Pretendard; + font-size: 26px; + font-style: normal; + font-weight: 600; + line-height: 16.53px; /* 63.577% */ + letter-spacing: -1.56px; +`; + +const SubTitleBox = styled.div` + color: var(--, #1c1c1e); + font-size: 12px; + font-style: normal; + font-weight: 400; + line-height: 16.53px; /* 137.751% */ + letter-spacing: -0.72px; + margin-top: 13px; +`; + +const DataDescriptionBox = styled.div` + width: 446px; + height: 38px; + flex-shrink: 0; + border-radius: 5px; + background: var(--g0, #f4f4f4); + color: var(--sub2, #0e6eff); + font-size: 16px; + font-style: normal; + font-weight: 500; + line-height: 16.53px; /* 103.313% */ + letter-spacing: -0.96px; + display: flex; + align-items: center; + padding-left: 10px; + margin: 16px auto 0; +`; + +const RankBox = styled.div` + display: flex; + flex-direction: column; + margin: 0 auto; +`; + +const RankTitleBox = styled.div` + display: flex; + margin-top: 20px; +`; + +const RankNumberBox = styled.div` + display: flex; + align-items: center; +`; + +const RankTxtBox = styled.div` + display: flex; + align-items: center; + margin-left: 8px; + color: var(--, #3d4149); + font-family: Pretendard Variable; + font-size: 13.984px; + font-style: normal; + font-weight: 500; + line-height: 19.264px; /* 137.751% */ + letter-spacing: -0.839px; +`; + +const RankContainer = styled.div` + display: flex; + width: 446px; + height: 110px; + flex-shrink: 0; + border-radius: 5px; + border: 1px solid var(--g0, #f4f4f4); + margin-top: 5px; +`; + +const RankLeftBox = styled.div` + margin: auto; +`; + +const NameBox = styled.div` + display: flex; + align-items: center; + color: var(--, #3d4149); + font-family: Pretendard Variable; + font-size: 13.984px; + font-style: normal; + font-weight: 500; + line-height: 19.264px; /* 137.751% */ + letter-spacing: -0.839px; + width: 50px; +`; + +const GrayBox = styled.div` + width: 152px; + height: 42px; + flex-shrink: 0; + border-radius: 6px; + background: #f7f7f7; + color: var(--, #3d4149); + font-family: Pretendard Variable; + font-size: 13.984px; + font-style: normal; + font-weight: 500; + line-height: 19.264px; /* 137.751% */ + letter-spacing: -0.839px; + display: flex; + align-items: center; + padding-left: 12px; +`; + +const RankRightBox = styled.div` + width: 201px; + height: 94px; + flex-shrink: 0; + border-radius: 5px; + border: 1px solid #dcdcdc; + margin: auto; + display: flex; + flex-direction: column; +`; + +const WhiteBox = styled.div` + width: 112px; + color: var(--, #3d4149); + font-family: Pretendard Variable; + font-size: 13.984px; + font-style: normal; + font-weight: 500; + line-height: 19.264px; /* 137.751% */ + letter-spacing: -0.839px; + display: flex; + align-items: center; +`; + +const BlueBox = styled.div` + display: inline-flex; + padding: 0px 3.9px; + justify-content: center; + align-items: center; + gap: 13px; + color: var(--sub3, #dfff60); + font-family: Pretendard; + font-size: 15.6px; + font-style: normal; + font-weight: 600; + line-height: 25.043px; /* 160.532% */ + letter-spacing: -0.936px; + border-radius: 3.9px; + background: var(--sub2, #0e6eff); +`; + +const FlexBox = styled.div` + display: flex; + margin: auto; +`; + +export default OperateModal; diff --git a/components/organisms/Modal/StampModal.tsx b/components/organisms/Modal/StampModal.tsx index 9ddc911..2269b5a 100644 --- a/components/organisms/Modal/StampModal.tsx +++ b/components/organisms/Modal/StampModal.tsx @@ -1,7 +1,6 @@ import { useState } from "react"; import Modal from "./Modal"; import styled from "@emotion/styled"; -import Image from "next/image"; import CloseIcon from "@/assets/svg/Close.svg"; import Button from "../Button"; import { COLORS } from "@/styles/colors"; diff --git a/components/styles/Contact.styles.tsx b/components/styles/Contact.styles.tsx index 5a4d9f1..0e2fd0f 100644 --- a/components/styles/Contact.styles.tsx +++ b/components/styles/Contact.styles.tsx @@ -1,7 +1,8 @@ -import { COLORS } from "@/styles/colors"; import styled from "@emotion/styled"; export const Container = styled.div` + padding-top: 1rem; + width: 1050px; display: flex; flex-direction: column; @@ -20,7 +21,6 @@ export const HeadTitleBox = styled.div` font-size: 26px; font-style: normal; font-weight: 500; - line-height: 16.53px; /* 63.577% */ letter-spacing: -1.56px; `; diff --git a/components/styles/Search.styles.tsx b/components/styles/Search.styles.tsx index 34e0f14..947a59a 100644 --- a/components/styles/Search.styles.tsx +++ b/components/styles/Search.styles.tsx @@ -6,23 +6,34 @@ export const Container = styled.div` flex-direction: column; justify-content: center; margin: 0 auto; - width: 919px; + width: 1050px; + padding-top: 1rem; `; +export const TopTitleBox = styled.div``; + export const TitleBox = styled.div` color: var(--, #1c1c1e); font-size: 26px; font-style: normal; - font-weight: 600; - line-height: 16.53px; /* 63.577% */ + font-weight: 500; letter-spacing: -1.56px; `; +export const SubTitleBox = styled.div` + margin-top: 12px; + color: var(--, #1c1c1e); + font-size: 15px; + font-style: normal; + font-weight: 500; + line-height: 19.264px; /* 128.425% */ + letter-spacing: -0.9px; +`; + export const MiddleBox = styled.div` display: flex; - margin-top: 64px; - margin-bottom: 37px; width: 919px; + margin: 64px auto 37px; `; export const FiltersBox = styled.div` @@ -140,6 +151,7 @@ export const HeartTextBox = styled.div` export const MainBox = styled.div` display: flex; + margin: auto; `; export const MapBox = styled.div` diff --git a/components/styles/SecondBox.styles.ts b/components/styles/SecondBox.styles.ts index 611ced4..cbf6f9d 100644 --- a/components/styles/SecondBox.styles.ts +++ b/components/styles/SecondBox.styles.ts @@ -33,7 +33,7 @@ export const TitleBox = styled.div` `; export const Title = styled.p` - font-size: 1rem; + font-size: 17px; color: var(--g3, #636366); font-weight: 500; `; diff --git a/components/styles/dashboard/style.ts b/components/styles/dashboard/style.ts index a61f922..a184594 100644 --- a/components/styles/dashboard/style.ts +++ b/components/styles/dashboard/style.ts @@ -8,7 +8,7 @@ export const Container = styled.div` align-items: center; margin: auto; - width: 80vw; + width: 1050px; row-gap: 2rem; `; @@ -20,6 +20,15 @@ export const TitleContainer = styled.div` width: 100%; `; +export const SubTitleBox = styled.div` + margin-top: 12px; + color: var(--, #1c1c1e); + font-size: 15px; + font-style: normal; + font-weight: 500; + line-height: 19.264px; /* 128.425% */ + letter-spacing: -0.9px; +`; export const OptionContainer = styled.div` display: flex; @@ -34,18 +43,21 @@ export const Title = styled.p` color: var(--, #1c1c1e); font-size: 26px; font-style: normal; - font-weight: 600; + font-weight: 500; letter-spacing: -1.56px; `; -export const IndexButton = styled.div` +interface IndexProps { + selected: boolean; +} +export const IndexButton = styled.div` display: flex; justify-content: center; align-items: center; - + font-size: 15px; min-width: 6rem; - padding: 10px 15px; + padding: 8px 12px; border-radius: 20px; transition: all 0.5s ease; @@ -54,6 +66,8 @@ export const IndexButton = styled.div` border-radius: 20px; transition: all 0.5s ease; } + + background-color: ${(props) => (props.selected ? "#c6c6c680" : "white")}; `; export const SearchButton = styled.div` @@ -164,17 +178,17 @@ export const ThirdBox = styled(DefaultBox)` // export const FourthBox = styled(DefaultBox)` - grid-column: 1/4; + grid-column: 1/5; grid-row: 1/5; `; export const FifthBox = styled(DefaultBox)` - grid-column: 4/11; + grid-column: 5/12; grid-row: 1/5; `; export const SixthUpperBox = styled(DefaultBox)` - grid-column: 11 / 15; + grid-column: 12 / 15; grid-row: 1/3; display: flex; @@ -182,7 +196,7 @@ export const SixthUpperBox = styled(DefaultBox)` `; export const SixthLowerBox = styled(DefaultBox)` - grid-column: 11/15; + grid-column: 12/15; grid-row: 3/5; display: flex; diff --git a/components/styles/dashboardDetail/style.ts b/components/styles/dashboardDetail/style.ts index 1f934ba..93c1101 100644 --- a/components/styles/dashboardDetail/style.ts +++ b/components/styles/dashboardDetail/style.ts @@ -9,6 +9,8 @@ export const Container = styled(FlexTemplate)` margin: 0px auto; row-gap: 3rem; + + height: 80vh; `; export const UpperContainer = styled(FlexTemplate)` diff --git a/pages/contact/index.tsx b/pages/contact/index.tsx index d493248..a4b462b 100644 --- a/pages/contact/index.tsx +++ b/pages/contact/index.tsx @@ -13,9 +13,11 @@ import { useRouter } from "next/router"; import { FilterProps } from "../api/StoreAPI"; import SearchModal from "@/components/organisms/Modal/\bSearchModal"; import Link from "next/link"; +import OperateModal from "@/components/organisms/Modal/OperateModal"; export default function Contact() { const [data, setData] = useState(); + const [isOperate, setIsOperate] = useState(false); const [operateFilter, setOperateFilter] = useState({ isPicked: false, name: "", @@ -89,7 +91,13 @@ export default function Contact() { 1년 동안 제휴를 맺은 가게들이에요. - 정산관리 + { + setIsOperate(true); + }} + > + 정산관리 + @@ -144,6 +152,7 @@ export default function Contact() { {isSearchModalOpen && ( )} + {isOperate && } ); } diff --git a/pages/contact/store/[id].tsx b/pages/contact/store/[id].tsx index c584d42..a208096 100644 --- a/pages/contact/store/[id].tsx +++ b/pages/contact/store/[id].tsx @@ -176,7 +176,11 @@ const ContactStore = () => { 대시보드 - + { + router.push(`/dashboard/${data?.storeName}`); + }} + > diff --git a/pages/dashboard/ComposedChart.tsx b/pages/dashboard/ComposedChart.tsx index cbdb92c..d026fbe 100644 --- a/pages/dashboard/ComposedChart.tsx +++ b/pages/dashboard/ComposedChart.tsx @@ -71,6 +71,7 @@ const Title = styled.p` const UpperBox = styled(FlexTemplate)` height: 10%; + margin-bottom: 20px; `; const ContentBox = styled(FlexTemplate)` diff --git a/pages/dashboard/FirstLayerChart.tsx b/pages/dashboard/FirstLayerChart.tsx index 455c641..dbfcb6a 100644 --- a/pages/dashboard/FirstLayerChart.tsx +++ b/pages/dashboard/FirstLayerChart.tsx @@ -33,7 +33,7 @@ const Container = styled.div` `; const Title = styled.p` - font-size: 1rem; + font-size: 15px; color: var(--g3, #636366); font-weight: 500; `; diff --git a/pages/dashboard/ListChart.tsx b/pages/dashboard/ListChart.tsx index df2cfb1..77f904f 100644 --- a/pages/dashboard/ListChart.tsx +++ b/pages/dashboard/ListChart.tsx @@ -24,24 +24,31 @@ const ListChart: React.FC = ({ title, contents }) => { - {contents && - contents.map((element, index) => { - return ( -
- {index + 1} - {element} -
- ); - })} +
+ {contents && + contents.map((element, index) => { + return ( +
+ {index + 1} + {element} +
+ ); + })} +
diff --git a/pages/dashboard/OneStackChart.tsx b/pages/dashboard/OneStackChart.tsx index c99691e..99128d0 100644 --- a/pages/dashboard/OneStackChart.tsx +++ b/pages/dashboard/OneStackChart.tsx @@ -55,6 +55,7 @@ const Title = styled.p` const UpperBox = styled(FlexTemplate)` height: 10%; + margin-bottom: 10px; `; const ContentBox = styled(FlexTemplate)` diff --git a/pages/dashboard/PieCharts.tsx b/pages/dashboard/PieCharts.tsx index 5545b27..bf8d573 100644 --- a/pages/dashboard/PieCharts.tsx +++ b/pages/dashboard/PieCharts.tsx @@ -1,18 +1,23 @@ import { ReactNode, useState } from "react"; import * as styles from "../../components/styles/SecondBox.styles"; import { Pie, PieChart, ResponsiveContainer, Sector, Tooltip } from "recharts"; -interface SecondBoxProps { - children?: ReactNode; -} -const data01 = [ - { name: "대학교 1학년", value: 40 }, - { name: "대학교 2학년", value: 30 }, - { name: "대학교 3학년", value: 10 }, - { name: "대학교 4학년", value: 20 }, -]; +// const data01 = [ +// { name: "대학교 1학년", value: 40 }, +// { name: "대학교 2학년", value: 30 }, +// { name: "대학교 3학년", value: 10 }, +// { name: "대학교 4학년", value: 20 }, +// ]; + +interface ChartProps { + data: Data[]; +} +interface Data { + name: string; + value: number; +} -const SecondBox: React.FC = () => { +const SecondBox: React.FC = ({ data }) => { const [activeIndex, setActiveIndex] = useState(0); const onPieEnter = (_: any, index: any) => { @@ -30,12 +35,12 @@ const SecondBox: React.FC = () => { diff --git a/pages/dashboard/StackCharts.tsx b/pages/dashboard/StackCharts.tsx index 893e9de..0835f16 100644 --- a/pages/dashboard/StackCharts.tsx +++ b/pages/dashboard/StackCharts.tsx @@ -6,13 +6,20 @@ import { ResponsiveContainer, Tooltip, } from "recharts"; -interface ThirdBoxProps { - children?: ReactNode; -} import * as styles from "../../components/styles/SecondBox.styles"; -const ThirdBox: React.FC = () => { +interface ChartProps { + data: Data[]; +} + +interface Data { + name: string; + uv: number; + pv: number; + amt: number; +} +const ThirdBox: React.FC = ({ data }) => { return ( @@ -35,12 +42,7 @@ const ThirdBox: React.FC = () => { {/* */} {/* */} - + @@ -48,48 +50,4 @@ const ThirdBox: React.FC = () => { ); }; -const data = [ - { - name: "Page A", - uv: 800, - pv: 2400, - amt: 2400, - }, - { - name: "Page B", - uv: 1100, - pv: 1398, - amt: 2210, - }, - { - name: "Page C", - uv: 1000, - pv: 9800, - amt: 2290, - }, - { - name: "Page D", - uv: 1300, - pv: 3908, - amt: 2000, - }, - { - name: "Page E", - uv: 1890, - pv: 4800, - amt: 2181, - }, - { - name: "Page F", - uv: 2390, - pv: 3800, - amt: 2500, - }, - { - name: "Page G", - uv: 3490, - pv: 4300, - amt: 2100, - }, -]; export default ThirdBox; diff --git a/pages/dashboard/[store].tsx b/pages/dashboard/[store].tsx index 9746b93..327d91e 100644 --- a/pages/dashboard/[store].tsx +++ b/pages/dashboard/[store].tsx @@ -50,9 +50,7 @@ const StorePage = () => { - - @@ -86,7 +84,7 @@ const data = [ }, { name: "화요일", - uv: 1000, + uv: 1500, pv: 1398, amt: 2210, }, @@ -98,7 +96,7 @@ const data = [ }, { name: "목요일", - uv: 1200, + uv: 2400, pv: 3908, amt: 2000, }, @@ -110,7 +108,7 @@ const data = [ }, { name: "토요일", - uv: 1500, + uv: 3100, pv: 3800, amt: 2500, }, diff --git a/pages/dashboard/index.tsx b/pages/dashboard/index.tsx index 7bedad0..b84318c 100644 --- a/pages/dashboard/index.tsx +++ b/pages/dashboard/index.tsx @@ -10,6 +10,7 @@ import ListChart from "./ListChart"; import { useDashBoardData } from "@/components/hooks/useDashBoardData"; import BarChart from "./BarChart"; import Filter from "@/components/organisms/Filter"; +import SearchModal from "@/components/organisms/Modal/\bSearchModal"; interface DashBoardProps {} interface DateState { @@ -23,9 +24,9 @@ enum dates { year, } const DashBoardPage: React.FC = () => { + const [isSearch, setIsSearch] = useState(false); const { dateRange, calculateDateRange } = useDateRange(); - const barChartData = useDashBoardData({ selection: 1 }).data; - const barChartData2 = useDashBoardData({ selection: 2 }).data; + const [contentFilter, setContentFilter] = useState< "NONE" | "FOOD" | "CAFE" | "BEAUTY" | "CULTURE" | "ETC" >("FOOD"); @@ -34,10 +35,13 @@ const DashBoardPage: React.FC = () => { dates: dates.aWeek, }); + const [menu, setMenu] = useState("최근7일"); + useEffect(() => { calculateDateRange(1, "month"); }, [dateFilter]); + console.log(menu); return ( <> @@ -47,7 +51,13 @@ const DashBoardPage: React.FC = () => { 대시보드 + + 학생들의 제휴 이용 현황을 확인해보세요. + { + setIsSearch(true); + }} className={css` align-self: flex-end; `} @@ -55,51 +65,176 @@ const DashBoardPage: React.FC = () => { 가게별 검색 - 이번달 [{dateRange.startDate} -{dateRange.endDate}] 기준입니다. + {menu == "최근7일" + ? datas.day7.date + : menu == "최근14일" + ? datas.day14.zero + : menu == "이번달" + ? datas.month.zero + : menu == "지난달" + ? datas.lastMonth.zero + : datas.year.zero} - - 최근 7일 - 최근 14일 - 이번 달 - 지난 달 - 올해 + { + setMenu("최근7일"); + }} + > + 최근 7일 + + { + setMenu("최근14일"); + }} + > + 최근 14일 + + { + setMenu("이번달"); + }} + > + 이번 달 + + { + setMenu("지난달"); + }} + > + 지난 달 + + { + setMenu("올해"); + }} + > + 올해 + - + - + - + - + - + @@ -107,22 +242,776 @@ const DashBoardPage: React.FC = () => { + {isSearch && } ); }; export default DashBoardPage; + +const datas = { + day7: { + date: "최근 7일 [2023-11-18 ~ 2023-11-25] 기준입니다.", + first: ["일 방문수", "21"], + second: ["누적 혜택", "3,000"], + third: ["평균 혜택 이용 수", "3회"], + fourth: [ + { name: "대학교 1학년", value: 70 }, + { name: "대학교 2학년", value: 20 }, + { name: "대학교 3학년", value: 10 }, + { name: "대학교 4학년", value: 20 }, + ], + fifth: [ + { + name: "Page A", + uv: 800, + pv: 2400, + amt: 2400, + }, + { + name: "Page B", + uv: 1100, + pv: 1398, + amt: 2210, + }, + { + name: "Page C", + uv: 1000, + pv: 9800, + amt: 2290, + }, + { + name: "Page D", + uv: 2100, + pv: 3908, + amt: 2000, + }, + { + name: "Page E", + uv: 1890, + pv: 4800, + amt: 2181, + }, + { + name: "Page F", + uv: 3130, + pv: 3800, + amt: 2500, + }, + { + name: "Page G", + uv: 3490, + pv: 4300, + amt: 2100, + }, + ], + sixth: ["탕화쿵푸", "황궁짜장면", "신의주 순대국"], + seventh: ["서브웨이", "맥도날드", "도쿄라멘"], + eightth: [ + { + name: "월요일", + uv: 4000, + pv: 2400, + amt: 2400, + }, + { + name: "화요일", + uv: 3000, + pv: 1398, + amt: 2210, + }, + { + name: "수요일", + uv: 4400, + pv: 9800, + amt: 2290, + }, + { + name: "목요일", + uv: 2780, + pv: 3908, + amt: 2000, + }, + { + name: "금요일", + uv: 2200, + pv: 4800, + amt: 2181, + }, + { + name: "토요일", + uv: 2390, + pv: 3800, + amt: 2500, + }, + { + name: "일요일", + uv: 3100, + pv: 4300, + amt: 2100, + }, + ], + nineth: [ + { + name: "경영", + uv: 3000, + pv: 2400, + amt: 2400, + }, + { + name: "컴공", + uv: 2600, + pv: 1398, + amt: 2210, + }, + { + name: "경제", + uv: 2000, + pv: 9800, + amt: 2290, + }, + { + name: "산업디자인", + uv: 1800, + pv: 3908, + amt: 2000, + }, + { + name: "영어영문", + uv: 1400, + pv: 4800, + amt: 2181, + }, + { + name: "철학", + uv: 800, + pv: 3800, + amt: 2500, + }, + { + name: "경제학", + uv: 700, + pv: 4300, + amt: 2100, + }, + ], + }, + day14: { + zero: "최근 14일 [2023-11-11 ~ 2023-11-25] 기준입니다.", + first: ["일 방문수", "25"], + second: ["누적 혜택", "165,000"], + third: ["평균 혜택 이용 수", "2.8회"], + fourth: [ + { name: "대학교 1학년", value: 50 }, + { name: "대학교 2학년", value: 30 }, + { name: "대학교 3학년", value: 15 }, + { name: "대학교 4학년", value: 25 }, + ], + fifth: [ + { + name: "Page A", + uv: 1100, + pv: 2800, + amt: 2800, + }, + { + name: "Page B", + uv: 1200, + pv: 1580, + amt: 2350, + }, + { + name: "Page C", + uv: 1300, + pv: 9000, + amt: 2480, + }, + { + name: "Page D", + uv: 1600, + pv: 4108, + amt: 2150, + }, + { + name: "Page E", + uv: 3350, + pv: 5300, + amt: 1980, + }, + { + name: "Page F", + uv: 2750, + pv: 3200, + amt: 2800, + }, + { + name: "Page G", + uv: 4200, + pv: 4800, + amt: 2650, + }, + ], + sixth: ["스시", "스테이크", "랍스터"], + seventh: ["피자헛", "버거킹", "KFC"], + eightth: [ + { + name: "월요일", + uv: 8000, + pv: 2800, + amt: 2800, + }, + { + name: "화요일", + uv: 3500, + pv: 1580, + amt: 2350, + }, + { + name: "수요일", + uv: 2400, + pv: 9600, + amt: 2480, + }, + { + name: "목요일", + uv: 2980, + pv: 4108, + amt: 2150, + }, + { + name: "금요일", + uv: 1890, + pv: 5300, + amt: 1980, + }, + { + name: "토요일", + uv: 2690, + pv: 4200, + amt: 2800, + }, + { + name: "일요일", + uv: 3690, + pv: 5600, + amt: 2650, + }, + ], + nineth: [ + { + name: "화학", + uv: 3200, + pv: 2600, + amt: 2600, + }, + { + name: "물리학", + uv: 2800, + pv: 1898, + amt: 2210, + }, + { + name: "생물학", + uv: 2200, + pv: 9800, + amt: 2290, + }, + { + name: "심리학", + uv: 1900, + pv: 4908, + amt: 2000, + }, + { + name: "수학", + uv: 1500, + pv: 5500, + amt: 2181, + }, + { + name: "사회학", + uv: 1000, + pv: 4800, + amt: 2500, + }, + { + name: "영어문학", + uv: 900, + pv: 5300, + amt: 2100, + }, + ], + }, + month: { + zero: "이번달 [2023-11-01 ~ 2023-11-25] 기준입니다", + first: ["일 방문수", "20"], + second: ["누적 혜택", "189,000"], + third: ["평균 혜택 이용 수", "2.6회"], + fourth: [ + { name: "대학교 1학년", value: 60 }, + { name: "대학교 2학년", value: 25 }, + { name: "대학교 3학년", value: 20 }, + { name: "대학교 4학년", value: 22 }, + ], + fifth: [ + { + name: "Page A", + uv: 1850, + pv: 2500, + amt: 2500, + }, + { + name: "Page B", + uv: 1150, + pv: 1480, + amt: 2450, + }, + { + name: "Page C", + uv: 1050, + pv: 9200, + amt: 2580, + }, + { + name: "Page D", + uv: 4050, + pv: 4308, + amt: 2250, + }, + { + name: "Page E", + uv: 1950, + pv: 5100, + amt: 2080, + }, + { + name: "Page F", + uv: 4150, + pv: 3500, + amt: 2700, + }, + { + name: "Page G", + uv: 3550, + pv: 4000, + amt: 2350, + }, + ], + sixth: ["중국음식", "일본음식", "이탈리아음식"], + seventh: ["던킨도너츠", "서브웨이", "파파존스"], + eightth: [ + { + name: "월요일", + uv: 1000, + pv: 2600, + amt: 2600, + }, + { + name: "화요일", + uv: 3300, + pv: 1598, + amt: 2310, + }, + { + name: "수요일", + uv: 400, + pv: 9700, + amt: 2390, + }, + { + name: "목요일", + uv: 2880, + pv: 4108, + amt: 2050, + }, + { + name: "금요일", + uv: 3000, + pv: 5200, + amt: 2181, + }, + { + name: "토요일", + uv: 2290, + pv: 3700, + amt: 2600, + }, + { + name: "일요일", + uv: 3290, + pv: 4500, + amt: 2250, + }, + ], + nineth: [ + { + name: "물리학", + uv: 2900, + pv: 2200, + amt: 2200, + }, + { + name: "화학", + uv: 2400, + pv: 1398, + amt: 2110, + }, + { + name: "수학", + uv: 1900, + pv: 9900, + amt: 2290, + }, + { + name: "생물학", + uv: 1700, + pv: 4008, + amt: 1950, + }, + { + name: "영어문학", + uv: 1300, + pv: 5700, + amt: 2071, + }, + { + name: "경제학", + uv: 900, + pv: 4200, + amt: 2380, + }, + { + name: "사회학", + uv: 800, + pv: 4700, + amt: 2000, + }, + ], + }, + lastMonth: { + zero: "지난달 [2023-10-01 ~ 2023-10-31] 기준입니다.", + first: ["일 방문수", "70"], + second: ["누적 혜택", "200,000"], + third: ["평균 혜택 이용 수", "14회"], + fourth: [ + { name: "대학교 1학년", value: 65 }, + { name: "대학교 2학년", value: 18 }, + { name: "대학교 3학년", value: 12 }, + { name: "대학교 4학년", value: 24 }, + ], + fifth: [ + { + name: "Page A", + uv: 900, + pv: 2700, + amt: 2700, + }, + { + name: "Page B", + uv: 1250, + pv: 1550, + amt: 2500, + }, + { + name: "Page C", + uv: 1150, + pv: 9100, + amt: 2680, + }, + { + name: "Page D", + uv: 1500, + pv: 4208, + amt: 2350, + }, + { + name: "Page E", + uv: 2050, + pv: 5400, + amt: 2180, + }, + { + name: "Page F", + uv: 2550, + pv: 3300, + amt: 2750, + }, + { + name: "Page G", + uv: 3750, + pv: 4200, + amt: 2500, + }, + ], + sixth: ["한식", "양식", "멕시코음식"], + seventh: ["버거킹", "맘스터치", "토스트"], + eightth: [ + { + name: "월요일", + uv: 7800, + pv: 2700, + amt: 2700, + }, + { + name: "화요일", + uv: 900, + pv: 1550, + amt: 2500, + }, + { + name: "수요일", + uv: 2200, + pv: 9100, + amt: 2680, + }, + { + name: "목요일", + uv: 3080, + pv: 4208, + amt: 2350, + }, + { + name: "금요일", + uv: 2990, + pv: 5400, + amt: 2180, + }, + { + name: "토요일", + uv: 2490, + pv: 3500, + amt: 2750, + }, + { + name: "일요일", + uv: 3590, + pv: 4100, + amt: 2500, + }, + ], + nineth: [ + { + name: "정치학", + uv: 3100, + pv: 2700, + amt: 2700, + }, + { + name: "심리학", + uv: 2700, + pv: 1498, + amt: 2310, + }, + { + name: "사회학", + uv: 2100, + pv: 9000, + amt: 2390, + }, + { + name: "문헌정보학", + uv: 1900, + pv: 4108, + amt: 2050, + }, + { + name: "영어영문학", + uv: 1500, + pv: 5600, + amt: 2181, + }, + { + name: "경영학", + uv: 1100, + pv: 4900, + amt: 2380, + }, + { + name: "경제학", + uv: 1000, + pv: 5300, + amt: 2000, + }, + ], + }, + year: { + zero: "올해 [2023-01-01 ~ 2023-11-25) 기준입니다.", + first: ["일 방문수", "34"], + second: ["누적 혜택", "230,000"], + third: ["평균 혜택 이용 수", "24회"], + fourth: [ + { name: "대학교 1학년", value: 80 }, + { name: "대학교 2학년", value: 15 }, + { name: "대학교 3학년", value: 25 }, + { name: "대학교 4학년", value: 30 }, + ], + fifth: [ + { + name: "Page A", + uv: 900, + pv: 2800, + amt: 2800, + }, + { + name: "Page B", + uv: 1200, + pv: 1700, + amt: 2550, + }, + { + name: "Page C", + uv: 1100, + pv: 10500, + amt: 2490, + }, + { + name: "Page D", + uv: 9200, + pv: 4300, + amt: 2200, + }, + { + name: "Page E", + uv: 2000, + pv: 5500, + amt: 2680, + }, + { + name: "Page F", + uv: 8100, + pv: 4100, + amt: 2900, + }, + { + name: "Page G", + uv: 10000, + pv: 5200, + amt: 2450, + }, + ], + sixth: ["햄버거", "스테이크", "파스타"], + seventh: ["피자헛", "버거킹", "롯데리아"], + eightth: [ + { + name: "월요일", + uv: 2000, + pv: 2600, + amt: 2600, + }, + { + name: "화요일", + uv: 3200, + pv: 1698, + amt: 2400, + }, + { + name: "수요일", + uv: 2200, + pv: 8800, + amt: 2590, + }, + { + name: "목요일", + uv: 2980, + pv: 3708, + amt: 2300, + }, + { + name: "금요일", + uv: 2100, + pv: 5100, + amt: 2481, + }, + { + name: "토요일", + uv: 2600, + pv: 4200, + amt: 2800, + }, + { + name: "일요일", + uv: 3800, + pv: 5100, + amt: 2450, + }, + ], + nineth: [ + { + name: "생물학", + uv: 2800, + pv: 2400, + amt: 2400, + }, + { + name: "물리학", + uv: 2500, + pv: 1598, + amt: 2210, + }, + { + name: "화학", + uv: 2100, + pv: 9500, + amt: 2390, + }, + { + name: "수학", + uv: 1800, + pv: 3908, + amt: 2100, + }, + { + name: "영어문학", + uv: 1600, + pv: 4700, + amt: 2271, + }, + { + name: "사회학", + uv: 1200, + pv: 3600, + amt: 2450, + }, + { + name: "음악", + uv: 900, + pv: 4300, + amt: 2100, + }, + ], + }, +}; diff --git a/pages/index.tsx b/pages/index.tsx index fdd0e5e..6f95dfd 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,20 +1,24 @@ import Head from "next/head"; import styled from "@emotion/styled"; +import Background from "@/assets/svg/background.gif"; + +import Background2 from "@/assets/svg/background2.png"; export default function Home() { return ( <> - 제대로, ~~~~~~ + + 제대로,학생과 학생회, 가게 모두의 소소한 행복이 되는 제휴사업이 되도록 + - 학생과 학생회, 가게 모두의 - 소소한 행복이 되는 제휴사업이 되도록 + + ); - } const Container = styled.div` @@ -26,6 +30,14 @@ const Container = styled.div` padding-top: 5%; padding-left: 10%; + + width: 100%; + + height: 100vh; + background-image: url(${Background.src}); + /* background-image: url(${Background2.src}); */ + + background-size: cover; `; const LandingTitle = styled.p` diff --git a/pages/mypage/index.tsx b/pages/mypage/index.tsx index 88b768b..ac55e8231 100644 --- a/pages/mypage/index.tsx +++ b/pages/mypage/index.tsx @@ -20,18 +20,35 @@ const MyPage: React.FC = () => { - 내 프로필 - {name} - - 이메일 - {email} - - - 대표 전화번호 - {phoneNum} - +
+ {name} + 다빈치 +
+ +
+ + 대표자 전화번호 + {phoneNum} + + + 학생회 이메일 + {email} + +
@@ -60,8 +77,7 @@ const ContentsWrapper = styled.div` transform: translate(-50%, -50%); height: 100%; - width: 510px; - color: white; + width: 412px; display: flex; flex-flow: column nowrap; @@ -72,13 +88,11 @@ const ContentsWrapper = styled.div` `; const Title = styled.p` - color: #fff; - font-family: Pretendard Variable; - font-size: 18px; + color: var(--, #3d4149); + font-family: Pretendard; + font-size: 21.297px; font-style: normal; - font-weight: 500; - - margin-bottom: 1.5rem; + font-weight: 600; `; const Name = styled.p` @@ -91,14 +105,22 @@ const Name = styled.p` margin-bottom: 20px; `; -const Word = styled.p` - color: #fff; +const Contents = styled.p` + color: var(--sb, #2d3036); font-family: Pretendard Variable; - font-size: 14px; + font-size: 16.564px; font-style: normal; font-weight: 400; `; +const Word = styled.p` + color: var(--g2, #aeaeb2); + font-family: Pretendard; + font-size: 18.93px; + font-style: normal; + font-weight: 600; +`; + const DetailBox = styled(FlexTemplate)` flex-flow: column nowrap; row-gap: 20px; @@ -108,3 +130,21 @@ const LineBox = styled(FlexTemplate)` flex-flow: row nowrap; justify-content: space-between; `; + +const Badge = styled(FlexTemplate)` + color: var(--sub3, #dfff60); + font-family: Pretendard; + font-size: 18.457px; + font-style: normal; + font-weight: 600; + line-height: 29.63px; /* 160.532% */ + letter-spacing: -1.107px; + + border-radius: 4.614px; + background: var(--sub2, #0e6eff); + width: 50px; + + align-items: center; + justify-content: center; + padding: 1px 2px; +`; diff --git a/pages/search/index.tsx b/pages/search/index.tsx index 641c341..df795d9 100644 --- a/pages/search/index.tsx +++ b/pages/search/index.tsx @@ -87,7 +87,12 @@ export default function SearchHome() { return ( - 가게 찾기 + + 가게 찾기 + + 제휴를 진행할 가게를 찾아보세요. + + {/** TODO: 누르면 expand로 변경되도록 */} diff --git a/pages/student/coupon/index.tsx b/pages/student/coupon/index.tsx index b6ce67d..5dc56ac 100644 --- a/pages/student/coupon/index.tsx +++ b/pages/student/coupon/index.tsx @@ -1,7 +1,8 @@ import { useRouter } from "next/router"; -import React, { useEffect, useState } from "react"; -import * as styles from "@/components/styles/popup/style"; +import React, { useState } from "react"; + +import * as styles from "@/components/styles/popup/style"; import { css } from "@emotion/css"; import { useCouponData } from "@/components/hooks/useCouponData"; import Link from "next/link"; @@ -55,7 +56,6 @@ const CouponAdminPage: React.FC = () => { {coupons.length !== 0 ? ( - coupons.map((element, index) => { return ( diff --git a/pages/student/coupon/register/Inputs.tsx b/pages/student/coupon/register/Inputs.tsx index 6533caf..77cc895 100644 --- a/pages/student/coupon/register/Inputs.tsx +++ b/pages/student/coupon/register/Inputs.tsx @@ -1,5 +1,4 @@ - import React, { useEffect, useMemo, useState } from "react"; import * as styles from "../../../../components/styles/CInputs.style"; import { css } from "@emotion/css"; @@ -14,7 +13,6 @@ import { ListItem, ListItemText, - } from "@mui/material"; import SearchTwoToneIcon from "@mui/icons-material/SearchTwoTone"; import { createCoupon } from "@/pages/api/coupon"; @@ -36,7 +34,8 @@ interface EventProps { quantity: number; } -const Inputs: React.FC = () => { +const Inputs = (props: any) => { + const setCouponContent = props.setCouponContent; const placeHolders = useMemo( () => [ 'ex- “제대로 사용자 한정, 한 번 더 카페 1900원 할인쿠폰"', @@ -49,7 +48,6 @@ const Inputs: React.FC = () => { ); - const [stores, setStores] = useState([]); const [searchTerm, setSearchTerm] = useState(""); @@ -63,7 +61,6 @@ const Inputs: React.FC = () => { console.log(stores); - const [formData, setFormData] = useState({ storeId: 2, type: "COUPON", @@ -76,6 +73,7 @@ const Inputs: React.FC = () => { const handleInputChange = (e: React.ChangeEvent) => { const { name, value } = e.target; setFormData({ ...formData, [name]: value }); + setCouponContent({ ...formData, [name]: value }); }; const handleSubmit = (e: React.FormEvent) => { @@ -135,12 +133,10 @@ const Inputs: React.FC = () => { width: 50%; `} - onChange={(e) => { setSearchTerm(e.target.value); }} - placeholder={placeHolders[1]} endAdornment={ @@ -171,7 +167,6 @@ const Inputs: React.FC = () => { name="condition" onChange={(e) => { - let result: any = []; @@ -225,7 +220,6 @@ const Inputs: React.FC = () => { - ); }; diff --git a/pages/student/coupon/register/index.tsx b/pages/student/coupon/register/index.tsx index 269fdf0..68b3be0 100644 --- a/pages/student/coupon/register/index.tsx +++ b/pages/student/coupon/register/index.tsx @@ -1,21 +1,125 @@ -import React from "react"; +import React, { useState } from "react"; import * as templateStyle from "@/components/styles/coupon/style"; import * as styles from "@/components/styles/coupon/register/style"; import Inputs from "./Inputs"; +import { Modal } from "@mui/material"; +import { css } from "@emotion/css"; +import styled from "@emotion/styled"; +import { FlexTemplate } from "@/components/atoms/basics"; +import CouponBackGround from "@/components/atoms/CouponBackground.svg"; const CouponRegisterPage: React.FC = () => { + const [modalOpen, setModalOpen] = useState(false); + const [couponContent, setCouponContent] = useState({ + type: "COUPON 미리보기", + conditions: ["쿠폰 사용조건"], + name: "쿠폰 정보", + }); + + console.log(couponContent); + const handleOpen = () => { + setModalOpen(true); + }; + + const handleClose = () => { + setModalOpen(false); + }; + return ( + + + + + + {couponContent.type} + {couponContent.name} + {couponContent.conditions[0]} + + + 사용하기 + + + + 쿠폰 등록 홈 / 쿠폰 / 쿠폰등록 - 미리보기 + + 미리보기 + - + ); }; - export default CouponRegisterPage; + +const ModalContainer = styled(FlexTemplate)` + width: 600px; + height: 187px; + position: relative; +`; + +const LayerContainer = styled(FlexTemplate)` + position: absolute; + width: 600px; + height: 187px; +`; + +const LeftContainer = styled(FlexTemplate)` + width: 450px; + height: 187px; + + flex-flow: column nowrap; + align-items: flex-start; + padding-left: 49.3px; + padding-top: 37.4px; +`; + +const LeftTitle = styled.p` + color: #fff; + text-align: center; + font-family: Pretendard Variable; + font-size: 30.6px; + font-style: normal; + font-weight: 600; +`; + +const LeftContent = styled.p` + color: var(--g0, #f4f4f4); + text-align: center; + font-family: Pretendard Variable; + font-size: 20.4px; + font-style: normal; + font-weight: 500; +`; + +const RightTitle = styled.p` + color: var(--sub3, #dfff60); + text-align: center; + font-family: Pretendard Variable; + font-size: 23.8px; + font-style: normal; + font-weight: 600; +`; + +const RightContainer = styled(FlexTemplate)` + width: 150px; + height: 187px; + + align-items: center; + justify-content: center; +`; diff --git a/pages/student/popup/register/Inputs.tsx b/pages/student/popup/register/Inputs.tsx index 0b573b1..f6bc459 100644 --- a/pages/student/popup/register/Inputs.tsx +++ b/pages/student/popup/register/Inputs.tsx @@ -5,6 +5,7 @@ import { FilledInput, IconButton, InputAdornment } from "@mui/material"; import SearchTwoToneIcon from "@mui/icons-material/SearchTwoTone"; import { DateTimePicker } from "@mui/x-date-pickers"; import { postPopups } from "@/pages/api/popup"; +import { useRouter } from "next/router"; interface ParamProps { title: string; @@ -25,7 +26,7 @@ const Inputs: React.FC = () => { ], [] ); - + const router = useRouter(); const [formData, setFormData] = useState({ title: "", content: "", @@ -42,6 +43,7 @@ const Inputs: React.FC = () => { const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); postData(); + router.back(); }; const postData = async () => { diff --git a/public/favicon.ico b/public/favicon.ico index 718d6fe..30f69f7 100644 Binary files a/public/favicon.ico and b/public/favicon.ico differ diff --git a/public/manifest.json b/public/manifest.json new file mode 100644 index 0000000..3d8705c --- /dev/null +++ b/public/manifest.json @@ -0,0 +1,13 @@ +{ + "short_name": "제대로", + "name": "제대로", + "icons": [ + { + "src": "favicon.ico", + "sizes": "48x48 32x32 24x24 16x16", + "type": "image/x-icon" + } + ], + "scope": "/", + "start_url": "/" +}