[feat/test deploy] - 1차 배포 테스트 pr #24

ramong26 · 2025-09-22T02:51:26Z

📝 PR 제목

1차 배포 테스트 pr

🛠 변경 내용

깃허브 액션을 이용한 CI & Release pnpm으로

🎯 목적 / 이유

main에 하기 전 브랜치 pr 올림

✅ 확인 사항

빌드 통과 ✅
테스트 통과 ✅
불필요한 console.log 제거 ✅

gemini-code-assist · 2025-09-22T02:51:40Z

Summary of Changes

Hello @ramong26, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

이 PR은 첫 번째 배포 테스트를 위한 것으로, GitHub Actions와 pnpm을 활용한 CI/CD 릴리즈 워크플로우를 설정하는 데 중점을 둡니다. 또한, 컴포넌트 라이브러리 배포를 위한 package.json 메타데이터를 업데이트하고, 캐러셀 컴포넌트의 테스트 코드를 개선하여 비동기 동작의 안정성을 확보합니다. 이는 main 브랜치에 병합하기 전 변경 사항을 검증하기 위한 목적입니다.

Highlights

패키지 메타데이터 업데이트: package.json 파일이 업데이트되어 패키지 이름이 "@ramong23/recomponent"로 변경되었고, 버전이 "1.0.0"으로 설정되었으며, 배포를 위한 다양한 메타데이터 필드(예: "main", "module", "types", "exports", "keywords", "repository")가 추가되었습니다.
캐러셀 테스트 개선: Carousel.test.tsx 파일에서 캐러셀 컴포넌트 테스트 로직이 개선되었습니다. 특히, "act" 유틸리티를 사용하여 비동기 타이머 기반 테스트의 안정성을 높였고, 슬라이드 클릭 테스트 시 인디케이터를 통한 탐색 및 슬라이드 존재 여부 확인 로직이 추가되었습니다.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

Copilot

Pull Request Overview

This PR sets up GitHub Actions CI/CD pipeline for automated testing and npm package publishing using pnpm. The changes prepare the project for first deployment by configuring package metadata and workflow automation.

Updated package.json with proper npm package configuration including exports, repository info, and new package name
Added comprehensive GitHub Actions workflow for CI testing and automated npm publishing on tag releases
Enhanced Carousel component tests with better async handling using act() wrapper

Reviewed Changes

Copilot reviewed 3 out of 4 changed files in this pull request and generated 2 comments.

File	Description
package.json	Configured package metadata for npm publishing with new name, version, and exports
.github/workflows/npm-publish.yml	Added complete CI/CD workflow for testing and automated npm releases
src/components/Carousel/Carousel.test.tsx	Improved test reliability with proper async handling and act() wrapper

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

Copilot · 2025-09-22T02:51:52Z

.github/workflows/npm-publish.yml

+                repo: context.repo.repo,
+                tag_name: tagName,
+                name: `Release ${tagName}`,
+                body: `🚀 Package successfully published to NPM!\n\n**Version:** ${tagName}\n**Package:** [recomponent](https://www.npmjs.com/package/recomponent)`,


The package name in the NPM link should be '@ramong23/recomponent' to match the actual package name defined in package.json.

Suggested change

body: `🚀 Package successfully published to NPM!\n\n**Version:** ${tagName}\n**Package:** [recomponent](https://www.npmjs.com/package/recomponent)`,

body: `🚀 Package successfully published to NPM!\n\n**Version:** ${tagName}\n**Package:** [@ramong23/recomponent](https://www.npmjs.com/package/@ramong23/recomponent)`,

Copilot · 2025-09-22T02:51:53Z

.github/workflows/npm-publish.yml

+            Your package has been successfully published to NPM!
+
+            Version: ${{ github.ref_name }}
+            Package: recomponent


The package name should be '@ramong23/recomponent' to match the actual package name defined in package.json.

Suggested change

Package: recomponent

Package: @ramong23/recomponent

gemini-code-assist

Code Review

