Conversation
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
…er-ko.github.io into YoonKeumJae/fix
| uses: actions/setup-node@v4 | ||
| with: | ||
| node-version: 22 | ||
| node-version: 24 |
There was a problem hiding this comment.
node.js v24로 변경
| uses: actions/setup-node@v4 | ||
| with: | ||
| node-version: 22 | ||
| node-version: 24 |
There was a problem hiding this comment.
node.js v24로 변경
There was a problem hiding this comment.
색상 변수의 값은 여기서 설정합니다.
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 태그의 배경색이 달라요. 둘을 흰색으로 통일하거나 회색으로 통일해야합니다(흰색으로 통일하는게 어떨까요?).
| 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"] |
|
다른건 다 괜찮아보이네요!!👍👍👍👍 |
2 participants
tailwind.config.js에 색상 변수 정의bg-docker-primary와 같이{적용 위치(배경, 텍스트 등)}-{적용하고자 하는 색}의 형식으로 사용 가능close #146