Merge pull request #293 from FunD-StockProject/develop

durumi99 · web-flow · commit a76c8c16fe5a · 2025-01-16T23:37:27.000+09:00
V3.11 배포
diff --git a/src/assets/footer/footer_threads.svg b/src/assets/footer/footer_threads.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <path fill="current" d="M337.36 243.58c-1.46-.7-2.95-1.38-4.46-2.02-2.62-48.36-29.04-76.05-73.41-76.33-25.6-.17-48.52 10.27-62.8 31.94l24.4 16.74c10.15-15.4 26.08-18.68 37.81-18.68h.4c14.61.09 25.64 4.34 32.77 12.62 5.19 6.04 8.67 14.37 10.39 24.89-12.96-2.2-26.96-2.88-41.94-2.02-42.18 2.43-69.3 27.03-67.48 61.21.92 17.35 9.56 32.26 24.32 42.01 12.48 8.24 28.56 12.27 45.26 11.35 22.07-1.2 39.37-9.62 51.45-25.01 9.17-11.69 14.97-26.84 17.53-45.92 10.51 6.34 18.3 14.69 22.61 24.73 7.31 17.06 7.74 45.1-15.14 67.96-20.04 20.03-44.14 28.69-80.55 28.96-40.4-.3-70.95-13.26-90.81-38.51-18.6-23.64-28.21-57.79-28.57-101.5.36-43.71 9.97-77.86 28.57-101.5 19.86-25.25 50.41-38.21 90.81-38.51 40.68.3 71.76 13.32 92.39 38.69 10.11 12.44 17.73 28.09 22.76 46.33l28.59-7.63c-6.09-22.45-15.67-41.8-28.72-57.85-26.44-32.53-65.1-49.19-114.92-49.54h-.2c-49.72.35-87.96 17.08-113.64 49.73-22.86 29.05-34.65 69.48-35.04 120.16v.24c.39 50.68 12.18 91.11 35.04 120.16 25.68 32.65 63.92 49.39 113.64 49.73h.2c44.2-.31 75.36-11.88 101.03-37.53 33.58-33.55 32.57-75.6 21.5-101.42-7.94-18.51-23.08-33.55-43.79-43.48zm-76.32 71.76c-18.48 1.04-37.69-7.26-38.64-25.03-.7-13.18 9.38-27.89 39.78-29.64 3.48-.2 6.9-.3 10.25-.3 11.04 0 21.37 1.07 30.76 3.13-3.5 43.74-24.04 50.84-42.15 51.84z"/>
+</svg>
diff --git a/src/components/CardList/CardList.tsx b/src/components/CardList/CardList.tsx
@@ -12,12 +12,11 @@ const CardList = ({ name, country }: { name: StockType; country: STOCK_COUNTRY }
   const isMobile = useIsMobile();
   const [curStocks, suspend] = useQuery({ query: StockFetchQuery(name, country) });
 
-  console.log(suspend);
-
   return (
     suspend ||
     (curStocks && (
       <SlideView
+        key={`${name}_${country}`}
         keyName={name}
         list={isHot ? StockHot(curStocks, country) : StockRisingDescend(curStocks, country)}
         count={isHot ? 1 : !isMobile ? 3 : 1}
diff --git a/src/components/Home/Keywords/Keywords.style.tsx b/src/components/Home/Keywords/Keywords.style.tsx
@@ -51,10 +51,6 @@ const Title = styled.div({
 });
 
 const KeywordList = styled.div({
-  display: 'flex',
-  alignItems: 'center',
-  gap: '8px',
-  alignSelf: 'stretch',
   overflow: 'auto',
   whiteSpace: 'nowrap',
   msOverflowStyle: 'none',
@@ -66,22 +62,33 @@ const KeywordList = styled.div({
   },
 });
 
+const KeywordItemConainer = styled.div({
+  width: '100%',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  gap: '12px',
+  [media[0]]: {
+    gap: '8px',
+    justifyContent: 'start',
+  },
+});
+
 const KeywordItem = styled.div({
   color: theme.colors.primary0,
   backgroundColor: theme.colors.grayscale100,
   textAlign: 'right',
   fontFamily: 'Pretendard', // Corrected camelCase syntax
   fontSize: '19px', // Corrected camelCase syntax
-  fontStyle: 'normal',
   fontWeight: 700,
 
-  padding: '12px 20px',
+  padding: '8px 24px',
   borderRadius: '30px',
-  border: `1px solid ${theme.colors.grayscale100}`,
 
   [media[0]]: {
-    fontSize: '16px',
+    fontSize: '13px',
+    padding: '8px 12px',
   },
 });
 
-export { KeywordsContainer, TitleWrapper, Title, KeywordList, KeywordItem };
+export { KeywordsContainer, TitleWrapper, Title, KeywordList, KeywordItemConainer, KeywordItem };
diff --git a/src/components/Home/Keywords/Keywords.tsx b/src/components/Home/Keywords/Keywords.tsx
@@ -4,7 +4,14 @@ import { useQuery } from '@hooks/useQuery';
 import KeywordPopUp from '@components/PopUp/KeywordPopUp/KeywordPopUp';
 import { KeywordsQuery } from '@controllers/query';
 import InfoSVG from '@assets/info.svg?react';
-import { KeywordItem, KeywordList, KeywordsContainer, Title, TitleWrapper } from './Keywords.style';
+import {
+  KeywordItem,
+  KeywordItemConainer,
+  KeywordList,
+  KeywordsContainer,
+  Title,
+  TitleWrapper,
+} from './Keywords.style';
 
 const Keywords = ({ country }: { country: string }) => {
   const [keywords, suspend] = useQuery({ query: KeywordsQuery(country) });
@@ -23,13 +30,15 @@ const Keywords = ({ country }: { country: string }) => {
         <span>매일 {updateTime}시 업데이트됩니다.</span>
       </TitleWrapper>
       <KeywordList>
-        {suspend ||
-          (keywords &&
-            keywords.map((keyword: string, index: number) => (
-              <KeywordItem key={index} onClick={() => {}}>
-                {keyword.toLocaleUpperCase()}
-              </KeywordItem>
-            )))}
+        <KeywordItemConainer>
+          {suspend ||
+            (keywords &&
+              keywords.map((keyword: string, index: number) => (
+                <KeywordItem key={index} onClick={() => {}}>
+                  {keyword.toLocaleUpperCase()}
+                </KeywordItem>
+              )))}
+        </KeywordItemConainer>
       </KeywordList>
       {isPopupOpen && <KeywordPopUp onClose={togglePopup} />}
     </KeywordsContainer>
diff --git a/src/components/Home/StockTable/StockTable.style.ts b/src/components/Home/StockTable/StockTable.style.ts
@@ -114,6 +114,7 @@ const TableRow = styled.div({
   padding: '12px 0',
   color: theme.colors.primary0,
   borderBottom: `1px solid ${theme.colors.grayscale90}`, // 행 구분선 추가
+  cursor: 'pointer',
   ':last-child': {
     borderBottom: 'none',
   },
@@ -126,9 +127,6 @@ const StockInfo = styled.div({
   justifyContent: 'center',
   textAlign: 'left',
   gap: '8px',
-  [media[0]]: {
-    justifyContent: 'start',
-  },
 });
 
 const StockLogo = styled.div({
diff --git a/src/components/PopUp/CommonPopUp.style.ts b/src/components/PopUp/CommonPopUp.style.ts
@@ -58,6 +58,7 @@ const PopUpContent = styled('div')({
   fontStyle: 'normal',
   fontWeight: '500',
   lineHeight: '1.5',
+  whiteSpace: 'break-spaces',
   color: theme.colors.grayscale100,
 });
 
diff --git a/src/components/PopUp/FearPopUp/FearPopUp.tsx b/src/components/PopUp/FearPopUp/FearPopUp.tsx
@@ -7,8 +7,8 @@ const FearPopUp = ({ onClose }: { onClose: () => void }) => (
     <PopUpContent>
       <div>
         공포탐욕지수는 시장의 7가지 요인을 분석하여
-        <StyledSpan> 현재 투자자들의 심리를 극단적인 공포(0)부터 극단적인 탐욕(100)</StyledSpan>에
-        이르기까지를 가늠하는 심리지표입니다.
+        <StyledSpan> 현재 투자자들의 심리를 극단적인 공포(0)부터 극단적인 탐욕(100)</StyledSpan>에 이르기까지를 가늠하는
+        심리지표입니다.
       </div>
     </PopUpContent>
   </CommonPopUp>
diff --git a/src/components/Search/StockChart/StockChart.tsx b/src/components/Search/StockChart/StockChart.tsx
@@ -868,6 +868,7 @@ const StockChartView = ({
 
   const handleCanvasMouseLeave = () => {
     setIsMouseEnter(false);
+    setMousePosInfo(null);
   };
 
   const handlePriceCanvasMouseMove = (e: MouseEvent) => {
diff --git a/src/components/SearchBar/SearchBar.Style.ts b/src/components/SearchBar/SearchBar.Style.ts
@@ -78,7 +78,9 @@ export const SearchBarSelectBox = styled.div(
     position: 'relative',
     display: 'flex',
     width: '50%',
+
     ['label']: {
+      cursor: 'pointer',
       fontSize: '17px',
       borderRadius: '8px',
       padding: '18px',
@@ -138,6 +140,7 @@ export const SearchBarSelectBox = styled.div(
 
 export const SearchBarSelectBoxItems = styled.ul(
   {
+    cursor: 'pointer',
     position: 'absolute',
     zIndex: '20',
     top: '100%',
@@ -329,34 +332,39 @@ export const SearchBarResultItemContainer = styled.div({
   padding: '9px 12px 9px 18px',
   borderRadius: '0 32px 32px 0',
   cursor: 'pointer',
-  // height: '24px',
-
-  ['> svg']: {
-    width: '11px',
-    height: '11px',
-    cursor: 'pointer',
-    borderRadius: '24px',
-    padding: '4px',
-    [':hover']: {
-      background: theme.colors.grayscale70,
-    },
-  },
+  fontSize: '18px',
 
   [':hover']: {
     background: theme.colors.grayscale100,
-    ['> svg']: {
+    ['svg']: {
       stroke: theme.colors.primary5,
     },
   },
 
   [media[0]]: {
+    fontSize: '15px',
     padding: '6px 9px 6px 12px',
     // height: '18px',
     gap: '8px',
+  },
+});
+
+export const SearchBarResultItemSVG = styled.div({
+  lineHeight: 1,
+  height: 'auto',
+  display: 'flex',
+  alignItems: 'center',
+  ['> svg']: {
+    width: '.9em',
+    height: '.9em',
+    cursor: 'pointer',
+    borderRadius: '24px',
+    [':hover']: {
+      background: theme.colors.grayscale70,
+    },
+  },
+  [media[0]]: {
     ['> svg']: {
-      padding: '2px',
-      width: '16px',
-      height: '16px',
       stroke: theme.colors.primary5,
     },
   },
diff --git a/src/components/SearchBar/SearchBar.tsx b/src/components/SearchBar/SearchBar.tsx
@@ -22,6 +22,7 @@ import {
   SearchBarResultGridContainer,
   SearchBarResultItemContainer,
   SearchBarResultItemKeyword,
+  SearchBarResultItemSVG,
   SearchBarResultItemSubtitle,
   SearchBarResultItemTitle,
   SearchBarResultLayout,
@@ -166,13 +167,15 @@ const SearchBarItemsComponent = ({
                       )}
                     </SearchBarResultItemTitle>
                     {type === 'RECENT' && (
-                      <CancelSVG
-                        onPointerUp={(e) => {
-                          e.preventDefault();
-                          e.stopPropagation();
-                          onItemDelete(item);
-                        }}
-                      />
+                      <SearchBarResultItemSVG>
+                        <CancelSVG
+                          onPointerUp={(e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            onItemDelete(item);
+                          }}
+                        />
+                      </SearchBarResultItemSVG>
                     )}
                     {type === 'SEARCHED' && category == 'KEYWORD' && (
                       <>
diff --git a/src/components/SlideView/SlideView.Style.ts b/src/components/SlideView/SlideView.Style.ts
@@ -41,7 +41,6 @@ export const SlideItemContents = styled.div(
 
 export const SlideItem = styled.div(
   {
-    scrollSnapAlign: 'center',
     position: 'absolute',
     top: 0,
     transition: 'left .5s',
@@ -55,13 +54,15 @@ export const SlideItem = styled.div(
   ({ idx, count }: { idx: number; count: number }) => ({
     width: `calc(100%/${count})`,
     left: `calc((100%*${idx / count}))`,
+    scrollSnapAlign: idx % count == Math.floor(count / 2) ? 'center' : 'none',
   }),
 );
 
 export const SlideArrowContainer = styled.div(
   {
     position: 'relative',
     width: '100%',
+    height: '10px',
   },
   ({ visible }: { visible: boolean }) => ({
     display: visible ? 'block' : 'none',
@@ -72,7 +73,7 @@ export const SlideArrowContents = styled.div(
   {
     position: 'absolute',
     top: '18px',
-    right: '0',
+    right: '24px',
     lineHeight: '1',
     display: 'flex',
     alignItems: 'center',
@@ -81,17 +82,18 @@ export const SlideArrowContents = styled.div(
     gap: '4px',
     ['svg']: {
       height: '1.5em',
-      cursor: 'pointer',
       fill: theme.colors.primary0,
     },
   },
   ({ idx, length }: { idx: number; length: number }) => ({
     ['svg']: {
       [':first-of-type']: {
         fill: theme.colors[!idx ? 'grayscale60' : 'primary0'],
+        cursor: !idx ? 'not-allowed' : 'pointer',
       },
       [':last-of-type']: {
-        fill: theme.colors[idx == length ? 'grayscale60' : 'primary0'],
+        fill: theme.colors[idx == length - 1 ? 'grayscale60' : 'primary0'],
+        cursor: idx == length - 1 ? 'not-allowed' : 'pointer',
       },
     },
   }),
diff --git a/src/components/SlideView/SlideView.tsx b/src/components/SlideView/SlideView.tsx
@@ -31,14 +31,18 @@ const SlideView = ({ keyName, list, count }: { keyName: string; list: JSX.Elemen
   const isMobile = useIsMobile();
 
   const scrollToSelected = (selected: number) => {
-    selected = selected < 0 ? 0 : selected > list.length - count ? list.length - count : selected;
+    selected = selected < 0 ? 0 : selected > ~~(list.length / count) - 1 ? ~~(list.length / count) - 1 : selected;
     setSelected(selected);
     containerRef.current?.scrollTo({
-      left: selected * widthRef.current,
+      left: selected * widthRef.current * count,
       behavior: 'smooth',
     });
   };
 
+  const handleScrollEnd = () => {
+    setSelected((containerRef.current?.scrollLeft ?? 0) / widthRef.current / count);
+  };
+
   useEffect(() => {
     if (itemConatinerRef.current) {
       const items = itemConatinerRef.current.children;
@@ -54,6 +58,8 @@ const SlideView = ({ keyName, list, count }: { keyName: string; list: JSX.Elemen
 
     const container = containerRef.current;
     if (!container) return;
+
+    container.onscrollend = handleScrollEnd;
   }, []);
 
   return (
@@ -70,9 +76,8 @@ const SlideView = ({ keyName, list, count }: { keyName: string; list: JSX.Elemen
         </SlideItemContents>
       </SlideItemContainer>
       <SlideArrowContainer visible={!isMobile && list.length > count}>
-        <SlideArrowContents idx={selected} length={list.length - count}>
+        <SlideArrowContents idx={selected} length={list.length / count}>
           <LeftArrowSVG onClick={() => scrollToSelected(selected - 1)} />
-          {`${selected + 1}/${list.length - (count - 1)}`}
           <RightArrowSVG onClick={() => scrollToSelected(selected + 1)} />
         </SlideArrowContents>
       </SlideArrowContainer>
diff --git a/src/layout/Footer/Footer.Style.ts b/src/layout/Footer/Footer.Style.ts
@@ -68,6 +68,7 @@ const FooterButtonItemContainer = styled.div({
   alignItems: 'center',
   color: theme.colors.primary100,
   fontSize: '18px',
+  cursor: 'pointer',
 
   ['img']: {
     height: '1.5em',
@@ -86,11 +87,18 @@ const FooterButtonItemContainer = styled.div({
   },
 });
 
-const FooterIconsContainer = styled.div`
-  display: flex;
-  gap: 12px;
-  align-items: center; // 아이콘 세로 정렬
-`;
+const FooterIconsContainer = styled.div({
+  display: 'flex',
+  gap: '12px',
+  alignItems: 'center',
+  fontSize: '32px',
+  ['svg']: {
+    cursor: 'pointer',
+    height: '1em',
+    width: '1em',
+    fill: 'white',
+  },
+});
 export {
   FooterContainer,
   FooterContents,
diff --git a/src/layout/Footer/Footer.tsx b/src/layout/Footer/Footer.tsx
