Merge pull request #171 from ODOICHON/develop

공인중개사 회원 배포

package.json

@@ -21,6 +21,7 @@
     "@tanstack/react-query-devtools": "^4.24.6",
     "@types/dompurify": "^3.0.1",
     "@types/lodash": "^4.14.192",
+    "@types/react-gtm-module": "^2.0.1",
     "@vitejs/plugin-react": "^3.1.0",
     "aws-sdk": "^2.1363.0",
     "axios": "^1.3.6",
@@ -34,6 +35,7 @@
     "react-daum-postcode": "^3.1.3",
     "react-dom": "^18.2.0",
     "react-ga4": "^2.1.0",
+    "react-gtm-module": "^2.0.11",
     "react-hook-form": "^7.43.5",
     "react-icons": "^4.8.0",
     "react-kakao-maps-sdk": "^1.1.9",

src/App.tsx

@@ -3,10 +3,12 @@ import { QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { routes } from '@/Routes';
 import useReactGA from './hooks/useReactGA';
+import useReactGTM from './hooks/useReactGTM';
 import { getClient } from './queryClient';
 
 export default function App() {
   useReactGA();
+  useReactGTM();
 
   const queryClient = getClient();
   const elem = useRoutes(routes);

src/Routes.tsx

@@ -5,6 +5,7 @@ import GlobalLayout from '@/pages/_layout';
 const MainPage = lazy(() => import('@/pages/Main'));
 const LoginPage = lazy(() => import('@/pages/Login'));
 const SignUpPage = lazy(() => import('@/pages/SignUp'));
+const AgentSignUpPage = lazy(() => import('@/pages/SignUp/AgentSignUp'));
 const MyPage = lazy(() => import('@/pages/Mypage'));
 const IntroducePage = lazy(() => import('@/pages/Introduce'));
 const IntroWritePage = lazy(() => import('@/pages/Introduce/Write'));
@@ -28,6 +29,7 @@ export const routes: RouteObject[] = [
       { index: true, element: <MainPage /> },
       { path: 'login', element: <LoginPage /> },
       { path: 'signup', element: <SignUpPage /> },
+      { path: 'agentSignup', element: <AgentSignUpPage /> },
       { path: 'mypage', element: <MyPage /> },
       { path: 'introduce', element: <IntroducePage /> },
       { path: 'intro_write', element: <IntroWritePage /> },

src/apis/login.ts

@@ -5,7 +5,7 @@ import {
 } from '@/types/apiResponseType';
 
 export type LoginForm = {
-  email: string;
+  userName: string;
   password: string;
 };
 

src/components/Common/Footer/index.tsx

@@ -6,6 +6,43 @@ export default function Footer() {
       <div className={styles.lower}>
         <p>주말내집 by 오이리 © 2022 ALL RIGHTS RESERVED. </p>
         <p>문의사항 : [email protected] </p>
+        <span className={styles.buttonWrapper}>
+          <button
+            className={styles.button}
+            type="button"
+            onClick={() => {
+              window.open(
+                'https://third-platypus-163.notion.site/4e45911e3e2141afa3ca3be8173d90c7?pvs=4',
+              );
+            }}
+          >
+            서비스 이용약관
+          </button>
+          <div className={styles.divider} />
+          <button
+            className={styles.button}
+            type="button"
+            onClick={() => {
+              window.open(
+                'https://third-platypus-163.notion.site/7f9b1c68a6174b64b859575163981a24?pvs=4',
+              );
+            }}
+          >
+            공인중개사 개인정보 처리방침
+          </button>
+          <div className={styles.divider} />
+          <button
+            className={styles.button}
+            type="button"
+            onClick={() => {
+              window.open(
+                'https://third-platypus-163.notion.site/29002251361d409888c17161ec11fdf1?pvs=4',
+              );
+            }}
+          >
+            빈집거래 서비스 관련
+          </button>
+        </span>
       </div>
     </div>
   );

src/components/Common/Footer/styles.module.scss

@@ -25,3 +25,21 @@
     padding-left: 5rem;
   }
 }
+.buttonWrapper {
+  display: flex;
+  gap: 1rem;
+}
+.button {
+  background-color: transparent;
+  border: none;
+  outline: none;
+  color: white;
+  padding: 0;
+  cursor: pointer;
+}
+
+.divider {
+  width: 1px;
+  height: 100%;
+  background-color: white;
+}

src/components/Terms/AgentTerm.tsx

@@ -0,0 +1,50 @@
+import styles from './styles.module.scss';
+
+type AgentTermProps = {
+  onToggleClick: () => void;
+};
+
+export default function AgentTerm({ onToggleClick }: AgentTermProps) {
+  return (
+    <div className={styles.termsContainer}>
+      <h1>공인중개사 식별 개인정보 수집 이용 동의(필수)</h1>
+      <div>
+        <p>
+          주말내집에서는 개인정보보호법 제15조, 제22조에 근거하여 주말내집
+          회원정보를 수집하고 있습니다.
+        </p>
+        <article style={{ marginTop: '2rem' }}>
+          <h1 className={styles.title}>1. 개인정보의 수집·이용 목적</h1>
+          <p>
+            공인중개사 회원에 대한 확인을 통해 원활한 주말내집 서비스 제공을
+            위함.
+          </p>
+        </article>
+        <article style={{ marginTop: '2rem' }}>
+          <h1 className={styles.title}>2. 개인정보 보유 및 이용기간</h1>
+          <p>회원 탈퇴 시까지</p>
+        </article>
+        <article style={{ marginTop: '2rem' }}>
+          <h1 className={styles.title}>3. 처리하는 개인정보 항목</h1>
+          <p>
+            □ 필수항목 : 성명, 전화번호, 공인중개사 등록번호, 사업자 등록번호,
+            공인중개사 사무소 상호명, 대표자 이름, 공인중개사 사무소 대표
+            전화번호, 중개 보조원명, 공인중개사 사무소 주소, 이메일
+          </p>
+        </article>
+        <article style={{ marginTop: '2rem' }}>
+          <h1 className={styles.title}>
+            4. 동의거부 권리 및 동의거부 시 불이익 안내
+          </h1>
+          <p>
+            귀하는 개인정보에 수집·이용에 대한 동의를 거부할 권리가 있습니다.
+            다만, 필수항목에 대한 동의 거부 시에는 회원가입이 불가능합니다.
+          </p>
+        </article>
+      </div>
+      <button type="button" onClick={onToggleClick}>
+        확인
+      </button>
+    </div>
+  );
+}

src/components/Terms/MarketingTerm.tsx

@@ -0,0 +1,33 @@
+import styles from './styles.module.scss';
+
+type MarketingTermProps = {
+  onToggleClick: () => void;
+};
+
+export default function MarketingTerm({ onToggleClick }: MarketingTermProps) {
+  return (
+    <div className={styles.termsContainer}>
+      <h1>마켓팅 활용 및 광고성 정보 수신 동의(선택)</h1>
+      <div>
+        <p style={{ marginTop: '2rem', marginBottom: '3rem' }}>
+          전자적 전송매체(SMS/MMS/이메일 등)를 통해, 주말내집이 제공하는
+          이벤트/혜택 등 다양한 정보(뉴스레터 포함)를 수신하실 수 있고, 기타
+          유용한 광고나 정보를 수신하실 수 있습니다.
+        </p>
+        <p style={{ marginBottom: '3rem' }}>
+          본 마케팅 활용 및 광고성 정보수신 등의 항목은 선택사항이므로 동의를
+          거부하는 경우에도 주말내집 서비스의 이용에는 영향이 없습니다. 다만
+          거부시 동의를 통해 제공 가능한 각종 혜택, 이벤트 안내를 받아 보실 수
+          없습니다.
+        </p>
+        <p style={{ marginBottom: '3rem' }}>
+          본 수신 동의를 철회하고자 할 경우에는 고객센터(주말내집 이메일)를 통해
+          언제든 수신동의를 철회를 요청하실 수 있습니다.
+        </p>
+      </div>
+      <button type="button" onClick={onToggleClick}>
+        확인
+      </button>
+    </div>
+  );
+}

src/components/Terms/PrivacyTerm.tsx

@@ -0,0 +1,36 @@
+import styles from './styles.module.scss';
+
+type PrivacyTermProps = {
+  onToggleClick: () => void;
+};
+
+export default function PrivacyTerm({ onToggleClick }: PrivacyTermProps) {
+  return (
+    <div className={styles.termsContainer}>
+      <h1>개인정보 수집 및 이용 동의(선택)</h1>
+      <div>
+        <article style={{ marginTop: '2rem' }}>
+          <h1 className={styles.title}>1. 개인정보의 수집·이용 목적</h1>
+          <p>마케팅에의 활용.</p>
+        </article>
+        <article style={{ marginTop: '2rem' }}>
+          <h1 className={styles.title}>2. 개인정보 보유 및 이용기간</h1>
+          <p>회원 탈퇴 시까지</p>
+        </article>
+        <article style={{ marginTop: '2rem' }}>
+          <h1 className={styles.title}>3. 처리하는 개인정보 항목</h1>
+          <p>□ 이름, 이메일 주소, 전화번호, 주거래 매물, 연령대</p>
+        </article>
+        <p style={{ marginTop: '3rem', marginBottom: '3rem' }}>
+          이는 주말내집이 제공하는 서비스를 보다 원활하게 이용하도록 하기 위해서
+          그 수집 및 이용이 필요한 개인정보이므로 해당 항목에 동의를 거부하시는
+          경우에도 위 개인정보를 수집 및 이용하는 서비스를 제외하고 나머지
+          서비스에 대해서는 이용이 가능합니다.
+        </p>
+      </div>
+      <button type="button" onClick={onToggleClick}>
+        확인
+      </button>
+    </div>
+  );
+}