Skip to content
This repository was archived by the owner on Mar 18, 2026. It is now read-only.

[기능] MainPage 클라이언트/서버 분리 및 GitHub Actions CI 워크플로우 추가#8

Merged
haesookimDev merged 15 commits into
mainfrom
feature/gitaction
Jul 16, 2025
Merged

[기능] MainPage 클라이언트/서버 분리 및 GitHub Actions CI 워크플로우 추가#8
haesookimDev merged 15 commits into
mainfrom
feature/gitaction

Conversation

@haesookimDev
Copy link
Copy Markdown
Contributor

설명

  • 기존 MainPage 컴포넌트의 클라이언트 로직을 별도의 컴포넌트(MainPageClient)로 분리하여 서버 컴포넌트와 클라이언트 컴포넌트의 역할을 명확히 구분했습니다.
  • Next.js 서버 컴포넌트에서 클라이언트 컴포넌트를 Suspense로 감싸 빌드 및 렌더링 관련 문제를 해결하고, 사용자 경험을 개선하기 위해 로딩 UI를 추가했습니다.
  • GitHub Actions 워크플로우를 새로 추가하여 main 브랜치에 push 또는 PR 이벤트 발생 시 Node.js 여러 버전 환경에서 자동 빌드 및 서버 동작 확인이 가능하도록 CI 환경을 구축했습니다.
  • 불필요한 테스트 파일과 사용하지 않는 코드를 정리하여 코드베이스를 깔끔하게 유지했습니다.

주요 변경 사항

  • src/app/main/page.tsx:
    • 클라이언트 로직 전부와 관련 상태 관리를 MainPageClient로 분리.
    • 서버 컴포넌트로서 Suspense를 활용하여 클라이언트 컴포넌트를 로딩하고, 로딩 시 별도 컴포넌트 표시.
  • src/app/main/components/MainPageClient.tsx:
    • 기존 MainPage의 클라이언트 전용 UI 및 상태 관리 로직 모두 이 컴포넌트로 이동.
  • .github/workflows/npm_build.yaml:
    • Node.js 18.x, 20.x, 22.x, 24.x 버전 매트릭스의 자동 빌드 및 의존성 설치, 빌드, 서버 시작 테스트 워크플로우 추가.
  • src/app/canvas/page.tsx:
    • 코드 스타일 깨끗하게 정리(불필요한 빈 줄, 사용되지 않는 import 제거).
  • 불필요한 테스트용 파일(test_storage.js, test_workflow_sync.md) 삭제.
  • 전반적인 코드 리팩토링을 통해 유지보수성과 가독성 향상.

- Extracted all client-side logic and state management from MainPage
  into a new MainPageClient component with 'use client' directive.
- Updated MainPage to be a server component that uses Suspense to
  asynchronously load MainPageClient with a loading fallback.
- This separation resolves build errors related to client-only hooks
  and improves code organization.
- Added a simple Loading component as Suspense fallback.
- Introduced a GitHub Actions workflow for CI to build and test the
  Next.js project across multiple Node.js versions.
Add a default working-directory to the run steps in the GitHub Actions
npm_build workflow to ensure commands execute from the repository root,
improving consistency across different node versions.
- Change GitHub Actions workflow working directory to absolute path
- Remove redundant comments from main page component for clarity
- Set GitHub Actions working directory to project root for consistency
- Add cache-dependency-path to npm build cache step to improve caching
- Specify explicit tsconfig.json path in ESLint config for correct resolution
- Include "src" directory in tsconfig.json to ensure proper type checking and compilation
Removed the incorrect `cache-dependency-path` setting from the
npm_build GitHub Actions workflow to fix caching issues during the
dependency installation step. This ensures proper caching behavior
with the specified `package-lock.json` files.
Introduce initial React components for the chat feature, including
ChatPage and ChatSidebarItem. These components currently render simple
placeholders with a heading and a comment indicating where chat content
will be added in the future. This lays the groundwork for further chat
UI development.
@haesookimDev haesookimDev self-assigned this Jul 15, 2025
@haesookimDev haesookimDev merged commit 4979677 into main Jul 16, 2025
4 checks passed
@haesookimDev haesookimDev deleted the feature/gitaction branch July 16, 2025 00:41
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant