feat: 요일별 휴업 기능 적용

.script/ci.sh

@@ -2,6 +2,6 @@
 
 sh ./.script/pre-install.sh
 
-yarn install
+yarn install --immutable
 
 sh ./.script/post-install.sh

package.json

@@ -34,7 +34,7 @@
     "@react-navigation/native": "^6.1.18",
     "@react-navigation/stack": "^6.4.1",
     "@tanstack/react-query": "^5.66.9",
-    "@ummgoban/shared": "0.0.1-alpha.6",
+    "@ummgoban/shared": "0.0.5",
     "axios": "^1.7.4",
     "dayjs": "^1.11.13",
     "react": "18.3.1",

src/components/common/Checkbox/CustomCheckbox.style.tsx

@@ -0,0 +1,23 @@
+import styled from '@emotion/native';
+
+const S = {
+  Container: styled.View`
+    display: flex;
+    background-color: ${({theme}) => theme.colors.secondary};
+
+    border-radius: 8px;
+    justify-content: center;
+    align-items: center;
+    width: 32px;
+    height: 32px;
+  `,
+
+  TouchWrapper: styled.Pressable`
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+  `,
+};
+
+export default S;

src/components/common/Checkbox/CustomCheckbox.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import Icon from 'react-native-vector-icons/Entypo';
+import S from './CustomCheckbox.style';
+
+type CustomCheckboxProps = {
+  checked: boolean;
+  onPress: () => void;
+  size?: number;
+  color?: string;
+};
+
+const CustomCheckbox = ({
+  checked,
+  onPress,
+  size = 18,
+  color = 'black',
+}: CustomCheckboxProps) => {
+  return (
+    <S.Container>
+      <S.TouchWrapper onPress={onPress}>
+        {checked && <Icon name="check" size={size} color={color} />}
+      </S.TouchWrapper>
+    </S.Container>
+  );
+};
+
+export default CustomCheckbox;

src/components/common/Checkbox/index.ts

@@ -0,0 +1 @@
+export {default as CustomCheckbox} from './CustomCheckbox';

src/components/common/TextInput/TextInput.style.tsx

@@ -34,7 +34,6 @@ const S = {
 
   ErrorText: styled(Text)`
     color: ${({theme}) => theme.colors.error};
-
     font-family: Pretendard;
     font-size: 14px;
     font-style: normal;

src/components/common/index.ts

@@ -4,3 +4,5 @@ export {default as BottomButton} from './BottomButton';
 export {default as Label} from './Label';
 
 export {ToggleButton, ToggleButtonGroup} from './ToggleButton';
+
+export {CustomCheckbox} from './Checkbox';

src/screens/MarketInfoScreen/MarketInfoScreen.style.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/native';
-import {Button, Text} from 'react-native-paper';
+import {Button} from 'react-native-paper';
 
 export const HORIZONTAL_MARGIN = 16;
 export const IMAGE_CARD_GAP = 8;
@@ -8,6 +8,7 @@ const S = {
   Container: styled.View`
     flex: 1;
   `,
+
   ScrollView: styled.ScrollView`
     padding: 16px;
 
@@ -21,19 +22,75 @@ const S = {
     gap: 8px;
   `,
 
+  BusinessTimeInput: styled.View`
+    padding: 12px 40px;
+  `,
+
+  TimeHeader: styled.View`
+    flex-direction: row;
+    align-items: center;
+    margin-bottom: 4px;
+    padding: 0 12px;
+  `,
+
+  DayHeaderText: styled.Text`
+    flex: 1;
+    text-align: left;
+    padding-left: 4px;
+    ${({theme}) => theme.fonts.body2}
+  `,
+
+  TimeHeaderText: styled.Text`
+    ${({theme}) => theme.fonts.body2}
+    flex: 1;
+    text-align: center;
+  `,
+
+  ClosedHeaderText: styled.Text`
+    flex: 1;
+    ${({theme}) => theme.fonts.body2}
+    text-align: right;
+    margin-left: 0px;
+  `,
+
   TimeContainer: styled.View`
-    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin-bottom: 4px;
+    padding: 0 8px;
+  `,
+
+  DayText: styled.Text`
+    flex: 1;
+    ${({theme}) => theme.fonts.body2};
+    text-align: left;
+  `,
+
+  TimeRange: styled.View`
+    flex: 1;
     flex-direction: row;
     align-items: center;
     justify-content: center;
   `,
 
-  TimePickerButton: styled(Button)``,
+  ClosedCheckboxWrapper: styled.View`
+    display: flex;
+    flex: 1;
+    align-items: flex-end;
+  `,
+
+  ClosedCheckboxContainer: styled.View`
+    width: 36px;
+    justify-content: center;
+    align-items: center;
+    background-color: white;
+    border-radius: 8px;
+    margin: 4px;
+  `,
 
-  BusinessTimeInput: styled.View``,
+  TimePickerButton: styled(Button)``,
 
   ImageCardGrid: styled.View`
-    display: flex;
     flex-direction: row;
     flex-wrap: wrap;
 
@@ -42,17 +99,12 @@ const S = {
     margin: 16px 0;
   `,
 
-  DayText: styled(Text)`
-    ${({theme}) => theme.fonts.body2}
-  `,
-
   ImageCardPlusButton: styled(Button)`
     border: 1px solid #e0e0e0;
-
     width: 100%;
-
     margin: 16px 0;
   `,
+
   ImageCard: styled.View<{width: number}>`
     position: relative;
 
@@ -65,6 +117,7 @@ const S = {
 
     box-sizing: border-box;
 
+    height: 92px;
     border: 1px solid #e0e0e0;
   `,
 
@@ -83,9 +136,8 @@ const S = {
 
     border-radius: 16px;
 
-    background-color: #fff;
-
     display: flex;
+    background-color: #fff;
     justify-content: center;
     align-items: center;
   `,