@rencar-dev/feature-modules-public 0.0.7

package/README.md

@@ -0,0 +1,215 @@
+# @rencar-dev/feature-modules-public
+
+Rencar 기능 모듈 모음 - hooks, utils, UI 컴포넌트 등을 포함합니다.
+
+## 설치
+
+```bash
+npm install @rencar-dev/feature-modules-public
+# 또는
+yarn add @rencar-dev/feature-modules-public
+```
+
+## 사용법
+
+```typescript
+// hooks 모듈 가져오기
+import { useExample } from "@rencar-dev/feature-modules-public/hooks";
+
+function MyComponent() {
+  const { count, increment, decrement, reset } = useExample(0);
+
+  return (
+    <div>
+      <p>Count: {count}</p>
+      <button onClick={increment}>+</button>
+      <button onClick={decrement}>-</button>
+      <button onClick={reset}>Reset</button>
+    </div>
+  );
+}
+```
+
+## Presence 모듈
+
+실시간 사용자 프레즌스(현재 접속자) 기능을 위한 모듈입니다.
+
+### Socket 초기화
+
+프레즌스 훅을 사용하기 전에 반드시 소켓을 초기화해야 합니다.
+
+#### initPresenceSocket
+
+소켓 연결을 설정합니다. **앱 시작 시 1회 호출**해야 합니다.
+
+```tsx
+import { initPresenceSocket } from "@rencar-dev/feature-modules-public/presence";
+
+// 앱 초기화 시 (예: App.tsx 또는 index.tsx)
+initPresenceSocket({
+  url: "https://your-socket-server.com",
+  transports: ["websocket"], // 선택사항, 기본값: ["websocket"]
+});
+```
+
+**PresenceConfig:**
+
+| 옵션         | 타입                           | 필수 | 기본값          | 설명          |
+| ------------ | ------------------------------ | ---- | --------------- | ------------- |
+| `url`        | `string`                       | ✅   | -               | 소켓 서버 URL |
+| `transports` | `("websocket" \| "polling")[]` | -    | `["websocket"]` | 전송 방식     |
+
+---
+
+#### getPresenceSocket
+
+공유 소켓 인스턴스를 반환합니다. 초기화되지 않은 경우 에러를 발생시킵니다.
+
+```tsx
+import { getPresenceSocket } from "@rencar-dev/feature-modules-public/presence";
+
+const socket = getPresenceSocket();
+socket.emit("custom-event", { data: "example" });
+```
+
+---
+
+#### disconnectPresenceSocket
+
+소켓 연결을 종료하고 정리합니다. 앱 종료 시 또는 로그아웃 시 호출할 수 있습니다.
+
+```tsx
+import { disconnectPresenceSocket } from "@rencar-dev/feature-modules-public/presence";
+
+// 로그아웃 시
+function handleLogout() {
+  disconnectPresenceSocket();
+  // ... 기타 로그아웃 로직
+}
+```
+
+---
+
+#### isPresenceSocketInitialized
+
+소켓 초기화 여부를 확인합니다.
+
+```tsx
+import { isPresenceSocketInitialized } from "@rencar-dev/feature-modules-public/presence";
+
+if (!isPresenceSocketInitialized()) {
+  initPresenceSocket({ url: "..." });
+}
+```
+
+---
+
+## Presence Hooks
+
+실시간 사용자 프레즌스(현재 접속자) 기능을 위한 훅입니다.
+
+### usePresence
+
+특정 룸에 참여하고 해당 룸의 사용자 목록을 추적합니다. 현재 사용자가 해당 룸에 참여자로 등록됩니다.
+
+**Options:**
+
+| 옵션                | 타입           | 필수 | 기본값          | 설명                                               |
+| ------------------- | -------------- | ---- | --------------- | -------------------------------------------------- |
+| `roomId`            | `string`       | ✅   | -               | 참여할 룸 ID                                       |
+| `currentUser`       | `PresenceUser` | ✅   | -               | 현재 사용자 정보 (`{ userId, name, ...추가속성 }`) |
+| `enabled`           | `boolean`      | -    | `true`          | 훅 활성화 여부                                     |
+| `heartbeatInterval` | `number`       | -    | `600000` (10분) | 하트비트 간격 (ms)                                 |
+
+**Returns:** `PresenceUser[]` - 현재 룸에 있는 사용자 목록
+
+**사용 예시:**
+
+```tsx
+import { usePresence } from "@rencar-dev/feature-modules-public/presence";
+
+function MyPage() {
+  const users = usePresence({
+    roomId: "my-app:page-123",
+    currentUser: { userId: "1", name: "John Doe" },
+  });
+
+  return (
+    <div>
+      <p>현재 접속자: {users.length}명</p>
+      <ul>
+        {users.map((user) => (
+          <li key={user.userId}>{user.name}</li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+```
+
+**조건부 활성화:**
+
+```tsx
+// 로그인한 경우에만 프레즌스 활성화
+const users = usePresence({
+  roomId: "my-room",
+  currentUser: { userId: user.id, name: user.name },
+  enabled: isLoggedIn,
+});
+```
+
+---
+
+### usePresenceWatch
+
+여러 룸을 **참여 없이** 관찰(watch)합니다. 읽기 전용으로 다른 룸들의 접속자를 모니터링할 때 사용합니다.
+
+**Options:**
+
+| 옵션      | 타입       | 필수 | 기본값 | 설명              |
+| --------- | ---------- | ---- | ------ | ----------------- |
+| `roomIds` | `string[]` | ✅   | -      | 관찰할 룸 ID 배열 |
+| `enabled` | `boolean`  | -    | `true` | 훅 활성화 여부    |
+
+**Returns:** `Record<string, PresenceUser[]>` - 룸 ID → 사용자 목록 맵
+
+**사용 예시:**
+
+```tsx
+import { usePresenceWatch } from "@rencar-dev/feature-modules-public/presence";
+
+function Dashboard() {
+  const roomsUsers = usePresenceWatch({
+    roomIds: ["page-1", "page-2", "page-3"],
+  });
+
+  return (
+    <div>
+      {Object.entries(roomsUsers).map(([roomId, users]) => (
+        <div key={roomId}>
+          <h3>{roomId}</h3>
+          <p>{users.length}명 접속 중</p>
+        </div>
+      ))}
+    </div>
+  );
+}
+```
+
+**동적 룸 ID:**
+
+```tsx
+// 룸 ID가 변경되면 자동으로 watch/unwatch 처리
+const [selectedRooms, setSelectedRooms] = useState(["room-a"]);
+const roomsUsers = usePresenceWatch({ roomIds: selectedRooms });
+```
+
+---
+
+### usePresence vs usePresenceWatch 비교
+
+| 항목        | usePresence                      | usePresenceWatch              |
+| ----------- | -------------------------------- | ----------------------------- |
+| **룸 참여** | ✅ 참여함 (다른 사용자에게 보임) | ❌ 참여 안함 (관찰만)         |
+| **룸 개수** | 1개                              | 여러 개                       |
+| **용도**    | 현재 페이지 접속자 표시          | 대시보드에서 여러 룸 모니터링 |

