Merge branch 'main' into 93-feature/mapmodal-component

package.json

@@ -22,6 +22,8 @@
     "react-kakao-maps-sdk": "^1.1.27",
     "react-loader-spinner": "^6.1.6",
     "react-router-dom": "^6.26.2",
+    "react-slick": "^0.30.2",
+    "slick-carousel": "^1.8.1",
     "styled-components": "^6.1.13",
     "vite-tsconfig-paths": "^5.0.1",
     "xml-js": "^1.6.11",
@@ -31,6 +33,7 @@
     "@eslint/js": "^9.9.0",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
+    "@types/react-slick": "^0.23.13",
     "@types/styled-components": "^5.1.34",
     "@typescript-eslint/eslint-plugin": "^8.7.0",
     "@typescript-eslint/parser": "^8.7.0",

src/components/Loader/index.tsx

@@ -1,6 +1,11 @@
+import * as S from './styles';
 import theme from '@/styles/theme';
 import { FidgetSpinnerProps, ThreeDots } from 'react-loader-spinner';
 
 export const Loader = ({ ...rest }: FidgetSpinnerProps) => {
-  return <ThreeDots color={theme.colors.primary} {...rest} />;
+  return (
+    <S.LoaderWrapper>
+      <ThreeDots color={theme.colors.primary} {...rest} />
+    </S.LoaderWrapper>
+  );
 };

src/components/Loader/styles.ts

