diff --git a/src/components/MainLayout/FashionListBox.tsx b/src/components/MainLayout/FashionListBox.tsx index bedc1aa..73bb988 100644 --- a/src/components/MainLayout/FashionListBox.tsx +++ b/src/components/MainLayout/FashionListBox.tsx @@ -144,6 +144,53 @@ export default function FashionListBox() { } }; + const getSkyStatusIcon = (skyStatus: string, rainfallType: string) => { + if ( + (skyStatus === 'CLEAR' || skyStatus === 'SUNNY') && + rainfallType === 'CLEAR' + ) { + return '☀️'; + } else if ( + (skyStatus === 'OVERCAST' || skyStatus === 'CLOUDY') && + rainfallType === 'CLEAR' + ) { + return '☁️'; + } else if ( + rainfallType === 'RAINY' || + rainfallType === 'RAIN_SNOW' || + rainfallType === 'RAINDROP' || + rainfallType === 'RAINDROP_FLUFFY' + ) { + return '🌧️'; + } else if ( + rainfallType === 'SNOWY' || + rainfallType === 'RAIN_SNOW' || + rainfallType === 'RAINDROP_FLUFFY' || + rainfallType === 'FLUFFY' + ) { + return '❄️'; + } else { + return ''; + } + }; + + const getReviewColor = (review: string) => { + switch (review) { + case 'COLD': + return '#107DFD'; + case 'CHILLY': + return '#8FC0FA'; + case 'MILD': + return '#EED921'; + case 'WARM': + return '#EE8181'; + case 'HOT': + return '#CE4040'; + default: + return '#FF6767'; // Default color + } + }; + const FashionList = () => { let fashion: WeatherPostType[] = []; const array = []; @@ -184,6 +231,57 @@ export default function FashionListBox() { height="260px" image={fashion[index].image} /> + + {/* 날씨 아이콘*/} +
+ + {getSkyStatusIcon( + fashion[index].skyStatus, + fashion[index].rainfallType + )} + +
+ + {/* 온도 아이콘*/} +
+ + {' '} + {fashion[index].temperature}°C + +
+ {fashion[index].title} + + {/* 리뷰 아이콘 */} + + + {fashion[index].review} + + diff --git a/src/utils/types.ts b/src/utils/types.ts index 3a3a780..8c8ecfc 100644 --- a/src/utils/types.ts +++ b/src/utils/types.ts @@ -1,65 +1,69 @@ export type SinglePostType = { - id: string; - username: string; - title: string; - image: string; - review: string; - skyStatus: string; - rainfallType: string; - windChill: number; - createdAt: string; - updatedAt: string; - deletedAt: string; -} + id: string; + username: string; + title: string; + image: string; + review: string; + skyStatus: string; + rainfallType: string; + windChill: number; + createdAt: string; + updatedAt: string; + deletedAt: string; +}; export type WeatherType = { - sky: string; - temperature: number; - hourRainfall: number; - humidity: number; - rainfallType: string; - windSpeed: number; - windChill: number; -} + sky: string; + temperature: number; + hourRainfall: number; + humidity: number; + rainfallType: string; + windSpeed: number; + windChill: number; +}; export type LocationType = { - fullAddress: string; - region1depth: string; - region2depth: string; - region3depth: string; -} + fullAddress: string; + region1depth: string; + region2depth: string; + region3depth: string; +}; export type WeatherPostType = { - id: string; - title: string; - image: string; + id: string; + title: string; + image: string; + skyStatus: string; + temperature: number; + review: string; + rainfallType: string; }; export type LookBookListType = { - id: string; - title: string; - image: string; - userId: string; + id: string; + title: string; + image: string; + userId: string; }; export type LookBookBoxType = { - id: string; - title: string; - image: string; - userId: string; - createdAt: string; - updatedAt: string; - deletedAt: string; + id: string; + title: string; + image: string; + userId: string; + createdAt: string; + updatedAt: string; + deletedAt: string; }; export type UserPostListType = { - id: string; - userId: string; - title: string; - image: string; - review: string; - skyStatus: number; - rainfallType: number; - windChill: number; - createdAt: string; - updatedAt: string; - deletedAt: string; -} \ No newline at end of file + id: string; + userId: string; + title: string; + image: string; + review: string; + skyStatus: number; + rainfallType: number; + windChill: number; + createdAt: string; + updatedAt: string; + deletedAt: string; +};