release myReport Page

kapable · Oct 30, 2024 · 69e9948 · 69e9948
1 parent ad5c2e7
commit 69e9948
Show file tree

Hide file tree

Showing 9 changed files with 783 additions and 478 deletions.
diff --git a/src/App.js b/src/App.js
diff --git a/src/components/Auth/ProfileButtonGroup.js b/src/components/Auth/ProfileButtonGroup.js
@@ -0,0 +1,102 @@
+import React, { useEffect, useState } from 'react';
+import { ConfigProvider, Divider } from 'antd';
+import { LogoutOutlined, ShareAltOutlined } from '@ant-design/icons';
+import { supabase } from '../../tools/supabaseClient';
+import { useNavigate } from 'react-router';
+import CopyToClipboard from 'react-copy-to-clipboard';
+
+const ProfileButtonGroup = ({
+  userid,
+  texts,
+  //   currentLanguage,
+  userDoneTests,
+}) => {
+  const navigate = useNavigate();
+  const [level, setLevel] = useState('newbie');
+
+  useEffect(() => {
+    const badgeMapper = {
+      5: 'bronze',
+      10: 'silver',
+      30: 'gold',
+      50: 'diamond',
+    };
+    let result_array = [];
+    if (userDoneTests?.length) {
+      Object.keys(badgeMapper).forEach((key) => {
+        if (userDoneTests?.length >= key) {
+          result_array.push(key);
+        }
+      });
+
+      setLevel(badgeMapper[result_array[result_array.length - 1]] || 'newbie');
+    }
+  }, [userDoneTests?.length]);
+
+  const onClickSignOut = async () => {
+    alert('Successfully signed out!');
+    await supabase.auth.signOut();
+    return navigate('/');
+  };
+
+  return (
+    <ConfigProvider
+      theme={{
+        token: {
+          colorSplit: 'white',
+        },
+      }}
+    >
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'space-around',
+          alignItems: 'center',
+          padding: '5px 15px',
+          borderRadius: '50px',
+          boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)',
+          maxWidth: '300px',
+          margin: '1rem auto',
+          fontSize: '0.6rem',
+          cursor: 'pointer',
+          backgroundColor: '#e62182',
+          color: 'white',
+        }}
+      >
+        <div>
+          <img
+            src={`https://images.ktestone.com/auth/medal/${level}.avif`}
+            alt='level'
+            style={{ width: '3rem' }}
+          />
+        </div>
+        <Divider type='vertical' />
+        <CopyToClipboard text={`https://ktestone.com/auth/mypage/${userid}`}>
+          <div onClick={() => alert('프로필 링크가 복사됐어요!')}>
+            <ShareAltOutlined
+              style={{
+                fontWeight: 'bold',
+                fontSize: '1.5rem',
+                marginBottom: '0.5rem',
+              }}
+            />
+            <div>{texts[8]}</div>
+          </div>
+        </CopyToClipboard>
+        <Divider type='vertical' />
+        <div onClick={onClickSignOut}>
+          <LogoutOutlined
+            style={{
+              fontWeight: 'bold',
+              fontSize: '1.5rem',
+              marginBottom: '0.5rem',
+            }}
+          />
+          <div>{texts[5]}</div>
+        </div>
+      </div>
+    </ConfigProvider>
+  );
+};
+
+export default ProfileButtonGroup;
diff --git a/src/components/Auth/RenderProgressBar.js b/src/components/Auth/RenderProgressBar.js
@@ -18,51 +18,96 @@ const RenderProgressBar = ({ left, right, mbtiScores }) => {
     >
       <span
         style={{
-          width: '70px',
+          width: '30px',
           fontWeight: 'bold',
           textAlign: 'right',
           color: leftPercentage >= 50 ? winningColor : losingColor,
         }}
       >
-        {leftPercentage.toFixed(0)}% {left}
+        {left}
       </span>
       <div
         style={{
           flex: 1,
-          height: '20px',
+          height: '40px',
           display: 'flex',
-          margin: '0 10px',
+          margin: '0 20px',
+          position: 'relative',
+          alignItems: 'center',
         }}
       >
+        {leftPercentage >= 50 && (
+          <div
+            style={{
+              position: 'absolute',
+              left: `calc(${leftPercentage / 2}%)`,
+              top: 0,
+              transform: 'translateX(-50%)',
+              fontSize: '12px',
+              fontWeight: 'bold',
+              color: winningColor,
+            }}
+          >
+            {leftPercentage.toFixed(0)}%
+          </div>
+        )}
+        {leftPercentage < 50 && (
+          <div
+            style={{
+              position: 'absolute',
+              left: `calc(${leftPercentage + rightPercentage / 2}%)`,
+              top: 0,
+              transform: 'translateX(-50%)',
+              fontSize: '12px',
+              fontWeight: 'bold',
+              color: winningColor,
+            }}
+          >
+            {rightPercentage.toFixed(0)}%
+          </div>
+        )}
+
         <div
           style={{
             width: `${leftPercentage}%`,
-            height: '100%',
-            //   background: getColor(left),
+            height: '4px',
             backgroundColor: leftPercentage >= 50 ? winningColor : losingColor,
             borderTopLeftRadius: '10px',
             borderBottomLeftRadius: '10px',
           }}
-        ></div>
+        />
         <div
           style={{
             width: `${rightPercentage}%`,
-            height: '100%',
-            //   background: getColor(right),
+            height: '4px',
             backgroundColor: leftPercentage < 50 ? winningColor : losingColor,
             borderTopRightRadius: '10px',
             borderBottomRightRadius: '10px',
           }}
-        ></div>
+        />
+
+        <div
+          style={{
+            position: 'absolute',
+            left: `calc(${leftPercentage}% - 6px)`,
+            top: '50%',
+            transform: 'translateY(-50%)',
+            width: '12px',
+            height: '12px',
+            borderRadius: '50%',
+            backgroundColor: winningColor,
+            zIndex: 1,
+          }}
+        />
       </div>
       <span
         style={{
-          width: '70px',
+          width: '30px',
           fontWeight: 'bold',
           color: leftPercentage < 50 ? winningColor : losingColor,
         }}
       >
-        {right} {rightPercentage.toFixed(0)}%
+        {right}
       </span>
     </div>
   );

