[상점] 생협 운영 시간 추가 (#536)

src/App.tsx

@@ -95,6 +95,10 @@ function App() {
         <Route path={ROUTES.Auth()} element={<AuthPage />}>
           <Route path={ROUTES.AuthModifyInfo()} element={<PrivateRoute requireAuthentication element={<HelmetWrapper title="코인 - 유저 정보변경" element={<ModifyInfoPage />} />} />} />
         </Route>
+
+        <Route path={ROUTES.Webview()}>
+          <Route path={ROUTES.WebviewCampusInfo()} element={<HelmetWrapper title="코인 - 교내 시설물 정보" element={<CampusInfo />} />} />
+        </Route>
       </Routes>
       <Toast />
     </>

src/api/coopshop/APIDetail.ts

@@ -1,13 +1,23 @@
 import { APIRequest, HTTP_METHOD } from 'interfaces/APIRequest';
-import { CoopshopResponse } from './entity';
+import type { CoopShopDetailResponse, CoopShopResponse } from './entity';
 
 const COOPSHOP_IDS = {
   학생식당: 1,
   세탁소: 2,
   참빛관편의점: 3,
 } as const;
 
-export class CoopshopCafeteria<R extends CoopshopResponse> implements APIRequest<R> {
+export class CoopShop<R extends CoopShopResponse> implements APIRequest<R> {
+  method = HTTP_METHOD.GET;
+
+  path = '/coopshop';
+
+  response!: R;
+
+  auth = false;
+}
+
+export class CoopShopCafeteria<R extends CoopShopDetailResponse> implements APIRequest<R> {
   method = HTTP_METHOD.GET;
 
   path = `/coopshop/${COOPSHOP_IDS.학생식당}`;

src/api/coopshop/entity.ts

@@ -5,14 +5,21 @@ export type Semester = '학기' | '하계방학' | '동계방학';
 export type Opens = {
   day_of_week: string, // 요일 또는 평일, 주말, 공휴일 등
   type: '아침' | '점심' | '저녁' | null,
-  open_time: string | null, // HH:mm
-  close_time: string | null, // HH:mm
+  open_time: string, // HH:mm
+  close_time: string, // HH:mm
 };
 
-export interface CoopshopResponse extends APIResponse {
+export interface CoopShopResponse extends APIResponse {
+  semester: string, // 00-0학기
+  from_date: string, // yyyy-MM-dd
+  to_date: string, // yyyy-MM-dd
+  coop_shops: CoopShopDetailResponse[];
+}
+
+export interface CoopShopDetailResponse extends APIResponse {
   id: number;
   name: string; // 학생식당, 세탁소, 복사실 등
-  semester: Semester;
+  semester?: Semester;
   opens: Opens[];
   phone: string | null;
   location: string;

src/api/coopshop/index.ts

@@ -1,4 +1,5 @@
 import APIClient from 'utils/ts/apiClient';
-import { CoopshopCafeteria } from './APIDetail';
+import { CoopShopCafeteria, CoopShop } from './APIDetail';
 
-export const getCafeteriaInfo = APIClient.of(CoopshopCafeteria);
+export const getCafeteriaInfo = APIClient.of(CoopShopCafeteria);
+export const getAllShopInfo = APIClient.of(CoopShop);

src/components/Cafeteria/CafeteriaInfo/index.tsx

@@ -1,6 +1,6 @@
 import { ReactComponent as CloseIcon } from 'assets/svg/close-icon-grey.svg';
 import { ReactComponent as BlackArrowBackIcon } from 'assets/svg/black-arrow-back-icon.svg';
-import { Opens, CoopshopResponse } from 'api/coopshop/entity';
+import type { Opens, CoopShopDetailResponse } from 'api/coopshop/entity';
 import useMediaQuery from 'utils/hooks/layout/useMediaQuery';
 import { useOutsideClick } from 'utils/hooks/ui/useOutsideClick';
 import { useEscapeKeyDown } from 'utils/hooks/ui/useEscapeKeyDown';
@@ -42,7 +42,7 @@ function ScheduleTable({ title, schedules }: ScheduleTableProps) {
 }
 
 interface CafeteriaInfoProps {
-  cafeteriaInfo: CoopshopResponse;
+  cafeteriaInfo: CoopShopDetailResponse;
   closeInfo: () => void;
 }
 

src/pages/CampusInfo/CampusInfo.module.scss

@@ -0,0 +1,184 @@
+@use "src/utils/scss/media" as media;
+
+.container {
+  margin: 0 auto;
+  width: 100%;
+  max-width: 1132px;
+  user-select: none;
+
+  @include media.media-breakpoint(mobile) {
+    margin: 0 24px 62px;
+    max-width: 100%;
+    width: auto;
+  }
+}
+
+.title-container {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  justify-content: center;
+  margin: 50px 0 84px;
+
+  @include media.media-breakpoint(mobile) {
+    margin: 12px 0 28px;
+  }
+}
+
+.title {
+  color: #000;
+  font-family: Pretendard, sans-serif;
+  font-size: 30px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+
+  @include media.media-breakpoint(mobile) {
+    font-size: 20px;
+    line-height: 160%; /* 32px */
+  }
+}
+
+.subtitle {
+  color: #4b4b4b;
+  font-family: Pretendard, sans-serif;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 160%; /* 25.6px */
+
+  @include media.media-breakpoint(mobile) {
+    font-size: 14px;
+  }
+}
+
+.info-container {
+  display: flex;
+  width: 100%;
+  gap: 24px;
+  flex-wrap: wrap;
+}
+
+.info-column {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  flex: 1;
+}
+
+.info-block {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  border-radius: 16px;
+  background: #fafafa;
+  padding: 16px 24px;
+  height: fit-content;
+  width: 360px;
+  overflow: hidden; // 긴 단어 왔을 시 줄바꿈
+  word-wrap: break-word;
+
+  @include media.media-breakpoint(mobile) {
+    width: calc(100vw - 48px);
+  }
+}
+
+.icon-wrapper {
+  border-radius: 8px;
+  background: #f1f8ff;
+  padding: 12px;
+  width: 32px;
+  height: 32px;
+  margin: 0;
+}
+
+.info-title-container {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+}
+
+.info-title {
+  color: #000;
+  font-family: Pretendard, sans-serif;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 160%; /* 32px */
+
+  @include media.media-breakpoint(mobile) {
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 160%; /* 25.6px */
+  }
+}
+
+.table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.table-head__tr {
+  border-top: 1px solid #cacaca;
+  border-bottom: 1px solid #cacaca;
+  background: #eee;
+
+  & > th {
+    color: #072552;
+    font-family: Pretendard, sans-serif;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 160%;
+    padding: 6px 0;
+  }
+}
+
+.table-body__tr {
+  border-bottom: 0.5px solid #cacaca;
+
+  &:last-child {
+    border-bottom: 1px solid #cacaca;
+  }
+}
+
+.table-body__td {
+  color: #072552;
+  font-family: Pretendard, sans-serif;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 160%; /* 22.4px */
+  text-align: center;
+  padding: 4px 0;
+}
+
+.closed {
+  color: #4590bb;
+}
+
+.info-cafeteria {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.info-description-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.info-description {
+  color: #041a44;
+  font-family: Pretendard, sans-serif;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 160%; /* 25.6px */
+
+  @include media.media-breakpoint(mobile) {
+    font-size: 14px;
+  }
+}

src/pages/CampusInfo/hooks/useCampusInfo.ts

@@ -0,0 +1,13 @@
+import { useSuspenseQuery } from '@tanstack/react-query';
+import { coopshop } from 'api';
+
+function useCampusInfo() {
+  const { data: campusInfo } = useSuspenseQuery({
+    queryKey: ['/coopshop'],
+    queryFn: async () => coopshop.getAllShopInfo(),
+  });
+
+  return { campusInfo };
+}
+
+export default useCampusInfo;