[fix] 색상 변수 생성 및 적용 #163
[fix] 색상 변수 생성 및 적용 #163
Conversation
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
| @@ -15,7 +15,7 @@ jobs: | |||
| - name: Node.js 설정 | |||
| uses: actions/setup-node@v4 | |||
| with: | |||
| node-version: 22 | |||
| node-version: 24 | |||
There was a problem hiding this comment.
node.js v24로 변경
| @@ -19,7 +19,7 @@ jobs: | |||
| - name: Node.js 설정 | |||
| uses: actions/setup-node@v4 | |||
| with: | |||
| node-version: 22 | |||
| node-version: 24 | |||
There was a problem hiding this comment.
node.js v24로 변경
src/styles/style.css
Outdated
There was a problem hiding this comment.
색상 변수의 값은 여기서 설정합니다.
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
There was a problem hiding this comment.
Pull Request Overview
이 PR은 색상 변수를 정의하여 기존에 하드코딩된 색상 값을 Tailwind CSS에서 사용할 수 있는 CSS 변수로 대체하는 변경 사항을 포함합니다. 또한, 워크플로우 파일에서 Node.js 버전을 22에서 24로 업데이트합니다.
- 색상 변수를 정의하는 @theme 블록 추가 및 기존 색상 값들을 변수 참조로 변경
- 컴포넌트들(header, footer, button)에서 인라인 색상 대신 클래스 이름과 CSS 변수를 활용하도록 수정
- CI/Deploy 워크플로우에서 Node.js 버전 업데이트
Reviewed Changes
Copilot reviewed 8 out of 9 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| src/styles/style.css | Tailwind 색상 변수 추가 및 하드코드 색상 값 대체 |
| src/styles/content_style.css | 인라인 색상 값을 변수 참조로 변경 |
| src/scripts/components/header-component.ts | 헤더 색상 클래스 변경 및 관련 색상 변수 활용 |
| src/scripts/components/footer-component.ts | 푸터 색상 클래스 변경 및 색상 변수 활용 |
| src/scripts/components/button-component.ts | 버튼 색상 클래스 변경 및 색상 변수 활용 |
| index.html | Tailwind가 새로운 색상 변수를 인식할 수 있도록 클래스 강제 추가 |
| .github/workflows/deploy.yml | Node.js 버전을 22에서 24로 업데이트 |
| .github/workflows/ci.yml | Node.js 버전을 22에서 24로 업데이트 |
|
tailwind v4의 문법에 맞게 색상 변수 선언 위치를 이동하고, 다시 적용하였습니다. |
| #content pre code { | ||
| display: block; | ||
| background: #fff; | ||
| color: #000000; | ||
| background: var(--color-white); | ||
| color: var(--color-black); | ||
| white-space: pre-wrap; | ||
| } | ||
|
|
||
| #content code { | ||
| font-size: 13px; | ||
| background-color: #e1e2e6; | ||
| color: #000000; | ||
| background-color: var(--color-content-code-inline); | ||
| color: var(--color-black); | ||
| padding: 2px 6px; | ||
| border-radius: 4px; | ||
| white-space: nowrap; | ||
| } |
There was a problem hiding this comment.
윗 사진을 보면, pre > code 구조에서 pre, code 태그의 배경색이 달라요. 둘을 흰색으로 통일하거나 회색으로 통일해야합니다(흰색으로 통일하는게 어떨까요?).
| @@ -15,6 +15,9 @@ | |||
| <body | |||
| class="bg-background-light dark:bg-background-dark h-full flex-col text-base dark:text-white" | |||
| > | |||
| <!-- 숨겨진 div: Tailwind가 사용할 클래스들을 강제 인식하게 함 --> | |||
| <div class="hidden bg-docker-primary bg-docker-hover text-docker-link"></div> | |||
There was a problem hiding this comment.
이거 제가 코드스페이스에서 주석 처리하고 돌려보면 문제되는 지점이 없어보이는데,
혹시 어느 화면 렌더링할 때 이 코드가 필요한 지 아시나요??
tailwindcss에서 빌드 과정 중에 필요없는 색상 변수를 제거하는 역할이라고 저는 생각했는데, 이 의도로 추가한 코드가 맞나요?? 그렇다면 이 코드는 제거해도 되지 않나 싶어서요
|
그리고 아마 지금 도커파일이 다음과 같을 거예요. 첫 번째 줄도 노드 버전 변경했으니까 24버전으로 높여야 합니당. # Node.js 23 버전의 경량 Alpine Linux 이미지를 사용합니다.
FROM node:23-alpine <<---- 이거 24버전으로 높여서 테스트 해봐야함
# 작업 디렉토리를 /app으로 설정합니다.
WORKDIR /app
# 의존성 설치를 위해 패키지 매니페스트 파일을 복사합니다.
COPY package.json package-lock.json* ./
# npm ci를 사용하여 빠르고 안전하게 의존성을 설치합니다.
RUN npm ci
# 소스 코드는 볼륨 마운트로 연결하므로 COPY . . 는 필요 없음
# Vite 개발 서버 기본 포트 (참고용, 실제 포트 매핑은 docker-compose.yml에서 관리)
EXPOSE 5173
# 컨테이너 시작 시 실행될 명령어
CMD ["npm", "run", "dev", "--", "--host"] |
|
다른건 다 괜찮아보이네요!!👍👍👍👍 |
tailwind.config.js에 색상 변수 정의bg-docker-primary와 같이{적용 위치(배경, 텍스트 등)}-{적용하고자 하는 색}의 형식으로 사용 가능close #146