Skip to content

Feature/#7 공통 컴포넌트 구현 #10

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
leeleeleeleejun merged 8 commits into from
Aug 15, 2025
Merged

Feature/#7 공통 컴포넌트 구현 #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
3ebc9f6
feat: Button 컴포넌트에 restProps 추가
leeleeleeleejun Aug 15, 2025
389eedf
feat: Chip 컴포넌트에서 type을 chipType으로 변경
leeleeleeleejun Aug 15, 2025
674eda4
feat: SearchBar 컴포넌트에 aria-label 추가
leeleeleeleejun Aug 15, 2025
f3ada25
feat: Button 컴포넌트에서 restProps rest 연산자 사용
leeleeleeleejun Aug 15, 2025
6d6ba78
fix: Tailwind 설정 로딩을 위한 CSS import 순서 수정
leeleeleeleejun Aug 15, 2025
cbe5dfd
feat: Textarea 컴포넌트에 useId 훅 추가 및 name 속성 설정
leeleeleeleejun Aug 15, 2025
ff5cc77
fix: IconMap에서 kakkoLogo의 이름을 kakaoLogo로 수정
leeleeleeleejun Aug 15, 2025
fe20a82
fix: Chip.stories.tsx에서 type 속성을 chipType으로 변경
leeleeleeleejun Aug 15, 2025
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
11 changes: 9 additions & 2 deletions packages/ui/src/components/Button/Button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,13 @@ export type ButtonType = <C extends ElementType = 'button'>(
props: PropsWithChildren<Props<C>>,
) => JSX.Element