이 PR은 배포 테스트를 위한 변경 사항으로, package.json의 배포 관련 설정을 추가하고 Carousel 컴포넌트의 테스트 코드를 개선했습니다. 전반적으로 좋은 방향의 수정이지만, 몇 가지 개선점을 제안합니다. package.json에 있는 저장소 관련 URL에 오타가 있는 것으로 보이며, 이를 수정해야 합니다. 또한, Carousel.test.tsx 파일의 두 테스트 케이스 모두에 반복적인 코드가 있어, 이를 루프로 리팩토링하여 가독성과 유지보수성을 향상시킬 수 있습니다. 자세한 내용은 각 파일에 남긴 주석을 확인해주세요.

gemini-code-assist · 2025-09-22T02:53:22Z

package.json

+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ramong26/xp-components.git"
+  },
+  "homepage": "https://github.com/ramong26/xp-components",
+  "bugs": {
+    "url": "https://github.com/ramong26/xp-components/issues"
+  },


repository, homepage, bugs URL에 오타가 있는 것 같습니다. 사용자 이름이 ramong26으로 되어 있는데, author 필드와 패키지 이름을 보면 ramong23이 맞는 것 같습니다. 일관성을 위해 수정하는 것을 권장합니다.

"repository": { "type": "git", "url": "https://github.com/ramong23/xp-components.git" }, "homepage": "https://github.com/ramong23/xp-components", "bugs": { "url": "https://github.com/ramong23/xp-components/issues" }

gemini-code-assist · 2025-09-22T02:53:22Z

src/components/Carousel/Carousel.test.tsx

+  expect(screen.getByRole('heading', { name: /Slide 1/i })).toBeInTheDocument();
+  await userEvent.click(screen.getByRole('heading', { name: /Slide 1/i }));
  expect(items[0].onClick).toHaveBeenCalled();
-  await userEvent.click(slide2);
+
+  await userEvent.click(indicators[1]);
+  expect(screen.getByRole('heading', { name: /Slide 2/i })).toBeInTheDocument();
+  await userEvent.click(screen.getByRole('heading', { name: /Slide 2/i }));
  expect(items[1].onClick).toHaveBeenCalled();
-  await userEvent.click(slide3);
+
+  await userEvent.click(indicators[2]);
+  expect(screen.getByRole('heading', { name: /Slide 3/i })).toBeInTheDocument();
+  await userEvent.click(screen.getByRole('heading', { name: /Slide 3/i }));
  expect(items[2].onClick).toHaveBeenCalled();


이 테스트 케이스의 로직이 여러 번 반복되고 있습니다. 각 슬라이드에 대한 확인 및 클릭 로직을 루프로 만들어 코드를 더 간결하고 유지보수하기 쉽게 만들 수 있습니다. 이렇게 하면 캐러셀 아이템이 추가되거나 변경될 때 테스트 코드를 더 쉽게 확장할 수 있습니다.

Suggested change

expect(screen.getByRole('heading', { name: /Slide 1/i })).toBeInTheDocument();

await userEvent.click(screen.getByRole('heading', { name: /Slide 1/i }));

expect(items[0].onClick).toHaveBeenCalled();

await userEvent.click(slide2);

await userEvent.click(indicators[1]);

expect(screen.getByRole('heading', { name: /Slide 2/i })).toBeInTheDocument();

await userEvent.click(screen.getByRole('heading', { name: /Slide 2/i }));

expect(items[1].onClick).toHaveBeenCalled();

await userEvent.click(slide3);

await userEvent.click(indicators[2]);

expect(screen.getByRole('heading', { name: /Slide 3/i })).toBeInTheDocument();

await userEvent.click(screen.getByRole('heading', { name: /Slide 3/i }));

expect(items[2].onClick).toHaveBeenCalled();

for (const [index, item] of items.entries()) {

if (index > 0) {

await userEvent.click(indicators[index]);

}

const slide = screen.getByRole('heading', { name: new RegExp(item.title, 'i') });

expect(slide).toBeInTheDocument();

await userEvent.click(slide);

expect(item.onClick).toHaveBeenCalled();

}

gemini-code-assist · 2025-09-22T02:53:22Z

src/components/Carousel/Carousel.test.tsx

+  await act(async () => {
+    vi.advanceTimersByTime(1000);
+  });
+
  expect(indicators[0]).not.toHaveClass('active');
  expect(indicators[1]).toHaveClass('active');

