🔥 Web Support V2 🔥

.eslintignore

@@ -2,4 +2,5 @@ node_modules/
 **/lib/
 docs/
 **/.gradle/
-**/build
+**/build
+script

.github/workflows/ci.yml

@@ -34,9 +34,9 @@ jobs:
           path: |
             ~/.gradle/wrapper
             ~/.gradle/caches
-          key: ${{ runner.os }}-gradle-${{ hashFiles('example/android/gradle/wrapper/gradle-wrapper.properties') }}
+          key: ${{ runner.os }}-gradle-${{ hashFiles('example/android/gradle/wrapper/gradle-wrapper.properties') }}-${{ hashFiles('yarn.lock') }}-${{ hashFiles('**/package.json', '!node_modules/**') }}
           restore-keys: |
-            ${{ runner.os }}-gradle-
+            ${{ runner.os }}-gradle-${{ hashFiles('yarn.lock') }}-${{ hashFiles('**/package.json', '!node_modules/**') }}-
 
       - name: Codegen
         run: yarn codegen
@@ -117,9 +117,9 @@ jobs:
           path: |
             ~/.gradle/wrapper
             ~/.gradle/caches
-          key: ${{ runner.os }}-gradle-${{ hashFiles('example/android/gradle/wrapper/gradle-wrapper.properties') }}-${{matrix.arch}}
+          key: ${{ runner.os }}-gradle-${{ hashFiles('example/android/gradle/wrapper/gradle-wrapper.properties') }}-${{matrix.arch}}-${{ hashFiles('yarn.lock') }}-${{ hashFiles('**/package.json', '!node_modules/**') }}
           restore-keys: |
-            ${{ runner.os }}-gradle-${{matrix.arch}}-
+            ${{ runner.os }}-gradle-${{matrix.arch}}-${{ hashFiles('yarn.lock') }}-${{ hashFiles('**/package.json', '!node_modules/**') }}-
 
       - name: Build example for Android
         env:

README.md

@@ -15,22 +15,22 @@
 
 **React Native Kakao** is a collection of official React Native modules connecting you to Kakao
 services; each module is a light-weight JavaScript layer connecting you to the native Kakao SDKs for
-both iOS and Android.
+iOS, Android and Web.
 
 ## Highlights
 
 - ❤️ **No version conflicts**
   - managed and consistent versions of native SDKs ensure there are no version conflicts.
 - 🍎 **Consistent logic for each platform**
-  - same JS code => same android, ios logics are ensured.
+  - same JS code => same android, ios, web logics are ensured.
 - ⚡️ **Easy coding, Fast development**
   - all APIs are designed with the DX as the top priority.
 - 🎃 **Well typed**
   - first class support for **Typescript** included
 - 📄 **Well documented**
   - full reference & installation documentation alongside detailed guides and FAQs
 - 🚀 **Wide supportability**
-  - first class supports for **New Architecture, Old Architecture, even Expo**
+  - first class supports for **Android, iOS, Web, New Architecture, Old Architecture, even Expo**
 - 🦋 **Robust error handling**
   - All SDK errors are forwarded to JS clearly, consistently for each platform.
 
