diff --git a/src/api/dinings/index.ts b/src/api/dinings/index.ts index efb09e6..a11b6ab 100644 --- a/src/api/dinings/index.ts +++ b/src/api/dinings/index.ts @@ -1,7 +1,16 @@ import { accessClient } from 'api'; -import { DiningsParams, OriginalDinings } from 'models/dinings'; +import { DiningsParams, OriginalDinings, DiningExcelParams } from 'models/dinings'; export const getDinings = async (date: DiningsParams) => { const { data } = await accessClient.get(`/dinings?date=${date}`); return OriginalDinings.parse(data); }; + +export const getExcel = async (params: DiningExcelParams) => { + const response = await accessClient.get( + `/coop/dining/excel?startDate=${params.startDate}&endDate=${params.endDate}&isCafeteria=${params.isCafeteria}`, + { responseType: 'blob' }, + ); + + return response; +}; diff --git a/src/assets/svg/common/download-white.svg b/src/assets/svg/common/download-white.svg new file mode 100644 index 0000000..48cc62f --- /dev/null +++ b/src/assets/svg/common/download-white.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/assets/svg/common/download.svg b/src/assets/svg/common/download.svg new file mode 100644 index 0000000..4d779ff --- /dev/null +++ b/src/assets/svg/common/download.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/assets/svg/common/excel.svg b/src/assets/svg/common/excel.svg new file mode 100644 index 0000000..1b01352 --- /dev/null +++ b/src/assets/svg/common/excel.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/layout/DefaultLayout/DefaultLayout.module.scss b/src/layout/DefaultLayout/DefaultLayout.module.scss index bd8f1c6..9118fe2 100644 --- a/src/layout/DefaultLayout/DefaultLayout.module.scss +++ b/src/layout/DefaultLayout/DefaultLayout.module.scss @@ -1,9 +1,15 @@ +@use "src/assets/styles/mediaQuery" as media; + .wrapper { position: relative; - max-width: 480px; + max-width: 100vw; min-height: 100%; width: auto; margin: 0 auto; background: #f5f5f5; box-shadow: 0 0 20px #0000000d; + + @include media.media-breakpoint-down(mobile) { + width: 480px; + } } diff --git a/src/layout/Header/Header.module.scss b/src/layout/Header/Header.module.scss index 354f9e9..8be936a 100644 --- a/src/layout/Header/Header.module.scss +++ b/src/layout/Header/Header.module.scss @@ -1,17 +1,22 @@ @use "src/assets/styles/mediaQuery" as media; .header { - position: sticky; - top: 0; - left: 0; - right: 0; - z-index: 99; display: flex; margin-inline: 24px; + max-width: 989px; + width: 100%; + margin: 0 auto; height: 80px; align-items: center; justify-content: space-between; background: #f5f5f5; + margin-bottom: 105px; + + @include media.media-breakpoint-down(mobile) { + max-width: 480px; + width: 100%; + margin-bottom: 30px; + } } .header__content { diff --git a/src/layout/Header/index.tsx b/src/layout/Header/index.tsx index ab8122c..c7fecad 100644 --- a/src/layout/Header/index.tsx +++ b/src/layout/Header/index.tsx @@ -1,7 +1,5 @@ -import { Link } from 'react-router-dom'; - import Logo from 'assets/svg/common/koin-logo.svg?react'; -import Setting from 'assets/svg/main/gear.svg?react'; +import Setting1 from 'pages/Coop/components/Setting'; import styles from './Header.module.scss'; @@ -12,10 +10,7 @@ function Header() { > ); diff --git a/src/models/dinings.ts b/src/models/dinings.ts index 23477bd..640863b 100644 --- a/src/models/dinings.ts +++ b/src/models/dinings.ts @@ -20,6 +20,14 @@ export const DINING_TYPE_MAP = { DINNER: '저녁', } as const; +export const DiningExcelParams = z.object({ + startDate: z.string(), + endDate: z.string(), + isCafeteria: z.boolean(), +}); + +export type DiningExcelParams = z.infer; + export type DiningPlace = 'A코너' | 'B코너' | 'C코너' | '능수관' | '2캠퍼스'; export const PlaceSchema = z.union([ diff --git a/src/pages/Coop/Coop.module.scss b/src/pages/Coop/Coop.module.scss index 797b493..a94fe8a 100644 --- a/src/pages/Coop/Coop.module.scss +++ b/src/pages/Coop/Coop.module.scss @@ -1,11 +1,36 @@ +@use "src/assets/styles/mediaQuery" as media; + .container { display: flex; - flex-direction: column; + max-width: 989px; + width: 100%; + margin: 0 auto; + + @include media.media-breakpoint-down(mobile) { + flex-direction: column; + max-width: 480px; // 모바일 뷰에서는 너비 제한 + width: 100%; + } +} + +.diningDownloadWrapper { + display: flex; + margin-left: auto; } .content { display: flex; + flex-grow: 2; // 2배 공간 flex-direction: column; padding: 16px 24px; gap: 12px; } + +.calendarWrapper { + flex-grow: 1; // 1:2 비율에서 1배의 공간 + max-width: 989px; +} + +.diningTypeWrapper { + flex-grow: 2; // 1:2 비율에서 2배 공간 +} diff --git a/src/pages/Coop/components/Calendar/Calendar.module.scss b/src/pages/Coop/components/Calendar/Calendar.module.scss index 1acd216..94fe6e8 100644 --- a/src/pages/Coop/components/Calendar/Calendar.module.scss +++ b/src/pages/Coop/components/Calendar/Calendar.module.scss @@ -6,34 +6,29 @@ } .title-wrapper { - display: grid; - grid-template-areas: - "title-main title-main" - "title-sub button-container"; width: calc(100% - 48px); margin: 8px 24px; } .title--main { - grid-area: title-main; color: #727272; - font-size: 14px; + font-size: 18px; font-style: normal; - font-weight: 500; + font-weight: 400; line-height: 160%; /* 22.4px */ } .title--sub { - grid-area: title-sub; color: #000; - font-size: 20px; + width: 273px; + font-size: 32px; font-style: normal; font-weight: 700; line-height: 160%; /* 32px */ + margin-bottom: 20px; } .button-container { - grid-area: button-container; display: flex; align-items: center; justify-content: flex-end; diff --git a/src/pages/Coop/components/DiningDownload/DiningDownload.module.scss b/src/pages/Coop/components/DiningDownload/DiningDownload.module.scss new file mode 100644 index 0000000..9b7807a --- /dev/null +++ b/src/pages/Coop/components/DiningDownload/DiningDownload.module.scss @@ -0,0 +1,27 @@ +.button-container { + display: flex; + background: #fff; + max-width: 173px; + width: 100%; + padding: 8px 12px; + gap: 8px; + border-radius: 8px; + height: 26px; +} + +.dining-download-button { + display: flex; + background: #fff; + border: none; + color: #171717; + font-size: 14px; + font-weight: 400; + width: 119px; + height: 26px; + text-align: center; + padding: 2px 0 0 4px; +} + +.exel-icon { + padding-top: 3px; +} diff --git a/src/pages/Coop/components/DiningDownload/index.tsx b/src/pages/Coop/components/DiningDownload/index.tsx new file mode 100644 index 0000000..4b60f85 --- /dev/null +++ b/src/pages/Coop/components/DiningDownload/index.tsx @@ -0,0 +1,32 @@ +import { useState } from 'react'; + +import DownloadIcon from 'assets/svg/common/download.svg?react'; +import ExcelIcon from 'assets/svg/common/excel.svg?react'; +import DownloadModal from 'pages/Coop/components/DownloadModal'; + +import styles from './DiningDownload.module.scss'; + +export default function DiningDownload() { + const [isModalOpen, setIsModalOpen] = useState(false); // 모달 상태 + + const openModal = () => { + setIsModalOpen(true); + }; + + const closeModal = () => { + setIsModalOpen(false); + }; + + return ( +
+
+ + + +
+ + {isModalOpen && } + +
+ ); +} diff --git a/src/pages/Coop/components/DiningTypeSelect/DiningTypeSelect.module.scss b/src/pages/Coop/components/DiningTypeSelect/DiningTypeSelect.module.scss index ec80a79..c5801d3 100644 --- a/src/pages/Coop/components/DiningTypeSelect/DiningTypeSelect.module.scss +++ b/src/pages/Coop/components/DiningTypeSelect/DiningTypeSelect.module.scss @@ -1,73 +1,33 @@ .container { display: flex; - align-items: center; - justify-content: space-between; - margin-left: 16px; + justify-content: center; + gap: 20px; // 버튼 간의 간격을 조절 + margin-top: 16px; + background-color: #fff; + border-radius: 12px 12px 0 0; } -.type-title { - color: #10477a; +.dining-type-button { + max-width: 200px; + width: 100%; + height: 56px; + background: none; + border: none; + color: #666; font-size: 18px; - font-style: normal; - font-weight: 700; - line-height: 160%; /* 28.8px */ -} - -.dropdown { - position: relative; - - &__trigger { - display: flex; - align-items: center; - justify-content: center; - padding: 6px 16px; - border-radius: 8px; - background: none; - color: #000; - font-size: 16px; - font-style: normal; - font-weight: 400; - line-height: 160%; /* 25.6px */ - - &:active { - background: #eee; - } - } -} - -.arrow-icon { - transition: all 0.4s ease; - - &__transform { - transform: rotate(-180deg); + font-weight: 600; + cursor: pointer; + padding: 16px 12px 16px 16px; + transition: color 0.3s ease; + gap: 8px; + + &:hover { + color: #10477a; // hover 시 텍스트 색 변경 } } -.dropdown-list { - z-index: 5; - position: absolute; - bottom: -122px; - left: 0; - display: flex; - flex-direction: column; - width: 84px; - border-radius: 8px; - background: #fff; - box-shadow: 0 2px 20px 0 rgba(0 0 0 / 4%), 0 8px 32px 0 rgba(0 0 0 / 8%); -} - -.dropdown-item { - display: flex; - align-items: center; - color: #000; - font-size: 16px; - font-style: normal; - font-weight: 400; - line-height: 160%; /* 25.6px */ - padding: 6px 16px; - background: none; - - &--selected { - background: #f5f5f5; - } +.dining-type-button--selected { + color: #10477a; + font-weight: 700; // 선택된 버튼의 텍스트를 강조 + border-bottom: 2px solid #10477a; // 선택된 버튼 아래쪽에 강조선 추가 } diff --git a/src/pages/Coop/components/DiningTypeSelect/index.tsx b/src/pages/Coop/components/DiningTypeSelect/index.tsx index 24c37eb..62dd88f 100644 --- a/src/pages/Coop/components/DiningTypeSelect/index.tsx +++ b/src/pages/Coop/components/DiningTypeSelect/index.tsx @@ -1,7 +1,3 @@ -import { useRef, useState } from 'react'; - -import ArrowDown from 'assets/svg/common/arrow-down.svg?react'; -import useOnClickOutside from 'hooks/useOnclickOutside'; import { DiningType, DINING_TYPES, DINING_TYPE_MAP } from 'models/dinings'; import cn from 'utils/className'; @@ -15,45 +11,21 @@ interface DiningTypeSelectProps { export default function DiningTypeSelect({ selectedDiningType, setSelectedDiningType, }: DiningTypeSelectProps) { - const [typeOpen, setTypeOpen] = useState(false); - const ref = useRef(null); - - useOnClickOutside(ref, () => setTypeOpen(false)); - return (
-
{`${DINING_TYPE_MAP[selectedDiningType]} 식단`}
-
- - {typeOpen && ( -
- {DINING_TYPES.map((type: DiningType) => ( - - ))} -
- )} -
+ ))}
); } diff --git a/src/pages/Coop/components/DownloadModal/DownloadModal.module.scss b/src/pages/Coop/components/DownloadModal/DownloadModal.module.scss new file mode 100644 index 0000000..4601580 --- /dev/null +++ b/src/pages/Coop/components/DownloadModal/DownloadModal.module.scss @@ -0,0 +1,107 @@ +.overlay { + position: fixed; + left: 0; + top: 0; + display: flex; + align-items: center; + justify-content: center; + width: 100vw; + height: 100vh; + background-color: #00000066; +} + +.date-container { + margin: 0 auto; +} + +.container { + display: flex; + flex-direction: column; + width: 485px; + height: 345px; + padding: 24px 32px; + box-sizing: border-box; + background-color: #fff; + border-radius: 16px; +} + +.title--main { + font-size: 20px; + font-weight: 700; + margin-bottom: 5px; +} + +.title--sub { + font-size: 14px; + font-weight: 400; + line-height: 22.4px; + color: #727272; + margin-bottom: 16px; +} + +.date-start-container, +.date-end-container { + display: flex; +} + +.start--title, +.end--title { + display: flex; + width: 56px; + height: 32px; + border-radius: 4px; + background-color: #e1e1e1; + font-size: 13px; + font-weight: 600; + line-height: 20.8px; + margin: 8px 24px 16px 0; + justify-content: center; + align-items: center; +} + +.date-input-box { + width: 56px; + height: 32px; + display: inline-block; + border: solid 1px #e1e1e1; + border-radius: 4px; + margin-top: 8px; + text-align: center; +} + +.input-box-slash { + display: inline-block; + width: 5px; + height: 19px; + font-size: 12px; + font-weight: 400; + margin: 0 16px; +} + +.toggle-container { + display: flex; + gap: 24px; + margin: 7px 0 30px; + position: relative; + left: 162px; +} + +.button-wrapper { + display: flex; + justify-content: center; + align-items: center; + margin: 0 auto; + max-width: 160px; + width: 100%; + gap: 8px; + background-color: #175c8e; + border-radius: 4px; +} + +.buttons-confirm { + height: 42px; + border: none; + background-color: #175c8e; + color: #fff; + margin-left: 10px; +} diff --git a/src/pages/Coop/components/DownloadModal/index.tsx b/src/pages/Coop/components/DownloadModal/index.tsx new file mode 100644 index 0000000..b722139 --- /dev/null +++ b/src/pages/Coop/components/DownloadModal/index.tsx @@ -0,0 +1,212 @@ +import { useState, useEffect, useCallback } from 'react'; + +import { getExcel } from 'api/dinings'; +import DownloadIcon from 'assets/svg/common/download-white.svg?react'; + +import { toast, ToastContainer } from 'react-toastify'; +import 'react-toastify/dist/ReactToastify.css'; + +import DownloadToggleButton from '../DownloadToggleButton'; + +import styles from './DownloadModal.module.scss'; + +interface DownloadModalProps { + closeModal: () => void; +} + +interface DateInput { + year: string; + month: string; + day: string; +} + +export default function DownloadModal({ closeModal }: DownloadModalProps) { + const [startDate, setStartDate] = useState({ year: '', month: '', day: '' }); + const [endDate, setEndDate] = useState({ year: '', month: '', day: '' }); + const [isStudentCafeteriaOnly, setIsStudentCafeteriaOnly] = useState(false); + + const handleDateChange = ( + setDate: React.Dispatch>, + field: keyof DateInput, + e: React.ChangeEvent, + ) => { + setDate((prev) => ({ + ...prev, + [field]: e.target.value, + })); + }; + + const handleOverlayClick = useCallback((e: React.MouseEvent) => { + if (e.target === e.currentTarget) { + closeModal(); + } + }, [closeModal]); + + const handleKeyDown = useCallback((e: KeyboardEvent) => { + if (e.key === 'Escape') { + closeModal(); + } + }, [closeModal]); + + useEffect(() => { + window.addEventListener('keydown', handleKeyDown); + + return () => { + window.removeEventListener('keydown', handleKeyDown); + }; + }, [handleKeyDown]); + + const formatDate = (date: DateInput) => { + if (!date.year || !date.month || !date.day) { + return ''; + } + return `${date.year}-${date.month.padStart(2, '0')}-${date.day.padStart(2, '0')}`; + }; + + const showToast = (message: string) => { + toast(message, { + position: 'top-right', + autoClose: 2000, + hideProgressBar: false, + closeOnClick: true, + pauseOnHover: true, + draggable: true, + progress: undefined, + }); + }; + + const submitDates = async () => { + const formattedStartDate = formatDate(startDate); + const formattedEndDate = formatDate(endDate); + + if (!formattedStartDate || !formattedEndDate) { + showToast('날짜를 모두 입력해 주세요.'); + return; + } + + const requestBody = { + startDate: formattedStartDate, + endDate: formattedEndDate, + isCafeteria: isStudentCafeteriaOnly, + }; + + try { + const response = await getExcel(requestBody); + + let filename = `dining_${requestBody.startDate}~${requestBody.endDate}.xlsx`; + + if (response && response.headers) { + const contentDisposition = response.headers['content-disposition']; + if (contentDisposition) { + const match = contentDisposition.match(/filename="?(.+)"?/); + if (match) { + const [, extractedFileName] = match; + filename = decodeURIComponent(extractedFileName); + } + } + } + + const downloadUrl = URL.createObjectURL(response.data); + const link = document.createElement('a'); + link.href = downloadUrl; + link.download = filename; + document.body.appendChild(link); + link.click(); + document.body.removeChild(link); + URL.revokeObjectURL(downloadUrl); + } catch (error) { + showToast('파일 다운로드에 실패했습니다. 다시 시도해 주세요.'); + } + }; + + return ( +
+
+
식단 파일 다운로드
+
다운로드 할 식단의 기간을 설정해 주세요
+ +
+
+
시작일
+
+ handleDateChange(setStartDate, 'year', e)} + className={styles['date-input-box']} + placeholder="YYYY" + /> + / + handleDateChange(setStartDate, 'month', e)} + className={styles['date-input-box']} + placeholder="MM" + /> + / + handleDateChange(setStartDate, 'day', e)} + className={styles['date-input-box']} + placeholder="DD" + /> +
+
+ +
+
종료일
+
+ handleDateChange(setEndDate, 'year', e)} + className={styles['date-input-box']} + placeholder="YYYY" + /> + / + handleDateChange(setEndDate, 'month', e)} + className={styles['date-input-box']} + placeholder="MM" + /> + / + handleDateChange(setEndDate, 'day', e)} + className={styles['date-input-box']} + placeholder="DD" + /> +
+
+
+ +
+ +
+ +
+
+ +
+ + +
+
+ +
+ ); +} diff --git a/src/pages/Coop/components/DownloadToggleButton/DownloadToggleButton.module.scss b/src/pages/Coop/components/DownloadToggleButton/DownloadToggleButton.module.scss new file mode 100644 index 0000000..71cf7c5 --- /dev/null +++ b/src/pages/Coop/components/DownloadToggleButton/DownloadToggleButton.module.scss @@ -0,0 +1,29 @@ +.container { + width: 50px; + height: 25px; + border-radius: 50px; + background-color: #ccc; /* 기본 배경색 */ + position: relative; + cursor: pointer; + transition: background-color 0.3s ease; + + &--student-only { + background-color: #175c83; /* 학생식당만 선택되었을 때 배경색 */ + } +} + +.circle { + width: 20px; + height: 20px; + border-radius: 50%; + background-color: white; /* 토글 버튼 색 */ + position: absolute; + top: 50%; + left: 3px; + transform: translateY(-50%); + transition: left 0.3s ease; + + &--student-only { + left: calc(100% - 23px); /* 학생식당만 선택되었을 때 오른쪽으로 이동 */ + } +} diff --git a/src/pages/Coop/components/DownloadToggleButton/index.tsx b/src/pages/Coop/components/DownloadToggleButton/index.tsx new file mode 100644 index 0000000..2679131 --- /dev/null +++ b/src/pages/Coop/components/DownloadToggleButton/index.tsx @@ -0,0 +1,31 @@ +import cn from 'utils/className'; + +import styles from './DownloadToggleButton.module.scss'; + +interface DownloadToggleButtonProps { + isStudentCafeteriaOnly: boolean; // 학생식당(A, B, C)만 다운로드할지 여부 + onToggle: (isStudentCafeteriaOnly: boolean) => void; // 토글 클릭 시 상태 변경 +} + +function DownloadToggleButton({ isStudentCafeteriaOnly, onToggle }: DownloadToggleButtonProps) { + return ( + + ); +} + +export default DownloadToggleButton; diff --git a/src/pages/Coop/components/Setting/Setting.module.scss b/src/pages/Coop/components/Setting/Setting.module.scss new file mode 100644 index 0000000..5ae1f76 --- /dev/null +++ b/src/pages/Coop/components/Setting/Setting.module.scss @@ -0,0 +1,16 @@ +.container { + display: flex; + align-items: center; + gap: 40px; + padding-right: 24px; +} + +.setting-item__link, +.setting-item__button, +.setting-item__warning { + text-decoration: none; + color: #000; + background-color: #f5f5f5; + font-size: 18px; + font-weight: 500; +} diff --git a/src/pages/Coop/components/Setting/index.tsx b/src/pages/Coop/components/Setting/index.tsx new file mode 100644 index 0000000..d2895e3 --- /dev/null +++ b/src/pages/Coop/components/Setting/index.tsx @@ -0,0 +1,26 @@ +import { Link } from 'react-router-dom'; + +import { useLogout } from 'query/auth'; + +import styles from './Setting.module.scss'; + +function Setting1() { + const { logout } = useLogout(); + + const handleLogout = () => { + logout(); + }; + + return ( +
+ + BCSD Lab에 문의하기 + + +
+ ); +} + +export default Setting1; diff --git a/src/pages/Coop/index.tsx b/src/pages/Coop/index.tsx index 3afedd6..bea53b0 100644 --- a/src/pages/Coop/index.tsx +++ b/src/pages/Coop/index.tsx @@ -3,6 +3,7 @@ import { Suspense, useState } from 'react'; import ErrorBoundary from 'layout/ErrorBoundary'; import Calendar from 'pages/Coop/components/Calendar'; import DiningBlocks from 'pages/Coop/components/DiningBlocks'; +import DiningDownload from 'pages/Coop/components/DiningDownload'; import DiningTypeSelect from 'pages/Coop/components/DiningTypeSelect'; import { getDiningTypeOnTime } from 'utils/operate'; @@ -16,9 +17,19 @@ export default function Coop() { return (
- +
+ +
- +
+ +
+
+ +
}> diff --git a/src/pages/Setting/Setting.module.scss b/src/pages/Setting/Setting.module.scss index b93d254..c0b159a 100644 --- a/src/pages/Setting/Setting.module.scss +++ b/src/pages/Setting/Setting.module.scss @@ -1,91 +1,91 @@ -.container { - position: relative; - max-width: 480px; - min-height: 100%; - width: auto; - margin: 0 auto; - background: #fff; - box-shadow: 0 0 20px #0000000d; -} +// .container { +// position: relative; +// max-width: 480px; +// min-height: 100%; +// width: auto; +// margin: 0 auto; +// background: #fff; +// box-shadow: 0 0 20px #0000000d; +// } -.header { - display: flex; - padding: 24px; -} +// .header { +// display: flex; +// padding: 24px; +// } -.prev-button { - padding: 0; - margin: 0; - background: none; -} +// .prev-button { +// padding: 0; +// margin: 0; +// background: none; +// } -.prev-icon { - transform: rotate(90deg); -} +// .prev-icon { +// transform: rotate(90deg); +// } -.title { - display: flex; - align-items: center; - padding: 8px 24px 24px; - color: #000; - font-size: 20px; - font-style: normal; - font-weight: 700; - line-height: 160%; /* 32px */ -} +// .title { +// display: flex; +// align-items: center; +// padding: 8px 24px 24px; +// color: #000; +// font-size: 20px; +// font-style: normal; +// font-weight: 700; +// line-height: 160%; /* 32px */ +// } -.sub-title { - background: #eee; - display: flex; - align-items: center; - padding: 8px 24px; - color: #4b4b4b; - font-size: 14px; - font-style: normal; - font-weight: 500; - line-height: 160%; /* 22.4px */ -} +// .sub-title { +// background: #eee; +// display: flex; +// align-items: center; +// padding: 8px 24px; +// color: #4b4b4b; +// font-size: 14px; +// font-style: normal; +// font-weight: 500; +// line-height: 160%; /* 22.4px */ +// } -.setting-item { - &__link, - &__button { - display: flex; - align-items: center; - justify-content: space-between; - padding: 16px 24px; - background: #fff; - border-bottom: 1px solid #e1e1e1; - font-size: 16px; - font-style: normal; - font-weight: 400; - line-height: 160%; /* 25.6px */ - } +// .setting-item { +// &__link, +// &__button { +// display: flex; +// align-items: center; +// justify-content: space-between; +// padding: 16px 24px; +// background: #fff; +// border-bottom: 1px solid #e1e1e1; +// font-size: 16px; +// font-style: normal; +// font-weight: 400; +// line-height: 160%; /* 25.6px */ +// } - &__link { - color: #1f1f1f; - width: calc(100% - 48px); - text-decoration: none; +// &__link { +// color: #1f1f1f; +// width: calc(100% - 48px); +// text-decoration: none; - & > svg { - transform: rotate(-90deg); - } - } +// & > svg { +// transform: rotate(-90deg); +// } +// } - &__button { - color: #ec2d30; - width: 100%; - } -} +// &__button { +// color: #ec2d30; +// width: 100%; +// } +// } -.bottom-description { - width: 300px; - position: absolute; - bottom: 122px; - left: calc(50% - 150px); - color: #727272; - text-align: center; - font-size: 14px; - font-style: normal; - font-weight: 400; - line-height: 160%; -} +// .bottom-description { +// width: 300px; +// position: absolute; +// bottom: 122px; +// left: calc(50% - 150px); +// color: #727272; +// text-align: center; +// font-size: 14px; +// font-style: normal; +// font-weight: 400; +// line-height: 160%; +// }