diff --git a/src/components/Auth/UserDoneTestList.js b/src/components/Auth/UserDoneTestList.js
@@ -3,27 +3,40 @@ import React, { useEffect, useState } from 'react';
 import { USER_DONE_TEST_TABLE } from '../../tools/auth';
 import { TESTS } from '../../api/TESTS';
 import RenderProgressBar from './RenderProgressBar';
-import { Button, Segmented } from 'antd';
+import { Button, ConfigProvider, Segmented } from 'antd';
 import UserDoneTestRenderer from './UserDoneTestRenderer';
 import RadarChartRenderer from './RadarChartRenderer';
 import { HomeFilled, LockOutlined } from '@ant-design/icons';
 import { useNavigate } from 'react-router';
 
-const UserDoneTestList = ({ user, isMyPage, texts, currentLanguage }) => {
+const UserDoneTestList = ({
+  user,
+  isMyPage,
+  texts,
+  currentLanguage,
+  userDoneTests,
+  setUserDoneTests,
+  userNotDoneTests,
+  setUserNotDoneTests,
+  mbtiScores,
+  setMbtiScores,
+  MBTIType,
+  setMBTIType,
+}) => {
   const navigate = useNavigate();
-  const [userDoneTests, setUserDoneTests] = useState([]);
-  const [userNotDoneTests, setUserNotDoneTests] = useState([]);
-  const [mbtiScores, setMbtiScores] = useState({
-    E: 0,
-    I: 0,
-    S: 0,
-    N: 0,
-    T: 0,
-    F: 0,
-    J: 0,
-    P: 0,
-  });
-  const [MBTIType, setMBTIType] = useState('');
+  // const [userDoneTests, setUserDoneTests] = useState([]);
+  // const [userNotDoneTests, setUserNotDoneTests] = useState([]);
+  // const [mbtiScores, setMbtiScores] = useState({
+  //   E: 0,
+  //   I: 0,
+  //   S: 0,
+  //   N: 0,
+  //   T: 0,
+  //   F: 0,
+  //   J: 0,
+  //   P: 0,
+  // });
+  // const [MBTIType, setMBTIType] = useState('');
 
   const [testListMode, setTestListMode] = useState(texts[4]);
 
@@ -86,7 +99,13 @@ const UserDoneTestList = ({ user, isMyPage, texts, currentLanguage }) => {
       };
       fetchUserDoneTests();
     }
-  }, [user, currentLanguage]);
+  }, [
+    user,
+    currentLanguage,
+    setMbtiScores,
+    setUserDoneTests,
+    setUserNotDoneTests,
+  ]);
 
   useEffect(() => {
     const mbtiPairs = [
@@ -101,18 +120,38 @@ const UserDoneTestList = ({ user, isMyPage, texts, currentLanguage }) => {
       })
       .join('');
     setMBTIType(finalMbtiTypes);
-  }, [mbtiScores]);
+  }, [mbtiScores, setMBTIType]);
 
   return (
     <div>
-      <h2>
-        {texts[1]} : {MBTIType}
-      </h2>
       {userDoneTests?.length >= 5 ? (
         <>
-          <RadarChartRenderer mbtiScores={mbtiScores} MBTIType={MBTIType} />
-          <h2>{texts[8]}</h2>
-          <div style={{ maxWidth: '400px', margin: '20px auto 80px' }}>
+          <div
+            style={{
+              borderRadius: '1rem',
+              padding: '0.5rem',
+              maxWidth: '22rem',
+              margin: '0.5rem auto',
+              boxShadow: '0 8px 12px rgba(0, 0, 0, 0.1)',
+              backgroundColor: 'white',
+            }}
+          >
+            <h3 style={{ color: '#e62182' }}>
+              {texts[1]} : {MBTIType}
+            </h3>
+            <RadarChartRenderer mbtiScores={mbtiScores} MBTIType={MBTIType} />
+          </div>
+          <div
+            style={{
+              maxWidth: '22rem',
+              margin: '1.5rem auto',
+              boxShadow: '0 8px 12px rgba(0, 0, 0, 0.1)',
+              backgroundColor: 'white',
+              borderRadius: '1rem',
+              padding: '0.5rem',
+            }}
+          >
+            <h3 style={{ color: '#e62182' }}>{texts[2]}</h3>
             <RenderProgressBar left='E' right='I' mbtiScores={mbtiScores} />
             <RenderProgressBar left='S' right='N' mbtiScores={mbtiScores} />
             <RenderProgressBar left='T' right='F' mbtiScores={mbtiScores} />
@@ -168,16 +207,60 @@ const UserDoneTestList = ({ user, isMyPage, texts, currentLanguage }) => {
 
       {isMyPage ? (
         <div>
-          <h2>{texts[2]}</h2>
-          <div style={{ width: '15rem', margin: '0 auto' }}>
-            <Segmented
-              block
-              value={testListMode}
-              options={[texts[3], texts[4]]}
-              onChange={(value) => {
-                setTestListMode(value);
+          <div
+            style={{
+              width: '15rem',
+              margin: '2rem auto 1rem',
+              fontWeight: 'bold',
+            }}
+          >
+            <ConfigProvider
+              theme={{
+                components: {
+                  Segmented: {
+                    itemActiveBg: 'white',
+                    itemColor: 'white',
+                    itemHoverBg: 'white',
+                    itemHoverColor: '#e62182',
+                    itemSelectedBg: 'white',
+                    itemSelectedColor: '#e62182',
+                    trackBg: '#e62182',
+                  },
+                },
               }}
-            />
+            >
+              <Segmented
+                block
+                value={testListMode}
+                options={[texts[3], texts[4]]}
+                onChange={(value) => {
+                  setTestListMode(value);
+                }}
+              />
+            </ConfigProvider>
+          </div>
+          <div
+            style={{
+              borderRadius: '1rem',
+              padding: '0.5rem',
+              maxWidth: '22rem',
+              margin: '1.5rem auto',
+              boxShadow: '0 8px 12px rgba(0, 0, 0, 0.1)',
+              backgroundColor: 'white',
+            }}
+          >
+            <h3 style={{ color: '#e62182' }}>{texts[9]}</h3>
+            <p
+              style={{
+                color: '#e62182',
+                display: 'inline',
+                fontWeight: 'bold',
+                fontSize: '2rem',
+              }}
+            >
+              {userDoneTests?.length || 0}
+            </p>
+            {texts[10]}
           </div>
           <UserDoneTestRenderer
             testList={