feat: 웹 파트 추가 구현사항 개발 (#10)

* feat: fix icon scale in discovery card * feat: add discovery card hover animation * feat: Add DiscoverySummaryAction icons * refactor: Update weather icon to feature * refactor: Add index.ts in icons * feat: Fix background gradient in discovery page * feat: Add webpage grid view in webcam slop list * fix: Fix import order
Nexters · Aug 17, 2024 · c284de6 · c284de6
1 parent 223af70
commit c284de6
Show file tree

Hide file tree

Showing 19 changed files with 399 additions and 51 deletions.
diff --git a/src/features/discovery/ui/weather-icon.tsx b/src/features/discovery/ui/weather-icon.tsx
@@ -0,0 +1,24 @@
+import type { Weather } from '@/entities/discovery/model';
+import { CloudIcon, RainIcon, SnowIcon, SunIcon } from '@/shared/icons';
+
+interface WeatherIconProps {
+  className?: string;
+  weather: Weather;
+}
+
+const WeatherIcon = ({ className, weather }: WeatherIconProps) => {
+  switch (weather) {
+    case 'sun':
+      return <SunIcon className={className} />;
+    case 'cloud':
+      return <CloudIcon className={className} />;
+    case 'rain':
+      return <RainIcon className={className} />;
+    case 'snow':
+      return <SnowIcon className={className} />;
+    default:
+      return null;
+  }
+};
+
+export default WeatherIcon;
diff --git a/src/pages/discovery/ui/discovery-page.tsx b/src/pages/discovery/ui/discovery-page.tsx
@@ -20,7 +20,7 @@ const DiscoveryPageContent = () => {
   if (!discoveryData) return null;
 
   return (
-    <div className={cn('size-full bg-gradient-to-b from-[#8DA3DD/20] to-transparent')}>
+    <div className={cn('size-full bg-gradient-to-b from-[rgba(141,163,221,0.2)] to-transparent')}>
       <Header />
       <DiscoveryList discoveryData={discoveryData} />
     </div>

diff --git a/src/shared/icons/bus.tsx b/src/shared/icons/bus.tsx
@@ -0,0 +1,72 @@
+import React from 'react';
+
+const BusIcon = () => {
+  return (
+    <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M24.1363 23.75H15.8637C15.3867 23.75 15 24.3096 15 25C15 25.6904 15.3867 26.25 15.8637 26.25H24.1363C24.6133 26.25 25 25.6904 25 25C25 24.3096 24.6133 23.75 24.1363 23.75Z"
+        fill="#7280FF"
+      />
+      <path
+        d="M13.3597 28.75H11.6403C10.7344 28.75 10 29.3423 10 30.073V31.177C10 31.9077 10.7344 32.5 11.6403 32.5H13.3597C14.2656 32.5 15 31.9077 15 31.177V30.073C15 29.3423 14.2656 28.75 13.3597 28.75Z"
+        fill="#7280FF"
+      />
+      <path
+        d="M28.3597 28.75H26.6403C25.7344 28.75 25 29.3423 25 30.073V31.177C25 31.9077 25.7344 32.5 26.6403 32.5H28.3597C29.2656 32.5 30 31.9077 30 31.177V30.073C30 29.3423 29.2656 28.75 28.3597 28.75Z"
+        fill="#7280FF"
+      />
+      <path
+        d="M34.1682 15H32.0818C31.6224 15 31.25 15.2333 31.25 15.5212V19.4788C31.25 19.7667 31.6224 20 32.0818 20H34.1682C34.6276 20 35 19.7667 35 19.4788V15.5212C35 15.2333 34.6276 15 34.1682 15Z"
+        fill="#7280FF"
+      />
+      <path
+        d="M7.91824 15H5.83177C5.37239 15 5 15.2333 5 15.5212V19.4788C5 19.7667 5.37239 20 5.83177 20H7.91824C8.37761 20 8.75 19.7667 8.75 19.4788V15.5212C8.75 15.2333 8.37761 15 7.91824 15Z"
+        fill="#7280FF"
+      />
+      <g filter="url(#filter0_b_966_25651)">
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M32.4938 9.88058C32.4938 9.88058 33.1721 5.46729 20.2859 5H19.7008C6.82795 5.41537 7.50616 9.82866 7.50616 9.82866V28.6111C7.50616 28.9795 7.65608 29.3327 7.92293 29.5932C8.18978 29.8537 8.55171 30 8.92909 30H31.0709C31.4483 30 31.8102 29.8537 32.0771 29.5932C32.3439 29.3327 32.4938 28.9795 32.4938 28.6111V9.88058ZM13.75 24.375C13.75 25.4105 12.9105 26.25 11.875 26.25C10.8395 26.25 10 25.4105 10 24.375C10 23.3395 10.8395 22.5 11.875 22.5C12.9105 22.5 13.75 23.3395 13.75 24.375ZM28.125 26.25C29.1605 26.25 30 25.4105 30 24.375C30 23.3395 29.1605 22.5 28.125 22.5C27.0895 22.5 26.25 23.3395 26.25 24.375C26.25 25.4105 27.0895 26.25 28.125 26.25ZM29.9951 11.4045C29.9951 11.4045 30.5377 7.87383 20.2287 7.5H19.7606C9.46236 7.83229 10.0049 11.3629 10.0049 11.3629V17.6389C10.0049 17.9336 10.1249 18.2162 10.3383 18.4246C10.5518 18.6329 10.8414 18.75 11.1433 18.75H28.8567C29.1586 18.75 29.4482 18.6329 29.6617 18.4246C29.8751 18.2162 29.9951 17.9336 29.9951 17.6389V11.4045Z"
+          fill="url(#paint0_linear_966_25651)"
+          fillOpacity="0.3"
+        />
+      </g>
+      <defs>
+        <filter
+          id="filter0_b_966_25651"
+          x="5.5"
+          y="3"
+          width="29"
+          height="29"
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feGaussianBlur in="BackgroundImageFix" stdDeviation="1" />
+          <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_966_25651" />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="effect1_backgroundBlur_966_25651"
+            result="shape"
+          />
+        </filter>
+        <linearGradient
+          id="paint0_linear_966_25651"
+          x1="10.1753"
+          y1="7.30655"
+          x2="37.1595"
+          y2="21.2786"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#7280FF" />
+          <stop offset="0.447036" stopColor="#7280FF" stopOpacity="0.955296" />
+          <stop offset="1" stopColor="#7280FF" stopOpacity="0.9" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+};
+
+export default BusIcon;
diff --git a/src/shared/icons/cloud.tsx b/src/shared/icons/cloud.tsx
@@ -1,8 +1,15 @@
 import React from 'react';
 
-const CloudIcon = () => {
+const CloudIcon = ({ className }: { className?: string }) => {
   return (
-    <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg
+      width="32"
+      height="32"
+      viewBox="0 0 32 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
       <path
         d="M26.3162 11.6821C26.3162 13.6906 24.6881 15.3189 22.6798 15.3189C20.6715 15.3189 19.0435 13.6906 19.0435 11.6821C19.0435 9.67353 20.6715 8.04529 22.6798 8.04529C24.6881 8.04529 26.3162 9.67353 26.3162 11.6821Z"
         fill="#FF9928"

diff --git a/src/shared/icons/index.ts b/src/shared/icons/index.ts
@@ -0,0 +1,12 @@
+export { default as BusIcon } from './bus';
+export { default as CameraIcon } from './camera';
+export { default as CheckIcon } from './check';
+export { default as ChevronLeftIcon } from './chevron-left';
+export { default as CloseIcon } from './close';
+export { default as CloudIcon } from './cloud';
+export { default as LiftIcon } from './lift';
+export { default as RainIcon } from './rain';
+export { default as ShareIcon } from './share';
+export { default as SnowIcon } from './snow';
+export { default as SunIcon } from './sun';
+export { default as VoteIcon } from './vote';
diff --git a/src/shared/icons/lift.tsx b/src/shared/icons/lift.tsx
@@ -0,0 +1,70 @@
+import React from 'react';
+
+const LiftIcon = () => {
+  return (
+    <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M18.75 7.5C18.75 6.80964 19.3096 6.25 20 6.25V6.25C20.6904 6.25 21.25 6.80964 21.25 7.5V10.625C21.25 11.3154 20.6904 11.875 20 11.875V11.875C19.3096 11.875 18.75 11.3154 18.75 10.625V7.5Z"
+        fill="#7280FF"
+      />
+      <circle cx="15.2767" cy="19.1668" r="2.08333" fill="#7280FF" />
+      <path
+        d="M11.8047 24.139C11.8047 23.3106 12.4763 22.639 13.3047 22.639H17.2491C18.0776 22.639 18.7491 23.3106 18.7491 24.139V26.1113C18.7491 28.0289 17.1946 29.5835 15.2769 29.5835V29.5835C13.3593 29.5835 11.8047 28.0289 11.8047 26.1113V24.139Z"
+        fill="#7280FF"
+      />
+      <rect x="15.9707" y="26.8057" width="2.77778" height="6.94444" rx="1.38889" fill="#7280FF" />
+      <rect x="11.8047" y="26.8057" width="2.77778" height="6.94444" rx="1.38889" fill="#7280FF" />
+      <circle cx="24.722" cy="19.1665" r="2.08333" fill="#7280FF" />
+      <path
+        d="M21.25 24.1387C21.25 23.3102 21.9216 22.6387 22.75 22.6387H26.6944C27.5229 22.6387 28.1944 23.3102 28.1944 24.1387V26.1109C28.1944 28.0285 26.6399 29.5831 24.7222 29.5831V29.5831C22.8046 29.5831 21.25 28.0286 21.25 26.1109V24.1387Z"
+        fill="#7280FF"
+      />
+      <rect x="25.416" y="26.8053" width="2.77778" height="6.94444" rx="1.38889" fill="#7280FF" />
+      <rect x="21.25" y="26.8053" width="2.77778" height="6.94444" rx="1.38889" fill="#7280FF" />
+      <g filter="url(#filter0_b_966_25666)">
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M10.1669 10C8.95658 10 7.93233 10.8475 7.7688 11.9842L6.28553 23.4079C5.97413 25.5724 7.74921 27.5 10.054 27.5H29.9459C32.2734 27.5 34.055 25.5362 33.7063 23.3549L32.0613 11.9504C31.882 10.829 30.865 10 29.6683 10H10.1669ZM10.1669 11.9664C9.99399 11.9664 9.84767 12.0875 9.82431 12.2498L8.34104 23.6736C8.19949 24.6574 9.00635 25.5336 10.054 25.5336H29.9459C31.0039 25.5336 31.8137 24.641 31.6552 23.6495L30.0102 12.245C29.9846 12.0848 29.8393 11.9664 29.6683 11.9664H10.1669Z"
+          fill="url(#paint0_linear_966_25666)"
+          fillOpacity="0.3"
+        />
+      </g>
+      <defs>
+        <filter
+          id="filter0_b_966_25666"
+          x="5.25"
+          y="9"
+          width="29.5"
+          height="19.5"
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feGaussianBlur in="BackgroundImageFix" stdDeviation="0.5" />
+          <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_966_25666" />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="effect1_backgroundBlur_966_25666"
+            result="shape"
+          />
+        </filter>
+        <linearGradient
+          id="paint0_linear_966_25666"
+          x1="9.1928"
+          y1="11.3753"
+          x2="30.6395"
+          y2="30.0115"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#7280FF" />
+          <stop offset="0.447036" stopColor="#7280FF" stopOpacity="0.955296" />
+          <stop offset="1" stopColor="#7280FF" stopOpacity="0.9" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+};
+
+export default LiftIcon;
diff --git a/src/shared/icons/rain.tsx b/src/shared/icons/rain.tsx
@@ -1,8 +1,15 @@
 import React from 'react';
 
-const RainIcon = () => {
+const RainIcon = ({ className }: { className?: string }) => {
   return (
-    <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg
+      width="32"
+      height="32"
+      viewBox="0 0 32 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
       <path
         d="M9.69617 17.9848C10.0204 17.4409 10.7384 17.2546 11.3 17.5686C11.8615 17.8826 12.0539 18.578 11.7297 19.1219L7.62049 26.0152C7.29628 26.5591 6.57823 26.7454 6.01669 26.4314C5.45514 26.1174 5.26274 25.422 5.58695 24.8781L9.69617 17.9848Z"
         fill="#4D44FF"

diff --git a/src/shared/icons/snow.tsx b/src/shared/icons/snow.tsx
@@ -1,8 +1,15 @@
 import React from 'react';
 
-const SnowIcon = () => {
+const SnowIcon = ({ className }: { className?: string }) => {
   return (
-    <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg
+      width="32"
+      height="32"
+      viewBox="0 0 32 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
       <path
         fillRule="evenodd"
         clipRule="evenodd"

diff --git a/src/shared/icons/sun.tsx b/src/shared/icons/sun.tsx
@@ -1,8 +1,15 @@
 import React from 'react';
 
-const SunIcon = () => {
+const SunIcon = ({ className }: { className?: string }) => {
   return (
-    <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg
+      width="32"
+      height="32"
+      viewBox="0 0 32 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
       <path
         d="M26.3162 11.6821C26.3162 13.6906 24.6881 15.3189 22.6798 15.3189C20.6715 15.3189 19.0435 13.6906 19.0435 11.6821C19.0435 9.67353 20.6715 8.04529 22.6798 8.04529C24.6881 8.04529 26.3162 9.67353 26.3162 11.6821Z"
         fill="#FF9928"