Skip to content

[chore] ci/cd 구성#10

Merged
dohy-eon merged 3 commits intodevfrom
chore/ALT-165
Mar 29, 2026
Merged

[chore] ci/cd 구성#10
dohy-eon merged 3 commits intodevfrom
chore/ALT-165

Conversation

@dohy-eon
Copy link
Copy Markdown
Member

@dohy-eon dohy-eon commented Mar 27, 2026

ID

  • ALT-165

변경 내용

  • setting npm ci and run build

구현 사항

  • 깃헙 페이지에서 서브 경로로 올라가면 라우팅 에러 뜰 수도 있어서 vite 기본값인 import.meta.env.BASE_URL을 basename으로 연결 해놨습니다

Summary by CodeRabbit

  • New Features

    • Automatic GitHub Pages deployment for main branch updates.
  • Chores

    • Added CI workflow to validate linting, formatting, and build on PRs and key branches.
    • App routing now respects the configured base URL for deployed environments.
    • Layout and markup restructures across several pages for cleaner component nesting and improved loading/error state handling.
    • Minor JSX/formatting consistency updates.

@dohy-eon dohy-eon requested review from kim3360 and limtjdghks March 27, 2026 14:58
@dohy-eon dohy-eon self-assigned this Mar 27, 2026
@coderabbitai
Copy link
Copy Markdown

coderabbitai bot commented Mar 27, 2026

Warning

.coderabbit.yaml has a parsing error

The CodeRabbit configuration file in this repository has a parsing error and default settings were used instead. Please fix the error(s) in the configuration file. You can initialize chat with CodeRabbit to get help with the configuration file.

💥 Parsing errors (1)
Validation error: String must contain at most 250 character(s) at "tone_instructions"
⚙️ Configuration instructions
  • Please see the configuration documentation for more information.
  • You can also validate your configuration using the online YAML validator.
  • 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
📝 Walkthrough

Walkthrough

Adds CI and GitHub Pages deployment workflows, sets BrowserRouter basename from import.meta.env.BASE_URL, and applies JSX/layout reformatting across several pages and shared UI components.

Changes

Cohort / File(s) Summary
GitHub Actions
.github/workflows/ci.yml, .github/workflows/deploy-pages.yml
Add CI workflow (runs on PRs and pushes to dev/main; Node.js 20; lint/format/build) and Pages deployment workflow (builds site with base path, uploads artifact, deploys via actions/deploy-pages@v4 with least-privilege permissions).
Router / App
src/app/App.tsx
Compute routerBasename from import.meta.env.BASE_URL and pass it to <BrowserRouter basename={routerBasename}>.
Manager pages & components
src/pages/manager/home/index.tsx
Flatten JSX nesting; add explicit props to WorkerImageCard and StoreWorkerListItem; reformat mapping output.
User pages (layout/indent only)
src/pages/user/home/index.tsx, src/pages/user/job-lookup-map/index.tsx, src/pages/user/schedule/index.tsx, src/pages/user/workspace-members/index.tsx
Reindent and restructure JSX branches; workspace-members additionally tightens loading/error guards and consolidates empty/data branches.
Auth / Login page
src/pages/login/index.tsx
Reorganize JSX wrapper nesting/indentation; no handler or logic changes.
Shared UI tweaks
src/shared/ui/MobileLayout.tsx, src/shared/ui/MobileLayoutWithDocbar.tsx
Change className string quoting from single to double quotes; no behavior changes.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

Suggested reviewers

  • kim3360
  • limtjdghks

Poem

🐰 I hopped through commits, tidy and neat,
New workflows hum, builds skip a beat.
Basenames set, routes find their way,
JSX trimmed for a brighter day —
🍃 small changes, big bunny cheer!

