[FEATURE] 공통 UI 컴포넌트 추가

.gitignore

@@ -47,3 +47,6 @@ app-example
 .agents/
 skills-lock.json
 STRUCTURE_CHANGES.txt
+
+CLAUDE.md
+Convention.txt

components/ui/action-icon-button.tsx

@@ -0,0 +1,64 @@
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+import { Colors, Typography } from '@/constants/theme';
+import { IconSymbol } from './icon-symbol';
+
+type Variant = 'delete' | 'erase';
+
+interface ActionIconButtonProps {
+  variant: Variant;
+  label?: string;
+  icon?: boolean;
+  disabled?: boolean;
+  onPress?: () => void;
+}
+
+const ICON_NAME: Record<Variant, 'trash' | 'eraser'> = {
+  delete: 'trash',
+  erase: 'eraser',
+};
+
+export function ActionIconButton({
+  variant,
+  label,
+  icon = true,
+  disabled = false,
+  onPress,
+}: ActionIconButtonProps) {
+  const iconColor = disabled ? Colors.brand.textHint : Colors.brand.primary;
+  const labelColor = disabled ? Colors.brand.textHint : Colors.brand.textSecondary;
+  const showIcon = icon;
+  const showLabel = Boolean(label);
+
+  return (
+    <Pressable
+      onPress={disabled ? undefined : onPress}
+      style={({ pressed }) => [
+        styles.container,
+        pressed && !disabled && styles.pressed,
+      ]}
+      accessibilityRole="button"
+      accessibilityState={{ disabled }}
+    >
+      {showIcon && (
+        <IconSymbol name={ICON_NAME[variant]} size={18} color={iconColor} />
+      )}
+      {showLabel && (
+        <Text style={[styles.label, { color: labelColor }]}>{label}</Text>
+      )}
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 4,
+  },
+  pressed: {
+    opacity: 0.6,
+  },
+  label: {
+    ...Typography.caption,
+  },
+});

components/ui/add-folder-button.tsx

@@ -0,0 +1,66 @@
+import { StyleSheet, Text, TouchableOpacity, type TouchableOpacityProps } from 'react-native';
+
+import { Colors, Typography } from '@/constants/theme';
+
+export interface AddFolderButtonProps extends Omit<TouchableOpacityProps, 'style'> {
+  label?: string;
+  icon?: boolean;
+  disabled?: boolean;
+}
+
+export function AddFolderButton({
+  label = '폴더 추가',
+  icon = true,
+  disabled = false,
+  onPress,
+  ...rest
+}: AddFolderButtonProps) {
+  return (
+    <TouchableOpacity
+      style={[styles.base, disabled && styles.disabled]}
+      onPress={onPress}
+      disabled={disabled}
+      activeOpacity={0.75}
+      {...rest}
+    >
+      {icon && (
+        <Text style={[styles.icon, disabled && styles.iconDisabled]}>+</Text>
+      )}
+      <Text style={[styles.label, disabled && styles.labelDisabled]}>{label}</Text>
+    </TouchableOpacity>
+  );
+}
+
+const styles = StyleSheet.create({
+  base: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    alignSelf: 'flex-start',
+    paddingVertical: 7,
+    paddingHorizontal: 12,
+    borderRadius: 999,
+    borderWidth: 1,
+    borderColor: Colors.brand.line,
+    backgroundColor: '#fff',
+    gap: 2,
+  },
+  disabled: {
+    borderColor: Colors.brand.line,
+    backgroundColor: Colors.brand.softMint,
+  },
+  icon: {
+    ...Typography.section,
+    color: Colors.brand.primary,
+    lineHeight: 20,
+  },
+  iconDisabled: {
+    color: Colors.brand.textHint,
+  },
+  label: {
+    ...Typography.caption,
+    color: Colors.brand.text,
+  },
+  labelDisabled: {
+    color: Colors.brand.textHint,
+  },
+});