Skip to content

Feature/#230 refactor react complier #232

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Rootjang92 merged 7 commits into from
Mar 19, 2026
Merged

Feature/#230 refactor react complier #232

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
47719f3
refactor: useCallback, useMemo 제거
Rootjang92 Mar 18, 2026
81b2667
refactor: memo 제거
Rootjang92 Mar 18, 2026
95be4ac
refactor: forwardRef 제거
Rootjang92 Mar 18, 2026
b5ab692
fix: Datepicker 외부 value 대응 로직으로 수정
Rootjang92 Mar 18, 2026
8bf4d58
fix: 시간 소스 수정 및 변경 경로 통일
Rootjang92 Mar 19, 2026
62c2102
refactor: 날짜 선택 후 시간 선태할 수 있도록 수정
Rootjang92 Mar 19, 2026
47db20b
feat: mcp 설정 추가
Rootjang92 Mar 19, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 9 additions & 1 deletion .claude/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,13 @@
{
"enabledPlugins": {
"playwright@claude-plugins-official": true
"playwright@claude-plugins-official": true,
"context7@claude-plugins-official": true
},
"mcpServers": {
"playwright": {
"command": "npx",
"args": ["-y", "@playwright/mcp@latest"]
},
"context7": { "command": "npx", "args": ["-y", "@upstash/context7-mcp@latest"] }
}
Comment on lines +3 to 12
Copy link
Copy Markdown

@coderabbitai coderabbitai bot Mar 19, 2026

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Description: Verify npm packages exist and check their latest versions

echo "=== Checking `@playwright/mcp` ==="
npm view `@playwright/mcp` version 2>/dev/null || echo "Package not found"

echo "=== Checking `@upstash/context7-mcp` ==="
npm view `@upstash/context7-mcp` version 2>/dev/null || echo "Package not found"

Repository: dnd-side-project/dnd-14th-9-frontend

Length of output: 164

IDE 설정을 별도 PR로 분리하세요

.claude/settings.json의 MCP 서버 설정은 React Compiler 기반 memoization 제거 목표와 무관합니다. 도구 설정 변경은 별도 PR로 분리하면 코드 이력 관리와 검토가 명확합니다.

추가 개선사항:

  • npx -y 플래그는 패키지 설치를 자동 승인하므로 보안 위험 증가 → 사용자 확인 프롬프트 추가 필요
  • @latest 버전 고정 없이 사용하면 팀원 간 도구 버전 불일치 가능 → 특정 버전 명시 권장 (예: @playwright/mcp@0.0.68)
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In @.claude/settings.json around lines 3 - 12, This change wrongly mixes
IDE/tooling config with the functional PR — revert the edits to the "mcpServers"
block in .claude/settings.json from this PR and open a separate PR that
adds/changes the "mcpServers" settings (keys: "mcpServers", "playwright",
"context7"); in that separate PR remove the automatic accept flag by dropping
"-y" from the "args" array for both "playwright" and "context7" commands and pin
explicit versions instead of "@latest" (e.g. use "@playwright/mcp@0.0.68" and a
specific "@upstash/context7-mcp@<version>") so the tool versions are fixed and
user consent is required.

}
4 changes: 3 additions & 1 deletion .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,4 +48,6 @@ storybook-static
AGENTS.md

# docs
docs
docs

.playwright-mcp
54 changes: 28 additions & 26 deletions src/components/Badge/Badge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { forwardRef, type HTMLAttributes } from "react";
import { type HTMLAttributes } from "react";

import { cva, type VariantProps } from "class-variance-authority";

Expand Down Expand Up @@ -47,33 +47,35 @@ export interface BadgeProps
children: React.ReactNode;
showIcon?: boolean;
onIconClick?: () => void;
ref?: React.Ref<HTMLSpanElement>;
}

export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(
({ className, status, radius, showIcon = false, onIconClick, children, ...props }, ref) => {
const canRenderIconButton = showIcon && typeof onIconClick === "function";
export function Badge({
className,
status,
radius,
showIcon = false,
onIconClick,
children,
ref,
...props
}: BadgeProps) {
const canRenderIconButton = showIcon && typeof onIconClick === "function";

return (
<span
ref={ref}
className={cn(
BADGE_VARIANTS({ status, radius }),
canRenderIconButton && "gap-1",
className
)}
{...props}
>
{children}
{canRenderIconButton && (
<button type="button" onClick={onIconClick} className="inline-flex items-center">
<XIcon size="xsmall" />
</button>
)}
</span>
);
}
);

Badge.displayName = "Badge";
return (
<span
ref={ref}
className={cn(BADGE_VARIANTS({ status, radius }), canRenderIconButton && "gap-1", className)}
{...props}
>
{children}
{canRenderIconButton && (
<button type="button" onClick={onIconClick} className="inline-flex items-center">
<XIcon size="xsmall" />
</button>
)}
</span>
);
}

export { BADGE_VARIANTS };
75 changes: 35 additions & 40 deletions src/components/Button/Button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from "react";
import { type ButtonHTMLAttributes, type ReactNode } from "react";

import { cva, type VariantProps } from "class-variance-authority";

