TEAM-FLASH · JWJung-99 · Dec 11, 2024 · Dec 11, 2024 · Dec 11, 2024 · Dec 11, 2024
diff --git a/index.html b/index.html
@@ -2,7 +2,19 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
+    <!-- https -> http 요청 오류 해결 -->
+    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />
     <!-- <link rel="icon" type="image/svg+xml" href="/vite.svg" /> -->
+    <link rel="apple-touch-icon" sizes="57x57" href="/favicon/apple-icon-57x57.png" />
+    <link rel="apple-touch-icon" sizes="60x60" href="/favicon/apple-icon-60x60.png" />
+    <link rel="apple-touch-icon" sizes="72x72" href="/favicon/apple-icon-72x72.png" />
+    <link rel="apple-touch-icon" sizes="76x76" href="/favicon/apple-icon-76x76.png" />
+    <link rel="apple-touch-icon" sizes="114x114" href="/favicon/apple-icon-114x114.png" />
+    <link rel="apple-touch-icon" sizes="120x120" href="/favicon/apple-icon-120x120.png" />
+    <link rel="apple-touch-icon" sizes="144x144" href="/favicon/apple-icon-144x144.png" />
+    <link rel="apple-touch-icon" sizes="152x152" href="/favicon/apple-icon-152x152.png" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-icon-180x180.png" />
+    <link rel="icon" type="image/png" href="/favicon/favicon-96x96.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>터치즈 | Toucheese</title>
   </head>

