[TO DO LIST][DAY 06] 2025.06.01 - Heder, Footer 작업

Header & Footer

• 아직 좀 더 해야 될 부분들이 있지만 일단 Header랑 Footer의 모양을 만들어보았다.
• 여기서 더 해야 할 건 로그인 상태에 따라서 헤더가 바뀌는 거랑(지금은 로그인 후의 헤더 모양), 푸터는 로그인을 하면 사라져서 이걸 display: none 같은 걸 주어야 할 것 같다.
• 일단 Home을 만들고 나서 로그인 관련 처리를 하고 그 다음에 좀 더 수정할 예정.

Global ColorTheme

• 전체 프로젝트 컬러테마를 관리하는 방법을 도입하였다.

export const ColorTheme = {
  // Base colors
  white: "#ffffff",
  black: "#000000",

  // Primary colors
  primary: {
    main: "#475B4A",
    light: "#CCCCCC",
  },

  // Background colors
  background: {
    default: "#ffffff",
    paper: "#f5f5f5",
  },

  // Text colors
  text: {
    primary: "#475B4A",
    secondary: "#CCCCCC",
    light: "#919C92",
  },

  // Border colors
  border: {
    light: "#CCCCCC",
    main: "#475B4A",
  },

  // Shadow colors
  shadow: {
    default: "#1A1A1A",
    light: "#f5f5f5",
  },
} as const;

export type ColorThemeType = typeof ColorTheme;

ColorHighlight extension

• 커서한테 물어봤더니 얘를 추천해줘서 깔아보았다.
  이렇게하니까 색깔을 구분하기가 쉬워지긴했는데 아무래도 ColorTheme 파일 안에서 볼 수는 있는데 ${{ColorTheme.text.primary}}이렇게 쓸 때는 색깔이 나오지는 않는다.