Merge remote-tracking branch 'origin/feature/prepare-for-v3' into feature/prepare-for-v3

Author: winverse

.env .env.development

@@ -4,5 +4,7 @@ REACT_APP_CLIENT_V3_HOST=http://localhost:3001
 
 REACT_APP_API_HOST=http://localhost:5002/
 
-REACT_APP_GRAPHQL_HOST=https://v2cdn.velog.io/
+REACT_APP_CLIENT_V3_HOST=http://localhost:3001/
+
+REACT_APP_GRAPHQL_HOST=http://localhost:5002/
 REACT_APP_GRAPHQL_HOST_NOCDN=https://v2.velog.io/

.env.production

@@ -0,0 +1,8 @@
+PUBLIC_URL=/
+
+REACT_APP_API_HOST=http://localhost:5002/
+
+REACT_APP_CLIENT_V3_HOST=http://localhost:3001/
+
+REACT_APP_GRAPHQL_HOST=https://v2.velog.io/
+REACT_APP_GRAPHQL_HOST_NOCDN=https://v2.velog.io/

public/index.html

@@ -29,14 +29,14 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <!-- Global site tag (gtag.js) - Google Analytics -->
-    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-125599395-1"></script>
+    <!-- Google tag (gtag.js) -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-8D0MD2S4PK"></script>
     <script>
       window.dataLayer = window.dataLayer || [];
       function gtag(){dataLayer.push(arguments);}
       gtag('js', new Date());
 
-      gtag('config', 'UA-125599395-1');
+      gtag('config', 'G-8D0MD2S4PK');
     </script>
 
 

src/components/register/RegisterForm.tsx

@@ -1,9 +1,12 @@
 import * as React from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import LabelInput from '../common/LabelInput';
 import useInputs from '../../lib/hooks/useInputs';
 import RoundButton from '../common/RoundButton';
 import palette from '../../lib/styles/palette';
+import { themedPalette } from '../../lib/styles/themes';
+import { CheckIcon } from '../../static/svg';
+import { useState, useEffect } from 'react';
 
 const RegisterFormBlock = styled.div`
   margin-top: 3rem;
@@ -20,6 +23,41 @@ const RegisterFormBlock = styled.div`
   }
 `;
 
+const CheckRow = styled.div`
+  display: flex;
+  align-items: center;
+  color: ${themedPalette.text1};
+  gap: 0.5rem;
+  cursor: pointer;
+
+  a {
+    color: ${themedPalette.primary1};
+  }
+`;
+
+const Box = styled.div<{ isChecked: boolean }>`
+  width: 1.5rem;
+  height: 1.5rem;
+  border: 1px solid ${themedPalette.border2};
+  border-radius: 4px;
+  ${(props) =>
+    props.isChecked &&
+    css`
+      background: ${themedPalette.primary1};
+      border: 1px solid ${themedPalette.primary1};
+    `}
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  svg {
+    color: white;
+    width: 1rem;
+    height: 1rem;
+  }
+`;
+
 export type RegisterFormType = {
   displayName: string;
   email: string;
@@ -51,6 +89,15 @@ const RegisterForm: React.FC<RegisterFormProps> = ({
     username: defaultInfo ? defaultInfo.username : '',
     shortBio: '',
   });
+  const [isChecked, setIsChecked] = useState(false);
+  const [localError, setLocalError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (isChecked) {
+      setLocalError(null);
+    }
+  }, [isChecked]);
+
   return (
     <RegisterFormBlock>
       <LabelInput
@@ -88,18 +135,53 @@ const RegisterForm: React.FC<RegisterFormProps> = ({
         value={form.shortBio}
         size={30}
       />
+      <CheckRow
+        onClick={() => {
+          setIsChecked((v) => !v);
+        }}
+      >
+        <Box isChecked={isChecked}>
+          <CheckIcon />
+        </Box>
+        <span>
+          <a
+            href="https://velog.io/policy/terms"
+            target="_blank"
+            rel="noopener noreferrer"
+            onClick={(e) => e.stopPropagation()}
+          >
+            이용약관
+          </a>
+          과{' '}
+          <a
+            href="https://velog.io/policy/terms"
+            target="_blank"
+            rel="noopener noreferrer"
+            onClick={(e) => e.stopPropagation()}
+          >
+            개인정보취급방침
+          </a>
+          에 동의합니다.
+        </span>
+      </CheckRow>
       <div className="form-bottom">
-        {error && <div className="error">{error}</div>}
+        {(error || localError) && (
+          <div className="error">{error || localError}</div>
+        )}
         <div className="buttons">
           <RoundButton inline color="lightGray" to="/" size="LARGE">
             취소
           </RoundButton>
           <RoundButton
             inline
             type="submit"
-            onClick={() =>
-              onSubmit({ ...form, email: fixedEmail || form.email })
-            }
+            onClick={() => {
+              if (!isChecked) {
+                setLocalError('이용약관과 개인정보취급방침에 동의해주세요.');
+                return;
+              }
+              onSubmit({ ...form, email: fixedEmail || form.email });
+            }}
             size="LARGE"
             disabled={loading}
           >

src/containers/base/Core.tsx

@@ -31,7 +31,7 @@ const Core: React.FC<CoreProps> = ({ layer }) => {
       // adds setTimeout for page title sync
       // is there any better solution?
       setTimeout(() => {
-        gtag('config', 'UA-125599395-1', {
+        gtag('config', 'G-8D0MD2S4PK', {
           page_path: location.pathname + location.search,
         });
       }, 1000);

src/pages/home/HomePage.tsx

@@ -12,6 +12,7 @@ import FloatingHeader from '../../components/base/FloatingHeader';
 export type HomePageProps = {};
 
 function HomePage(props: HomePageProps) {
+  window.location.href = process.env.REACT_APP_CLIENT_V3_HOST!;
   return (
     <MainTemplate>
       <Header />

src/server/Html.tsx

@@ -79,15 +79,15 @@ function Html({
         ></script>
         <script
           async
-          src="https://www.googletagmanager.com/gtag/js?id=UA-125599395-1"
+          src="https://www.googletagmanager.com/gtag/js?id=G-8D0MD2S4PK"
         ></script>
         <script
           dangerouslySetInnerHTML={{
             __html: `window.dataLayer = window.dataLayer || [];
-          function gtag(){dataLayer.push(arguments);}
-          gtag('js', new Date());
-        
-          gtag('config', 'UA-125599395-1');`,
+            function gtag(){dataLayer.push(arguments);}
+            gtag('js', new Date());
+          
+            gtag('config', 'G-8D0MD2S4PK');`,
           }}
         ></script>
       </head>