Expand Down Expand Up @@ -112,46 +112,41 @@ export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &
ButtonVariantProps & {
leftIcon?: ReactNode;
rightIcon?: ReactNode;
ref?: React.Ref<HTMLButtonElement>;
};

export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
(
{
className,
variant,
colorScheme,
size,
iconOnly,
leftIcon,
rightIcon,
children,
disabled,
...props
},
ref
) => {
return (
<button
ref={ref}
className={cn(buttonVariants({ variant, colorScheme, size, iconOnly, className }))}
disabled={disabled}
aria-disabled={disabled}
{...props}
>
{iconOnly ? (
(leftIcon ?? rightIcon)
) : (
<>
{leftIcon}
{children}
{rightIcon}
</>
)}
</button>
);
}
);

Button.displayName = "Button";
export function Button({
className,
variant,
colorScheme,
size,
iconOnly,
leftIcon,
rightIcon,
children,
disabled,
ref,
...props
}: ButtonProps) {
return (
<button
ref={ref}
className={cn(buttonVariants({ variant, colorScheme, size, iconOnly, className }))}
disabled={disabled}
aria-disabled={disabled}
{...props}
>
{iconOnly ? (
(leftIcon ?? rightIcon)
) : (
<>
{leftIcon}
{children}
{rightIcon}
</>
)}
</button>
);
}

export { buttonVariants };
16 changes: 8 additions & 8 deletions src/components/ButtonGroup/ButtonGroup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
import { forwardRef, type HTMLAttributes } from "react";
import { type HTMLAttributes } from "react";

import { cn } from "@/lib/utils/utils";

export type ButtonGroupProps = HTMLAttributes<HTMLDivElement>;
export type ButtonGroupProps = HTMLAttributes<HTMLDivElement> & {
ref?: React.Ref<HTMLDivElement>;
};

export const ButtonGroup = forwardRef<HTMLDivElement, ButtonGroupProps>(
({ className, children, ...props }, ref) => (
export function ButtonGroup({ className, children, ref, ...props }: ButtonGroupProps) {
return (
<div
ref={ref}
className={cn("inline-flex flex-row flex-wrap items-center gap-2", className)}
Expand All @@ -14,7 +16,5 @@ export const ButtonGroup = forwardRef<HTMLDivElement, ButtonGroupProps>(
>
{children}
</div>
)
);

ButtonGroup.displayName = "ButtonGroup";
);
}
37 changes: 20 additions & 17 deletions src/components/CategoryFilterButton/CategoryFilterButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { forwardRef, type ButtonHTMLAttributes } from "react";
import { type ButtonHTMLAttributes } from "react";

import { cva, type VariantProps } from "class-variance-authority";

Expand Down Expand Up @@ -34,23 +34,26 @@ const CATEGORY_FILTER_BUTTON_VARIANTS = cva(
export type CategoryFilterButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &
Omit<VariantProps<typeof CATEGORY_FILTER_BUTTON_VARIANTS>, "isSelected"> & {
isSelected?: boolean;
ref?: React.Ref<HTMLButtonElement>;
};

export const CategoryFilterButton = forwardRef<HTMLButtonElement, CategoryFilterButtonProps>(
({ className, isSelected = false, children, ...props }, ref) => {
return (
<button
ref={ref}
className={cn(CATEGORY_FILTER_BUTTON_VARIANTS({ isSelected, className }))}
aria-pressed={isSelected}
{...props}
>
{children}
</button>
);
}
);

CategoryFilterButton.displayName = "CategoryFilterButton";
export function CategoryFilterButton({
className,
isSelected = false,
children,
ref,
...props
}: CategoryFilterButtonProps) {
return (
<button
ref={ref}
className={cn(CATEGORY_FILTER_BUTTON_VARIANTS({ isSelected, className }))}
aria-pressed={isSelected}
{...props}
>
{children}
</button>
);
}

export { CATEGORY_FILTER_BUTTON_VARIANTS };
21 changes: 9 additions & 12 deletions src/components/ChipGroup/ChipGroup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { forwardRef, type HTMLAttributes } from "react";
import { type HTMLAttributes } from "react";

import { cva, type VariantProps } from "class-variance-authority";

Expand All @@ -9,18 +9,15 @@ const CHIPGROUP_VARIANTS = cva(["inline-flex", "flex-row", "flex-wrap", "items-c
export interface ChipGroupProps
extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof CHIPGROUP_VARIANTS> {
children: React.ReactNode;
ref?: React.Ref<HTMLDivElement>;
}

export const ChipGroup = forwardRef<HTMLDivElement, ChipGroupProps>(
({ className, children, ...props }, ref) => {
return (
<div ref={ref} className={cn(CHIPGROUP_VARIANTS({ className }))} role="group" {...props}>
{children}
</div>
);
}
);

ChipGroup.displayName = "ChipGroup";
export function ChipGroup({ className, children, ref, ...props }: ChipGroupProps) {
return (
<div ref={ref} className={cn(CHIPGROUP_VARIANTS({ className }))} role="group" {...props}>
{children}
</div>
);
}

export { CHIPGROUP_VARIANTS };
Loading
Loading