-  vi.advanceTimersByTime(1000);
+  await act(async () => {
+    vi.advanceTimersByTime(1000);
+  });
+
  expect(indicators[1]).not.toHaveClass('active');
  expect(indicators[2]).toHaveClass('active');

-  vi.advanceTimersByTime(1000);
+  await act(async () => {
+    vi.advanceTimersByTime(1000);
+  });
+
  expect(indicators[2]).not.toHaveClass('active');
  expect(indicators[0]).toHaveClass('active');


자동 슬라이드 동작을 검증하는 테스트 코드에 반복되는 로직이 있습니다. act와 expect 호출이 여러 번 반복되는데, 이를 루프로 리팩토링하면 코드가 더 간결해지고 유지보수하기 쉬워집니다. 예를 들어, 캐러셀 아이템 개수가 변경되어도 테스트 코드를 수정할 필요가 없어집니다.

Suggested change

await act(async () => {

vi.advanceTimersByTime(1000);

});

expect(indicators[0]).not.toHaveClass('active');

expect(indicators[1]).toHaveClass('active');

vi.advanceTimersByTime(1000);

await act(async () => {

vi.advanceTimersByTime(1000);

});

expect(indicators[1]).not.toHaveClass('active');

expect(indicators[2]).toHaveClass('active');

vi.advanceTimersByTime(1000);

await act(async () => {

vi.advanceTimersByTime(1000);

});

expect(indicators[2]).not.toHaveClass('active');

expect(indicators[0]).toHaveClass('active');

for (let i = 0; i < items.length; i++) {

const currentIndex = i;

const nextIndex = (i + 1) % items.length;

await act(async () => {

vi.advanceTimersByTime(1000);

});

expect(indicators[currentIndex]).not.toHaveClass('active');

expect(indicators[nextIndex]).toHaveClass('active');

}

ramong26 added 3 commits September 22, 2025 11:41

feat/test-deploy - 배포 테스트

172f3ba

feat/test-deploy - 배포 테스트

10fc6ff

feat/test-deploy - 배포 테스트

31c1480

ramong26 requested a review from Copilot September 22, 2025 02:51

ramong26 self-assigned this Sep 22, 2025

ramong26 added the feat This issue or pull request a new feature label Sep 22, 2025

Copilot AI reviewed Sep 22, 2025

View reviewed changes

gemini-code-assist bot reviewed Sep 22, 2025

View reviewed changes

ramong26 linked an issue Sep 22, 2025 that may be closed by this pull request

[feat/test-deploy] - 배포 테스트 #23

Closed

feat/test-deploy - 배포 테스트

5e8b6f6

ramong26 merged commit 56d838d into main Sep 22, 2025
4 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[feat/test deploy] - 1차 배포 테스트 pr #24

[feat/test deploy] - 1차 배포 테스트 pr #24

Uh oh!

ramong26 commented Sep 22, 2025

Uh oh!

gemini-code-assist bot commented Sep 22, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Sep 22, 2025

Uh oh!

Copilot AI Sep 22, 2025

Uh oh!

gemini-code-assist bot left a comment

Uh oh!

gemini-code-assist bot Sep 22, 2025

Uh oh!

gemini-code-assist bot Sep 22, 2025

Uh oh!

gemini-code-assist bot Sep 22, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	body: `🚀 Package successfully published to NPM!\n\nVersion: ${tagName}\nPackage: [recomponent](https://www.npmjs.com/package/recomponent)`,
	body: `🚀 Package successfully published to NPM!\n\nVersion: ${tagName}\nPackage: [@ramong23/recomponent](https://www.npmjs.com/package/@ramong23/recomponent)`,

[feat/test deploy] - 1차 배포 테스트 pr #24

[feat/test deploy] - 1차 배포 테스트 pr #24

Uh oh!

Conversation

ramong26 commented Sep 22, 2025

📝 PR 제목

🛠 변경 내용

🎯 목적 / 이유

✅ 확인 사항

Uh oh!

gemini-code-assist bot commented Sep 22, 2025

Summary of Changes

Highlights

Footnotes

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Sep 22, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 22, 2025

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

gemini-code-assist bot Sep 22, 2025

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Sep 22, 2025

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Sep 22, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants