Merge pull request #380 from boostcampwm-2024/Design/379

huiseon37 · web-flow · commit f1e9a5d77fa0 · 2025-01-06T20:26:35.000+09:00
[Design] 멀티 테마 구현 (라이트 모드/ 다크 모드 전환)
diff --git a/apps/client/src/App.tsx b/apps/client/src/App.tsx
@@ -1,17 +1,22 @@
 import { Outlet } from 'react-router-dom';
 import Header from '@components/Header';
 import './App.css';
-import { AuthProvider } from './contexts/AuthContext';
-import { Toaster } from './components/ui/toaster';
+import { AuthProvider } from '@contexts/AuthContext';
+import { Toaster } from '@components/ui/toaster';
+import FloatingButton from '@components/FloatingButton';
+import { ThemeProvider } from './contexts/ThemeContext';
 
 function App() {
   return (
     <AuthProvider>
-      <Header />
-      <main>
-        <Outlet />
-      </main>
-      <Toaster />
+      <ThemeProvider>
+        <Header />
+        <main>
+          <Outlet />
+        </main>
+        <Toaster />
+        <FloatingButton />
+      </ThemeProvider>
     </AuthProvider>
   );
 }
diff --git a/apps/client/src/components/FloatingButton/index.tsx b/apps/client/src/components/FloatingButton/index.tsx
@@ -0,0 +1,20 @@
+import { Button } from '@components/ui/button';
+import { ThemeIcon } from '@components/Icons';
+import { useTheme } from '@/hooks/useTheme';
+
+function FloatingButton() {
+  const { convertTheme } = useTheme();
+
+  return (
+    <div className="fixed bottom-3 right-5">
+      <Button
+        onClick={convertTheme}
+        className="h-10 w-10 rounded rounded-circle p-0 bg-surface-brand-default hover:bg-surface-brand-alt"
+      >
+        <ThemeIcon size={48} />
+      </Button>
+    </div>
+  );
+}
+
+export default FloatingButton;
diff --git a/apps/client/src/components/Header/index.tsx b/apps/client/src/components/Header/index.tsx
@@ -74,7 +74,7 @@ function Header() {
     <header className="fixed top-0 left-0 h-fit w-full px-10 py-3 flex justify-between z-10 bg-surface-default">
       <div className="flex flex-row gap-2 hover:cursor-pointer" onClick={handleLogoClick}>
         <Character size={48} />
-        <Logo width={109} height={50} />
+        <Logo width={109} height={50} className="text-text-strong" />
       </div>
       <div className="flex items-center">
         {isLoggedIn ? (
diff --git a/apps/client/src/components/Icons/Logo.tsx b/apps/client/src/components/Icons/Logo.tsx
@@ -16,7 +16,7 @@ function Logo({ height, width, className = '' }: LogoProps) {
     >
       <path
         d="M6.944 17.32L13.856 13.32C14.5813 12.8933 15.2213 12.84 15.776 13.16C16.352 13.48 16.64 14.0667 16.64 14.92V18.12L13.856 19.72V16.52L6.944 20.52V39.08L13.856 35.08V31.88L16.64 30.28V33.48C16.64 34.0347 16.5013 34.632 16.224 35.272C15.968 35.912 15.6267 36.5093 15.2 37.064C14.7947 37.5973 14.3467 38.0027 13.856 38.28L6.944 42.28C6.19733 42.7067 5.54667 42.76 4.992 42.44C4.43733 42.12 4.16 41.5333 4.16 40.68V22.12C4.16 21.544 4.288 20.9467 4.544 20.328C4.8 19.688 5.14133 19.1013 5.568 18.568C5.99467 18.0133 6.45333 17.5973 6.944 17.32ZM16.64 30.28L13.856 31.88L11.072 30.28L13.856 28.68L16.64 30.28ZM13.856 31.88V35.08L11.072 33.48V30.28L13.856 31.88ZM13.856 35.08L6.944 39.08L4.16 37.48L11.072 33.48L13.856 35.08ZM13.856 16.52V19.72L11.072 18.12V14.92L13.856 16.52ZM15.808 13.16C15.232 12.84 14.5813 12.8933 13.856 13.32L6.944 17.32C6.45333 17.5973 5.99467 18.0133 5.568 18.568C5.14133 19.1013 4.8 19.688 4.544 20.328C4.288 20.9467 4.16 21.544 4.16 22.12V40.68C4.16 41.5333 4.43733 42.12 4.992 42.44L2.208 40.84C1.65333 40.52 1.376 39.9333 1.376 39.08V20.52C1.376 19.944 1.504 19.3467 1.76 18.728C2.016 18.088 2.35733 17.5013 2.784 16.968C3.21067 16.4133 3.66933 15.9973 4.16 15.72L11.072 11.72C11.8187 11.2933 12.4693 11.24 13.024 11.56L15.808 13.16ZM22.1913 25.32L30.5113 20.52C31.2366 20.0933 31.8766 20.04 32.4313 20.36C32.9859 20.68 33.2633 21.2667 33.2633 22.12V37.48L30.5113 39.08V35.88C30.5113 36.4347 30.3833 37.032 30.1273 37.672C29.8713 38.312 29.5299 38.9093 29.1033 39.464C28.6766 39.9973 28.2179 40.4027 27.7273 40.68L24.9753 42.28C24.2286 42.7067 23.5779 42.76 23.0233 42.44C22.4686 42.12 22.1913 41.5333 22.1913 40.68V36.2C22.1913 35.624 22.3193 35.0267 22.5753 34.408C22.8313 33.768 23.1726 33.1813 23.5993 32.648C24.0259 32.0933 24.4846 31.6773 24.9753 31.4L30.5113 28.2V23.72L22.1913 28.52V25.32ZM24.9753 39.08L30.5113 35.88V31.4L24.9753 34.6V39.08ZM30.5113 23.72V28.2L27.7273 26.6V22.12L30.5113 23.72ZM30.5113 35.88V39.08L27.7273 37.48V34.28L30.5113 35.88ZM30.5113 31.4V35.88L27.7273 34.28V29.8L30.5113 31.4ZM30.5113 35.88L24.9753 39.08L22.1913 37.48L27.7273 34.28L30.5113 35.88ZM30.5113 28.2L24.9753 31.4C24.4846 31.6773 24.0259 32.0933 23.5993 32.648C23.1726 33.1813 22.8313 33.768 22.5753 34.408C22.3193 35.0267 22.1913 35.624 22.1913 36.2V40.68C22.1913 41.5333 22.4686 42.12 23.0233 42.44L20.2393 40.84C19.6846 40.52 19.4073 39.9333 19.4073 39.08V34.6C19.4073 34.024 19.5353 33.4267 19.7913 32.808C20.0473 32.168 20.3886 31.5813 20.8153 31.048C21.2419 30.4933 21.7006 30.0773 22.1913 29.8L27.7273 26.6L30.5113 28.2ZM32.4313 20.36C31.8766 20.04 31.2366 20.0933 30.5113 20.52L22.1913 25.32L19.4073 23.72L27.7273 18.92C28.4739 18.4933 29.1246 18.44 29.6793 18.76L32.4313 20.36ZM22.1913 25.32V28.52L19.4073 26.92V23.72L22.1913 25.32ZM38.8163 25.32L41.6003 23.72V26.92C41.6003 26.344 41.7283 25.7467 41.9843 25.128C42.2403 24.488 42.5709 23.9013 42.9763 23.368C43.4029 22.8133 43.8616 22.3973 44.3523 22.12L45.1843 21.64C45.9309 21.2133 46.5816 21.16 47.1363 21.48C47.6909 21.8 47.9683 22.3867 47.9683 23.24C47.9683 22.664 48.0963 22.0667 48.3523 21.448C48.6083 20.808 48.9389 20.2213 49.3443 19.688C49.7709 19.1333 50.2296 18.7173 50.7203 18.44L51.5522 17.96C52.2989 17.5333 52.9496 17.48 53.5043 17.8C54.0589 18.12 54.3363 18.7067 54.3363 19.56V33.64L51.5522 35.24V21.16L47.9683 23.24V37.32L45.1843 38.92V24.84L41.6003 26.92V41L38.8163 42.6V25.32ZM51.5522 21.16V35.24L48.8003 33.64V19.56L51.5522 21.16ZM45.1843 24.84V38.92L42.4003 37.32V23.24L45.1843 24.84ZM53.5043 17.8C52.9496 17.48 52.2989 17.5333 51.5522 17.96L50.7203 18.44C50.2296 18.7173 49.7709 19.1333 49.3443 19.688C48.9389 20.2213 48.6083 20.808 48.3523 21.448C48.0963 22.0667 47.9683 22.664 47.9683 23.24L45.1843 21.64C45.1843 21.064 45.3123 20.4667 45.5683 19.848C45.8243 19.208 46.1656 18.6213 46.5923 18.088C47.0189 17.5333 47.4776 17.1173 47.9683 16.84L48.8003 16.36C49.5256 15.9333 50.1656 15.88 50.7203 16.2L53.5043 17.8ZM38.8163 25.32V42.6L36.0323 41V23.72L38.8163 25.32ZM47.1363 21.48C46.5816 21.16 45.9309 21.2133 45.1843 21.64L44.3523 22.12C43.8616 22.3973 43.4029 22.8133 42.9763 23.368C42.5709 23.9013 42.2403 24.488 41.9843 25.128C41.7283 25.7467 41.6003 26.344 41.6003 26.92L38.8163 25.32C38.8163 24.744 38.9443 24.1467 39.2003 23.528C39.4563 22.888 39.7976 22.3013 40.2243 21.768C40.6509 21.2133 41.1096 20.7973 41.6003 20.52L42.4003 20.04C43.1469 19.6133 43.7976 19.56 44.3523 19.88L47.1363 21.48ZM41.6003 23.72L38.8163 25.32L36.0323 23.72L38.8163 22.12L41.6003 23.72ZM62.0868 18.6C61.4468 18.9627 60.9134 19.0267 60.4868 18.792C60.0814 18.5573 59.8788 18.0667 59.8788 17.32C59.8788 16.5733 60.0814 15.8373 60.4868 15.112C60.9134 14.3867 61.4468 13.8427 62.0868 13.48C62.7268 13.1173 63.2494 13.0533 63.6548 13.288C64.0814 13.5227 64.2948 14.0133 64.2948 14.76V18.6C64.2948 19.048 64.1881 19.528 63.9748 20.04C63.7828 20.552 63.5161 21.0213 63.1748 21.448C62.8548 21.8747 62.4921 22.2053 62.0868 22.44V18.6ZM62.0868 18.6V22.44L59.3348 20.84V17L62.0868 18.6ZM63.6868 13.288C63.2601 13.0533 62.7268 13.1173 62.0868 13.48C61.4468 13.8427 60.9134 14.3867 60.4868 15.112C60.0814 15.8373 59.8788 16.5733 59.8788 17.32C59.8788 18.0667 60.0814 18.5573 60.4868 18.792L57.7348 17.192C57.3081 16.9573 57.0948 16.4667 57.0948 15.72C57.0948 14.9733 57.2974 14.2373 57.7028 13.512C58.1294 12.7867 58.6734 12.2427 59.3348 11.88C59.9748 11.5173 60.4974 11.4533 60.9028 11.688L63.6868 13.288Z"
-        fill="white"
+        fill="currentColor"
       />
       <path
         d="M80.944 17.32L87.856 13.32C88.5813 12.8933 89.2213 12.84 89.776 13.16C90.352 13.48 90.64 14.0667 90.64 14.92V33.48C90.64 34.0347 90.5013 34.632 90.224 35.272C89.968 35.912 89.6267 36.5093 89.2 37.064C88.7947 37.5973 88.3467 38.0027 87.856 38.28L80.944 42.28C80.1973 42.7067 79.5467 42.76 78.992 42.44C78.4373 42.12 78.16 41.5333 78.16 40.68V22.12C78.16 21.544 78.288 20.9467 78.544 20.328C78.8 19.688 79.1413 19.1013 79.568 18.568C79.9947 18.0133 80.4533 17.5973 80.944 17.32ZM80.944 39.08L87.856 35.08V16.52L80.944 20.52V39.08ZM87.856 16.52V35.08L85.072 33.48V14.92L87.856 16.52ZM87.856 35.08L80.944 39.08L78.16 37.48L85.072 33.48L87.856 35.08ZM89.808 13.16C89.232 12.84 88.5813 12.8933 87.856 13.32L80.944 17.32C80.4533 17.5973 79.9947 18.0133 79.568 18.568C79.1413 19.1013 78.8 19.688 78.544 20.328C78.288 20.9467 78.16 21.544 78.16 22.12V40.68C78.16 41.5333 78.4373 42.12 78.992 42.44L76.208 40.84C75.6533 40.52 75.376 39.9333 75.376 39.08V20.52C75.376 19.944 75.504 19.3467 75.76 18.728C76.016 18.088 76.3573 17.5013 76.784 16.968C77.2107 16.4133 77.6693 15.9973 78.16 15.72L85.072 11.72C85.8187 11.2933 86.4693 11.24 87.024 11.56L89.808 13.16ZM96.1913 25.32L98.9753 23.72V26.92C98.9753 26.344 99.1033 25.7467 99.3593 25.128C99.6153 24.488 99.9459 23.9013 100.351 23.368C100.778 22.8133 101.237 22.3973 101.727 22.12L104.511 20.52C105.237 20.0933 105.877 20.04 106.431 20.36C106.986 20.68 107.263 21.2667 107.263 22.12V36.2L104.511 37.8V23.72L98.9753 26.92V41L96.1913 42.6V25.32ZM104.511 23.72V37.8L101.727 36.2V22.12L104.511 23.72ZM96.1913 25.32V42.6L93.4073 41V23.72L96.1913 25.32ZM106.431 20.36C105.877 20.04 105.237 20.0933 104.511 20.52L101.727 22.12C101.237 22.3973 100.778 22.8133 100.351 23.368C99.9459 23.9013 99.6153 24.488 99.3593 25.128C99.1033 25.7467 98.9753 26.344 98.9753 26.92L96.1913 25.32C96.1913 24.744 96.3193 24.1467 96.5753 23.528C96.8313 22.888 97.1726 22.3013 97.5993 21.768C98.0259 21.2133 98.4846 20.7973 98.9753 20.52L101.727 18.92C102.474 18.4933 103.125 18.44 103.679 18.76L106.431 20.36ZM98.9753 23.72L96.1913 25.32L93.4073 23.72L96.1913 22.12L98.9753 23.72Z"
diff --git a/apps/client/src/components/Icons/ThemeIcon.tsx b/apps/client/src/components/Icons/ThemeIcon.tsx
@@ -0,0 +1,21 @@
+interface IconProps {
+  size?: number;
+  className?: string;
+}
+
+function ThemeIcon({ size = 36, className = '' }: IconProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
+      viewBox="0 0 24 24"
+      width={size}
+      height={size}
+      className={className}
+    >
+      <path d="M0,9c0-.552,.448-1,1-1H3.108c.147-.874,.472-1.721,1.006-2.471l-1.478-1.478c-.391-.391-.391-1.023,0-1.414s1.023-.391,1.414,0l1.478,1.478c.751-.534,1.598-.859,2.471-1.006V1c0-.552,.448-1,1-1s1,.448,1,1V3.108c.874,.147,1.725,.466,2.477,1.001l1.473-1.473c.391-.391,1.023-.391,1.414,0s.391,1.023,0,1.414l-2.121,2.121c-.391,.391-1.023,.391-1.414,0-1.56-1.56-4.098-1.56-5.657,0s-1.56,4.098,0,5.657c.188,.188,.293,.442,.293,.707s-.105,.52-.293,.708l-2.208,2.207c-.195,.195-.451,.293-.707,.293s-.512-.098-.707-.293c-.391-.391-.391-1.023,0-1.414l1.56-1.56c-.535-.751-.854-1.602-1.001-2.477H1c-.552,0-1-.448-1-1ZM23.707,.293c-.391-.391-1.023-.391-1.414,0L.293,22.293c-.391,.391-.391,1.023,0,1.414,.195,.195,.451,.293,.707,.293s.512-.098,.707-.293L23.707,1.707c.391-.391,.391-1.023,0-1.414Zm-.283,10.954c.32-.15,.538-.458,.572-.811,.034-.352-.121-.696-.408-.904-1.017-.739-2.203-1.234-3.429-1.432-.541-.09-1.059,.283-1.146,.829-.088,.545,.283,1.058,.829,1.146,.41,.066,.813,.176,1.203,.328-1.65,1.36-2.653,3.41-2.653,5.597s1.003,4.238,2.655,5.598c-.683,.266-1.41,.402-2.155,.402-2.967,0-5.52-2.21-5.939-5.142-.078-.547-.586-.924-1.131-.849-.547,.078-.927,.585-.848,1.132,.559,3.91,3.964,6.858,7.919,6.858,1.695,0,3.32-.53,4.697-1.533,.286-.208,.441-.553,.407-.904-.034-.353-.251-.66-.572-.811-1.842-.861-3.033-2.727-3.033-4.752s1.19-3.891,3.033-4.753Z" />
+    </svg>
+  );
+}
+
+export default ThemeIcon;
diff --git a/apps/client/src/components/Icons/index.ts b/apps/client/src/components/Icons/index.ts
@@ -20,3 +20,4 @@ export { default as VideoOffIcon } from './VideoOffIcon';
 export { default as VideoOnIcon } from './VideoOnIcon';
 export { default as VolumeOffIcon } from './VolumeOffIcon';
 export { default as VolumeOnIcon } from './VolumeOnIcon';
+export { default as ThemeIcon } from './ThemeIcon';
diff --git a/apps/client/src/contexts/ThemeContext.tsx b/apps/client/src/contexts/ThemeContext.tsx
@@ -0,0 +1,20 @@
+import { createContext, useState } from 'react';
+
+type Theme = 'light' | 'dark' | null;
+
+interface ThemeContextInterface {
+  theme: Theme;
+  setTheme: React.Dispatch<React.SetStateAction<Theme>>;
+}
+
+const currentTheme = localStorage.getItem('theme') ?? null;
+
+export const ThemeContext = createContext<ThemeContextInterface>({
+  theme: currentTheme as Theme,
+  setTheme: () => null,
+});
+
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+  const [theme, setTheme] = useState<Theme>(() => (localStorage.getItem('theme') as Theme) ?? null);
+  return <ThemeContext.Provider value={{ theme, setTheme }}>{children}</ThemeContext.Provider>;
+}
diff --git a/apps/client/src/hooks/useTheme.ts b/apps/client/src/hooks/useTheme.ts
@@ -0,0 +1,26 @@
+import { ThemeContext } from '@/contexts/ThemeContext';
+import { useContext, useLayoutEffect } from 'react';
+
+export const useTheme = () => {
+  const { theme, setTheme } = useContext(ThemeContext);
+
+  useLayoutEffect(() => {
+    if (theme === 'dark') {
+      localStorage.setItem('theme', 'dark');
+      document.querySelector('html')?.removeAttribute('data-theme');
+    } else {
+      localStorage.setItem('theme', 'light');
+      document.querySelector('html')?.setAttribute('data-theme', 'light');
+    }
+  }, [theme]);
+
+  const convertTheme = () => {
+    if (theme === 'light') {
+      setTheme('dark');
+    } else {
+      setTheme('light');
+    }
+  };
+
+  return { theme, convertTheme };
+};
diff --git a/apps/client/src/index.css b/apps/client/src/index.css
@@ -60,6 +60,22 @@
     --red-500: #fb4a59;
     --red-500-alt: rgba(251, 74, 89, 0.7);
   }
+
+  html[data-theme='light'] {
+    /* Grayscale */
+    --grayscale-white-alt: rgba(28, 35, 45, 0.7);
+    --grayscale-white: #1c232d;
+    --grayscale-50: #343b47;
+    --grayscale-100: #404752;
+    --grayscale-200: #4d545f;
+    --grayscale-300: #5f6775;
+    --grayscale-400: #777f8c;
+    --grayscale-500: #9198a3;
+    --grayscale-600: #b1b7bf;
+    --grayscale-700: #dce0e5;
+    --grayscale-black: #f5f7fa;
+  }
+
   .dark {
     --background: 222.2 84% 4.9%;
     --foreground: 210 40% 98%;
@@ -87,6 +103,7 @@
     --chart-5: 340 75% 55%;
   }
 }
+
 @layer base {
   * {
     @apply border-border;
diff --git a/apps/client/src/pages/Broadcast/BroadcastTitle.tsx b/apps/client/src/pages/Broadcast/BroadcastTitle.tsx
@@ -63,7 +63,7 @@ function BroadcastTitle({ currentTitle, onTitleChange }: BroadcastTitleProps) {
       ) : (
         <div className="flex flex-row justify-between p-4 h-20">
           <div className="text-text-default text-display-bold24">{currentTitle}</div>
-          <Button className="bg-transparent border border-border-default" onClick={handleEditTitle}>
+          <Button className="bg-transparent border border-border-default text-text-strong" onClick={handleEditTitle}>
             수정
           </Button>
         </div>
diff --git a/apps/client/src/pages/Broadcast/index.tsx b/apps/client/src/pages/Broadcast/index.tsx
@@ -14,13 +14,14 @@ import {
   ScreenShareIconOff,
 } from '@/components/Icons';
 import { Button } from '@components/ui/button';
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import useScreenShare from '@/hooks/useScreenShare';
 import BroadcastPlayer from './BroadcastPlayer';
 import { Tracks } from '@/types/mediasoupTypes';
 import RecordButton from './RecordButton';
 import axiosInstance from '@/services/axios';
 import { useMedia } from '@/hooks/useMedia';
+import { useTheme } from '@/hooks/useTheme';
 
 const mediaServerUrl = import.meta.env.VITE_MEDIASERVER_URL;
 
@@ -59,6 +60,16 @@ function Broadcast() {
   });
   // 방송 정보
   const [title, setTitle] = useState<string>('');
+  // 테마
+  const { theme } = useTheme();
+
+  useLayoutEffect(() => {
+    if (theme === 'light') {
+      document.querySelector('html')?.setAttribute('data-theme', 'light');
+    } else {
+      document.querySelector('html')?.removeAttribute('data-theme');
+    }
+  }, []);
 
   useEffect(() => {
     tracksRef.current['mediaAudio'] = mediaStream?.getAudioTracks()[0];
diff --git a/apps/client/src/pages/Home/Bookmark.tsx b/apps/client/src/pages/Home/Bookmark.tsx
@@ -82,7 +82,7 @@ function Bookmark() {
               <Button
                 key={data.bookmarkId}
                 onClick={() => handleClickBookmarkButton(data.url)}
-                className="h-14 w-52 bg-surface-alt hover:bg-surface-alt-light relative flex items-center justify-between"
+                className="h-14 w-52 bg-surface-alt text-text-strong hover:bg-surface-alt-light relative flex items-center justify-between"
               >
                 <span className="truncate flex-1">{data.name}</span>
                 <div
diff --git a/apps/client/src/pages/Home/FieldFilter.tsx b/apps/client/src/pages/Home/FieldFilter.tsx
@@ -26,7 +26,7 @@ function FieldFilter({ onClickFilterButton }: FieldFilterProps) {
           className={`${
             selected === field
               ? 'bg-surface-brand-default hover:bg-surface-point-alt'
-              : 'bg-transparent border border-border-default hover:bg-surface-alt'
+              : 'bg-transparent border border-border-default hover:bg-surface-alt text-text-strong'
           }`}
         >
           {field}
diff --git a/apps/client/src/pages/Home/LiveCard.tsx b/apps/client/src/pages/Home/LiveCard.tsx
@@ -26,7 +26,7 @@ const LiveCard = ({ liveId, title, userId, profileUrl, thumbnailUrl }: LiveCardP
       </div>
 
       {/* LIVE 뱃지 */}
-      <div className="absolute top-3 left-3 bg-surface-danger text-text-strong text-display-medium12 px-2 py-0.5 rounded-sm flex items-center">
+      <div className="absolute top-3 left-3 bg-surface-danger text-white text-display-medium12 px-2 py-0.5 rounded-sm flex items-center">
         <div className="w-2 h-2 rounded-circle bg-white mr-1 animate-pulse" />
         LIVE
       </div>
diff --git a/apps/client/src/pages/Profile/EditUserInfo.tsx b/apps/client/src/pages/Profile/EditUserInfo.tsx
@@ -70,7 +70,7 @@ function EditUserInfo({ userData, toggleEditing }: EditUserInfoProps) {
   };
 
   return (
-    <div className="flex flex-col justify-center items-center w-full h-full gap-10">
+    <div className="flex flex-col justify-center items-center w-full gap-10">
       <Avatar className="w-64 h-64">
         <AvatarImage src={userData?.profileImage} />
         <AvatarFallback>MY</AvatarFallback>
diff --git a/apps/client/src/pages/Profile/UserInfo.tsx b/apps/client/src/pages/Profile/UserInfo.tsx
@@ -48,7 +48,7 @@ function UserInfo({ userData, isLoading, error, toggleEditing }: UserInfoProps)
                 <span className="font-bold text-text-strong text-4xl">
                   {userData?.camperId ? userData.camperId : '???'}
                 </span>
-                <div className="flex justify-center items-center bg-surface-brand-default text-text-strong text-display-bold24 h-full w-24 rounded">
+                <div className="flex justify-center items-center bg-surface-brand-default text-white text-display-bold24 h-full w-24 rounded">
                   {userData?.field ? userData.field : '???'}
                 </div>
                 <button onClick={toggleEditing}>

Original file line number	Diff line number	Diff line change
`@@ -16,7 +16,7 @@ function Logo({ height, width, className = '' }: LogoProps) {`
`16`	`16`	`>`
`17`	`17`	`<path`
`18`	`18`	d="M6.944 17.32L13.856 13.32C14.5813 12.8933 15.2213 12.84 15.776 13.16C16.352 13.48 16.64 14.0667 16.64 14.92V18.12L13.856 19.72V16.52L6.944 20.52V39.08L13.856 35.08V31.88L16.64 30.28V33.48C16.64 34.0347 16.5013 34.632 16.224 35.272C15.968 35.912 15.6267 36.5093 15.2 37.064C14.7947 37.5973 14.3467 38.0027 13.856 38.28L6.944 42.28C6.19733 42.7067 5.54667 42.76 4.992 42.44C4.43733 42.12 4.16 41.5333 4.16 40.68V22.12C4.16 21.544 4.288 20.9467 4.544 20.328C4.8 19.688 5.14133 19.1013 5.568 18.568C5.99467 18.0133 6.45333 17.5973 6.944 17.32ZM16.64 30.28L13.856 31.88L11.072 30.28L13.856 28.68L16.64 30.28ZM13.856 31.88V35.08L11.072 33.48V30.28L13.856 31.88ZM13.856 35.08L6.944 39.08L4.16 37.48L11.072 33.48L13.856 35.08ZM13.856 16.52V19.72L11.072 18.12V14.92L13.856 16.52ZM15.808 13.16C15.232 12.84 14.5813 12.8933 13.856 13.32L6.944 17.32C6.45333 17.5973 5.99467 18.0133 5.568 18.568C5.14133 19.1013 4.8 19.688 4.544 20.328C4.288 20.9467 4.16 21.544 4.16 22.12V40.68C4.16 41.5333 4.43733 42.12 4.992 42.44L2.208 40.84C1.65333 40.52 1.376 39.9333 1.376 39.08V20.52C1.376 19.944 1.504 19.3467 1.76 18.728C2.016 18.088 2.35733 17.5013 2.784 16.968C3.21067 16.4133 3.66933 15.9973 4.16 15.72L11.072 11.72C11.8187 11.2933 12.4693 11.24 13.024 11.56L15.808 13.16ZM22.1913 25.32L30.5113 20.52C31.2366 20.0933 31.8766 20.04 32.4313 20.36C32.9859 20.68 33.2633 21.2667 33.2633 22.12V37.48L30.5113 39.08V35.88C30.5113 36.4347 30.3833 37.032 30.1273 37.672C29.8713 38.312 29.5299 38.9093 29.1033 39.464C28.6766 39.9973 28.2179 40.4027 27.7273 40.68L24.9753 42.28C24.2286 42.7067 23.5779 42.76 23.0233 42.44C22.4686 42.12 22.1913 41.5333 22.1913 40.68V36.2C22.1913 35.624 22.3193 35.0267 22.5753 34.408C22.8313 33.768 23.1726 33.1813 23.5993 32.648C24.0259 32.0933 24.4846 31.6773 24.9753 31.4L30.5113 28.2V23.72L22.1913 28.52V25.32ZM24.9753 39.08L30.5113 35.88V31.4L24.9753 34.6V39.08ZM30.5113 23.72V28.2L27.7273 26.6V22.12L30.5113 23.72ZM30.5113 35.88V39.08L27.7273 37.48V34.28L30.5113 35.88ZM30.5113 31.4V35.88L27.7273 34.28V29.8L30.5113 31.4ZM30.5113 35.88L24.9753 39.08L22.1913 37.48L27.7273 34.28L30.5113 35.88ZM30.5113 28.2L24.9753 31.4C24.4846 31.6773 24.0259 32.0933 23.5993 32.648C23.1726 33.1813 22.8313 33.768 22.5753 34.408C22.3193 35.0267 22.1913 35.624 22.1913 36.2V40.68C22.1913 41.5333 22.4686 42.12 23.0233 42.44L20.2393 40.84C19.6846 40.52 19.4073 39.9333 19.4073 39.08V34.6C19.4073 34.024 19.5353 33.4267 19.7913 32.808C20.0473 32.168 20.3886 31.5813 20.8153 31.048C21.2419 30.4933 21.7006 30.0773 22.1913 29.8L27.7273 26.6L30.5113 28.2ZM32.4313 20.36C31.8766 20.04 31.2366 20.0933 30.5113 20.52L22.1913 25.32L19.4073 23.72L27.7273 18.92C28.4739 18.4933 29.1246 18.44 29.6793 18.76L32.4313 20.36ZM22.1913 25.32V28.52L19.4073 26.92V23.72L22.1913 25.32ZM38.8163 25.32L41.6003 23.72V26.92C41.6003 26.344 41.7283 25.7467 41.9843 25.128C42.2403 24.488 42.5709 23.9013 42.9763 23.368C43.4029 22.8133 43.8616 22.3973 44.3523 22.12L45.1843 21.64C45.9309 21.2133 46.5816 21.16 47.1363 21.48C47.6909 21.8 47.9683 22.3867 47.9683 23.24C47.9683 22.664 48.0963 22.0667 48.3523 21.448C48.6083 20.808 48.9389 20.2213 49.3443 19.688C49.7709 19.1333 50.2296 18.7173 50.7203 18.44L51.5522 17.96C52.2989 17.5333 52.9496 17.48 53.5043 17.8C54.0589 18.12 54.3363 18.7067 54.3363 19.56V33.64L51.5522 35.24V21.16L47.9683 23.24V37.32L45.1843 38.92V24.84L41.6003 26.92V41L38.8163 42.6V25.32ZM51.5522 21.16V35.24L48.8003 33.64V19.56L51.5522 21.16ZM45.1843 24.84V38.92L42.4003 37.32V23.24L45.1843 24.84ZM53.5043 17.8C52.9496 17.48 52.2989 17.5333 51.5522 17.96L50.7203 18.44C50.2296 18.7173 49.7709 19.1333 49.3443 19.688C48.9389 20.2213 48.6083 20.808 48.3523 21.448C48.0963 22.0667 47.9683 22.664 47.9683 23.24L45.1843 21.64C45.1843 21.064 45.3123 20.4667 45.5683 19.848C45.8243 19.208 46.1656 18.6213 46.5923 18.088C47.0189 17.5333 47.4776 17.1173 47.9683 16.84L48.8003 16.36C49.5256 15.9333 50.1656 15.88 50.7203 16.2L53.5043 17.8ZM38.8163 25.32V42.6L36.0323 41V23.72L38.8163 25.32ZM47.1363 21.48C46.5816 21.16 45.9309 21.2133 45.1843 21.64L44.3523 22.12C43.8616 22.3973 43.4029 22.8133 42.9763 23.368C42.5709 23.9013 42.2403 24.488 41.9843 25.128C41.7283 25.7467 41.6003 26.344 41.6003 26.92L38.8163 25.32C38.8163 24.744 38.9443 24.1467 39.2003 23.528C39.4563 22.888 39.7976 22.3013 40.2243 21.768C40.6509 21.2133 41.1096 20.7973 41.6003 20.52L42.4003 20.04C43.1469 19.6133 43.7976 19.56 44.3523 19.88L47.1363 21.48ZM41.6003 23.72L38.8163 25.32L36.0323 23.72L38.8163 22.12L41.6003 23.72ZM62.0868 18.6C61.4468 18.9627 60.9134 19.0267 60.4868 18.792C60.0814 18.5573 59.8788 18.0667 59.8788 17.32C59.8788 16.5733 60.0814 15.8373 60.4868 15.112C60.9134 14.3867 61.4468 13.8427 62.0868 13.48C62.7268 13.1173 63.2494 13.0533 63.6548 13.288C64.0814 13.5227 64.2948 14.0133 64.2948 14.76V18.6C64.2948 19.048 64.1881 19.528 63.9748 20.04C63.7828 20.552 63.5161 21.0213 63.1748 21.448C62.8548 21.8747 62.4921 22.2053 62.0868 22.44V18.6ZM62.0868 18.6V22.44L59.3348 20.84V17L62.0868 18.6ZM63.6868 13.288C63.2601 13.0533 62.7268 13.1173 62.0868 13.48C61.4468 13.8427 60.9134 14.3867 60.4868 15.112C60.0814 15.8373 59.8788 16.5733 59.8788 17.32C59.8788 18.0667 60.0814 18.5573 60.4868 18.792L57.7348 17.192C57.3081 16.9573 57.0948 16.4667 57.0948 15.72C57.0948 14.9733 57.2974 14.2373 57.7028 13.512C58.1294 12.7867 58.6734 12.2427 59.3348 11.88C59.9748 11.5173 60.4974 11.4533 60.9028 11.688L63.6868 13.288Z"
`19`		`- fill="white"`
	`19`	`+ fill="currentColor"`
`20`	`20`	`/>`
`21`	`21`	`<path`
`22`	`22`	d="M80.944 17.32L87.856 13.32C88.5813 12.8933 89.2213 12.84 89.776 13.16C90.352 13.48 90.64 14.0667 90.64 14.92V33.48C90.64 34.0347 90.5013 34.632 90.224 35.272C89.968 35.912 89.6267 36.5093 89.2 37.064C88.7947 37.5973 88.3467 38.0027 87.856 38.28L80.944 42.28C80.1973 42.7067 79.5467 42.76 78.992 42.44C78.4373 42.12 78.16 41.5333 78.16 40.68V22.12C78.16 21.544 78.288 20.9467 78.544 20.328C78.8 19.688 79.1413 19.1013 79.568 18.568C79.9947 18.0133 80.4533 17.5973 80.944 17.32ZM80.944 39.08L87.856 35.08V16.52L80.944 20.52V39.08ZM87.856 16.52V35.08L85.072 33.48V14.92L87.856 16.52ZM87.856 35.08L80.944 39.08L78.16 37.48L85.072 33.48L87.856 35.08ZM89.808 13.16C89.232 12.84 88.5813 12.8933 87.856 13.32L80.944 17.32C80.4533 17.5973 79.9947 18.0133 79.568 18.568C79.1413 19.1013 78.8 19.688 78.544 20.328C78.288 20.9467 78.16 21.544 78.16 22.12V40.68C78.16 41.5333 78.4373 42.12 78.992 42.44L76.208 40.84C75.6533 40.52 75.376 39.9333 75.376 39.08V20.52C75.376 19.944 75.504 19.3467 75.76 18.728C76.016 18.088 76.3573 17.5013 76.784 16.968C77.2107 16.4133 77.6693 15.9973 78.16 15.72L85.072 11.72C85.8187 11.2933 86.4693 11.24 87.024 11.56L89.808 13.16ZM96.1913 25.32L98.9753 23.72V26.92C98.9753 26.344 99.1033 25.7467 99.3593 25.128C99.6153 24.488 99.9459 23.9013 100.351 23.368C100.778 22.8133 101.237 22.3973 101.727 22.12L104.511 20.52C105.237 20.0933 105.877 20.04 106.431 20.36C106.986 20.68 107.263 21.2667 107.263 22.12V36.2L104.511 37.8V23.72L98.9753 26.92V41L96.1913 42.6V25.32ZM104.511 23.72V37.8L101.727 36.2V22.12L104.511 23.72ZM96.1913 25.32V42.6L93.4073 41V23.72L96.1913 25.32ZM106.431 20.36C105.877 20.04 105.237 20.0933 104.511 20.52L101.727 22.12C101.237 22.3973 100.778 22.8133 100.351 23.368C99.9459 23.9013 99.6153 24.488 99.3593 25.128C99.1033 25.7467 98.9753 26.344 98.9753 26.92L96.1913 25.32C96.1913 24.744 96.3193 24.1467 96.5753 23.528C96.8313 22.888 97.1726 22.3013 97.5993 21.768C98.0259 21.2133 98.4846 20.7973 98.9753 20.52L101.727 18.92C102.474 18.4933 103.125 18.44 103.679 18.76L106.431 20.36ZM98.9753 23.72L96.1913 25.32L93.4073 23.72L96.1913 22.12L98.9753 23.72Z"