@pisodev/test-component-library 1.1.2 → 2.0.0

package/components/Anchor/Anchor.native.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Text, Pressable, Linking, StyleSheet } from 'react-native';
+import { AnchorProps } from './Anchor.types';
+
+export const Anchor: React.FC<AnchorProps> = ({
+  children,
+  href,
+  title,
+  onPress,
+}) => {
+  const handlePress = () => {
+    if (onPress) {
+      onPress();
+    } else if (href) {
+      Linking.openURL(href);
+    }
+  };
+
+  return (
+    <Pressable
+      onPress={handlePress}
+      accessibilityRole="link"
+      accessibilityLabel={title}
+      accessibilityHint={`Opens ${href}`}
+    >
+      {({ pressed }: any) => (
+        <Text style={[styles.anchor, pressed && styles.anchorPressed]}>
+          {children}
+        </Text>
+      )}
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create({
+  anchor: {
+    color: '#2196f3',
+    textDecorationLine: 'none',
+  },
+  anchorPressed: {
+    color: '#1976d2',
+    textDecorationLine: 'underline',
+  },
+});

package/components/Anchor/Anchor.types.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+
+export interface AnchorProps {
+  children: ReactNode;
+  href: string;
+  rel?: string;
+  title?: string;
+  target?: '_blank' | '_self' | '_parent' | '_top';
+  className?: string;
+  onPress?: () => void;
+}

package/components/Anchor/Anchor.web.module.scss

@@ -0,0 +1,33 @@
+$transition: all 0.2s ease;
+
+// CSS Variables fallback
+$primary-color: var(--color-primary-600, #2196f3);
+$primary-hover: var(--color-primary-700, #1976d2);
+$primary-visited: var(--color-primary-800, #1565c0);
+$primary-active: var(--color-primary-900, #0d47a1);
+
+.anchor {
+  color: $primary-color;
+  text-decoration: none;
+  transition: $transition;
+  cursor: pointer;
+  position: relative;
+
+  &:hover {
+    color: $primary-hover;
+    text-decoration: underline;
+  }
+
+  &:focus {
+    outline: 2px solid $primary-color;
+    outline-offset: 2px;
+  }
+
+  &:visited {
+    color: $primary-visited;
+  }
+
+  &:active {
+    color: $primary-active;
+  }
+}

package/components/Anchor/Anchor.web.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { AnchorProps } from './Anchor.types';
+import styles from './Anchor.web.module.scss';
+
+export const Anchor: React.FC<AnchorProps> = ({
+  children,
+  href,
+  rel,
+  title,
+  target = '_self',
+  className = '',
+  onPress,
+}) => {
+  const anchorClasses = [styles.anchor, className].filter(Boolean).join(' ');
+
+  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
+    if (onPress) {
+      e.preventDefault();
+      onPress();
+    }
+  };
+
+  return (
+    <a
+      href={href}
+      rel={rel}
+      title={title}
+      target={target}
+      className={anchorClasses}
+      onClick={handleClick}
+    >
+      {children}
+    </a>
+  );
+};

package/components/Anchor/README.md

@@ -0,0 +1,58 @@
+# Anchor
+
+링크 컴포넌트 - 웹과 React Native 모두 지원
+
+## Props
+
+| Prop | Type | Required | Platform | Description |
+|------|------|----------|----------|-------------|
+| children | ReactNode | ✓ | All | 링크 텍스트 |
+| href | string | ✓ | All | URL |
+| rel | string | - | Web only | rel 속성 |
+| title | string | - | All | title 속성 / 접근성 레이블 |
+| target | '_blank' \| '_self' \| '_parent' \| '_top' | - | Web only | target 속성 |
+| className | string | - | Web only | CSS 클래스 |
+| onPress | () => void | - | All | 클릭 핸들러 |
+
+## 웹 사용법
+
+```tsx
+import { Anchor } from '@pisodev/test-component-library';
+
+<Anchor
+  href="https://example.com"
+  title="Example"
+  rel="noopener"
+  target="_blank"
+>
+  Click me
+</Anchor>
+```
+
+## React Native 사용법
+
+```tsx
+import { Anchor } from '@pisodev/test-component-library';
+
+<Anchor
+  href="https://example.com"
+  title="Example"
+>
+  Click me
+</Anchor>
+```
+
+## 구현 차이점
+
+### 웹 (Anchor.web.tsx)
+- `<a>` 태그 사용
+- SCSS 모듈 스타일링
+- :hover, :focus, :visited, :active 가상 선택자
+- target, rel 속성 지원
+
+### React Native (Anchor.native.tsx)
+- Pressable + Text 컴포넌트 사용
+- StyleSheet 기반 스타일링
+- Pressed 상태로 hover 효과 구현
+- Linking API로 URL 열기
+- 접근성 속성 자동 적용

package/components/Anchor/index.ts

@@ -0,0 +1,2 @@
+export { Anchor } from './Anchor';
+export type { AnchorProps } from './Anchor.types';

package/components/README.md

@@ -0,0 +1,195 @@
+# 컴포넌트 가이드
+
+## 컴포넌트 타입
+
+### 1. 크로스 플랫폼 컴포넌트 (웹 + RN 모두 지원)
+
+```
+ComponentName/
+├── ComponentName.types.ts        # 공유 타입
+├── ComponentName.web.tsx         # 웹 구현
+├── ComponentName.native.tsx      # RN 구현
+├── index.ts                      # export
+└── README.md
+```
+
+**예시**: Anchor, Button, Card
+
+**index.ts**:
+```typescript
+export { ComponentName } from './ComponentName';
+export type { ComponentNameProps } from './ComponentName.types';
+```
+
+---
+
+### 2. 웹 전용 컴포넌트
+
+```
+WebOnlyComponent/
+├── WebOnlyComponent.types.ts     # 타입
+├── WebOnlyComponent.tsx          # 웹 구현 (.web.tsx 아님!)
+├── WebOnlyComponent.module.scss  # 스타일
+├── index.ts                      # export
+└── README.md
+```
+
+**예시**: Table, Tooltip, Dropdown
+
+**index.ts**:
+```typescript
+export { WebOnlyComponent } from './WebOnlyComponent';
+export type { WebOnlyComponentProps } from './WebOnlyComponent.types';
+```
+
+**중요**: RN에서 import 시 에러 방지를 위한 처리
+
+**Option 1 - 타입만 제공**:
+```typescript
+// index.native.ts (별도 파일)
+import { WebOnlyComponentProps } from './WebOnlyComponent.types';
+
+export const WebOnlyComponent = () => {
+  if (__DEV__) {
+    console.warn('WebOnlyComponent is not available on React Native');
+  }
+  return null;
+};
+
+export type { WebOnlyComponentProps };
+```
+
+**Option 2 - 완전히 제외**:
+```typescript
+// components/index.ts에서
+export * from './Anchor';
+export * from './Button';
+
+// 조건부 export (빌드 설정에서 처리)
+if (typeof window !== 'undefined') {
+  export * from './WebOnlyComponent';
+}
+```
+
+---
+
+### 3. React Native 전용 컴포넌트
+
+```
+NativeOnlyComponent/
+├── NativeOnlyComponent.types.ts  # 타입
+├── NativeOnlyComponent.tsx       # RN 구현 (.native.tsx 아님!)
+├── index.ts                      # export
+└── README.md
+```
+
+**예시**: MapView, Camera, BiometricAuth
+
+**index.ts**:
+```typescript
+export { NativeOnlyComponent } from './NativeOnlyComponent';
+export type { NativeOnlyComponentProps } from './NativeOnlyComponent.types';
+```
+
+**웹에서 import 시 에러 방지**:
+
+**index.web.ts (별도 파일)**:
+```typescript
+import { NativeOnlyComponentProps } from './NativeOnlyComponent.types';
+
+export const NativeOnlyComponent = () => {
+  if (process.env.NODE_ENV === 'development') {
+    console.warn('NativeOnlyComponent is only available on React Native');
+  }
+  return null;
+};
+
+export type { NativeOnlyComponentProps };
+```
+
+---
+
+## 실전 예시
+
+### 예시 1: Tooltip (웹 전용)
+
+DOM API를 사용하므로 RN에서 불가능
+
+```
+Tooltip/
+├── Tooltip.types.ts
+├── Tooltip.tsx                   # 웹 구현
+├── Tooltip.module.scss
+├── index.ts                      # 웹용 export
+├── index.native.ts               # RN용 - null 반환 또는 대안
+└── README.md
+```
+
+**index.native.ts**:
+```typescript
+import { TooltipProps } from './Tooltip.types';
+
+// RN에서는 React Native의 Tooltip 사용 권장
+export const Tooltip: React.FC<TooltipProps> = ({ children }) => {
+  return <>{children}</>;  // 툴팁 없이 children만 렌더
+};
+
+export type { TooltipProps };
+```
+
+### 예시 2: DatePicker (플랫폼별 구현 차이가 큼)
+
+웹과 RN에서 완전히 다른 API 사용
+
+```
+DatePicker/
+├── DatePicker.types.ts           # 공통 props만
+├── DatePicker.web.tsx            # HTML input type="date"
+├── DatePicker.native.tsx         # @react-native-community/datetimepicker
+├── index.ts
+└── README.md
+```
+
+### 예시 3: MapView (RN 전용)
+
+react-native-maps 사용
+
+```
+MapView/
+├── MapView.types.ts
+├── MapView.tsx                   # RN 구현
+├── index.ts                      # RN export
+├── index.web.ts                  # 웹에서는 에러 또는 대안
+└── README.md
+```
+
+**index.web.ts**:
+```typescript
+export const MapView = () => {
+  throw new Error(
+    'MapView is only available on React Native. Use a web map library like react-leaflet instead.'
+  );
+};
+```
+
+---
+
+## 권장 사항
+
+### 플랫폼 전용 컴포넌트를 만들기 전에
+
+1. **정말 플랫폼 전용이 필요한가?**
+   - 대부분의 UI 컴포넌트는 크로스 플랫폼 가능
+   - 로직만 분리하고 렌더링만 다르게 할 수 있는지 검토
+
+2. **대안 제공**
+   - 웹 전용: RN에서는 null 반환 + 경고
+   - RN 전용: 웹에서는 에러 throw + 대안 라이브러리 제안
+
+3. **문서화**
+   - README.md에 플랫폼 제한 명시
+   - 대안 라이브러리/방법 제시
+
+4. **TypeScript 타입은 공유**
+   - Props 타입은 양쪽에서 사용 가능하도록
+   - 개발자 경험(DX) 향상

package/components/StatusBar/README.md

@@ -0,0 +1,56 @@
+# StatusBar
+
+**플랫폼**: React Native 전용
+
+모바일 상단 상태바(시간, 배터리 등)의 스타일을 제어하는 컴포넌트입니다.
+
+## 플랫폼 지원
+
+- ⚠️ **Web**: 지원 안 함 (null 반환)
+- ✅ **React Native**: 완전 지원
+
+## Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| barStyle | 'default' \| 'light-content' \| 'dark-content' | - | 상태바 텍스트 색상 |
+| backgroundColor | string | - | 상태바 배경색 (Android) |
+| hidden | boolean | - | 상태바 숨김 여부 |
+
+## React Native 사용법
+
+```tsx
+import { StatusBar } from '@pisodev/test-component-library';
+
+function App() {
+  return (
+    <>
+      <StatusBar
+        barStyle="dark-content"
+        backgroundColor="#ffffff"
+      />
+      {/* 나머지 앱 내용 */}
+    </>
+  );
+}
+```
+
+## 웹 대안
+
+웹에서는 HTML meta 태그로 브라우저 테마 색상을 제어할 수 있습니다:
+
+```html
+<!-- public/index.html -->
+<meta name="theme-color" content="#ffffff">
+```
+
+또는 JavaScript로 동적 제어:
+
+```tsx
+useEffect(() => {
+  const metaThemeColor = document.querySelector('meta[name="theme-color"]');
+  if (metaThemeColor) {
+    metaThemeColor.setAttribute('content', '#ffffff');
+  }
+}, []);
+```

package/components/StatusBar/StatusBar.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { StatusBar as RNStatusBar } from 'react-native';
+import { StatusBarProps } from './StatusBar.types';
+
+export const StatusBar: React.FC<StatusBarProps> = ({
+  barStyle = 'default',
+  backgroundColor,
+  hidden = false,
+}) => {
+  return (
+    <RNStatusBar
+      barStyle={barStyle}
+      backgroundColor={backgroundColor}
+      hidden={hidden}
+    />
+  );
+};

package/components/StatusBar/StatusBar.types.ts

@@ -0,0 +1,5 @@
+export interface StatusBarProps {
+  barStyle?: 'default' | 'light-content' | 'dark-content';
+  backgroundColor?: string;
+  hidden?: boolean;
+}

package/components/StatusBar/index.ts

@@ -0,0 +1,3 @@
+// React Native에서만 사용 가능
+export { StatusBar } from './StatusBar';
+export type { StatusBarProps } from './StatusBar.types';

package/components/StatusBar/index.web.ts

@@ -0,0 +1,14 @@
+import { StatusBarProps } from './StatusBar.types';
+
+// 웹에서는 StatusBar 개념이 없음
+export const StatusBar = (_props: StatusBarProps) => {
+  if (process.env.NODE_ENV === 'development') {
+    console.warn(
+      'StatusBar is only available on React Native. ' +
+      'For web, you can use <meta name="theme-color"> in your HTML.'
+    );
+  }
+  return null;
+};
+
+export type { StatusBarProps };

package/components/Tooltip/README.md

@@ -0,0 +1,45 @@
+# Tooltip
+
+**플랫폼**: 웹 전용
+
+마우스 호버 시 툴팁을 표시하는 컴포넌트입니다.
+
+## 플랫폼 지원
+
+- ✅ **Web**: 완전 지원
+- ⚠️ **React Native**: children만 렌더링 (툴팁 미표시)
+
+## Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| children | ReactNode | ✓ | 툴팁을 표시할 요소 |
+| content | string | ✓ | 툴팁 내용 |
+| position | 'top' \| 'bottom' \| 'left' \| 'right' | - | 툴팁 위치 (기본: 'top') |
+
+## 웹 사용법
+
+```tsx
+import { Tooltip } from '@pisodev/test-component-library';
+
+<Tooltip content="This is a tooltip" position="top">
+  <button>Hover me</button>
+</Tooltip>
+```
+
+## React Native 대안
+
+React Native에서는 모바일에 hover 개념이 없으므로:
+
+1. **react-native-tooltip** 사용
+2. **Modal + Pressable** 조합
+3. **Long press** 제스처로 툴팁 표시
+
+```tsx
+// RN 대안 예시
+import { Tooltip } from 'react-native-elements';
+
+<Tooltip popover={<Text>Info here</Text>}>
+  <Text>Press me</Text>
+</Tooltip>
+```

package/components/Tooltip/Tooltip.module.scss

@@ -0,0 +1,44 @@
+.tooltipWrapper {
+  position: relative;
+  display: inline-block;
+}
+
+.tooltip {
+  position: absolute;
+  background-color: rgba(0, 0, 0, 0.8);
+  color: white;
+  padding: 8px 12px;
+  border-radius: 4px;
+  font-size: 14px;
+  white-space: nowrap;
+  z-index: 1000;
+  pointer-events: none;
+
+  &.top {
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    margin-bottom: 8px;
+  }
+
+  &.bottom {
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    margin-top: 8px;
+  }
+
+  &.left {
+    right: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+    margin-right: 8px;
+  }
+
+  &.right {
+    left: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+    margin-left: 8px;
+  }
+}

package/components/Tooltip/Tooltip.tsx

@@ -0,0 +1,26 @@
+import React, { useState } from 'react';
+import { TooltipProps } from './Tooltip.types';
+import styles from './Tooltip.module.scss';
+
+export const Tooltip: React.FC<TooltipProps> = ({
+  children,
+  content,
+  position = 'top',
+}) => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  return (
+    <div
+      className={styles.tooltipWrapper}
+      onMouseEnter={() => setIsVisible(true)}
+      onMouseLeave={() => setIsVisible(false)}
+    >
+      {children}
+      {isVisible && (
+        <div className={`${styles.tooltip} ${styles[position]}`}>
+          {content}
+        </div>
+      )}
+    </div>
+  );
+};

package/components/Tooltip/Tooltip.types.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+
+export interface TooltipProps {
+  children: ReactNode;
+  content: string;
+  position?: 'top' | 'bottom' | 'left' | 'right';
+}

package/components/Tooltip/index.native.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { TooltipProps } from './Tooltip.types';
+
+// React Native에서는 Tooltip 미지원
+// children만 렌더링하고 tooltip은 무시
+export const Tooltip: React.FC<TooltipProps> = ({ children }) => {
+  if (process.env.NODE_ENV === 'development') {
+    console.warn(
+      'Tooltip is web-only. On React Native, consider using a modal or overlay library.'
+    );
+  }
+  return children as React.ReactElement;
+};
+
+export type { TooltipProps };

package/components/Tooltip/index.ts

@@ -0,0 +1,3 @@
+// 웹에서만 사용 가능
+export { Tooltip } from './Tooltip';
+export type { TooltipProps } from './Tooltip.types';

package/components/index.ts

@@ -0,0 +1,8 @@
+// 크로스 플랫폼 컴포넌트
+export * from './Anchor';
+
+// 웹 전용 컴포넌트 (RN에서는 fallback 제공)
+export * from './Tooltip';
+
+// React Native 전용 컴포넌트 (웹에서는 null 반환)
+export * from './StatusBar';

package/dist/Anchor/Anchor.native.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { AnchorProps } from './Anchor.types';
+export declare const Anchor: React.FC<AnchorProps>;

package/dist/Anchor/Anchor.native.js

@@ -0,0 +1,34 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Anchor = void 0;
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const Anchor = ({ children, href, title, onPress, }) => {
+    const handlePress = () => {
+        if (onPress) {
+            onPress();
+        }
+        else if (href) {
+            react_native_1.Linking.openURL(href);
+        }
+    };
+    return (<react_native_1.Pressable onPress={handlePress} accessibilityRole="link" accessibilityLabel={title} accessibilityHint={`Opens ${href}`}>
+      {({ pressed }) => (<react_native_1.Text style={[styles.anchor, pressed && styles.anchorPressed]}>
+          {children}
+        </react_native_1.Text>)}
+    </react_native_1.Pressable>);
+};
+exports.Anchor = Anchor;
+const styles = react_native_1.StyleSheet.create({
+    anchor: {
+        color: '#2196f3',
+        textDecorationLine: 'none',
+    },
+    anchorPressed: {
+        color: '#1976d2',
+        textDecorationLine: 'underline',
+    },
+});

package/dist/Anchor/Anchor.types.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+export interface AnchorProps {
+    children: ReactNode;
+    href: string;
+    rel?: string;
+    title?: string;
+    target?: '_blank' | '_self' | '_parent' | '_top';
+    className?: string;
+    onPress?: () => void;
+}