refactor: 검색 키워드 컴포넌트 통합

src/components/RealTimeKeyword/RealTimeKeyword.style.ts

@@ -0,0 +1,108 @@
+import { ListItem, Typo } from '@yourssu/design-system-react';
+import styled from 'styled-components';
+
+interface StyledContainerProps {
+  containerPadding: string;
+  containerWidth: string;
+  containerHeight: string;
+}
+export const StyledContainer = styled.div<StyledContainerProps>`
+  position: relative;
+  padding: ${(prop: StyledContainerProps) => prop.containerPadding};
+  width: ${(prop: StyledContainerProps) => prop.containerWidth};
+  height: ${(prop: StyledContainerProps) => prop.containerHeight};
+  border-radius: 0.75rem;
+  border: 1px solid ${({ theme }) => theme.color.borderNormal};
+  background: ${({ theme }) => theme.color.bgNormal};
+`;
+
+interface StyledTitleContainerProps {
+  titleContainerPadding: string;
+  titleContainerMarginBottom: string;
+}
+
+export const StyledTitleContainer = styled.div<StyledTitleContainerProps>`
+  padding: ${(prop: StyledTitleContainerProps) => prop.titleContainerPadding};
+  margin-bottom: ${(prop: StyledTitleContainerProps) => prop.titleContainerMarginBottom};
+`;
+
+export const StyledTitle = styled.div`
+  margin-bottom: 0.5rem;
+  color: ${({ theme }) => theme.color.textPrimary};
+  ${({ theme }) => theme.typo.subtitle3};
+`;
+
+interface StyledUpdateDateProps {
+  updateDateTypo: Typo;
+}
+
+export const StyledUpdateDate = styled.div<StyledUpdateDateProps>`
+  color: ${({ theme }) => theme.color.textTertiary};
+  ${({ theme, updateDateTypo }) => theme.typo[updateDateTypo]};
+`;
+
+interface StyledListProps {
+  columnCount: number;
+}
+
+export const StyledList = styled.div<StyledListProps>`
+  display: grid;
+  grid-template-rows: ${(props) => `repeat(${10 / props.columnCount}, 1fr)`};
+  grid-template-columns: ${(props) => `repeat(${props.columnCount}, 1fr)`};
+  grid-auto-flow: column;
+  grid-column-gap: 0.5rem;
+`;
+
+export const StyledListItem = styled(ListItem)`
+  padding: 0.625rem 0.75rem;
+`;
+
+interface StyledRankProps {
+  $rank: number;
+}
+
+export const StyledListItemRanking = styled.span<StyledRankProps>`
+  color: ${(prop) => (prop.$rank < 4 ? '#8a2ac5' : '#8E9398')};
+  font-family: 'Spoqa Han Sans Neo';
+  font-size: 1.125rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 130%;
+`;
+
+interface StyledListItemKeywordProps {
+  keywordWidth: string;
+}
+
+export const StyledListItemKeyword = styled.p<StyledListItemKeywordProps>`
+  width: ${(prop: StyledListItemKeywordProps) => prop.keywordWidth};
+  color: ${({ theme }) => theme.color.textPrimary};
+  ${({ theme }) => theme.typo.body1};
+
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
+interface StyledImageProps {
+  imageWidth: string;
+  imageHeight: string;
+  imageTop: string;
+  imageRight: string;
+}
+
+export const StyledImage = styled.img<StyledImageProps>`
+  width: ${(prop: StyledImageProps) => prop.imageWidth};
+  height: ${(prop: StyledImageProps) => prop.imageHeight};
+
+  position: absolute;
+  right: ${(prop: StyledImageProps) => prop.imageRight};
+  top: ${(prop: StyledImageProps) => prop.imageTop};
+`;
+
+export type RealTimeKeywordStyleProps = StyledContainerProps &
+  StyledTitleContainerProps &
+  StyledUpdateDateProps &
+  StyledListProps &
+  StyledListItemKeywordProps &
+  StyledImageProps;

src/components/RealTimeKeyword/RealTimeKeyword.tsx

@@ -0,0 +1,136 @@
+import { Suspense } from 'react';
+
+import { IcSearchLine, IconContext } from '@yourssu/design-system-react';
+import { Link } from 'react-router-dom';
+
+import RealTimeKeywordImage from '@/assets/realTimeKeyword.webp';
+import {
+  StyledContainer,
+  StyledTitleContainer,
+  StyledImage,
+  StyledTitle,
+  StyledUpdateDate,
+  StyledList,
+  StyledListItemRanking,
+  StyledListItemKeyword,
+  StyledListItem,
+  RealTimeKeywordStyleProps,
+} from '@/components/RealTimeKeyword/RealTimeKeyword.style.ts';
+import { useGetRealTimeKeyword } from '@/search/hooks/useGetRealTimeKeyword.ts';
+import { formatDateTime } from '@/utils/formatDateTime.ts';
+
+type VariantType = 'home' | 'search';
+
+const variantStyles: { [key in VariantType]: RealTimeKeywordStyleProps } = {
+  home: {
+    containerPadding: '1rem',
+    containerWidth: '32.5rem',
+    containerHeight: 'auto',
+    titleContainerPadding: '0.3125rem 0.5rem',
+    titleContainerMarginBottom: '0.5rem',
+    updateDateTypo: 'caption2',
+    columnCount: 2,
+    keywordWidth: '7.375rem',
+    imageWidth: '10.3125rem',
+    imageHeight: '6.875rem',
+    imageTop: '-1.125rem',
+    imageRight: '0.9375rem',
+  },
+  search: {
+    containerPadding: '1.25rem',
+    containerWidth: '25rem',
+    containerHeight: '38.7rem',
+    titleContainerPadding: '0.5rem',
+    titleContainerMarginBottom: '0.75rem',
+    updateDateTypo: 'body3',
+    columnCount: 1,
+    keywordWidth: 'auto',
+    imageWidth: '12.6875rem',
+    imageHeight: '8.5rem',
+    imageTop: '-3.125rem',
+    imageRight: '0',
+  },
+};
+
+interface RealTimeKeywordProps {
+  variant: VariantType;
+}
+
+export const RealTimeKeyword = ({ variant }: RealTimeKeywordProps) => {
+  const { data } = useGetRealTimeKeyword();
+  const {
+    containerPadding,
+    containerWidth,
+    containerHeight,
+    titleContainerPadding,
+    titleContainerMarginBottom,
+    updateDateTypo,
+    columnCount,
+    keywordWidth,
+    imageWidth,
+    imageHeight,
+    imageTop,
+    imageRight,
+  } = variantStyles[variant];
+
+  return (
+    <StyledContainer
+      containerPadding={containerPadding}
+      containerWidth={containerWidth}
+      containerHeight={containerHeight}
+    >
+      <Suspense
+        fallback={
+          <StyledUpdateDate updateDateTypo={updateDateTypo}>연결 중입니다.</StyledUpdateDate>
+        }
+      >
+        <StyledTitleContainer
+          titleContainerPadding={titleContainerPadding}
+          titleContainerMarginBottom={titleContainerMarginBottom}
+        >
+          <StyledTitle>
+            숨쉬듯이
+            <br />
+            검색한 키워드
+          </StyledTitle>
+          <StyledUpdateDate
+            updateDateTypo={updateDateTypo}
+          >{`${formatDateTime(data.basedTime)} 기준`}</StyledUpdateDate>
+        </StyledTitleContainer>
+        <StyledImage
+          imageHeight={imageHeight}
+          imageWidth={imageWidth}
+          imageRight={imageRight}
+          imageTop={imageTop}
+          src={RealTimeKeywordImage}
+          alt="뿌슝이"
+        />
+        <StyledList columnCount={columnCount}>
+          {data.queries.map((value, index) => (
+            <Link key={value.query} to={`/search?query=${value.query}`}>
+              <StyledListItem
+                key={value.query}
+                leftIcon={
+                  <StyledListItemRanking $rank={index + 1}>{index + 1}</StyledListItemRanking>
+                }
+                rightIcon={
+                  <IconContext.Provider
+                    value={{
+                      color: '#8A2AC5',
+                    }}
+                  >
+                    <IcSearchLine />
+                  </IconContext.Provider>
+                }
+              >
+                <StyledListItemKeyword keywordWidth={keywordWidth}>
+                  {value.query}
+                </StyledListItemKeyword>
+              </StyledListItem>
+            </Link>
+          ))}
+        </StyledList>
+      </Suspense>
+    </StyledContainer>
+  );
+};