diff --git a/src/apis/httpClient/httpClient.ts b/src/apis/httpClient/httpClient.ts index 34ef9092..951a6a52 100644 --- a/src/apis/httpClient/httpClient.ts +++ b/src/apis/httpClient/httpClient.ts @@ -180,4 +180,5 @@ export default { reserve: new HttpClient("api/ber", axiosConfig), meister: new HttpClient("api/meister", axiosConfig), ranking: new HttpClient("api/meister/ranking", axiosConfig), + main: new HttpClient("api/main", axiosConfig), }; diff --git a/src/assets/icons/BambooIcon.tsx b/src/assets/icons/BambooIcon.tsx new file mode 100644 index 00000000..7b23d81d --- /dev/null +++ b/src/assets/icons/BambooIcon.tsx @@ -0,0 +1,20 @@ +import React from "react"; + +const BambooIcon = () => { + return ( + + + + ); +}; + +export default BambooIcon; diff --git a/src/assets/icons/BerIcon.tsx b/src/assets/icons/BerIcon.tsx new file mode 100644 index 00000000..abe6ec5d --- /dev/null +++ b/src/assets/icons/BerIcon.tsx @@ -0,0 +1,20 @@ +import React from "react"; + +const BerIcon = () => { + return ( + + + + ); +}; + +export default BerIcon; diff --git a/src/assets/icons/CalenderIcon.tsx b/src/assets/icons/CalenderIcon.tsx new file mode 100644 index 00000000..0b899d4b --- /dev/null +++ b/src/assets/icons/CalenderIcon.tsx @@ -0,0 +1,26 @@ +import React from "react"; + +const CalenderIcon = () => { + return ( + + + + + ); +}; + +export default CalenderIcon; diff --git a/src/assets/icons/ChatIcon.tsx b/src/assets/icons/ChatIcon.tsx new file mode 100644 index 00000000..4b176866 --- /dev/null +++ b/src/assets/icons/ChatIcon.tsx @@ -0,0 +1,20 @@ +import React from "react"; + +const ChatIcon = () => { + return ( + + + + ); +}; + +export default ChatIcon; diff --git a/src/assets/icons/Logo.tsx b/src/assets/icons/Logo.tsx index f1e6136a..8fbfc63d 100644 --- a/src/assets/icons/Logo.tsx +++ b/src/assets/icons/Logo.tsx @@ -5,6 +5,8 @@ const Logo = ({ isPointable }: SVGAttribute) => { return ( { + return ( + + + + ); +}; + +export default MealIcon; diff --git a/src/assets/icons/NoticeIcon.tsx b/src/assets/icons/NoticeIcon.tsx new file mode 100644 index 00000000..9d03dc8c --- /dev/null +++ b/src/assets/icons/NoticeIcon.tsx @@ -0,0 +1,20 @@ +import React from "react"; + +const NoticeIcon = () => { + return ( + + + + ); +}; + +export default NoticeIcon; diff --git a/src/assets/icons/index.ts b/src/assets/icons/index.ts index 00eb0f5f..e357a398 100644 --- a/src/assets/icons/index.ts +++ b/src/assets/icons/index.ts @@ -21,3 +21,9 @@ export { default as HistorySeparator } from "./HistorySeparator"; export { default as UploadIcon } from "./UploadIcon"; export { default as AddCommentIcon } from "./AddCommentIcon"; export { default as DesktopIcon } from "./DesktopIcon"; +export { default as MealIcon } from "./MealIcon"; +export { default as BerIcon } from "./BerIcon"; +export { default as CalenderIcon } from "./CalenderIcon"; +export { default as NoticeIcon } from "./NoticeIcon"; +export { default as ChatIcon } from "./ChatIcon"; +export { default as BambooIcon } from "./BambooIcon"; diff --git a/src/assets/images/index.ts b/src/assets/images/index.ts index 16755072..712e7b0e 100644 --- a/src/assets/images/index.ts +++ b/src/assets/images/index.ts @@ -6,3 +6,5 @@ export { default as QR } from "./QR.png"; export { default as ShushingFace } from "./shushing_face.png"; export { default as ThinkingFace } from "./thinking_face.png"; export { default as HuggingFace } from "./hugging_face.png"; +export { default as TestBanner } from "./test_banner.png"; +export { default as TestSmallBanner } from "./test_small_banner.png"; diff --git a/src/assets/images/test_banner.png b/src/assets/images/test_banner.png new file mode 100644 index 00000000..490568b6 Binary files /dev/null and b/src/assets/images/test_banner.png differ diff --git a/src/assets/images/test_small_banner.png b/src/assets/images/test_small_banner.png new file mode 100644 index 00000000..0daa8762 Binary files /dev/null and b/src/assets/images/test_small_banner.png differ diff --git a/src/components/common/Aside/InfomationBox.tsx b/src/components/common/Aside/InfomationBox.tsx index d8d5a23f..9663a54d 100644 --- a/src/components/common/Aside/InfomationBox.tsx +++ b/src/components/common/Aside/InfomationBox.tsx @@ -62,10 +62,10 @@ const InfomationBox = ({ user, isLogined }: IInfomationBoxProps) => { const Container = styled.main` ${flex.CENTER}; width: 100%; - height: 85px; + height: 100%; background-color: ${color.white}; gap: 8px; - padding: 0px 22px; + padding: 14px 22px; border-radius: 5px; @media screen and (max-width: 1074px) { diff --git a/src/components/common/Aside/JoinCheckBox.tsx b/src/components/common/Aside/JoinCheckBox.tsx index fc89df60..05ae3e3f 100644 --- a/src/components/common/Aside/JoinCheckBox.tsx +++ b/src/components/common/Aside/JoinCheckBox.tsx @@ -19,7 +19,7 @@ const Container = styled.section` border-radius: 5px; background-color: ${color.white}; display: flex; - padding: 18px 0; + padding: 22px 0; justify-content: space-between; flex-direction: column; align-items: center; diff --git a/src/components/common/Aside/MeisterBox.tsx b/src/components/common/Aside/MeisterBox.tsx index fb6492c0..3a5b9a7d 100644 --- a/src/components/common/Aside/MeisterBox.tsx +++ b/src/components/common/Aside/MeisterBox.tsx @@ -36,7 +36,7 @@ const Container = styled.section` border-radius: 5px; background-color: ${color.white}; display: flex; - padding: 6px 0 6px 18px; + padding: 10px 0 10px 18px; flex-direction: column; justify-content: center; gap: 6px; diff --git a/src/components/common/Aside/index.tsx b/src/components/common/Aside/index.tsx index 94c23aec..4366721b 100644 --- a/src/components/common/Aside/index.tsx +++ b/src/components/common/Aside/index.tsx @@ -9,20 +9,27 @@ const Aside = () => { const { user, isLogined } = useUser(); return ( - - - {isLogined && ( - - - - - )} - + + + + {isLogined && ( + + + + + )} + + ); }; +const Layout = styled.div` + display: flex; +`; + const Container = styled.aside` - width: 30vw; + width: 22vw; + height: 30vh; display: flex; gap: 6px; margin-left: auto; diff --git a/src/constants/key.constant.ts b/src/constants/key.constant.ts index 4f772ac8..748a1826 100644 --- a/src/constants/key.constant.ts +++ b/src/constants/key.constant.ts @@ -12,6 +12,7 @@ const KEY = { MEISTER: "useMeister", MEISTER_DETAIL: "useMeisterDetail", RANKING: "useRanking", + MAIN: "useMain", } as const; export default KEY; diff --git a/src/templates/bamboo/index.tsx b/src/templates/bamboo/index.tsx index 0f4068f4..eb5350c3 100644 --- a/src/templates/bamboo/index.tsx +++ b/src/templates/bamboo/index.tsx @@ -62,7 +62,6 @@ const Container = styled.div` `; const AsideButtonBox = styled.div` - width: 21.4vw; ${flex.COLUMN}; gap: 12px; margin-left: auto; diff --git a/src/templates/home/index.tsx b/src/templates/home/index.tsx index 17032fe9..157a5662 100644 --- a/src/templates/home/index.tsx +++ b/src/templates/home/index.tsx @@ -1,11 +1,47 @@ +import React from "react"; import styled from "styled-components"; import { Aside } from "@/components/common"; +import { flex } from "@/styles"; +import { Column, Row } from "@/components/Flex"; +import { useMainQuery } from "./services/query.service"; +import HomeMeal from "./layouts/HomeMeal"; +import HomeReserve from "./layouts/HomeReserve"; +import HomeMainBanner from "./layouts/HomeMainBanner"; +import HomeCalender from "./layouts/HomeCalender"; +import HomePost from "./layouts/HomePost"; +import HomeRadarChart from "./layouts/HomeRadarChart"; +import HomeBamboo from "./layouts/HomeBamboo"; +import HomeMiniBanner from "./layouts/HomeMiniBanner"; const HomePage = () => { + const { data } = useMainQuery(); + + React.useEffect(() => { + if (data) console.log(data); + }, [data]); + return ( -