add hashtag and convert x of twitter

kapable · Jun 12, 2024 · c4c391b · c4c391b
1 parent f775f94
commit c4c391b
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 50 deletions.
diff --git a/src/api/TESTS.js b/src/api/TESTS.js
@@ -1058,6 +1058,7 @@ export const TESTS = [
         'https://images.ktestone.com/horizontalNewTest/Korea/dotori.png',
       lang: 'JP',
       category: 'characteristic',
+      hashTag: '#ある日突然小鳥になった',
     },
     questions: [
       {
@@ -1404,6 +1405,7 @@ export const TESTS = [
         'https://images.ktestone.com/horizontalNewTest/Korea/dotori.png',
       lang: 'Eng',
       category: 'characteristic',
+      hashTag: '#One_day_I_suddenly_became_a_baby_bird',
     },
     questions: [
       {

diff --git a/src/components/Basic/ShareGroup.js b/src/components/Basic/ShareGroup.js
@@ -2,67 +2,85 @@ import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import React, { useCallback } from 'react';
 import {
-    FacebookShareButton, FacebookIcon,
-    TwitterShareButton, TwitterIcon,
-} from "react-share";
+  FacebookShareButton,
+  FacebookIcon,
+  TwitterShareButton,
+  XIcon,
+} from 'react-share';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { _eventSenderGA } from '../../tools/tools';
 
 const ShareGroupDiv = styled.div`
-        display: flex;
-        justify-content: center;
-        margin: 0 auto 2.5rem;
-    `;
+  display: flex;
+  justify-content: center;
+  margin: 0 auto 2.5rem;
+`;
 const URLShareButton = styled.button`
-    padding: 0;
-    width: 48px;
-    height: 48px;
-    color: white;
-    border-radius: 24px;
-    border: 0px;
-    margin: 0 0.5rem;
-    font-weight: 800;
-    font-size: 18px;
-    cursor: pointer;
-    background-color: #5996F0;
-    &:hover {
-        background-color: #B2CCF2;
-    }
-    `;
+  padding: 0;
+  width: 48px;
+  height: 48px;
+  color: white;
+  border-radius: 24px;
+  border: 0px;
+  margin: 0 0.5rem;
+  font-weight: 800;
+  font-size: 18px;
+  cursor: pointer;
+  background-color: #5996f0;
+  &:hover {
+    background-color: #b2ccf2;
+  }
+`;
 
-const ShareGroup = ({ link, testTitle }) => {
+const ShareGroup = ({ link, testTitle, hashTag }) => {
+  const _onShareButtonClick = useCallback(() => {
+    _eventSenderGA('Sharing', 'Click Copy-link Button', 'result page');
+    alert('링크가 복사됐어요!');
+  }, []);
 
-    const _onShareButtonClick = useCallback(() => {
-        _eventSenderGA("Sharing", "Click Copy-link Button", "result page");
-        alert("링크가 복사됐어요!");
-    }, []);
+  const _onFacebookButtonClick = useCallback(() => {
+    _eventSenderGA('Sharing', 'Click Facebook-share Button', 'result page');
+  }, []);
 
-    const _onFacebookButtonClick = useCallback(() => {
-        _eventSenderGA("Sharing", "Click Facebook-share Button", "result page");
-    }, []);
+  const _onTwitterButtonClick = useCallback(() => {
+    _eventSenderGA('Sharing', 'Click Twitter-share Button', 'result page');
+  }, []);
 
-    const _onTwitterButtonClick = useCallback(() => {
-        _eventSenderGA("Sharing", "Click Twitter-share Button", "result page");
-    }, []);
-
-    return (
-        <ShareGroupDiv>
-            <FacebookShareButton url={link} quote={testTitle} hashtag={'#'+testTitle.replace(/\s/g,'')}>
-                <FacebookIcon onClick={_onFacebookButtonClick} size={48} round={true} style={{ padding:"0 0.5rem" }}/>
-            </FacebookShareButton>
-            <TwitterShareButton url={link} title={testTitle}>
-                <TwitterIcon onClick={_onTwitterButtonClick} size={48} round={true} style={{ padding:"0 0.5rem" }}/>
-            </TwitterShareButton>
-            <CopyToClipboard text={link}>
-                <URLShareButton onClick={_onShareButtonClick}>URL</URLShareButton>
-            </CopyToClipboard>
-        </ShareGroupDiv>
-    );
+  return (
+    <ShareGroupDiv>
+      <FacebookShareButton
+        url={link}
+        quote={testTitle}
+        hashtag={'#' + testTitle.replace(/\s/g, '')}
+      >
+        <FacebookIcon
+          onClick={_onFacebookButtonClick}
+          size={48}
+          round={true}
+          style={{ padding: '0 0.5rem' }}
+        />
+      </FacebookShareButton>
+      <TwitterShareButton
+        url={link}
+        title={hashTag ? hashTag + '\n' + testTitle : testTitle}
+      >
+        <XIcon
+          onClick={_onTwitterButtonClick}
+          size={48}
+          round={true}
+          style={{ padding: '0 0.5rem' }}
+        />
+      </TwitterShareButton>
+      <CopyToClipboard text={link}>
+        <URLShareButton onClick={_onShareButtonClick}>URL</URLShareButton>
+      </CopyToClipboard>
+    </ShareGroupDiv>
+  );
 };
 
 export default ShareGroup;
 
 ShareGroup.propTypes = {
-    link: PropTypes.string.isRequired,
-    testTitle: PropTypes.string.isRequired,
-};
+  link: PropTypes.string.isRequired,
+  testTitle: PropTypes.string.isRequired,
+};
diff --git a/src/pages/Basic/Result.js b/src/pages/Basic/Result.js
@@ -2413,6 +2413,11 @@ class Result extends Component {
                   (test) => test?.info?.mainUrl === this.state.current_test
                 )?.info?.mainTitle
               }
+              hashTag={
+                TESTS.find(
+                  (test) => test?.info?.mainUrl === this.state.current_test
+                )?.info?.hashTag
+              }
             />
             <div className='share'>
               {/* if facialExpAnalyzer, copy url is test home, other tests' urls are result urls */}