Merge pull request #212 from bankidz/feature/kakao-channel

Feature/kakao channel

public/index.html

@@ -26,7 +26,7 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-
+    <script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

src/pages/Manage/Manage.tsx

@@ -5,6 +5,7 @@ import ForegroundTemplate from '@components/layout/ForegroundTemplate';
 import useGlobalBottomSheet from '@lib/hooks/useGlobalBottomSheet';
 import useLogout from '@lib/hooks/auth/useLogout';
 import removeLocalStorage from '@lib/utils/localStorage/removeLocalStorage';
+import { useEffect } from 'react';
 
 const contents = [
   { title: '공지사항', link: 'notices' },
@@ -14,7 +15,7 @@ const contents = [
   { title: '개인정보 처리방침', link: 'privacy' },
   { title: '서비스 약관', link: 'terms' },
   { title: '자주 묻는 질문', link: 'faq' },
-  { title: '문의하기', link: 'inquiry' },
+  { title: '문의하기', link: '' },
   { title: '로그아웃', link: '' },
   { title: '탈퇴하기', link: 'withdraw' },
 ];
@@ -24,7 +25,32 @@ function Manage() {
 
   const { setOpenBottomSheet, setCloseBottomSheet } = useGlobalBottomSheet();
   const logout = useLogout();
-  function openLogoutCheckBottomSheet() {
+  useEffect(() => {
+    const KAKAO_JS_KEY = `${process.env.REACT_APP_KAKAO_JS_KEY}`;
+    if (!window.Kakao.isInitialized()) {
+      // JavaScript key를 인자로 주고 SDK 초기화
+      window.Kakao.init(KAKAO_JS_KEY);
+      // SDK 초기화 여부를 확인하자.
+    }
+  }, []);
+
+  const onManageLinkClick = (content: { title: string; link: string }) => {
+    if (content.title === '로그아웃') {
+      openLogoutCheckBottomSheet();
+    } else if (content.title === '문의하기') {
+      onChatButtonClick();
+    } else navigate(content.link);
+  };
+
+  //카카오채널 상담 열기
+  const onChatButtonClick = () => {
+    window.Kakao.Channel.chat({
+      channelPublicId: '_LjxjVxj',
+    });
+  };
+
+  // 로그아웃 하시겠습니까 바텀시트
+  const openLogoutCheckBottomSheet = () => {
     setOpenBottomSheet({
       sheetContent: 'Check',
       sheetProps: { open: true },
@@ -37,20 +63,13 @@ function Manage() {
         },
       },
     });
-  }
+  };
 
   return (
     <ForegroundTemplate label={'설정'} to="/mypage">
       <>
         {contents.map((content) => (
-          <Item
-            key={content.title}
-            onClick={() => {
-              content.title === '로그아웃'
-                ? openLogoutCheckBottomSheet()
-                : navigate(content.link);
-            }}
-          >
+          <Item key={content.title} onClick={() => onManageLinkClick(content)}>
             <p>{content.title}</p>
             <Arrow />
           </Item>

src/pages/Manage/Privacy.tsx

@@ -55,10 +55,9 @@ const content = `
 기간동안회원정보를 보관합니다. 
 1) 신용정보의 수집/처리 및 이용 등에 관한 기록 : 3 년
 2) 소비자의 불만 또는 분쟁처리에 관한 기록 : 3 년
-3) 대금결제 및 재화 등의 공급에 관한 기록 : 5 년
-4) 계약 또는 청약철회 등에 관한 기록 : 5 년
-5) 표시/광고에 관한 기록 : 6 개월
-6) 통신사실확인자료: 3 개월
+3) 계약 또는 청약철회 등에 관한 기록 : 5 년
+4) 표시/광고에 관한 기록 : 6 개월
+5) 통신사실확인자료: 3 개월
 -  가명처리가 된 정보들은 회원탈퇴 이후에도 보관되어 있으며, 가명정보는 재식별되지 않도록 분리하여
 별도 저장 및 관리하고, 기술적 및 관리적 보호조치를 취합니다.
 - 또한, 아래와 같은 예외사유가 생길 경우 회원정보를 보관합니다.

src/pages/Manage/Tems.tsx

@@ -223,7 +223,7 @@ const content = `제1장 총칙
 
 - “회사"는 법령과 이 약관이 정하는 권리의 행사와 의무의 이행을 신의에 좇아 성실하게 하여야 합니다.
 - "회사"는 "이용자"가 안전하게 서비스를 이용할 수 있도록 개인정보(신용정보 포함)보호를 위해 보안시스템을 갖추어야 하며 개인정보보호정책을 공시하고 준수합니다.
-- "회사"는 "이용자"가 유료서비스이용 및 그 대금내역을 수시로 확인할 수 있도록 조치합니다.
+- "회사"가 유료서비스를 제공하는 경우 “회사”는 "이용자"가 유료서비스이용 및 그 대금내역을 수시로 확인할 수 있도록 조치합니다.
 - "회사"는 서비스이용과 관련하여 "이용자"로부터 제기된 의견이나 불만이 정당하다고 인정할 경우에는 이를 지체없이 처리합니다. 이용자가 제기한 의견이나 불만사항에 대해서는 게시판을 활용하거나 온라인소통채널 등을 통하여 그 처리과정 및 결과를 전달합니다.
 - "회사"는 이 약관에서 정한 회사의 의무 위반으로 인하여 회원이 입은 손해를 배상합니다.
 
@@ -281,7 +281,6 @@ const content = `제1장 총칙
 
 제23조. 이용자 피해보상
 
--	“회사”의 과실로 인하여 “이용자”가 손해를 입게 될 경우, 회원의 손해를 배상하겠습니다. 
 -	“회사”는 서비스 중지 또는 장애가 발생할 경우, 24시간 이내에 회원에게 고지합니다. 
 
 제24조. 면책조항 

src/pages/Manage/index.tsx

@@ -25,7 +25,6 @@ const ManageRouter = () => {
       <Route path="/privacy" element={<Privacy />} />
       <Route path="/terms" element={<Terms />} />
       <Route path="/faq" element={<Faq />} />
-      <Route path="/inquiry" element={<Inquiry />} />
       <Route path="/withdraw" element={<WithdrawPage />} />
       <Route path="/withdraw/reason" element={<WithdrawReasonPage />} />
       <Route path="/withdraw/callback" element={<WithdrawCallbackPage />} />

src/react-app-env.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react-scripts" />
 interface Window {
   ReactNativeWebView: any;
+  Kakao: any;
 }

src/store/slices/authSlice.tsx

@@ -30,7 +30,9 @@ const temp = getLocalStorage('auth');
 const initialState: IAuthState = {
   auth: {
     accessToken: temp?.accessToken,
+    //accessToken: 'eyJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE2NjE0ODQyMTQsInN1YiI6IjUiLCJleHAiOjE2NjI2OTM4MTQsImlkIjo1LCJyb2xlcyI6IlVTRVIifQ.5fKVlH-BGRRXiSP2WFtiLGheiNThQAC8wc7yj38MAG8',
     isKid: temp?.isKid,
+    // isKid: false,
     level: null,
     provider: temp?.provider,
     birthday: '',