setting(#11):styled-components추가 theme setup

[zzzRYT]

Description

• tailwindcss를 삭제하고, styled-components를 넣었습니다. nextjs 14버전에저는 뭔가 넣어야 하는게 많더군요, 근데 이게 테스트를 해봤는데, css가 적용이 잘 안되더라고요. 이건 확인해서 넣겠습니다. 문제가 뭔지 아시는 분 있으면 comment 달아주세요.

• babel plugin대신 swc plugin을 사용해서 ts->js 전환시 타입 점검에 대한 방안을 구축했습니다. nextjs 12v 부터 bable 대신 swc를 사용한다고 해서 적용시켜 봤습니다. babel 플러그인 보다 속도가 빠르다고 합니다.

• theme를 설정했습니다.

  
  // @/styles/Theme.ts
  const palette = {
  BG_100: '#FFFFFF',
  BG_75: '#FFFFFFBF',
  BG_50: '#FFFFFF7F',
  TEXT_100: '#000000',
  TEXT_75: '#000000BF',
  TEXT_50: '#0000007F',
  MAIN_100: '#FF772B',
  MAIN_75: '#ff772bbf',
  MAIN_50: '#ff772b7f',
  };

const theme = { bg: { primary: palette.BG_100, }, text: { primary: palette.TEXT_100, }, main: { primary: palette.MAIN_100, }, };

export default theme;

미리 색상을 지정해 두고, 사용할 수 있습니다. `export`되어있기 때문에 어디서든 theme이름으로 가져다 쓰는게 가능합니다.
`style`을 진행 하실 때, 그냥 `hash`값으로 `#ff9922`이런식으로 넣지 마시고, theme에 색상을 추가해서 관리하시기 바랍니다. 그래야 나중에 전역으로 다크모드나, 색상을 변경할 때, 간편하게 진행할 수 있습니다.

<!-- 추가예정 내용 (있다면 필수)-->
### Schedule
- light, dark 모드에 대한 추가
[참고 블로그](https://velog.io/@chosule/next-themes-dark%EB%AA%A8%EB%93%9C-App-router%EC%97%90%EC%84%9C-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0)

<!-- 추가된 전역관리 내용 (있다면 필수) -->
### Global Style, State Management, Hook

<!-- 리뷰어가 리뷰하기전 알면 좋을 내용 (선택) -->
### To Reviewer
- `css-in-js`에 대해 공부해 보시면 좋습니다.
- `swc`에 대해서 공부해 보시면 좋습니다.

<!-- 참고한 레퍼런스 링크 (선택) -->
### Reference Link

<!-- 관련된 이슈 링크 (선택) -->
### Related Issue Link
#11