🚥 Pre-merge checks | ✅ 1 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
Description check ❓ Inconclusive The description includes ID and implementation details but lacks a summary in the '변경 내용' section and omits visual demonstrations or referenced documentation. Expand '변경 내용' with a clear summary of all changes (CI workflows, routing fix), and consider adding '참고 사항' with relevant links or setup instructions if applicable.
✅ Passed checks (1 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly and specifically summarizes the main changes: adding CI/CD configuration files (ci.yml, deploy-pages.yml) and related routing setup, which aligns with the PR objectives.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch chore/ALT-165

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 3

🧹 Nitpick comments (1)
.github/workflows/deploy-pages.yml (1)

32-37: Consider deduplicating quality/build steps shared with CI.

npm ci + lint + format-check + build logic is now duplicated here and in .github/workflows/ci.yml. Extracting shared steps into a reusable workflow (or composite action) will reduce drift and maintenance overhead.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In @.github/workflows/deploy-pages.yml around lines 32 - 37, The workflow
duplicates the quality/build steps (the npm ci, npm run lint, npm run
format:check and the Build for GitHub Pages step that runs npm run build --
--base=/${{ github.event.repository.name }}/); extract these shared steps into a
reusable workflow or composite action (e.g., a new callable workflow that runs
npm ci, lint, format:check and the build invocation) and then replace the
duplicated block in deploy-pages.yml with a workflow_call/uses step that invokes
that reusable workflow, ensuring inputs (like repository name or base path) are
exposed and passed through so Build for GitHub Pages still receives the correct
--base value.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In @.github/workflows/ci.yml:
- Around line 1-11: The workflow named "CI" omits an explicit permissions block
causing GITHUB_TOKEN to have broader privileges; add a top-level permissions
block under the "name: CI" header that explicitly grants only the minimal scopes
this workflow needs (for example, contents: read and checks: write or
pull-requests: write as applicable), matching the pattern used in
deploy-pages.yml, and place it above the concurrency/job definitions so the CI
workflow runs with least-privilege GITHUB_TOKEN.

In `@src/app/App.tsx`:
- Around line 28-33: The file fails Prettier checks; run the project's formatter
(e.g., npx prettier --write or yarn format) on the component containing App,
routerBasename and BrowserRouter, or run the repo's formatting script, then
stage and commit the formatted changes so Prettier --check in CI passes. Ensure
the declaration of routerBasename and the JSX return in App are reformatted
according to project Prettier settings before committing.
- Around line 28-29: The routerBasename computation in App.tsx can produce
relative values like '.' which React Router rejects; update the routerBasename
logic (the variable named routerBasename) to normalize and validate BASE_URL
after trimming the trailing slash, and only return a basename when the result is
an absolute non-root path (i.e., starts with '/' and is not '/'); otherwise set
routerBasename to undefined so react-router-dom receives a valid basename.

---

Nitpick comments:
In @.github/workflows/deploy-pages.yml:
- Around line 32-37: The workflow duplicates the quality/build steps (the npm
ci, npm run lint, npm run format:check and the Build for GitHub Pages step that
runs npm run build -- --base=/${{ github.event.repository.name }}/); extract
these shared steps into a reusable workflow or composite action (e.g., a new
callable workflow that runs npm ci, lint, format:check and the build invocation)
and then replace the duplicated block in deploy-pages.yml with a
workflow_call/uses step that invokes that reusable workflow, ensuring inputs
(like repository name or base path) are exposed and passed through so Build for
GitHub Pages still receives the correct --base value.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 8e89fd44-da15-4a02-8b4f-3a0a4dceca9a

📥 Commits

Reviewing files that changed from the base of the PR and between c6e9773 and 3649fc8.

📒 Files selected for processing (3)
  • .github/workflows/ci.yml
  • .github/workflows/deploy-pages.yml
  • src/app/App.tsx

Copy link
Copy Markdown

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🧹 Nitpick comments (1)
src/pages/manager/home/index.tsx (1)

91-91: Replace hardcoded color with Tailwind token.

bg-[#EFEFEF] should be bg-bg-dark per the project's Tailwind configuration.

♻️ Suggested fix
-    <div className="flex min-h-[100dvh] flex-col box-border bg-[`#EFEFEF`]">
+    <div className="flex min-h-[100dvh] flex-col box-border bg-bg-dark">

Based on learnings: "use bg-bg-dark for '#efefef'. Replace literals like bg-[#EFEFEF] with the appropriate tokens."

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/pages/manager/home/index.tsx` at line 91, Replace the hardcoded hex
background color in the JSX div that currently uses className "flex
min-h-[100dvh] flex-col box-border bg-[`#EFEFEF`]" and swap the literal
bg-[`#EFEFEF`] with the Tailwind token bg-bg-dark (and update any similar
hardcoded literals in the same component) so the component uses the project's
configured design token instead of an inline hex value.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/pages/manager/home/index.tsx`:
- Line 94: The className on the div element in the Manager Home component
contains an unintended leading space (" h-50"); update the JSX in
src/pages/manager/home/index.tsx by removing the leading space so the className
reads "h-50" (locate the div with className=" h-50" and change it to
className="h-50").

In `@src/pages/user/workspace-members/index.tsx`:
- Around line 50-75: The UI currently uses the aggregate hasError to gate all
render branches which hides partial-success data; update the conditional logic
in the render blocks to use per-query status instead of the global OR: replace
usages of hasError in the error and empty-state checks with a conjunction of the
individual error flags (e.g. workersError && managersError) so that only when
both queries fail the full-page error shows, and similarly ensure loading is
based on both queries (e.g. workersLoading || managersLoading) where
appropriate; locate and change the conditions that reference hasError,
isLoading, workers, and managers in the component render to use
workersError/managersError and workersLoading/managersLoading.

---

Nitpick comments:
In `@src/pages/manager/home/index.tsx`:
- Line 91: Replace the hardcoded hex background color in the JSX div that
currently uses className "flex min-h-[100dvh] flex-col box-border bg-[`#EFEFEF`]"
and swap the literal bg-[`#EFEFEF`] with the Tailwind token bg-bg-dark (and update
any similar hardcoded literals in the same component) so the component uses the
project's configured design token instead of an inline hex value.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: e72b8f35-fcb2-459b-a5dd-f65b511988f8

📥 Commits

Reviewing files that changed from the base of the PR and between 3649fc8 and ea81175.

📒 Files selected for processing (9)
  • src/app/App.tsx
  • src/pages/login/index.tsx
  • src/pages/manager/home/index.tsx
  • src/pages/user/home/index.tsx
  • src/pages/user/job-lookup-map/index.tsx
  • src/pages/user/schedule/index.tsx
  • src/pages/user/workspace-members/index.tsx
  • src/shared/ui/MobileLayout.tsx
  • src/shared/ui/MobileLayoutWithDocbar.tsx
✅ Files skipped from review due to trivial changes (6)
  • src/shared/ui/MobileLayout.tsx
  • src/pages/user/home/index.tsx
  • src/shared/ui/MobileLayoutWithDocbar.tsx
  • src/pages/user/job-lookup-map/index.tsx
  • src/pages/login/index.tsx
  • src/pages/user/schedule/index.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
  • src/app/App.tsx

alt="logo"
className="w-full h-full object-cover"
/>
<div className=" h-50">
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Remove leading space in className.

There's an extra leading space in " h-50" that appears unintentional.

🧹 Suggested fix
-      <div className=" h-50">
+      <div className="h-50">
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<div className=" h-50">
<div className="h-50">
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/pages/manager/home/index.tsx` at line 94, The className on the div
element in the Manager Home component contains an unintended leading space ("
h-50"); update the JSX in src/pages/manager/home/index.tsx by removing the
leading space so the className reads "h-50" (locate the div with className="
h-50" and change it to className="h-50").

Comment on lines +50 to +75
{!isWorkspaceIdInvalid && hasError && !isLoading && (
<div className="bg-white rounded-2xl p-5 shadow-sm border border-red-100">
<p className="font-pretendard text-3 text-red-500 m-0">
함께 일하는 사람들 목록을 불러오는 중 오류가 발생했습니다. 잠시 후
다시 시도해주세요.
</p>
</div>
)}

{!isWorkspaceIdInvalid &&
!isLoading &&
!hasError &&
workers.length === 0 &&
managers.length === 0 && (
<div className="bg-white rounded-2xl p-5 shadow-sm border border-line-1">
<p className="font-pretendard text-3 text-text-70 m-0">
워크스페이스 ID가 유효하지 않습니다. 올바른 경로로 다시
접근해주세요.
현재 이 워크스페이스에 등록된 근무자 또는 점주/매니저가
없습니다.
</p>
</div>
)}

{!isWorkspaceIdInvalid && isLoading && (
<div className="flex justify-center items-center min-h-[200px]">
<Spinner />
{!isWorkspaceIdInvalid &&
!isLoading &&
!hasError &&
(workers.length > 0 || managers.length > 0) && (
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Partial-success data is currently blocked by global hasError gating.

Because hasError is composed with OR across two independent queries, one failed query can hide successfully loaded data from the other query. This turns partial success into a full-page failure UI.

💡 Proposed fix
@@
   const {
@@
   } = useWorkspaceMembers({
     workspaceId,
     initialPageSize: 3,
     loadMorePageSize: 10,
   })
+
+  const hasAnyMembers = workers.length > 0 || managers.length > 0
@@
-        {!isWorkspaceIdInvalid && hasError && !isLoading && (
+        {!isWorkspaceIdInvalid && hasError && !isLoading && !hasAnyMembers && (
           <div className="bg-white rounded-2xl p-5 shadow-sm border border-red-100">
             <p className="font-pretendard text-3 text-red-500 m-0">
               함께 일하는 사람들 목록을 불러오는 중 오류가 발생했습니다. 잠시 후
               다시 시도해주세요.
             </p>
           </div>
         )}
@@
-        {!isWorkspaceIdInvalid &&
-          !isLoading &&
-          !hasError &&
-          (workers.length > 0 || managers.length > 0) && (
+        {!isWorkspaceIdInvalid && !isLoading && hasAnyMembers && (
             <div className="flex flex-col gap-4">
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/pages/user/workspace-members/index.tsx` around lines 50 - 75, The UI
currently uses the aggregate hasError to gate all render branches which hides
partial-success data; update the conditional logic in the render blocks to use
per-query status instead of the global OR: replace usages of hasError in the
error and empty-state checks with a conjunction of the individual error flags
(e.g. workersError && managersError) so that only when both queries fail the
full-page error shows, and similarly ensure loading is based on both queries
(e.g. workersLoading || managersLoading) where appropriate; locate and change
the conditions that reference hasError, isLoading, workers, and managers in the
component render to use workersError/managersError and
workersLoading/managersLoading.

@dohy-eon dohy-eon changed the title chore: ci/cd 구성 [chore] ci/cd 구성 Mar 29, 2026
@dohy-eon dohy-eon merged commit ef5f413 into dev Mar 29, 2026
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants