Merge pull request #118 from Team-INSERT/refactor/meister

마이스터 페이지 리팩토링

Author: Ubinquitous

src/app/meister/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import MeisterPage from "@/templates/meister";
+import MeisterPage from "@/templates/meister/layouts";
 
 const Meister = () => {
   return <MeisterPage />;

src/components/Flex/Row.tsx

@@ -7,9 +7,15 @@ const Row = ({
   justifyContent = "none",
   alignItems = "none",
   width,
+  as,
+  ...props
 }: FlexPropsType) => {
   return (
-    <StyledRow style={{ gap, justifyContent, alignItems, width }}>
+    <StyledRow
+      as={as}
+      {...props}
+      style={{ gap, justifyContent, alignItems, width }}
+    >
       {children}
     </StyledRow>
   );

src/components/Flex/type.ts

@@ -1,6 +1,6 @@
-import { ReactNode } from "react";
+import { HTMLAttributes, ReactNode } from "react";
 
-interface FlexPropsType {
+interface FlexPropsType extends HTMLAttributes<HTMLElement> {
   children: ReactNode;
   gap?: string;
   justifyContent?:
@@ -12,6 +12,7 @@ interface FlexPropsType {
   alignItems?: "none" | "center" | "flex-end" | "flex-start" | "space-between";
   width?: string;
   height?: string;
+  as?: string;
 }
 
 export default FlexPropsType;

src/components/common/Header/assets/data/navigationList.ts

@@ -1,7 +1,7 @@
 const navigationList = [
   {
     id: 1,
-    name: "👩🏻‍🎓  인증제",
+    name: "👩🏻‍🎓  마이스터",
     href: "/meister",
   },
   {

src/components/common/Modal/SettingModal/SettingHeader.tsx

@@ -1,7 +1,8 @@
 import styled from "styled-components";
 import { font } from "@/styles";
-import { XIcon, Setting } from "@/assets/icons";
+import { Setting } from "@/assets/icons";
 import useModal from "@/hooks/useModal";
+import { ModalCloseIcon } from "@/templates/bamboo/assets/icons";
 
 const SettingHeader = () => {
   const { closeModal } = useModal();
@@ -13,7 +14,7 @@ const SettingHeader = () => {
         <SettingTitle />
       </HGroup>
       <CloseButton>
-        <XIcon onClick={closeModal} />
+        <ModalCloseIcon onClick={closeModal} />
       </CloseButton>
     </Header>
   );

src/hooks/useMeister.ts

@@ -10,7 +10,11 @@ import { ROUTER } from "@/constants";
 const LayoutProvider = ({ children }: React.PropsWithChildren) => {
   const { isWindow } = useWindow();
   const routerName = isWindow ? window.location.pathname : "";
-  const dontNeedAsidePage: Array<string> = [ROUTER.LOGIN, ROUTER.CALENDER];
+  const dontNeedAsidePage: Array<string> = [
+    ROUTER.LOGIN,
+    ROUTER.CALENDER,
+    ROUTER.MEISTER,
+  ];
   const isNeedAsidePage = !dontNeedAsidePage.includes(routerName);
 
   return (

src/provider/layoutProvider.helper.tsx

@@ -0,0 +1,10 @@
+import { color } from "@/styles";
+import { SCORE } from "../../constants";
+
+const graphColorData = {
+  [SCORE.AVG]: color.primary_yellow,
+  [SCORE.MY]: color.primary_blue,
+  [SCORE.MAX]: color.primary_red,
+};
+
+export default graphColorData;