@@ -0,0 +1,9 @@
+import { styled } from 'styled-components';
+
+export const LoaderWrapper = styled.div`
+  height: calc(100vh - 63px);
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;

src/components/PCard/index.tsx

@@ -1,22 +1,16 @@
 import * as S from './styles';
 import { H16, P15 } from '@/components/Text';
 import { Poster } from '@/components/Poster';
-import { CommonResponseType } from '@/types/apis';
+import { PItemType } from '@/types/pItem';
 
-interface PCardProps {
-  pInfo: Pick<CommonResponseType, 'mt20id' | 'poster' | 'prfnm' | 'fcltynm' | 'prfpdfrom' | 'prfpdto'>;
-  width?: string;
-  rank?: number | null;
-}
-
-export const PCard = ({ pInfo, width = '225px', rank = null }: PCardProps) => {
+export const PCard = ({ id, posterUrl, name, facility, period, rank, width = '225px' }: PItemType) => {
   return (
     <S.PCard width={width}>
-      <Poster src={pInfo.poster} rank={rank}></Poster>
+      <Poster src={posterUrl} rank={rank} />
       <S.PCardText>
-        <H16>{pInfo.prfnm}</H16>
-        <P15>{pInfo.fcltynm}</P15>
-        <P15>{pInfo.prfpdfrom + '-' + pInfo.prfpdto}</P15>
+        <H16>{name}</H16>
+        <P15>{facility}</P15>
+        <P15>{period}</P15>
       </S.PCardText>
     </S.PCard>
   );

src/components/PCardGrid/index.tsx

@@ -1,29 +1,20 @@
 import { PCard } from '@/components/PCard';
 import * as S from './styles';
-import { CommonResponseType } from '@/types/apis';
+import { PItemType } from '@/types/pItem';
 
 interface PCardGridProps {
-  pList: Pick<CommonResponseType, 'mt20id' | 'poster' | 'prfnm' | 'fcltynm' | 'prfpdfrom' | 'prfpdto'>[];
+  pList: PItemType[];
   width?: string;
   rows?: number;
   columns?: number;
   gap?: number;
-  isRanked?: boolean;
 }
 
-export const PCardGrid = ({
-  pList,
-  width = '600px',
-  rows = 1,
-  columns = 5,
-  gap = 10,
-  isRanked = false,
-}: PCardGridProps) => {
-  console.log(typeof pList);
+export const PCardGrid = ({ pList, width = '600px', rows = 1, columns = 5, gap = 10 }: PCardGridProps) => {
   return (
     <S.PCardGrid width={width} rows={rows} columns={columns} gap={gap}>
       {pList.map((perform, index) => (
-        <PCard key={index} pInfo={perform} width="100%" {...(isRanked && { rank: index + 1 })}></PCard>
+        <PCard key={index} {...perform} width="100%" rank={index + 1}></PCard>
       ))}
     </S.PCardGrid>
   );

src/components/PCardSlider/index.tsx

@@ -0,0 +1,33 @@
+import Slider from 'react-slick';
+import 'slick-carousel/slick/slick.css';
+import 'slick-carousel/slick/slick-theme.css';
+import * as S from './styles';
+// import { CommonResponseType } from '@/types/apis';
+import { PCard } from '@/components/PCard';
+import { PItemType } from '@/types/pItem';
+
+interface PCardSliderProps {
+  pList: PItemType[];
+  width?: string;
+}
+
+export const PCardSlider = ({ pList, width = '100%' }: PCardSliderProps) => {
+  const settings = {
+    infinite: true,
+    speed: 500,
+    slidesToShow: 5,
+    slidesToScroll: 1,
+    swipeToSlide: true,
+  };
+  const widthType = width.match(/[^0-9]/g)?.join('');
+  const PCardWidth = widthType === '%' ? '98%' : `calc(${width} / 5.2)`;
+  return (
+    <S.PCardSlider width={width}>
+      <Slider {...settings}>
+        {pList.map((perform, index) => {
+          return <PCard key={index} {...perform} width={PCardWidth} />;
+        })}
+      </Slider>
+    </S.PCardSlider>
+  );
+};

src/components/PCardSlider/styles.ts

@@ -0,0 +1,9 @@
+import { styled } from 'styled-components';
+
+export const PCardSlider = styled.div<{ width: string }>`
+  width: ${({ width }) => width};
+  .slick-prev::before,
+  .slick-next::before {
+    color: ${({ theme }) => theme.colors.gray};
+  }
+`;

src/components/PosterOverlay/index.tsx

@@ -0,0 +1,15 @@
+import * as S from './styles';
+import { P16 } from '@/components/Text';
+
+interface PosterOverlayProps {
+  text: string;
+  width?: string;
+}
+
+export const PosterOverlay = ({ text, width = '100%' }: PosterOverlayProps) => {
+  return (
+    <S.PosterOverlay width={width}>
+      <P16>{text}</P16>
+    </S.PosterOverlay>
+  );
+};

src/components/PosterOverlay/styles.ts

@@ -0,0 +1,8 @@
+import { styled } from 'styled-components';
+
+export const PosterOverlay = styled.div<{ width: string }>`
+  padding: 2rem 0;
+  width: ${({ width }) => width};
+  text-align: center;
+  background-color: rgba(0, 0, 0, 0.3);
+`;

src/hooks/useFetch.ts

@@ -1,3 +1,4 @@
+import { useCacheStore } from '@/store/useCacheStore';
 import replaceTextProperties from '@/utils/extractInnermostValues';
 import { useEffect, useState } from 'react';
 import { xml2json } from 'xml-js';
@@ -11,14 +12,22 @@ import { xml2json } from 'xml-js';
 export default function useFetch<T>(url: string) {
   const [data, setData] = useState<T>();
   const [isLoading, setIsLoading] = useState(false);
+  const { caches, registerCache } = useCacheStore(state => state);
+
   useEffect(() => {
+    if (caches[url]) {
+      setData(caches[url].data as T);
+      return;
+    }
     const fetchData = async () => {
       setIsLoading(true);
       try {
         const response = await fetch(url);
         const xmlText = await response.text();
         const jsonData = JSON.parse(xml2json(xmlText, { compact: true, spaces: 2 }));
-        setData(replaceTextProperties<T>(jsonData));
+        const parsedData = replaceTextProperties<T>(jsonData);
+        setData(parsedData);
+        registerCache(url, parsedData);
       } catch (error) {
         console.error('Error fetching data:', error);
       } finally {
@@ -27,7 +36,7 @@ export default function useFetch<T>(url: string) {
     };
 
     fetchData();
-  }, [url]);
+  }, [url, caches, registerCache]);
 
   return { data, isLoading };
 }