+ {data.items.map(item => (
+
+ ))}
+
+ );
+}
+```
+
+### SCSS 패턴
+```scss
+// Feature.module.scss
+.container {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+
+ @include media.media-breakpoint(mobile) {
+ gap: 8px;
+ }
+}
+
+.item {
+ // BEM: .item__title, .item--active
+}
+```
+
+### 페이지 패턴
+```tsx
+// src/pages/feature/index.tsx
+import type { NextPage } from 'next';
+import { Suspense } from 'react';
+import Feature from 'components/Feature';
+
+const FeaturePage: NextPage = () => (
+
+ {iconUrl ? (
+ // NOTE: 백엔드가 내려주는 소형 반복 아이콘은 호스트가 고정되지 않을 수 있어 ![]()
를 유지합니다.
+ // eslint-disable-next-line @next/next/no-img-element
+ 
+ ) : (
+
+ )}
+
+ );
+}
+
function CampusInfo() {
const { data: campusInfo } = useSuspenseQuery(coopshopQueries.allShopInfo());
@@ -87,10 +85,8 @@ function CampusInfo() {
-
-
- 학생식당
+ {cafeteriaInfo?.name ?? '학생식당'}
| 시간 | - {CAFETERIA_HEAD_TABLE.row.map((type) => ( -- {type} - | - ))} -
|---|---|
| {type} | - {CAFETERIA_HEAD_TABLE.row.map((day) => ( -- {getTimeToTypeAndDay(type, day)} - | - ))} -
-
- ))}
- {SHOP_ICON[name as keyof typeof SHOP_ICON]}
-
-
- {name}
- {opens.map(({ day_of_week, open_time, close_time }) => (
- {`${day_of_week}: ${getFormattedShopTime(open_time, close_time)}`}
- ))}
-
- {filteredCampusInfo.slice(2, 6).map(({ id, name, opens }) => (
-
-
-
- ))}
- {SHOP_ICON[name as keyof typeof SHOP_ICON]}
-
-
- {name}
- {opens.map(({ day_of_week, open_time, close_time }) => (
- {`${day_of_week}: ${getFormattedShopTime(open_time, close_time)}`}
- ))}
-
- {filteredCampusInfo.slice(6).map(({ id, name, opens }) => (
-
-
-
- ))}
- {SHOP_ICON[name as keyof typeof SHOP_ICON]}
-
-
- {name}
- {opens.map(({ day_of_week, open_time, close_time }) => (
- {`${day_of_week}: ${getFormattedShopTime(open_time, close_time)}`}
- ))}
-