export const Button: ButtonType = ({ as, className, size, children }) => {
export const Button: ButtonType = ({
as,
className,
size,
children,
...restProps
}) => {
const Component = as || 'button'

return (
Expand All @@ -33,8 +39,9 @@ export const Button: ButtonType = ({ as, className, size, children }) => {
BUTTON_SIZE[size],
className,
)}
{...restProps}
>
<Text as={'span'} variant={BUTTON_FONT_SIZE[size]}>
<Text as='span' variant={BUTTON_FONT_SIZE[size]}>
{children}
</Text>
</Component>
Expand Down
16 changes: 8 additions & 8 deletions packages/ui/src/components/Chip/Chip.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,10 @@ type Story = StoryObj<typeof Chip>
export const Default: Story = {
render: () => (
<Flex className='ui:gap-2'>
<Chip type='SOLO_FRIENDLY' />
<Chip type='GOOD_AMBIENCE' />
<Chip type='VALUE_FOR_MONEY' />
<Chip type='KIND_SERVICE' />
<Chip chipType='SOLO_FRIENDLY' />
<Chip chipType='GOOD_AMBIENCE' />
<Chip chipType='VALUE_FOR_MONEY' />
<Chip chipType='KIND_SERVICE' />
</Flex>
),
}
Expand All @@ -32,12 +32,12 @@ export const ClickableChips: Story = {
'GOOD_AMBIENCE',
'KIND_SERVICE',
] as const
).map((type) => (
).map((chipType) => (
<Chip
key={type}
type={type}
key={chipType}
chipType={chipType}
onToggle={() => {
console.log(`${type} 클릭됨!`)
console.log(`${chipType} 클릭됨!`)
}}
/>
))}
Expand Down
8 changes: 4 additions & 4 deletions packages/ui/src/components/Chip/Chip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ type ChipTagKey = keyof typeof CHIP_TAGS
export type ChipProps<C extends ElementType> = PolymorphicComponentProps<
C,
{
type: ChipTagKey
chipType: ChipTagKey
onToggle?: () => void
}
>
Expand All @@ -50,7 +50,7 @@ export type ChipType = <C extends ElementType = 'button'>(
*
* @param as 렌더링할 HTML 태그 또는 컴포넌트
* @param className 추가 CSS 클래스
* @param type 표시할 Chip 타입
* @param chipType 표시할 Chip 타입
* @param onToggle 클릭 시 실행할 콜백 함수
* @param restProps 나머지 Props
*
Expand All @@ -62,12 +62,12 @@ export type ChipType = <C extends ElementType = 'button'>(
export const Chip: ChipType = ({
as,
className,
type,
chipType,
Copy link

@coderabbitai coderabbitai bot Aug 15, 2025

Choose a reason for hiding this comment

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

💡 Verification agent

🧩 Analysis chain

prop 사용처 업데이트가 완료되었습니다.

destructuring과 내부 사용처에서 type을 chipType으로 일관되게 변경했습니다.

Chip.stories.tsx 파일에서 이 변경사항을 반영했는지 확인해보겠습니다.

Also applies to: 70-70

🏁 Script executed:

#!/bin/bash
# 설명: Chip 컴포넌트의 type prop 사용처를 확인합니다.

# Chip 컴포넌트에서 type prop 사용 검색 (구 이름)
echo "=== type prop 사용처 (구 이름) ==="  
rg -nC3 '<Chip[^>]*type=' --type=tsx --type=ts

# chipType prop 사용 검색 (새 이름)
echo "=== chipType prop 사용처 (새 이름) ==="
rg -nC3 '<Chip[^>]*chipType=' --type=tsx --type=ts

Length of output: 299

ripgrep의 --type=tsx 설정이 인식되지 않아 검색이 실패했습니다. glob 패턴으로 .tsx/.ts 파일을 직접 지정해 다시 확인해보겠습니다.

🏁 Script executed:

#!/bin/bash
echo "=== type prop 사용처 (구 이름) ==="
rg -nC3 -g '*.tsx' -g '*.ts' '<Chip[^>]*type='

echo "=== chipType prop 사용처 (새 이름) ==="
rg -nC3 -g '*.tsx' -g '*.ts' '<Chip[^>]*chipType='

Length of output: 1472

Chip.stories.tsx에서 type → chipType 프로퍼티 명 변경 필요
스토리 파일에 아직 type= 사용 예시가 남아 있어, 새로 도입된 chipType=으로 수정해야 합니다.

• packages/ui/src/components/Chip/Chip.stories.tsx
– 줄 17: <Chip type='SOLO_FRIENDLY' />
– 줄 18: <Chip type='GOOD_AMBIENCE' />
– 줄 19: <Chip type='VALUE_FOR_MONEY' />
– 줄 20: <Chip type='KIND_SERVICE' />

-    <Chip type='SOLO_FRIENDLY' />
+    <Chip chipType='SOLO_FRIENDLY' />

Committable suggestion skipped: line range outside the PR's diff.

🤖 Prompt for AI Agents 
In packages/ui/src/components/Chip/Chip.stories.tsx around lines 17 to 20, the
story examples still use the old prop name `type=`; update each instance to use
the new prop name `chipType=` (e.g. change `<Chip type='SOLO_FRIENDLY' />` to
`<Chip chipType='SOLO_FRIENDLY' />`, and similarly for the other three lines) so
the stories match the component's `chipType` prop.

onToggle,
...restProps
}) => {
const Component = as || 'button'
const { icon, label } = CHIP_TAGS[type]
const { icon, label } = CHIP_TAGS[chipType]
const [isActive, setIsActive] = useState(false)

const onClick = () => {
Expand Down
2 changes: 1 addition & 1 deletion packages/ui/src/components/Icon/IconMap.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ export const iconMap = {
note: Note,
smile: Smile,
cry: Cry,
kakkoLogo: KakaoLogo,
kakaoLogo: KakaoLogo,
crosshairs: Crosshairs,
}

Expand Down
3 changes: 2 additions & 1 deletion packages/ui/src/components/SearchBar/SearchBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,15 @@ export const SearchBar = ({ href }: { href: string }) => {
return (
<Flex
as='a'
href={href || ''}
href={href}
className={cn(
'ui:border ui:border-gray-200',
'ui:rounded-xl',
'ui:p-3.5',
'ui:items-center',
'ui:gap-2',
)}
aria-label={'검색 페이지로 이동'}
>
<Icon type={'search'} size={16} />
<Text
Expand Down
4 changes: 3 additions & 1 deletion packages/ui/src/components/Textarea/Textarea.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
'use client'

import { useLayoutEffect, useRef } from 'react'
import { useId, useLayoutEffect, useRef } from 'react'
import { Column } from '../Layout'
import { cn } from '../../utils/cn'
import { Text } from '../Text'
Expand Down Expand Up @@ -36,6 +36,7 @@ export const Textarea = ({
maxLength = 1000,
className,
}: Props) => {
const id = useId()
const textareaRef = useRef<HTMLTextAreaElement>(null)

useLayoutEffect(() => {
Expand All @@ -54,6 +55,7 @@ export const Textarea = ({
return (
<Column>
<textarea
name={`message-${id}`}
ref={textareaRef}
value={value}
maxLength={maxLength}
Expand Down
4 changes: 2 additions & 2 deletions packages/ui/src/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
/* Component-level styles for the UI package */
@config "../tailwind.config.ts";
@import "tailwindcss" prefix(ui);
@import "@repo/tailwind-config";
@config "../tailwind.config.ts";
@import "@repo/tailwind-config";