diff --git a/public/favicon/apple-icon-114x114.png b/public/favicon/apple-icon-114x114.png
diff --git a/public/favicon/apple-icon-120x120.png b/public/favicon/apple-icon-120x120.png
diff --git a/public/favicon/apple-icon-144x144.png b/public/favicon/apple-icon-144x144.png
diff --git a/public/favicon/apple-icon-152x152.png b/public/favicon/apple-icon-152x152.png
diff --git a/public/favicon/apple-icon-180x180.png b/public/favicon/apple-icon-180x180.png
diff --git a/public/favicon/apple-icon-57x57.png b/public/favicon/apple-icon-57x57.png
diff --git a/public/favicon/apple-icon-60x60.png b/public/favicon/apple-icon-60x60.png
diff --git a/public/favicon/apple-icon-72x72.png b/public/favicon/apple-icon-72x72.png
diff --git a/public/favicon/apple-icon-76x76.png b/public/favicon/apple-icon-76x76.png
diff --git a/public/favicon/favicon-96x96.png b/public/favicon/favicon-96x96.png
diff --git a/src/components/BookingSearchContainer/BookingSearchContainer.tsx b/src/components/BookingSearchContainer/BookingSearchContainer.tsx
@@ -12,7 +12,7 @@ const BookingSearchContainer = () => {
 
   return (
     <BookingSearchContainerStyle>
-      <Button onClick={() => modal.open()}>
+      <Button type="button" onClick={() => modal.open()}>
         <ButtonTitleStyle>전체지역</ButtonTitleStyle> <img src="/img/icon-select-arrow.svg" alt="전체 지역 탐색" />
         <SearchStyle
           onClick={(e) => {

diff --git a/src/components/BottomSheet/BottomSheet.tsx b/src/components/BottomSheet/BottomSheet.tsx
@@ -1,6 +1,6 @@
 /** @jsxImportSource @emotion/react */
 import { css, keyframes } from '@emotion/react';
-import useBottomSheetState from '@store/useBottomSheetStateStroe';
+import useBottomSheetState from '@store/useBottomSheetStateStore';
 import { Hidden } from '@styles/Common';
 import variables from '@styles/Variables';
 import { useEffect, useRef, useState } from 'react';
@@ -31,8 +31,6 @@ const BottomSheet = () => {
     }
   }, [children]);
 
-  console.log(sheetHeight);
-
   return (
     isOpen && (
       <div css={DimStyle}>

diff --git a/src/components/Filter/FilterTextSelector.tsx b/src/components/Filter/FilterTextSelector.tsx
@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import useBottomSheetState from '@store/useBottomSheetStateStroe';
+import useBottomSheetState from '@store/useBottomSheetStateStore';
 import { TypoTitleSmS } from '@styles/Common';
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';

diff --git a/src/components/FilterPriceSlide/FilterPriceSlide.tsx b/src/components/FilterPriceSlide/FilterPriceSlide.tsx
@@ -2,7 +2,7 @@
 import Button from '@components/Button/Button';
 import styled from '@emotion/styled';
 import useResetState from '@hooks/useResetState';
-import useBottomSheetState from '@store/useBottomSheetStateStroe';
+import useBottomSheetState from '@store/useBottomSheetStateStore';
 import variables from '@styles/Variables';
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';

diff --git a/src/components/ServiceAvailability/ServiceAvailability.tsx b/src/components/ServiceAvailability/ServiceAvailability.tsx
@@ -3,14 +3,15 @@ import { useNavigate } from 'react-router-dom';
 import Button from '@components/Button/Button';
 import styled from '@emotion/styled';
 import useResetState from '@hooks/useResetState';
+import useBottomSheetState from '@store/useBottomSheetStateStore';
 
-//TODO - testcode 작성해야함
 /** 필터링 시 매장 서비스 제공 여부를 선택하는 컴포넌트 */
-
 const ServiceAvailability = () => {
   const [selectedButtons, setSelectedButtons] = useState<number[]>([]);
   const navigate = useNavigate();
 
+  const { closeBottomSheet } = useBottomSheetState(); // 바텀 시트 닫는 함수 호출
+
   /** 버튼 클릭 시 선택된 버튼의 인덱스를 상태에 추가하거나 제거하는 함수 */
   const handleButtonClick = (index: number) => {
     setSelectedButtons((prev) => {
@@ -25,6 +26,7 @@ const ServiceAvailability = () => {
     const queryParams = selectedButtons.map((i) => `${getButtonTitle(i)}`).join('%');
     currentParams.set('options', queryParams); // 기존 파라미터에 새로운 값 추가
     navigate(`?${currentParams.toString()}`); // 쿼리 파라미터를 포함한 URL로 이동
+    closeBottomSheet();
   };
 
   // 인덱스에 해당하는 버튼의 제목을 반환하는 함수
@@ -51,6 +53,7 @@ const ServiceAvailability = () => {
           width="fit"
           variant="white"
           disabled={selectedButtons.includes(0)}
+          active={selectedButtons.includes(0)}
           onClick={() => handleButtonClick(0)}
           type="button"
         />
@@ -64,6 +67,7 @@ const ServiceAvailability = () => {
           width="fit"
           variant="white"
           disabled={selectedButtons.includes(1)}
+          active={selectedButtons.includes(1)}
           onClick={() => handleButtonClick(1)}
           type="button"
         />
@@ -77,6 +81,7 @@ const ServiceAvailability = () => {
           width="fit"
           variant="white"
           disabled={selectedButtons.includes(2)}
+          active={selectedButtons.includes(2)}
           onClick={() => handleButtonClick(2)}
           type="button"
         />
@@ -90,6 +95,7 @@ const ServiceAvailability = () => {
           width="fit"
           variant="white"
           disabled={selectedButtons.includes(3)}
+          active={selectedButtons.includes(3)}
           onClick={() => handleButtonClick(3)}
           type="button"
         />
@@ -103,6 +109,7 @@ const ServiceAvailability = () => {
           width="fit"
           variant="white"
           disabled={selectedButtons.includes(4)}
+          active={selectedButtons.includes(4)}
           onClick={() => handleButtonClick(4)}
           type="button"
         />
@@ -116,6 +123,7 @@ const ServiceAvailability = () => {
           width="fit"
           variant="white"
           disabled={selectedButtons.includes(5)}
+          active={selectedButtons.includes(5)}
           onClick={() => handleButtonClick(5)}
           type="button"
         />
@@ -129,6 +137,7 @@ const ServiceAvailability = () => {
           width="fit"
           variant="white"
           disabled={selectedButtons.includes(6)}
+          active={selectedButtons.includes(6)}
           onClick={() => handleButtonClick(6)}
           type="button"
         />

diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx
@@ -8,11 +8,11 @@ import ThemeNavigator from '@components/Navigator/ThemeNavigator';
 import ServiceAvailability from '@components/ServiceAvailability/ServiceAvailability';
 import StudioList from '@components/Studio/StudioList';
 import styled from '@emotion/styled';
-import useBottomSheetState from '@store/useBottomSheetStateStroe';
 import variables from '@styles/Variables';
 import { useEffect, useRef, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import LocalDateSelectionModal from './components/LocalDateSelectionModal';
+import useBottomSheetState from '@store/useBottomSheetStateStore';
 
 interface IFixedProps {
   isFixed: boolean;

diff --git a/src/pages/Home/components/DateBottomSheet.tsx b/src/pages/Home/components/DateBottomSheet.tsx
@@ -4,7 +4,7 @@ import styled from '@emotion/styled';
 import SelectTime from './SelectTime';
 import { convertToDateFormat, useSelectDateStore } from '@store/useSelectDate';
 import { useSelectTimeStore } from '@store/useSelectTime';
-import useBottomSheetState from '@store/useBottomSheetStateStroe';
+import useBottomSheetState from '@store/useBottomSheetStateStore';
 
 interface SelectedDate {
   date: string;

diff --git a/src/pages/Home/components/LocalDateSelectionModal.tsx b/src/pages/Home/components/LocalDateSelectionModal.tsx
@@ -4,11 +4,11 @@ import BottomSheet from '@components/BottomSheet/BottomSheet';
 import Modal from '@components/Modal/Modal';
 import styled from '@emotion/styled';
 import useModal from '@hooks/useModal';
-import useBottomSheetState from '@store/useBottomSheetStateStroe';
 import variables from '@styles/Variables';
 import { useState } from 'react';
 import DateBottomSheet from './DateBottomSheet';
 import { useNavigate } from 'react-router-dom';
+import useBottomSheetState from '@store/useBottomSheetStateStore';
 
 const LocalDateSelectionModal = ({ modalId }: { modalId: number }) => {
   const [selectedDate, setSelectedDate] = useState({ date: '', time: '' });

diff --git a/src/store/useBottomSheetStateStroe.ts → src/store/useBottomSheetStateStore.ts b/src/store/useBottomSheetStateStroe.ts → src/store/useBottomSheetStateStore.ts
diff --git a/src/tests/Home.test.tsx b/src/tests/Home.test.tsx
@@ -7,7 +7,7 @@ import { describe, expect, test, vi } from 'vitest';
 const openBottomSheetMock = vi.fn();
 
 // useBottomSheetState의 default export: useBottonSheetState를 vi.fn()으로 Mock => 내부에 openBottomSheet Action Mock
-vi.mock('@store/useBottomSheetStateStroe', () => ({
+vi.mock('@store/useBottomSheetStateStore', () => ({
   default: vi.fn(() => ({
     openBottomSheet: openBottomSheetMock,
   })),