Refactor SearchTitle component and related styles; add stock score badge

src/components/Search/SearchTitle/SearchTitle.Style.ts

@@ -24,7 +24,6 @@ export const SearchTitleContainer = styled.div({
 export const SearchTitleHeaderContainer = styled.div({
   display: 'flex',
   flexDirection: 'column',
-  // alignItems: 'center',
 
   fontWeight: '700',
   fontSize: '42px',
@@ -34,12 +33,18 @@ export const SearchTitleHeaderContainer = styled.div({
   [media[0]]: {
     fontSize: '32px',
   },
+});
 
-  ['>p.price']: {
-    ...theme.font.heading24Semibold,
-    color: theme.colors.sub_white,
-    margin: '0',
-  },
+export const SearchTitlePriceWrapper = styled.div({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '12px',
+});
+
+export const SearchTitlePrice = styled.p({
+  ...theme.font.heading24Semibold,
+  color: theme.colors.sub_white,
+  margin: '0',
 });
 
 export const SearchTitleHeaderText = styled.div({
@@ -115,6 +120,27 @@ export const SearchTitleDetailSymbol = styled.span({
   },
 });
 
+export const SearchTitleScoreBadge = styled.div({
+  boxSizing: 'border-box',
+  display: 'flex',
+  flexDirection: 'row',
+  justifyContent: 'center',
+  alignItems: 'center',
+  padding: '2px 10px',
+  gap: '10px',
+  width: 'fit-content',
+  height: '31px',
+  border: `1px solid ${theme.colors.sub_gray9}`,
+  borderRadius: '50px',
+
+  ['>p']: {
+    ...theme.font.body18Medium,
+    color: theme.colors.sub_gray6,
+    margin: '0',
+    whiteSpace: 'nowrap',
+  },
+});
+
 // export const SearchTitleDescriptionContainer = styled.div(
 //   ({ showMoreDesc }: { showMoreDesc: boolean }) => ({
 //     WebkitLineClamp: showMoreDesc ? '' : '2',

src/components/Search/SearchTitle/SearchTitle.tsx

@@ -3,9 +3,11 @@ import { useEffect, useRef, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { MARKET_CODES } from '@ts/Constants';
 import useAuthInfo from '@hooks/useAuthInfo';
+import { useQueryComponent } from '@hooks/useQueryComponent';
 import { webPath } from '@router/index';
 import Button from '@components/Common/Button';
 import { useBuyExperimentMutation } from '@controllers/experiment/query';
+import { useScoreQuery } from '@controllers/stocks/query';
 import { StockDetailInfo } from '@controllers/stocks/types';
 import KoreaPNG from '@assets/flags/korea.png';
 import OverseaPNG from '@assets/flags/oversea.png';
@@ -16,11 +18,14 @@ import {
   SearchTitleHeaderContainer,
   SearchTitleHeaderText,
   SearchTitleHeaderTextAnimated,
+  SearchTitlePrice,
+  SearchTitlePriceWrapper,
+  SearchTitleScoreBadge,
 } from './SearchTitle.Style';
 
 const BASE_DELAY = 1500;
 
-const SearchTitleName = ({ stockInfo: { symbolName, country, price } }: { stockInfo: StockDetailInfo }) => {
+const SearchTitleName = ({ stockInfo: { symbolName, country, price, stockId } }: { stockInfo: StockDetailInfo }) => {
   const { state } = useLocation();
 
   const titleTextRef = useRef<HTMLDivElement>(null);
@@ -32,6 +37,7 @@ const SearchTitleName = ({ stockInfo: { symbolName, country, price } }: { stockI
     instant: BASE_DELAY,
   });
   const [animation, cycleAnimation] = useCycle(...Object.keys(animationDelay));
+  const [stockScore, suspend] = useQueryComponent({ query: useScoreQuery(stockId, country) });
   const concurrency = country === 'KOREA' ? '₩' : '$';
   useEffect(() => {
     if (titleTextRef.current) {
@@ -83,10 +89,17 @@ const SearchTitleName = ({ stockInfo: { symbolName, country, price } }: { stockI
           </SearchTitleHeaderTextAnimated>
         </AnimatePresence>
       </SearchTitleHeaderText>
-      <p className="price">
-        {concurrency}
-        {price.toLocaleString()}
-      </p>
+      <SearchTitlePriceWrapper>
+        <SearchTitlePrice>
+          {concurrency}
+          {price.toLocaleString()}
+        </SearchTitlePrice>
+        {!suspend && stockScore && (
+          <SearchTitleScoreBadge>
+            <p>인간지표 {stockScore.score}점</p>
+          </SearchTitleScoreBadge>
+        )}
+      </SearchTitlePriceWrapper>
     </SearchTitleHeaderContainer>
   );
 };

src/controllers/stocks/query.ts

@@ -64,7 +64,7 @@ export const useChartInfoQuery = (id: number, periodCode: PERIOD_CODE, startDate
 };
 
 export const useStockTableInfoQuery = (category: string, country: string) => {
-  return useQuery<StockTableInfo>(
+  return useQuery<StockTableInfo[]>(
     ['stockTableInfo', category, country],
     () => fetchStockTable(category, country),
     queryOptions,

src/hooks/useQueryComponent.tsx

@@ -3,8 +3,8 @@ import { UseQueryResult } from 'react-query';
 import ErrorComponent from '@components/Common/ErrorComponent';
 import LoadingComponent from '@components/Common/LoadingComponent';
 
-export const useQueryComponent = ({ query }: { query: UseQueryResult }) => {
-  const { data, isLoading, isError }: { data: any; isLoading: boolean; isError: boolean } = query;
+export const useQueryComponent = <T,>({ query }: { query: UseQueryResult<T> }) => {
+  const { data, isLoading, isError } = query;
 
   const [isDeferred, setIsDeferred] = useState(false);
 
@@ -15,8 +15,8 @@ export const useQueryComponent = ({ query }: { query: UseQueryResult }) => {
     return () => clearTimeout(timeoutId);
   }, []);
 
-  if (isLoading) return [null, isDeferred && <LoadingComponent />];
-  if (isError) return [null, <ErrorComponent />];
+  if (isLoading) return [null, isDeferred && <LoadingComponent />] as const;
+  if (isError) return [null, <ErrorComponent />] as const;
 
-  return [data];
+  return [data] as const;
 };

src/index.css

@@ -49,9 +49,7 @@ html {
 
 body {
   display: flex;
-
   justify-items: center;
-
   margin: 0px;
   background-color: rgba(255, 255, 255, 0.2);
   min-width: 320px;

src/pages/MyPage/MyPage.tsx

@@ -2,7 +2,6 @@ import { useNavigate } from 'react-router-dom';
 import useAuthInfo from '@hooks/useAuthInfo';
 import { webPath } from '@router/index';
 import ConfirmModal from '@components/Modal/Confirm/ConfirmModal';
-import FCMTestButton from '@components/MyPage/FCMTestButton/FCMTestButton';
 import { fetchAuthLogout } from '@controllers/auth/api';
 import { useExperimentStatusQuery } from '@controllers/experiment/query';
 import { useBookmarkListQuery } from '@controllers/preference/query';
@@ -173,7 +172,6 @@ const MyPage = () => {
           </MyPageDefaultContainer>
         )}
         <span className="divider" />
-        <FCMTestButton />
         <MyPageSNSContainer>
           <InstagramSVG onClick={handleClickInstagram} />
           <LinkedInSVG onClick={handleClickLinkedIn} />

src/pages/Search/Search.tsx

@@ -205,7 +205,6 @@ const Search = () => {
   const [stockInfo] = useQueryComponent({
     query: useSymbolNameSearchQuery(state?.symbolName, state?.country),
   });
-
   const [selectedTab, setSelectedTab] = useState<TabKey>('HUMAN_INDEX');
 
   const handleTabChange = (tab: TabKey) => {