강수확률 이미지 및 time selector 모바일 오류 수정 (#71)

* fix: 모바일 time selector 버그 수정

* fix: 강수확률 이미지 수정

* refactor: 대표 기온 이미지 로직 리팩토링

* refactor: 강수량 이미지 로직 리팩토링

* remove: 사용하지 않는 파일 제거

src/assets/pcpImage/pcpImage.ts

@@ -0,0 +1,11 @@
+import PClear from '@/assets/pcpImage/PClear.svg?react';
+import PRain from '@/assets/pcpImage/PRain.svg?react';
+import PRaindrop from '@/assets/pcpImage/PRaindrop.svg?react';
+
+const PcpImage = {
+  PClear,
+  PRain,
+  PRaindrop,
+};
+
+export default PcpImage;

src/assets/popImage/popImage.ts

@@ -0,0 +1,27 @@
+import Pop_0 from '@/assets/popImage/Pop_0.svg?react';
+import Pop_10 from '@/assets/popImage/Pop_10.svg?react';
+import Pop_20 from '@/assets/popImage/Pop_20.svg?react';
+import Pop_30 from '@/assets/popImage/Pop_30.svg?react';
+import Pop_40 from '@/assets/popImage/Pop_40.svg?react';
+import Pop_50 from '@/assets/popImage/Pop_50.svg?react';
+import Pop_60 from '@/assets/popImage/Pop_60.svg?react';
+import Pop_70 from '@/assets/popImage/Pop_70.svg?react';
+import Pop_80 from '@/assets/popImage/Pop_80.svg?react';
+import Pop_90 from '@/assets/popImage/Pop_90.svg?react';
+import Pop_100 from '@/assets/popImage/Pop_100.svg?react';
+
+const PopImage = {
+  Pop_0,
+  Pop_10,
+  Pop_20,
+  Pop_30,
+  Pop_40,
+  Pop_50,
+  Pop_60,
+  Pop_70,
+  Pop_80,
+  Pop_90,
+  Pop_100,
+};
+
+export default PopImage;

src/assets/tempImage/tempImage.ts

@@ -0,0 +1,15 @@
+import Cold from '@/assets/tempImage/Cold.svg?react';
+import Cool from '@/assets/tempImage/Cool.svg?react';
+import Hot from '@/assets/tempImage/Hot.svg?react';
+import Moderate from '@/assets/tempImage/Moderate.svg?react';
+import Warm from '@/assets/tempImage/Warm.svg?react';
+
+const TempImage = {
+  Cold,
+  Cool,
+  Hot,
+  Moderate,
+  Warm,
+};
+
+export default TempImage;

src/pages/Home/components/TimeCarousel.style.ts

@@ -37,6 +37,7 @@ const Item = styled.li`
   height: ${ITEM_HEIGHT}px;
   color: ${({ theme }) => theme.colors.text.secondary};
   text-align: center;
+  touch-action: none;
 
   &.is-active {
     color: ${({ theme }) => theme.colors.text.primary};

src/pages/Home/components/TimeCarousel.tsx

@@ -27,8 +27,8 @@ const TimeCarousel = ({
   const itemsRef = useRef<Array<HTMLElement | null>>([]);
 
   const handleDragging = (e: React.PointerEvent) => {
-    e.preventDefault();
     if (!carouselRef.current || !isDragging) return;
+    e.preventDefault();
 
     const positionDiff = e.pageY - prevPageY;
     carouselRef.current.scrollTop = prevScrollTop - positionDiff;
@@ -41,57 +41,61 @@ const TimeCarousel = ({
 
   const handleDragStart = (e: React.PointerEvent) => {
     if (!carouselRef.current) return;
+    e.preventDefault();
     setIsDragging(true);
     setPrevPageY(e.pageY);
     setPrevScrollTop(carouselRef.current.scrollTop);
   };
 
-  const handleDragStop = () => {
+  const handleDragStop = (e: React.PointerEvent) => {
+    e.preventDefault();
     setIsDragging(false);
     setUserSelected(times[currentIndex]);
     updateSelectedTime(type, times[currentIndex]);
     itemsRef.current[currentIndex]?.scrollIntoView({
-      behavior: 'smooth',
       block: 'center',
     });
   };
 
   useEffect(() => {
-    let index = 0;
-    if (type === 'end') {
-      const selectedIndex = times.indexOf(userSelected);
-      index = selectedIndex >= 0 ? selectedIndex : 0;
-    }
+    const selectedIndex = times.indexOf(userSelected);
+    const index = selectedIndex >= 0 ? selectedIndex : 0;
 
     setCurrentIndex(index);
     updateSelectedTime(type, times[index]);
     itemsRef.current[index]?.scrollIntoView({
-      behavior: 'smooth',
       block: 'center',
     });
-  }, [times]);
+  }, [times, userSelected]);
 
   return (
-    <S.Carousel
-      ref={carouselRef}
-      onPointerMove={handleDragging}
-      onPointerDown={handleDragStart}
-      onPointerUp={handleDragStop}
-      onPointerLeave={handleDragStop}
-    >
-      {times.map((time, index) => (
-        <S.Item
-          key={time}
-          className={`${currentIndex === index && 'is-active'}`}
-          data-index={index}
-          ref={(el) => {
-            itemsRef.current[index] = el;
-          }}
-        >
-          {time}
-        </S.Item>
-      ))}
-    </S.Carousel>
+    <>
+      {/* {
+        <div>
+          {userSelected} {currentIndex}
+        </div>
+      } */}
+      <S.Carousel
+        ref={carouselRef}
+        onPointerMove={handleDragging}
+        onPointerDown={handleDragStart}
+        onPointerUp={handleDragStop}
+        onPointerLeave={handleDragStop}
+      >
+        {times.map((time, index) => (
+          <S.Item
+            key={time}
+            className={`${currentIndex === index && 'is-active'}`}
+            data-index={index}
+            ref={(el) => {
+              itemsRef.current[index] = el;
+            }}
+          >
+            {time}
+          </S.Item>
+        ))}
+      </S.Carousel>
+    </>
   );
 };
 

src/pages/Home/components/weather/WeatherCard.tsx

@@ -1,8 +1,8 @@
-import handlePoP from './HandlePop';
-import HandlePcP from './HandlePcp';
-import HandleTemp from './HandleTemp';
 import { C, S } from './WeatherCard.style';
 import { WeatherResponse } from '@/types/weather';
+import PopImage from '@/assets/popImage/popImage';
+import TempImage from '@/assets/tempImage/tempImage';
+import PcpImage from '@/assets/pcpImage/pcpImage';
 
 type WeatherCardProps = Partial<
   Pick<WeatherResponse['data'], 'extremumTmp' | 'maximumPop' | 'maximumPcp'>
@@ -13,33 +13,24 @@ const WeatherCard = ({
   maximumPop = 0,
   maximumPcp = 0,
 }: WeatherCardProps) => {
-  //대표 기온 가져오기
-  const TempImage = HandleTemp(extremumTmp);
-
-  //외출 시간의 최대 강수확률 가져오기
-  const PopImage = handlePoP(maximumPop);
-
-  //외출 시간의 강수량 가져오기
-  const PcpImage = HandlePcP(maximumPcp);
-
   return (
     <div>
       <C.WeatherCard>
         <C.CustomPaper>
           <S.SubTitle>외출할 때 꼭 필요한 날씨 정보</S.SubTitle>
           <S.CustomCardContent>
             <S.CustomCardHeader>
-              <C.Icon>{TempImage}</C.Icon>
+              <C.Icon>{getTempImage(extremumTmp)}</C.Icon>
               <S.Header>{extremumTmp}°C</S.Header>
               <S.Subheader>{getTempText()}</S.Subheader>
             </S.CustomCardHeader>
             <S.CustomCardHeader>
-              <C.Icon>{PopImage}</C.Icon>
+              <C.Icon>{getPopImage(maximumPop)}</C.Icon>
               <S.Header>{maximumPop}%</S.Header>
               <S.Subheader>강수확률</S.Subheader>
             </S.CustomCardHeader>
             <S.CustomCardHeader>
-              <C.Icon>{PcpImage}</C.Icon>
+              <C.Icon>{getPcpImage(maximumPcp)}</C.Icon>
               <S.Header>{maximumPcp}mm</S.Header>
               <S.Subheader>강수량</S.Subheader>
             </S.CustomCardHeader>
@@ -73,3 +64,31 @@ function getTempText() {
 
   return `${text} 기온`;
 }
+
+function getTempImage(extremumTmp: number) {
+  if (extremumTmp <= 16) return <TempImage.Cold />;
+  if (extremumTmp <= 19) return <TempImage.Cool />;
+  if (extremumTmp <= 22) return <TempImage.Moderate />;
+  if (extremumTmp <= 27) return <TempImage.Warm />;
+  return <TempImage.Hot />;
+}
+
+function getPopImage(maximumPop: number) {
+  if (maximumPop <= 0) return <PopImage.Pop_0 />;
+  if (maximumPop < 20) return <PopImage.Pop_10 />;
+  if (maximumPop < 30) return <PopImage.Pop_20 />;
+  if (maximumPop < 40) return <PopImage.Pop_30 />;
+  if (maximumPop < 50) return <PopImage.Pop_40 />;
+  if (maximumPop < 60) return <PopImage.Pop_50 />;
+  if (maximumPop < 70) return <PopImage.Pop_60 />;
+  if (maximumPop < 80) return <PopImage.Pop_70 />;
+  if (maximumPop < 90) return <PopImage.Pop_80 />;
+  if (maximumPop < 100) return <PopImage.Pop_90 />;
+  return <PopImage.Pop_100 />;
+}
+
+function getPcpImage(maximumPcp: number) {
+  if (maximumPcp <= 0) return <PcpImage.PClear />;
+  if (maximumPcp < 3) return <PcpImage.PRaindrop />;
+  return <PcpImage.PRain />;
+}