Merge pull request #63 from Fashion-Cloud/feat/i57-2

[FEAT] 메인 페이지 게시글 아이콘 생성
Fashion-Cloud · Nov 19, 2023 · ab643c5 · ab643c5
2 parents 6cf907b + 305b68c
commit ab643c5
Show file tree

Hide file tree

Showing 2 changed files with 178 additions and 51 deletions.
diff --git 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}
                   />
+
+                  {/* 날씨 아이콘*/}
+                  <div
+                    style={{
+                      position: 'absolute',
+                      top: '4px',
+                      right: '5px',
+                      color: 'white',
+                      fontSize: '16px',
+                      display: 'flex',
+                      alignItems: 'center',
+                      backgroundColor: '#c4c4c4',
+                      padding: '1px',
+                      borderRadius: '100px',
+                    }}
+                  >
+                    <span style={{ marginRight: '3px', marginLeft: '3px' }}>
+                      {getSkyStatusIcon(
+                        fashion[index].skyStatus,
+                        fashion[index].rainfallType
+                      )}
+                    </span>
+                  </div>
+
+                  {/* 온도 아이콘*/}
+                  <div
+                    style={{
+                      position: 'absolute',
+                      top: '33px',
+                      right: '5px',
+                      color: 'black',
+                      fontSize: '10px',
+                      display: 'flex',
+                      alignItems: 'center',
+                      backgroundColor: '#c4c4c4',
+                      padding: '3px',
+                      borderRadius: '100px',
+                    }}
+                  >
+                    <span
+                      style={{
+                        marginRight: '3px',
+                        marginLeft: '3px',
+                        color: 'rgba(0, 0, 0, 0.54)',
+                      }}
+                    >
+                      {' '}
+                      {fashion[index].temperature}°C
+                    </span>
+                  </div>
+
                   <Box
                     sx={{
                       position: 'absolute',
@@ -199,6 +297,31 @@ export default function FashionListBox() {
                     <Typography variant="h6" sx={{ ml: 1 }}>
                       {fashion[index].title}
                     </Typography>
+
+                    {/* 리뷰 아이콘 */}
+                    <Box
+                      sx={{
+                        position: 'absolute',
+                        top: 10,
+                        left: 170,
+                        width: 'max-content',
+                        height: '35%',
+                        backgroundColor: getReviewColor(fashion[index].review),
+                        color: 'white',
+                        padding: '1px',
+                        paddingRight: '8px',
+                        display: 'flex',
+                        alignItems: 'center',
+                        borderRadius: '10px',
+                      }}
+                    >
+                      <Typography
+                        variant="body2"
+                        sx={{ ml: 1, color: '#fff', fontSize: '10px' }}
+                      >
+                        {fashion[index].review}
+                      </Typography>
+                    </Box>
                   </Box>
                 </Box>
               </Card>

diff --git 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;
-}
+  id: string;
+  userId: string;
+  title: string;
+  image: string;
+  review: string;
+  skyStatus: number;
+  rainfallType: number;
+  windChill: number;
+  createdAt: string;
+  updatedAt: string;
+  deletedAt: string;
+};