package/dist/hooks/index.cjs

@@ -0,0 +1,51 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/hooks/index.ts
+var hooks_exports = {};
+__export(hooks_exports, {
+  useExample: () => useExample
+});
+module.exports = __toCommonJS(hooks_exports);
+
+// src/hooks/useExample.ts
+var import_react = require("react");
+function useExample(initialValue = 0) {
+  const [count, setCount] = (0, import_react.useState)(initialValue);
+  const increment = (0, import_react.useCallback)(() => {
+    setCount((prev) => prev + 1);
+  }, []);
+  const decrement = (0, import_react.useCallback)(() => {
+    setCount((prev) => prev - 1);
+  }, []);
+  const reset = (0, import_react.useCallback)(() => {
+    setCount(initialValue);
+  }, [initialValue]);
+  return {
+    count,
+    increment,
+    decrement,
+    reset
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useExample
+});
+//# sourceMappingURL=index.cjs.map

package/dist/hooks/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/index.ts","../../src/hooks/useExample.ts"],"sourcesContent":["/**\n * hooks 모듈 진입점\n * 모든 hook을 여기서 re-export 합니다.\n */\n\nexport { useExample } from \"./useExample\";\n","import { useState, useCallback } from \"react\";\n\n/**\n * 예시 hook - 카운터 기능\n * 이 파일은 구조 예시용입니다. 삭제하거나 수정해서 사용하세요.\n *\n * @example\n * const { count, increment, decrement, reset } = useExample(0);\n */\nexport function useExample(initialValue: number = 0) {\n  const [count, setCount] = useState(initialValue);\n\n  const increment = useCallback(() => {\n    setCount((prev) => prev + 1);\n  }, []);\n\n  const decrement = useCallback(() => {\n    setCount((prev) => prev - 1);\n  }, []);\n\n  const reset = useCallback(() => {\n    setCount(initialValue);\n  }, [initialValue]);\n\n  return {\n    count,\n    increment,\n    decrement,\n    reset,\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAAsC;AAS/B,SAAS,WAAW,eAAuB,GAAG;AACnD,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAS,YAAY;AAE/C,QAAM,gBAAY,0BAAY,MAAM;AAClC,aAAS,CAAC,SAAS,OAAO,CAAC;AAAA,EAC7B,GAAG,CAAC,CAAC;AAEL,QAAM,gBAAY,0BAAY,MAAM;AAClC,aAAS,CAAC,SAAS,OAAO,CAAC;AAAA,EAC7B,GAAG,CAAC,CAAC;AAEL,QAAM,YAAQ,0BAAY,MAAM;AAC9B,aAAS,YAAY;AAAA,EACvB,GAAG,CAAC,YAAY,CAAC;AAEjB,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;","names":[]}

