From c284de6c5ff8e314afd33501337bb9ef5b28fd36 Mon Sep 17 00:00:00 2001 From: NAJEONG KIM <73640737+Najeong-Kim@users.noreply.github.com> Date: Sun, 18 Aug 2024 00:18:35 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20=EC=9B=B9=20=ED=8C=8C=ED=8A=B8=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80=20=EA=B5=AC=ED=98=84=EC=82=AC=ED=95=AD=20?= =?UTF-8?q?=EA=B0=9C=EB=B0=9C=20(#10)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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 --- src/features/discovery/ui/weather-icon.tsx | 24 +++ src/pages/discovery/ui/discovery-page.tsx | 2 +- src/shared/icons/bus.tsx | 72 +++++++++ src/shared/icons/cloud.tsx | 11 +- src/shared/icons/index.ts | 12 ++ src/shared/icons/lift.tsx | 70 +++++++++ src/shared/icons/rain.tsx | 11 +- src/shared/icons/snow.tsx | 11 +- src/shared/icons/sun.tsx | 11 +- src/shared/icons/vote.tsx | 137 ++++++++++++++++++ .../discovery-detail/ui/discovery-content.tsx | 1 + .../ui/discovery-summary-action.tsx | 8 +- .../discovery-detail/ui/discovery-summary.tsx | 15 +- .../discovery-detail/ui/vote-dialog.tsx | 2 +- src/widgets/discovery/ui/discovery-card.tsx | 9 +- src/widgets/discovery/ui/weather-icon.tsx | 22 --- src/widgets/discovery/ui/weekly-weather.tsx | 2 +- src/widgets/header/ui/header.tsx | 3 +- src/widgets/webcam/ui/webcam-slop-list.tsx | 27 ++++ 19 files changed, 399 insertions(+), 51 deletions(-) create mode 100644 src/features/discovery/ui/weather-icon.tsx create mode 100644 src/shared/icons/bus.tsx create mode 100644 src/shared/icons/index.ts create mode 100644 src/shared/icons/lift.tsx create mode 100644 src/shared/icons/vote.tsx delete mode 100644 src/widgets/discovery/ui/weather-icon.tsx diff --git a/src/features/discovery/ui/weather-icon.tsx b/src/features/discovery/ui/weather-icon.tsx new file mode 100644 index 0000000..df60e1b --- /dev/null +++ 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 ; + case 'cloud': + return ; + case 'rain': + return ; + case 'snow': + return ; + default: + return null; + } +}; + +export default WeatherIcon; diff --git a/src/pages/discovery/ui/discovery-page.tsx b/src/pages/discovery/ui/discovery-page.tsx index 98e7a15..c4ea629 100644 --- 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 ( -
+
diff --git a/src/shared/icons/bus.tsx b/src/shared/icons/bus.tsx new file mode 100644 index 0000000..575fbcc --- /dev/null +++ b/src/shared/icons/bus.tsx @@ -0,0 +1,72 @@ +import React from 'react'; + +const BusIcon = () => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +export default BusIcon; diff --git a/src/shared/icons/cloud.tsx b/src/shared/icons/cloud.tsx index 6314883..a990302 100644 --- 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 ( - + { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +export default LiftIcon; diff --git a/src/shared/icons/rain.tsx b/src/shared/icons/rain.tsx index 2d3c6ab..07ccc34 100644 --- 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 ( - + { +const SnowIcon = ({ className }: { className?: string }) => { return ( - + { +const SunIcon = ({ className }: { className?: string }) => { return ( - + { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +export default VoteIcon; diff --git a/src/widgets/discovery-detail/ui/discovery-content.tsx b/src/widgets/discovery-detail/ui/discovery-content.tsx index e490ddb..7cea65e 100644 --- a/src/widgets/discovery-detail/ui/discovery-content.tsx +++ b/src/widgets/discovery-detail/ui/discovery-content.tsx @@ -32,6 +32,7 @@ const DiscoveryContent = () => { ({ ...item, isWebcam: !!item.webcam, diff --git a/src/widgets/discovery-detail/ui/discovery-summary-action.tsx b/src/widgets/discovery-detail/ui/discovery-summary-action.tsx index 3dda8af..9a31244 100644 --- a/src/widgets/discovery-detail/ui/discovery-summary-action.tsx +++ b/src/widgets/discovery-detail/ui/discovery-summary-action.tsx @@ -1,20 +1,20 @@ -import SnowIcon from '@/shared/icons/snow'; import { cn } from '@/shared/lib'; interface DiscoverySummaryActionProps { name: string; title: string; - onClick: () => void; + icon: React.ReactNode; + onClick?: () => void; } -const DiscoverySummaryAction = ({ name, title, onClick }: DiscoverySummaryActionProps) => { +const DiscoverySummaryAction = ({ name, title, icon, onClick }: DiscoverySummaryActionProps) => { return (
- + {icon}

{title}

); diff --git a/src/widgets/discovery-detail/ui/discovery-summary.tsx b/src/widgets/discovery-detail/ui/discovery-summary.tsx index 56d6eb0..3a41ac6 100644 --- a/src/widgets/discovery-detail/ui/discovery-summary.tsx +++ b/src/widgets/discovery-detail/ui/discovery-summary.tsx @@ -1,9 +1,9 @@ import { useCallback } from 'react'; +import WeatherIcon from '@/features/discovery/ui/weather-icon'; import type { Discovery } from '@/entities/discovery'; +import { BusIcon, LiftIcon, VoteIcon } from '@/shared/icons'; import { cn } from '@/shared/lib'; import Card from '@/shared/ui/card'; -// eslint-disable-next-line boundaries/element-types -import WeatherIcon from '../../discovery/ui/weather-icon'; import { DiscoverySummaryActionList } from '../model/constants'; import DiscoverySummaryAction from './discovery-summary-action'; import VoteDialog from './vote-dialog'; @@ -29,9 +29,9 @@ const DiscoverySummary = ({ name, slope, weather }: Discovery) => { return (
- +

{name}

운행중인 슬로프 {slope ?? '-'}개

@@ -51,11 +51,7 @@ const DiscoverySummary = ({ name, slope, weather }: Discovery) => { handleAction(action.name)} - /> + } /> } count={{ total: 100, voted: 50 }} /> @@ -65,6 +61,7 @@ const DiscoverySummary = ({ name, slope, weather }: Discovery) => { : } onClick={() => handleAction(action.name)} /> ); diff --git a/src/widgets/discovery-detail/ui/vote-dialog.tsx b/src/widgets/discovery-detail/ui/vote-dialog.tsx index 4a82f6e..1c996d0 100644 --- a/src/widgets/discovery-detail/ui/vote-dialog.tsx +++ b/src/widgets/discovery-detail/ui/vote-dialog.tsx @@ -1,5 +1,5 @@ import { useCallback, useState } from 'react'; -import CheckIcon from '@/shared/icons/check'; +import { CheckIcon } from '@/shared/icons'; import { cn } from '@/shared/lib'; import { Dialog, diff --git a/src/widgets/discovery/ui/discovery-card.tsx b/src/widgets/discovery/ui/discovery-card.tsx index 42ec41f..4ded30a 100644 --- a/src/widgets/discovery/ui/discovery-card.tsx +++ b/src/widgets/discovery/ui/discovery-card.tsx @@ -1,8 +1,8 @@ import { useRouter } from 'next/navigation'; +import WeatherIcon from '@/features/discovery/ui/weather-icon'; import type { Discovery } from '@/entities/discovery'; import { cn } from '@/shared/lib'; import Card from '@/shared/ui/card'; -import WeatherIcon from './weather-icon'; import WeeklyWeather from './weekly-weather'; const DiscoveryCard = ({ id, name, slope, weather, weeklyWeather }: Discovery) => { @@ -10,7 +10,10 @@ const DiscoveryCard = ({ id, name, slope, weather, weeklyWeather }: Discovery) = return ( router.push(`/${id}`)} >
@@ -20,7 +23,7 @@ const DiscoveryCard = ({ id, name, slope, weather, weeklyWeather }: Discovery) =
- +

{weather.temperature}

{weather.description}

diff --git a/src/widgets/discovery/ui/weather-icon.tsx b/src/widgets/discovery/ui/weather-icon.tsx deleted file mode 100644 index beb18d1..0000000 --- a/src/widgets/discovery/ui/weather-icon.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import type { Weather } from '@/entities/discovery/model'; -import CloudIcon from '@/shared/icons/cloud'; -import RainIcon from '@/shared/icons/rain'; -import SnowIcon from '@/shared/icons/snow'; -import SunIcon from '@/shared/icons/sun'; - -const WeatherIcon = ({ weather }: { weather: Weather }) => { - switch (weather) { - case 'sun': - return ; - case 'cloud': - return ; - case 'rain': - return ; - case 'snow': - return ; - default: - return null; - } -}; - -export default WeatherIcon; diff --git a/src/widgets/discovery/ui/weekly-weather.tsx b/src/widgets/discovery/ui/weekly-weather.tsx index 5442777..7b9dd4d 100644 --- a/src/widgets/discovery/ui/weekly-weather.tsx +++ b/src/widgets/discovery/ui/weekly-weather.tsx @@ -1,6 +1,6 @@ +import WeatherIcon from '@/features/discovery/ui/weather-icon'; import type { WeeklyWeather } from '@/entities/discovery/model/model'; import { cn } from '@/shared/lib'; -import WeatherIcon from './weather-icon'; interface WeeklyWeatherProps extends WeeklyWeather { isToday: boolean; diff --git a/src/widgets/header/ui/header.tsx b/src/widgets/header/ui/header.tsx index 275a178..707e9d5 100644 --- a/src/widgets/header/ui/header.tsx +++ b/src/widgets/header/ui/header.tsx @@ -1,6 +1,5 @@ import { useRouter } from 'next/navigation'; -import ChevronLeftIcon from '@/shared/icons/chevron-left'; -import ShareIcon from '@/shared/icons/share'; +import { ChevronLeftIcon, ShareIcon } from '@/shared/icons'; import { cn } from '@/shared/lib'; interface HeaderProps { diff --git a/src/widgets/webcam/ui/webcam-slop-list.tsx b/src/widgets/webcam/ui/webcam-slop-list.tsx index 3b4e69e..b6d9768 100644 --- a/src/widgets/webcam/ui/webcam-slop-list.tsx +++ b/src/widgets/webcam/ui/webcam-slop-list.tsx @@ -14,6 +14,7 @@ interface WebcamSlopListProps { isOpen: boolean; isWebcam: boolean; }[]; + type?: 'website' | 'app'; selectedSlop: string | null; setSelectedSlop: React.Dispatch>; } @@ -21,6 +22,7 @@ interface WebcamSlopListProps { const WebcamSlopList = ({ className, list, + type = 'app', selectedSlop, setSelectedSlop, }: WebcamSlopListProps) => { @@ -32,6 +34,31 @@ const WebcamSlopList = ({ } setSelectedSlop(id); }; + if (type === 'website') { + return ( +
    + {list.map((item) => ( +
  • handleSlopClick(item)} + > +
    +

    {item.name}

    + {item.isWebcam && } +
    + +
    • + ))} +
+ ); + } + return (
    {list.map((item) => (