[OD-158] 컬러시스템 구축 & Post, MyPost 합치기

[xxinzzi]

주요 작업 내용

1. 컬러시스템 구축

• 브랜드 색상

  • 브랜드 컬러의 변경 가능성을 고려하여, 특정 색상을 직접 지정하는 것이 아닌, brand.primary와 같은 네이밍 방식을 채택했습니다. 이를 통해 색상 변경 시에도 코드 수정이 최소화되며, 유지보수성이 향상됩니다.
  

• 기능별 색상

  • 통일성과 일괄 변경의 편리성을 위해 지정했습니다.
  

• 자주 사용되는 그레이와 핑크 계열 색상은 명도에 따라 50(가장 연한 색상)부터 900(가장 진한 색상)까지 단계별로 정리하여 작성했습니다.

• 더 필요한 색상 있으시면 말씀해주세요!

2. Post, MyPost 합치기

• Post 페이지와 MyPost 페이지를 하나의 Post 페이지로 합치고 이 내부에서 내 게시글인지 여부에 따라 조건부 렌더링하였습니다.
  • MyPost 페이지는 삭제하였습니다.
• 이에 따라 공통 컴포넌트로 둘 필요가 없어진 PostBase 컴포넌트를 Post 폴더 내부로 이동하였습니다.

기타 작업 내용

• AccountCancel 페이지의 css 수정하였습니다.
  • 체크박스를 핑크색으로 변경 (TermsAgreement 페이지에서의 체크박스와 통일화)
  • 폰트 크기 등 미세 수정
• Modal 컴포넌트 css 수정하였습니다.
  • 좀 더 여백이 있으면 좋을 듯하여.. padding을 늘렸습니다.
• theme.ts 파일의 fontStyles에서 bold인 경우 font-weight을 800 -> 700 으로 수정하였습니다.
  • 원래 extra-bold가 800, bold는 700!

코드 리뷰 포인트

• 컬러시스템은 다음과 같이 사용하시면 됩니다.
  • 가급적 특정 색상 지정보다는 브랜드 색상과 기능별 색상으로 사용 권장합니다!
    ex) 브랜드 색상 사용 시 : theme.colors.pink[500] (x), theme.colors.brand.primary(o)
    ex) 폰트 색상 지정 시: theme.colors.gray[800] (x), theme.colors.text.secondary(o)

border: 0.0625rem solid ${({ theme }) => theme.colors.brand.primaryLight};

작업 화면

• 없음

[gustn99]

코멘트 확인 부탁드립니닷!

[gustn99]

divider 오타로 보입니다! 수정 부탁드려용

[gustn99]

chats 페이지의 matching 탭에서 렌더링되는(아직 구현 안 됨) 매칭 메시지도 흰색으로 설정돼 있습니다! 앞으로의 확장성을 생각했을 때에도 이와 같이 brand.primary 색상 위에서만 흰색 텍스트가 사용된다는 보장이 없기 때문에 onPrimary는 제한된 이름이라는 생각이 듭니다. 따라서 명시적으로 white나, primary 색상과 반대라는 의미에서 primaryContrast, 또는 배경 색상이 있을 때 사용된다는 의미에서 onBackground 같은 방식의 이름은 어떨지 제안드립니다! 꼭 이 이름이 아니더라도 한번 다른 이름을 고려해 보시면 좋을 것 같습니다

[gustn99]

이 부분이 남아있어야 사용 중인 기존 폰트가 있는 경우를 검색을 통해 쉽게 찾을 수 있습니다! 전체 폰트스타일 적용이 끝나기 전까지는 해당 코드를 포함하는 게 리팩토링하기에 편리할 것 같아요!