@@ -41,16 +41,17 @@ please select the package link from below.
 
 [//]: # (The main package that you interface with is `App` (`@react-native-kakao/app`))
 
-| Name                                              | Android                                                                                                                                                                 | iOS                                                                                                                                                                     | Web (will be supported soon!)                                  |                                                                             Downloads                                                                             | Status |
-|---------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------:|--------|
-| [Core](https://rnkakao.dev/docs/intro)            | ![common-android](https://img.shields.io/badge/common-2.20.1-green?style=flat-square)                                                                                   | ![common-ios](https://img.shields.io/badge/common-2.22.0-lightblue?style=flat-square)                                                                                   | 🔥 [V2](https://github.com/mym0404/react-native-kakao/pull/20) |    [![badge](https://img.shields.io/npm/dm/@react-native-kakao/core.svg?style=for-the-badge&logo=npm)](https://www.npmjs.com/package/@react-native-kakao/core)    | ✅      |
-| [Share](https://rnkakao.dev/docs/share/intro)     | ![share-android](https://img.shields.io/badge/share-2.20.1-green?style=flat-square)                                                                                     | ![share-ios](https://img.shields.io/badge/share-2.22.0-lightblue?style=flat-square)                                                                                     | 🔥 [V2](https://github.com/mym0404/react-native-kakao/pull/20) |   [![badge](https://img.shields.io/npm/dm/@react-native-kakao/share.svg?style=for-the-badge&logo=npm)](https://www.npmjs.com/package/@react-native-kakao/share)   | ✅      |
-| [User](https://rnkakao.dev/docs/user/intro)       | ![user-android](https://img.shields.io/badge/user-2.20.1-green?style=flat-square)                                                                                       | ![user-ios](https://img.shields.io/badge/user-2.22.0-lightblue?style=flat-square)                                                                                       | 🔥 [V2](https://github.com/mym0404/react-native-kakao/pull/20) |    [![badge](https://img.shields.io/npm/dm/@react-native-kakao/user.svg?style=for-the-badge&logo=npm)](https://www.npmjs.com/package/@react-native-kakao/user)    | ✅      |
-| [Social](https://rnkakao.dev/docs/social/intro)   | ![talk-android](https://img.shields.io/badge/talk-2.20.1-green?style=flat-square) ![friend-android](https://img.shields.io/badge/friend-2.20.1-green?style=flat-square) | ![talk-ios](https://img.shields.io/badge/talk-2.22.0-lightblue?style=flat-square) ![friend-ios](https://img.shields.io/badge/friend-2.22.0-lightblue?style=flat-square) | 🔥 [V2](https://github.com/mym0404/react-native-kakao/pull/20) |  [![badge](https://img.shields.io/npm/dm/@react-native-kakao/social.svg?style=for-the-badge&logo=npm)](https://www.npmjs.com/package/@react-native-kakao/social)  | ✅      |
-| [Channel](https://rnkakao.dev/docs/channel/intro) | ![talk-android](https://img.shields.io/badge/talk-2.20.1-green?style=flat-square)                                                                                       | ![talk-ios](https://img.shields.io/badge/talk-2.22.0-lightblue?style=flat-square)                                                                                       | 🔥 [V2](https://github.com/mym0404/react-native-kakao/pull/20) | [![badge](https://img.shields.io/npm/dm/@react-native-kakao/channel.svg?style=for-the-badge&logo=npm)](https://www.npmjs.com/package/@react-native-kakao/channel) | ✅      |
-| [Navi](https://rnkakao.dev/docs/navi/intro)       | ![navi-android](https://img.shields.io/badge/navi-2.20.1-green?style=flat-square)                                                                                       | ![navi-ios](https://img.shields.io/badge/navi-2.22.0-lightblue?style=flat-square)                                                                                       | ❌                                                              |    [![badge](https://img.shields.io/npm/dm/@react-native-kakao/navi.svg?style=for-the-badge&logo=npm)](https://www.npmjs.com/package/@react-native-kakao/navi)    | ✅      |
-| [Cert](https://rnkakao.dev/docs/cert/intro)       |                                                                                                                                                                         |                                                                                                                                                                         |                                                                |    [![badge](https://img.shields.io/npm/dm/@react-native-kakao/cert.svg?style=for-the-badge&logo=npm)](https://www.npmjs.com/package/@react-native-kakao/cert)    | 📦     |
-| [Map](https://rnkakao.dev/docs/map/intro)         |                                                                                                                                                                         |                                                                                                                                                                         |                                                                |     [![badge](https://img.shields.io/npm/dm/@react-native-kakao/map.svg?style=for-the-badge&logo=npm)](https://www.npmjs.com/package/@react-native-kakao/map)     | 📦     |
+
+| Name                                              | Android                                                                                                                                                                 | iOS                                                                                                                                                                     | Web |                                                                             Downloads                                                                             | Status |
+|---------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------:|--------|
+| [Core](https://rnkakao.dev/docs/intro)            | ![common-android](https://img.shields.io/badge/common-2.20.1-green?style=flat-square)                                                                                   | ![common-ios](https://img.shields.io/badge/common-2.22.0-lightblue?style=flat-square)                                                                                   | ✅   |    [![badge](https://img.shields.io/npm/dm/@react-native-kakao/core.svg?style=for-the-badge&logo=npm)](https://www.npmjs.com/package/@react-native-kakao/core)    | ✅      |
+| [Share](https://rnkakao.dev/docs/share/intro)     | ![share-android](https://img.shields.io/badge/share-2.20.1-green?style=flat-square)                                                                                     | ![share-ios](https://img.shields.io/badge/share-2.22.0-lightblue?style=flat-square)                                                                                     | ✅   |   [![badge](https://img.shields.io/npm/dm/@react-native-kakao/share.svg?style=for-the-badge&logo=npm)](https://www.npmjs.com/package/@react-native-kakao/share)   | ✅      |
+| [User](https://rnkakao.dev/docs/user/intro)       | ![user-android](https://img.shields.io/badge/user-2.20.1-green?style=flat-square)                                                                                       | ![user-ios](https://img.shields.io/badge/user-2.22.0-lightblue?style=flat-square)                                                                                       | 🔥  |    [![badge](https://img.shields.io/npm/dm/@react-native-kakao/user.svg?style=for-the-badge&logo=npm)](https://www.npmjs.com/package/@react-native-kakao/user)    | ✅      |
+| [Social](https://rnkakao.dev/docs/social/intro)   | ![talk-android](https://img.shields.io/badge/talk-2.20.1-green?style=flat-square) ![friend-android](https://img.shields.io/badge/friend-2.20.1-green?style=flat-square) | ![talk-ios](https://img.shields.io/badge/talk-2.22.0-lightblue?style=flat-square) ![friend-ios](https://img.shields.io/badge/friend-2.22.0-lightblue?style=flat-square) | 🔥  |  [![badge](https://img.shields.io/npm/dm/@react-native-kakao/social.svg?style=for-the-badge&logo=npm)](https://www.npmjs.com/package/@react-native-kakao/social)  | ✅      |
+| [Channel](https://rnkakao.dev/docs/channel/intro) | ![talk-android](https://img.shields.io/badge/talk-2.20.1-green?style=flat-square)                                                                                       | ![talk-ios](https://img.shields.io/badge/talk-2.22.0-lightblue?style=flat-square)                                                                                       | 🔥  | [![badge](https://img.shields.io/npm/dm/@react-native-kakao/channel.svg?style=for-the-badge&logo=npm)](https://www.npmjs.com/package/@react-native-kakao/channel) | ✅      |
+| [Navi](https://rnkakao.dev/docs/navi/intro)       | ![navi-android](https://img.shields.io/badge/navi-2.20.1-green?style=flat-square)                                                                                       | ![navi-ios](https://img.shields.io/badge/navi-2.22.0-lightblue?style=flat-square)                                                                                       | ❌   |    [![badge](https://img.shields.io/npm/dm/@react-native-kakao/navi.svg?style=for-the-badge&logo=npm)](https://www.npmjs.com/package/@react-native-kakao/navi)    | ✅      |
+| [Cert](https://rnkakao.dev/docs/cert/intro)       |                                                                                                                                                                         |                                                                                                                                                                         |     |    [![badge](https://img.shields.io/npm/dm/@react-native-kakao/cert.svg?style=for-the-badge&logo=npm)](https://www.npmjs.com/package/@react-native-kakao/cert)    | 📦     |
+| [Map](https://rnkakao.dev/docs/map/intro)         |                                                                                                                                                                         |                                                                                                                                                                         |     |     [![badge](https://img.shields.io/npm/dm/@react-native-kakao/map.svg?style=for-the-badge&logo=npm)](https://www.npmjs.com/package/@react-native-kakao/map)     | 📦     |
 
 ## Documentation
 

docs/docs/advanced/_category_.json

@@ -1,6 +1,6 @@
 {
   "label": "Advanced",
-  "position": 999,
+  "position": 10000,
   "link": {
     "type": "generated-index",
     "description": "더 자세한 내용들에 대하여"

docs/docs/channel/_category_.json

@@ -1,6 +1,6 @@
 {
   "label": "Package - Channel",
-  "position": 104,
+  "position": 1004,
   "link": {
     "type": "generated-index",
     "description": "Channel 패키지 사용법"

docs/docs/core/_category_.json

@@ -1,6 +1,6 @@
 {
   "label": "Package - Core",
-  "position": 100,
+  "position": 1000,
   "link": {
     "type": "generated-index",
     "description": "Core 패키지 사용법"

docs/docs/core/initialize-sdk.mdx

@@ -16,4 +16,19 @@ initializeKakaoSDK('{{ native app key }}');
 
 :::info
 항상 모든 카카오 API가 불리기 전에 이 함수가 먼저 호출되어야 합니다.
-:::
+:::
+
+## Web 플랫폼
+
+Web을 지원한다면 `web`옵션에 javascript key와 rest api key를 같이 전달해주어야 합니다.
+
+```ts
+import { initializeKakaoSDK } from '@react-native-kakao/core';
+
+Core.initializeKakaoSDK('{{ native app key }}', {
+  web: {
+    javascriptKey: '{{ javascript key }}',
+    restApiKey: '{{ rest api key }}',
+  },
+});
+```

docs/docs/error-handling.mdx

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 6
+sidebar_position: 100
 ---
 
 # 에러 핸들링
@@ -173,6 +173,7 @@ Kakao Native SDK들에서의 에러뿐 아닌 `react-native-kakao`자체의 에
 SDK를 초기화하지 않은 시점에서 API를 호출할 시 앱이 크래시가 나버리는 API에서 종종 미리 검사되는 용도로 사용됩니다.
 - `Package-KakaoAppNotAvailable`: 예를 들어, 카카오톡이 설치되어야 정상 동작을 하는 API인데 카카오 관련 앱 접근이 불가능해 실패한 경우입니다.
 카카오 관련 앱 접근이 불가능한 경우는 카카오 관련 앱이 설치가 되어있지만 앱에서 카카오 관련 앱을 열 수 있는 권한이 제대로 설정되지 않은 경우도 포함됩니다.
+- `Package-Assertion`: 패키지의 JavaScript로직 내에서 Assertion이 통과하지 못했을 때입니다.
 
 
 ## Android의 ActivityNotFoundException

docs/docs/install-expo.mdx

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 5
+sidebar_position: 6
 ---
 
 # Expo 설정
@@ -54,3 +54,7 @@ npx expo install expo-build-properties
 
 [Android 설정](/docs/install-android)를 참고하여 [expo-build-properties](https://docs.expo.dev/versions/latest/sdk/build-properties/)
 config plugin으로 proguard rules를 주입해줄 수 있습니다.
+
+## (Optional) Web 플랫폼 지원
+
+[Web 설정](/docs/install-web)을 참고하여 동일하게 진행되어야 합니다.

docs/docs/install-web.mdx

@@ -0,0 +1,77 @@
+---
+sidebar_position: 5
+---
+
+# Web 설정
+## Web 설정
+
+React Native Kakao는 Native뿐만 아니라 Web플랫폼 지원도 동일한 수준의 개발자 경험을 유지할 수 있게 지원합니다.
+
+[Kakao SDK 문서](https://developers.kakao.com/docs/latest/ko/javascript/getting-started)를 참고하여 설정에 관한 더 자세한 정보를 확인할 수 있습니다.
+
+## 카카오 JavaScript SDK 설치
+
+[다운로드](https://developers.kakao.com/docs/latest/ko/javascript/download) 페이지에서 최신 버전의 카카오 SDK를 `index.html`의 `head`에 삽입하여 설치합니다.
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+...
+  <script src="https://t1.kakaocdn.net/kakao_js_sdk/{{Version}}/kakao.min.js"
+          integrity="{{integrity}}"
+          crossorigin="anonymous"></script>
+</head>
+
+<body>
+...
+</body>
+</html>
+
+```
+
+:::tip
+Expo환경에서 `index.html`을 커스터마이징 하는 방법은 `npx expo customize`커맨드를 이용할 수 있습니다.
+
+[Expo 문서](https://docs.expo.dev/more/expo-cli/#customizing)
+:::
+
+
+## 카카오 콘솔에서 플랫폼 등록
+
+![feat1](https://raw.githubusercontent.com/mym0404/image-archive/master/202405030132281.webp)
+
+플랫폼 탭에 들어가 자신의 사이트 도메인을 추가해줍니다.
+
+
+## Web API에 대하여
+
+Web의 API는 내부적으로 구현되는 방식이 Android, iOS플랫폼들과 차이가 있을 수밖에 없습니다.
+
+API는 플랫폼별로 응답이 모두 일관되고 이름도 모두 동일하지만 Web에서만 사용할 수 있는 API들이 있거나 Web만의 인자들이 존재합니다.
+
+예를 들어, 로그인 시에 `redirectUri`같은 인자가 그렇습니다.
+
+Web에서만 사용할 수 있거나 필요한 API들은 함수 이름 뒤에 `Web`이 붙습니다.
+
+예를 들어, `Core.setAccessTokenWeb()`과 같은 식입니다.
+
+그리고 Web에서 사용되는 인자들은 모두 함수의 인자에서 따로 `web`이라는 필드로 관리합니다.
+
+`core`패키지의 SDK초기화 함수를 보겠습니다.
+
+```tsx
+export async function initializeKakaoSDK(
+  appKey: string,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  options: { web?: { javascriptKey: string; restApiKey: string } },
+)
+```
+
+인자로 `web` 객체를 전달받아 필요한 인자들을 받는 모습입니다.
+
+:::warning
+Web을 지원하지 않는다면 `web`인자에 대해 신경 쓸 필요가 없고, `Web`으로 끝나는 API들도 호출하지 말아야 합니다.
+:::
+
+