package/dist/hooks/index.d.cts

@@ -0,0 +1,15 @@
+/**
+ * 예시 hook - 카운터 기능
+ * 이 파일은 구조 예시용입니다. 삭제하거나 수정해서 사용하세요.
+ *
+ * @example
+ * const { count, increment, decrement, reset } = useExample(0);
+ */
+declare function useExample(initialValue?: number): {
+    count: number;
+    increment: () => void;
+    decrement: () => void;
+    reset: () => void;
+};
+
+export { useExample };

package/dist/hooks/index.d.ts

@@ -0,0 +1,15 @@
+/**
+ * 예시 hook - 카운터 기능
+ * 이 파일은 구조 예시용입니다. 삭제하거나 수정해서 사용하세요.
+ *
+ * @example
+ * const { count, increment, decrement, reset } = useExample(0);
+ */
+declare function useExample(initialValue?: number): {
+    count: number;
+    increment: () => void;
+    decrement: () => void;
+    reset: () => void;
+};
+
+export { useExample };

package/dist/hooks/index.js

@@ -0,0 +1,24 @@
+// src/hooks/useExample.ts
+import { useState, useCallback } from "react";
+function useExample(initialValue = 0) {
+  const [count, setCount] = useState(initialValue);
+  const increment = useCallback(() => {
+    setCount((prev) => prev + 1);
+  }, []);
+  const decrement = useCallback(() => {
+    setCount((prev) => prev - 1);
+  }, []);
+  const reset = useCallback(() => {
+    setCount(initialValue);
+  }, [initialValue]);
+  return {
+    count,
+    increment,
+    decrement,
+    reset
+  };
+}
+export {
+  useExample
+};
+//# sourceMappingURL=index.js.map

package/dist/hooks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/useExample.ts"],"sourcesContent":["import { useState, useCallback } from \"react\";\n\n/**\n * 예시 hook - 카운터 기능\n * 이 파일은 구조 예시용입니다. 삭제하거나 수정해서 사용하세요.\n *\n * @example\n * const { count, increment, decrement, reset } = useExample(0);\n */\nexport function useExample(initialValue: number = 0) {\n  const [count, setCount] = useState(initialValue);\n\n  const increment = useCallback(() => {\n    setCount((prev) => prev + 1);\n  }, []);\n\n  const decrement = useCallback(() => {\n    setCount((prev) => prev - 1);\n  }, []);\n\n  const reset = useCallback(() => {\n    setCount(initialValue);\n  }, [initialValue]);\n\n  return {\n    count,\n    increment,\n    decrement,\n    reset,\n  };\n}\n"],"mappings":";AAAA,SAAS,UAAU,mBAAmB;AAS/B,SAAS,WAAW,eAAuB,GAAG;AACnD,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,YAAY;AAE/C,QAAM,YAAY,YAAY,MAAM;AAClC,aAAS,CAAC,SAAS,OAAO,CAAC;AAAA,EAC7B,GAAG,CAAC,CAAC;AAEL,QAAM,YAAY,YAAY,MAAM;AAClC,aAAS,CAAC,SAAS,OAAO,CAAC;AAAA,EAC7B,GAAG,CAAC,CAAC;AAEL,QAAM,QAAQ,YAAY,MAAM;AAC9B,aAAS,YAAY;AAAA,EACvB,GAAG,CAAC,YAAY,CAAC;AAEjB,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;","names":[]}