[Feature] : 이용약관 추가

declarations.d.ts

@@ -3,3 +3,7 @@ declare module '*.svg' {
   const content: React.FC<SvgProps>;
   export default content;
 }
+declare module '*.png' {
+  const value: string;
+  export default value;
+}

src/navigation/MyPageNavigator.tsx

@@ -7,13 +7,15 @@ import { BlockScreen } from '~screens/MyPage/Block';
 import { EditDogProfile } from '~screens/MyPage/EditDogProfile';
 import { ProfileEditScreen } from '~screens/MyPage/ProfileEdit';
 import { SettingScreen } from '~screens/MyPage/Setting';
+import { TermsOfUseScreen } from '~screens/MyPage/TermsOfUse';
 
 export type MyPageStackProps = {
   Main: undefined;
   Setting: undefined;
   Block: undefined;
   ProfileEdit: undefined;
   DogProfileEdit: { dogId: number };
+  TermsOfUse: undefined;
 };
 
 const Stack = createNativeStackNavigator<MyPageStackProps>();
@@ -55,6 +57,15 @@ export const MyPageNavigator = () => {
           contentStyle: { backgroundColor: theme.colors.gc_4 },
         }}
       />
+      <Stack.Screen
+        name="TermsOfUse"
+        component={TermsOfUseScreen}
+        options={{
+          title: '이용약관',
+          header: () => <Header left={<Icon.Prev />} />,
+          contentStyle: { backgroundColor: theme.colors.gc_4 },
+        }}
+      />
     </Stack.Navigator>
   );
 };

src/screens/MyPage/Setting/index.tsx

@@ -2,7 +2,7 @@
 import { useNotificationPermission } from '~apis/notification/useNotificationPermission';
 import { ActionButton } from '~components/Common/ActionButton';
 import { TextBold, TextRegular } from '~components/Common/Text';
 import { ToggleBox } from '~components/MyPage/Setting/ToggleBox';
 import { MyPageStackProps } from '~navigation/MyPageNavigator';
 import * as S from './styles';
 import { useAuth } from '~apis/member/useAuth';
@@ -17,11 +17,11 @@
   const myInfo = useUser();
   const familyInfo = useFamilyInfo();
   const {
     chatNotificationAllowed,
     familyNotificationAllowed,
     friendNotificationAllowed,
     walkNotificationAllowed,
     gangbunttaNotificationAllowed,
   } = useNotificationPermission();
 
   const isRepresetative = myInfo.isRepresentative && familyInfo.length > 1;
@@ -47,11 +47,11 @@
 
   return (
     <S.SettingScreen>
-      <ToggleBox>
+      {/* <ToggleBox>
         <ToggleBox.Item title="강번따 허용 여부" enabled={gangbunttaNotificationAllowed === 'TRUE' ? true : false} />
-      </ToggleBox>
+      </ToggleBox> */}
 
-      <ToggleBox>
+      {/* <ToggleBox>
         <ToggleBox.Container>
           <ToggleBox.Item
             title="내 산책 알림"
@@ -74,7 +74,7 @@
             enabled={familyNotificationAllowed === 'TRUE' ? true : false}
           />
         </ToggleBox.Container>
-      </ToggleBox>
+      </ToggleBox> */}
 
       <S.NavigationToBlockScreen paddingHorizontal={20} paddingVertical={16.5}>
         <S.TypoWrapper>
@@ -94,6 +94,9 @@
         <S.DeleteAccountButton onPress={handleDeleteAccount}>
           <S.DeleteAccountTypo fontSize={15}>탈퇴하기</S.DeleteAccountTypo>
         </S.DeleteAccountButton>
+        <S.TermsOfUseButton onPress={() => navigation.navigate('TermsOfUse')}>
+          <S.TermsOfUseTypo fontSize={15}>이용약관</S.TermsOfUseTypo>
+        </S.TermsOfUseButton>
       </S.ButtonContainer>
     </S.SettingScreen>
   );

src/screens/MyPage/Setting/styles.ts

@@ -13,11 +13,18 @@ export const SettingScreen = styled.View`
 
 export const DeleteAccountButton = styled(Pressable)``;
 
+export const TermsOfUseButton = styled(Pressable)``;
+
 export const DeleteAccountTypo = styled(TextBold)`
   text-align: center;
   color: #dcccc2;
 `;
 
+export const TermsOfUseTypo = styled(TextBold)`
+  text-align: center;
+  color: #dcccc2;
+`;
+
 export const ButtonContainer = styled.View`
   width: 100%;
   position: absolute;

src/screens/MyPage/TermsOfUse/index.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+// import { NativeStackScreenProps } from '@react-navigation/native-stack';
+// import { MyPageStackProps } from '~navigation/MyPageNavigator';
+import { ImageSourcePropType } from 'react-native';
+import Term1 from '~assets/termsofuse/term1.png';
+import Term2 from '~assets/termsofuse/term2.png';
+import Term3 from '~assets/termsofuse/term3.png';
+import Term4 from '~assets/termsofuse/term4.png';
+import Term5 from '~assets/termsofuse/term5.png';
+import Term6 from '~assets/termsofuse/term6.png';
+import * as S from './styles';
+
+// type Props = NativeStackScreenProps<MyPageStackProps, 'TermsOfUse'>;
+
+export const TermsOfUseScreen = () => {
+  // const handleBackPress = () => {
+  //   navigation.goBack();
+  // };
+
+  return (
+    <S.Container>
+      <S.ScrollContainer>
+        {/* 각 이미지 렌더링 */}
+        <S.Image source={Term1 as ImageSourcePropType} resizeMode="stretch" />
+        <S.Image source={Term2 as ImageSourcePropType} resizeMode="stretch" />
+        <S.Image source={Term3 as ImageSourcePropType} resizeMode="stretch" />
+        <S.Image source={Term4 as ImageSourcePropType} resizeMode="stretch" />
+        <S.Image source={Term5 as ImageSourcePropType} resizeMode="stretch" />
+        <S.Image source={Term6 as ImageSourcePropType} resizeMode="stretch" />
+      </S.ScrollContainer>
+    </S.Container>
+  );
+};

src/screens/MyPage/TermsOfUse/styles.ts

@@ -0,0 +1,18 @@
+import styled from '@emotion/native';
+
+export const Container = styled.View`
+  flex: 1;
+  background-color: #ffffff;
+  width: 100vw;
+`;
+
+export const ScrollContainer = styled.ScrollView`
+  width: 100%;
+  display: flex;
+`;
+
+export const Image = styled.Image`
+  height: auto;
+  width: 100%;
+  aspect-ratio: .6;
+`;