fix : styled-component 빌드 에러 수정 (issue #266)

[layout-SY]

구현내용

• styled-component v5 -> v6로 업그레이드 되며 theme 인터페이스를 DefaultTheme으로 등록하지 않으면 theme을 인식하지 못하는 에러 해결
• 현재 theme에 맞지 않은 네이밍 수정

연관이슈

close #266

Summary by CodeRabbit

• Style

  • 일부 컴포넌트의 색상 테마 키 대소문자 오류를 수정하여 일관성을 개선했습니다.
  • 지원 페이지의 라벨 및 단계 라벨 색상을 기본 색상에서 주요 색상으로 변경했습니다.

• Chores

  • 테마 타입을 외부에서 사용할 수 있도록 공개했습니다.
  • 스타일드 컴포넌트의 테마 타입을 확장하여 타입 안정성을 높였습니다.
  • 타입스크립트 설정에 테마 타입 선언 파일을 명시적으로 포함시켰습니다.

[coderabbitai]

Walkthrough

이번 변경에서는 styled-components의 테마 타입 선언을 명확히 하여 타입스크립트 빌드 에러를 수정하였습니다. theme 객체의 색상 키의 오타(camelCase로 수정)를 바로잡았고, Theme 인터페이스를 export하여 외부에서 사용할 수 있도록 했습니다. 또한, styled-components의 DefaultTheme을 커스텀 Theme으로 확장하는 타입 선언 파일을 추가하고, tsconfig에 해당 선언 파일을 명시적으로 포함시켰습니다. 일부 스타일 컴포넌트의 색상도 테마의 올바른 키로 수정되었습니다.

Changes

파일/경로	변경 요약
src/components/manageProjects/Card.styled.ts src/components/manageProjects/RecruitmentDate.styled.ts	theme.color.deepgrey → theme.color.deepGrey로 색상 키 오타 수정
src/pages/apply/Apply.styled.ts src/pages/apply/ApplyStep.styled.ts	색상 키를 theme의 black에서 primary로 변경
src/style/theme.ts	Theme 인터페이스를 export 하도록 수정
src/styled.d.ts	styled-components의 DefaultTheme을 커스텀 Theme으로 확장하는 타입 선언 추가
tsconfig.app.json	"include"에 src/styled.d.ts 명시적으로 추가

Assessment against linked issues

Objective	Addressed	Explanation
styled-component v6에서 theme 등록/타입 확장으로 인한 DefaultTheme 에러 수정 (#266)	✅

Poem

귀여운 토끼가 코드를 톡톡,
테마 타입도 딱 맞게 쏙쏙!
deepgrey 오타는 이제 안녕,
타입 선언도 완벽히 정렬된 행.
빌드 에러는 멀리멀리 hop hop,
우리 프로젝트는 한층 더 top! 🐇✨

---

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 1e52e19 and 63a1000.

📒 Files selected for processing (7)

• src/components/manageProjects/Card.styled.ts (2 hunks)
• src/components/manageProjects/RecruitmentDate.styled.ts (1 hunks)
• src/pages/apply/Apply.styled.ts (1 hunks)
• src/pages/apply/ApplyStep.styled.ts (1 hunks)
• src/style/theme.ts (1 hunks)
• src/styled.d.ts (1 hunks)
• tsconfig.app.json (1 hunks)

🧰 Additional context used

🧬 Code Graph Analysis (1)

src/styled.d.ts (1)

src/style/theme.ts (1)

• Theme (33-64)

🪛 Biome (1.9.4)

tsconfig.app.json

[error] 25-25: End of file expected

Use an array for a sequence of values: [1, 2]

(parse)

---

[error] 25-25: End of file expected

Use an array for a sequence of values: [1, 2]

(parse)

---

[error] 25-25: End of file expected

Use an array for a sequence of values: [1, 2]

(parse)

---

[error] 25-26: End of file expected

Use an array for a sequence of values: [1, 2]

(parse)

🪛 ESLint

src/styled.d.ts

[error] 5-5: An interface declaring no members is equivalent to its supertype.

(@typescript-eslint/no-empty-object-type)

⏰ Context from checks skipped due to timeout of 90000ms (1)

• GitHub Check: accessibility-test

🔇 Additional comments (8)

src/style/theme.ts (1)

33-34: Theme 인터페이스에 export 추가 확인
Theme 인터페이스를 외부로 노출하여 styled.d.ts에서 DefaultTheme을 확장할 수 있도록 변경한 점이 적절합니다. 타입스크립트 전체에서 테마 타입이 정상적으로 인식될 것으로 보입니다.

src/pages/apply/ApplyStep.styled.ts (1)

55-55: StepLabel 색상 테마 반영
기존 black에서 theme.color.primary로 변경하여 테마 기본 색상을 일관되게 적용한 것은 올바른 수정입니다.

src/components/manageProjects/Card.styled.ts (1)

57-57: deepGrey 컬러 키명 수정 반영
RecruitmentDate와 TotalMember 컴포넌트에서 theme.color.deepGrey로 잘못된 camelCase를 바로잡아 테마 참조의 일관성과 타입 안전성을 확보했습니다.

Also applies to: 69-69

src/pages/apply/Apply.styled.ts (1)

61-61: Label 색상 테마 반영
theme.color.primary로 변경하여 전체 페이지의 테마 일관성을 유지한 점이 적절합니다.

src/components/manageProjects/RecruitmentDate.styled.ts (1)

35-35: Period 컴포넌트 컬러 키 수정
theme.color.deepGrey로 컬러 키명을 올바르게 수정하여 테마 참조 일관성을 보장했습니다.

tsconfig.app.json (1)

25-25: styled.d.ts 선언 파일을 TypeScript 컴파일 대상에 포함
include 배열에 src/styled.d.ts를 추가하여 styled-components 모듈 오거멘테이션이 누락되지 않고 컴파일되도록 설정한 점이 적절합니다.

🧰 Tools

🪛 Biome (1.9.4)

[error] 25-25: End of file expected

Use an array for a sequence of values: [1, 2]

(parse)

---

[error] 25-25: End of file expected

Use an array for a sequence of values: [1, 2]

(parse)

---

[error] 25-25: End of file expected

Use an array for a sequence of values: [1, 2]

(parse)

---

[error] 25-26: End of file expected

Use an array for a sequence of values: [1, 2]

(parse)

src/styled.d.ts (2)

1-3: 모듈 오거멘테이션을 위한 import 선언
styled-components를 확장하기 위해 Theme 인터페이스를 올바르게 임포트했습니다. 상대 경로(./style/theme)가 src/style/theme.ts와 일치하는지 확인되어야 합니다.

---

4-6: DefaultTheme에 커스텀 Theme 상속 적용
DefaultTheme이 Theme을 상속하도록 선언함으로써 styled-components 사용 시 커스텀 테마 프로퍼티에 대한 타입 안전성을 확보했습니다. 선언문 형태도 정확합니다.

🧰 Tools

🪛 ESLint

[error] 5-5: An interface declaring no members is equivalent to its supertype.

(@typescript-eslint/no-empty-object-type)

✨ Finishing Touches

• 📝 Generate Docstrings

---

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.