feat: gradient header

src/components/TitleLogo.tsx

@@ -1,6 +1,7 @@
 import styled from "@emotion/styled";
 import { Link } from "react-router-dom";
-import logo from "/logo.svg";
+import { Header } from "./header/Header";
+import { useAuth } from "../contexts/AuthContext";
 
 const TotalStatContainer = styled.div`
   position: relative;
@@ -19,14 +20,6 @@ const TotalStatContainer = styled.div`
   padding: 32px 0;
 `;
 
-const LogoContainer = styled.img`
-  position: relative;
-  min-height: 80px;
-  max-width: 70vw;
-  object-fit: contain;
-  pointer-events: all;
-`;
-
 const TotalStatWrapper = styled.div`
   position: relative;
   width: 100%;
@@ -66,18 +59,29 @@ const TotalStatDetail = styled.div`
   font-size: 36px;
 `;
 
+const HeaderLink = styled(Link)`
+  pointer-events: all;
+  text-decoration: none;
+`;
+
 interface TotalStatProps {
   useTotalStats?: boolean;
 }
 
 const TitleLogo = (props: TotalStatProps) => {
+  const { user } = useAuth();
   const { useTotalStats } = props;
 
   return (
     <TotalStatContainer>
-      <Link to="/">
-        <LogoContainer src={logo} />
-      </Link>
+      <HeaderLink
+        to="/"
+        style={{
+          textDecoration: "none",
+        }}
+      >
+        <Header>{user?.displayName || "개척단 훈련소"}</Header>
+      </HeaderLink>
       {useTotalStats && (
         <TotalStatWrapper>
           <TotalStatCard>

src/components/header/Header.tsx

@@ -0,0 +1,41 @@
+import styled from "@emotion/styled";
+import { HTMLAttributes, PropsWithChildren } from "react";
+import { color } from "../../styles/colors";
+import { HeaderText } from "./HeaderText";
+import { transparentize } from "polished";
+
+const HeaderBackground = styled.div`
+  max-width: 100vw;
+  background-image: linear-gradient(
+    to right,
+    ${color.silkBlueLight},
+    ${transparentize(0.2, color.silkBlueLight)},
+    ${transparentize(1, color.silkBlueLight)}
+  );
+  background-clip: padding-box;
+  border-top: 2px solid transparent;
+  border-bottom: 2px solid transparent;
+  border-image: linear-gradient(
+    to right,
+    ${color.goldText},
+    ${transparentize(0.2, color.goldTextLight)},
+    ${transparentize(1, color.goldTextLight)}
+  );
+  border-image-slice: 1;
+  min-height: 64px;
+  padding: 8px 160px 8px 24px;
+  font-size: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+`;
+
+interface Props extends HTMLAttributes<HTMLDivElement> {}
+
+export const Header = ({ children, ...rest }: PropsWithChildren<Props>) => {
+  return (
+    <HeaderBackground {...rest}>
+      <HeaderText>{children}</HeaderText>
+    </HeaderBackground>
+  );
+};

src/components/header/HeaderText.tsx

@@ -0,0 +1,20 @@
+import styled from "@emotion/styled";
+import { color } from "../../styles/colors";
+import { fontFamilies } from "../../styles/fonts";
+
+export const HeaderText = styled.span`
+  ${fontFamilies.kimDaegon}
+  background-color: ${color.goldText};
+  background-image: linear-gradient(
+    to bottom,
+    ${color.goldText},
+    ${color.goldTextLight}
+  );
+  background-size: 80%;
+  background-repeat: repeat;
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  -moz-background-clip: text;
+  -moz-text-fill-color: transparent;
+`;

src/pages/stats/:handle/UserStatsPage.tsx

@@ -1,7 +1,7 @@
 import styled from "@emotion/styled";
 import { useParams } from "react-router-dom";
+import { Header } from "../../../components/header/Header";
 import DefaultLayout from "../../../components/layouts/DefaultLayout";
-import { color } from "../../../styles/colors";
 import { commons } from "../../../styles/commons";
 import { fontFamilies } from "../../../styles/fonts";
 import bom from "/bom.png";
@@ -34,29 +34,6 @@ const HandleContainer = styled.div`
   justify-content: flex-start;
 `;
 
-const Handle = styled.div`
-  ${fontFamilies.kimDaegon}
-  position: absolute;
-  font-size: 2rem;
-  bottom: 32px;
-  left: 16px;
-  color: #debc80;
-`;
-
-const HandleBackground = styled.div`
-  position: absolute;
-  bottom: 16px;
-  background-image: linear-gradient(
-    to right,
-    ${color.silkBlue},
-    rgba(33, 36, 67, 0)
-  );
-  height: 64px;
-  width: 60%;
-  border-top: 2px solid #debc80;
-  border-bottom: 2px solid #debc80;
-`;
-
 const CardContainer = styled.div`
   ${commons.card}
   position: relative;
@@ -263,8 +240,7 @@ const UserStatsPage = () => {
       <Container>
         <CardFlexBox>
           <HandleContainer>
-            <HandleBackground />
-            <Handle>{handle}</Handle>
+            <Header>{handle}</Header>
           </HandleContainer>
           <CardContainer>
             <StatsContainer>

src/styles/colors.ts

@@ -4,5 +4,7 @@ export const color = {
   silkBlueDark: "#0b101c",
   silkBlueSecondaryText: "#8e93bd",
   goldLight: "#e6b06f",
+  goldText: "#e6be78",
+  goldTextLight: "#f9e394",
   backdropGray: "#1c1c1c",
 };