feat(WEB-154): my profile view

components/MyPages/Title/index.tsx

@@ -1,41 +1,21 @@
-import { cva } from "class-variance-authority"
-
-import styles from "./title.module.css"
+import { headingVariants } from "./variants"
 
 import type { HeadingProps } from "@/types/components/myPages/title"
 
-const config = {
-  variants: {
-    text: {
-      uppercase: styles.uppercase,
-    },
-    type: {
-      h1: styles.h1,
-      h2: styles.h2,
-      h3: styles.h3,
-      h4: styles.h4,
-      h5: styles.h5,
-    },
-  },
-  defaultVariants: {
-    type: "h1",
-  },
-} as const
-
-const headingStyles = cva(styles.heading, config)
-
 export default function Title({
   as,
   children,
   className = "",
   level = "h1",
   uppercase = false,
+  weight,
 }: HeadingProps) {
   const Hx = level
-  const classNames = headingStyles({
+  const classNames = headingVariants({
     className,
     text: uppercase ? "uppercase" : undefined,
     type: as ?? level,
+    weight,
   })
   return <Hx className={classNames}>{children}</Hx>
 }

components/MyPages/Title/title.module.css

@@ -1,5 +1,5 @@
 .heading {
-  font-weight: 900;
+  /* font-family: var(--ff-brandon-text); */
   margin: 0;
   padding: 0;
 }
@@ -33,6 +33,30 @@
   line-height: var(--typography-Title5-Mobile-lineHeight);
 }
 
+.light {
+  font-weight: 300;
+}
+
+.regular {
+  font-weight: 400;
+}
+
+.medium {
+  font-weight: 500;
+}
+
+.semiBold {
+  font-weight: 600;
+}
+
+.bold {
+  font-weight: 700;
+}
+
+.black {
+  font-weight: 900;
+}
+
 @media screen and (min-width: 950px) {
   .h1 {
     font-size: var(--typography-Title1-Desktop-fontSize);
@@ -58,4 +82,4 @@
     font-size: var(--typography-Title5-Desktop-fontSize);
     line-height: var(--typography-Title5-Desktop-lineHeight);
   }
-}
+}

components/MyPages/Title/variants.ts

@@ -0,0 +1,33 @@
+import { cva } from "class-variance-authority"
+
+import styles from "./title.module.css"
+
+const config = {
+  variants: {
+    text: {
+      uppercase: styles.uppercase,
+    },
+    type: {
+      h1: styles.h1,
+      h2: styles.h2,
+      h3: styles.h3,
+      h4: styles.h4,
+      h5: styles.h5,
+      h6: styles.h6,
+    },
+    weight: {
+      light: styles.light,
+      regular: styles.regular,
+      medium: styles.medium,
+      semiBold: styles.semiBold,
+      bold: styles.bold,
+      black: styles.black,
+    },
+  },
+  defaultVariants: {
+    type: "h1",
+    weight: "black",
+  },
+} as const
+
+export const headingVariants = cva(styles.heading, config)