[Sz 531] 세팅 디자인 입히기

.gitignore

@@ -44,6 +44,7 @@ yarn-error.*
 *.tsbuildinfo
 
 .env.local
+.env.e2e
 
 #google services
 google-services.*.json

app/settingsView/settingsView.jsx

@@ -1,60 +1,195 @@
 import '@/locales/index';
-import { Icon, Layout, List, ListItem } from '@ui-kitten/components';
+import {
+  Icon,
+  Layout,
+  List,
+  ListItem,
+  Text,
+  useTheme,
+} from '@ui-kitten/components';
 import { useRouter } from 'expo-router';
-import React from 'react';
+import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { SafeAreaView, StyleSheet } from 'react-native';
+import ConfirmModal from '@/components/common/molecules/ConfirmModal';
+import { api as Api } from '@/utils/api';
+import { useStorage } from '@/hooks/auth/useStorage';
+import {
+  Linking,
+  SafeAreaView,
+  StyleSheet,
+  Platform,
+  View,
+} from 'react-native';
+import { heightPercentage, widthPercentage } from '@/utils/responsiveSize';
+import fontStyles from '@/theme/fontStyles';
+const privacyPolicyUrl =
+  'https://swm-onestep.github.io/posts/%EA%B0%9C%EC%9D%B8%EC%A0%95%EB%B3%B4%EC%B2%98%EB%A6%AC%EB%B0%A9%EC%B9%A8-copy/';
+const termsOfServiceUrl =
+  'https://swm-onestep.github.io/posts/%EC%84%9C%EB%B9%84%EC%8A%A4%EC%9D%B4%EC%9A%A9%EC%95%BD%EA%B4%80-copy/';
+const googleFormUrl = 'https://forms.gle/ZdgNEewuzCJ4U4JQ8';
+const AndroidStoreUrl =
+  'https://play.google.com/store/apps/details?id=com.safezone.onestep';
+const IosStoreUrl = 'https://apps.apple.com/kr/app/onestep/id6737062454';
 
-const HomeIcon = props => <Icon {...props} name="star" />;
+const handleOpenUrlPress = url => {
+  Linking.openURL(url);
+};
 
-const renderItemIcon = props => <HomeIcon {...props} />;
+const renderChevron = () => <Icon name="chevron-right" />;
 
-const renderItem = ({ item }) => (
-  <ListItem
-    title={item.title}
-    accessoryLeft={renderItemIcon}
-    onPress={() => item.handlePress()}
-    style={styles.listItemContainer}
-  />
+const renderCurrentStatus = currentStatus => () => (
+  <Text style={{ ...fontStyles.Paragraph.P1.M_100 }}>{currentStatus}</Text>
 );
 
 const SettingsView = () => {
   const { t } = useTranslation();
+  const theme = useTheme();
+  const { clear: clearStorage } = useStorage();
+  const clearStackAndNavigate = () => {
+    router.dismissAll();
+    router.replace('/');
+  };
+  const { i18n } = useTranslation();
+  const getLanguage = () => {
+    if (i18n.language === 'ko') {
+      return `한국어`;
+    } else if (i18n.language === 'en') {
+      return `English`;
+    }
+  };
+  const [isDeleteAccountModalVisible, setDeleteAccountModalVisible] =
+    useState(false);
+  const handleDeleteAccountModalConfirm = async () => {
+    await Api.deleteUser();
+    await clearStorage();
+    setDeleteAccountModalVisible(false);
+    clearStackAndNavigate();
+  };
+
+  const handleDeleteAccountModalCancel = () => {
+    setDeleteAccountModalVisible(false);
+  };
 
   const data = [
-    {
-      title: t('views.settingsView.account'),
-      id: 1,
-      handlePress: () => {
-        router.push('settingsView/settingsAccountView');
+    [
+      {
+        title: t('views.settingsView.language'),
+        id: 1,
+        currentStatus: getLanguage(),
+        handlePress: () => {
+          router.push('settingsView/settingsLanguageView');
+        },
+      },
+      {
+        title: t('views.settingsView.notification'),
+        id: 2,
+        currentStatus: '한국어',
+        handlePress: () => {
+          router.push('settingsView/settingsAccountView');
+        },
+      },
+    ],
+    [
+      {
+        title: t('views.settingsView.termsOfService'),
+        id: 3,
+        handlePress: () => {
+          handleOpenUrlPress(termsOfServiceUrl);
+        },
       },
-    },
-    {
-      title: t('views.settingsView.language'),
-      id: 2,
-      handlePress: () => {
-        router.push('settingsView/settingsLanguageView');
+      {
+        title: t('views.settingsView.privacyPolicy'),
+        id: 4,
+        handlePress: () => {
+          handleOpenUrlPress(privacyPolicyUrl);
+        },
       },
-    },
-    {
-      title: t('views.settingsView.contact'),
-      id: 3,
-      handlePress: () => {
-        router.push('settingsView/settingsContactView');
+      {
+        // 문의
+        title: t('views.settingsView.contact'),
+        id: 5,
+        handlePress: () => {
+          handleOpenUrlPress(googleFormUrl);
+        },
       },
-    },
+    ],
+    [
+      {
+        title: t('views.settingsView.appVersion'),
+        id: 6,
+        currentStatus: '1.1.0',
+        handlePress: () => {
+          Platform.OS === 'ios'
+            ? handleOpenUrlPress(IosStoreUrl)
+            : handleOpenUrlPress(AndroidStoreUrl);
+        },
+      },
+    ],
+    [
+      {
+        title: t('views.settingsAccountView.deleteModalTitle'),
+        id: 7,
+        handlePress: () => {
+          setDeleteAccountModalVisible(true);
+        },
+      },
+      // 온보딩 다시가는 버튼 필요함
+    ],
   ];
 
   const router = useRouter();
 
+  const renderItem = ({ item }) => (
+    <ListItem
+      title={item.title}
+      // accessoryRight={<Icon name="chevron-right" />}
+      accessoryRight={
+        item.currentStatus
+          ? renderCurrentStatus(item.currentStatus)
+          : renderChevron()
+      }
+      key={item.id}
+      onPress={() => item.handlePress()}
+      style={styles.listItemContainer}
+    />
+  );
   return (
     <>
-      <SafeAreaView style={styles.container}>
+      <SafeAreaView
+        style={{ ...styles.container, backgroundColor: theme.Black06 }}
+      >
+        <View
+          style={{ ...styles.infoContainer, backgroundColor: theme.Black06 }}
+        >
+          <View style={{ ...styles.logo, backgroundColor: theme.Gray02 }}>
+            <Text>이미지</Text>
+          </View>
+          <View style={styles.userTextContainer}>
+            <Text style={fontStyles.Subtitle.S2.M_130}>
+              {t('views.settingsView.greeting')}
+            </Text>
+            <Text style={fontStyles.Paragraph.P1.R_100}>user</Text>
+          </View>
+        </View>
         <Layout style={styles.layout} level="1">
-          <List
-            style={styles.list}
-            data={data}
-            renderItem={({ item }) => renderItem({ item })}
+          {data.map((listData, index) => (
+            <>
+              <View
+                style={{ ...styles.divider, backgroundColor: theme.Gray03 }}
+              />
+              <List
+                data={listData}
+                key={index}
+                renderItem={({ item }) => renderItem({ item })}
+              />
+            </>
+          ))}
+          <ConfirmModal
+            visible={isDeleteAccountModalVisible}
+            onConfirm={handleDeleteAccountModalConfirm}
+            onCancel={handleDeleteAccountModalCancel}
+            titleKey="views.settingsAccountView.deleteModalTitle"
+            messageKey="views.settingsAccountView.deleteModalMessage"
           />
         </Layout>
       </SafeAreaView>
@@ -66,17 +201,35 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
   },
-  layout: {
-    flex: 1,
+  infoContainer: {
+    gap: 20,
+    paddingLeft: 24,
+    flexDirection: 'row',
+    width: '100%',
+    alignItems: 'center',
+    height: heightPercentage(90),
+  },
+  logo: {
+    width: widthPercentage(64),
+    height: widthPercentage(64),
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 100,
+  },
+  userTextContainer: {
+    flexDirection: 'column',
+    gap: 4,
     justifyContent: 'center',
-    paddingHorizontal: 16,
   },
-  list: {
-    backgroundColor: 'white',
+  divider: {
+    height: widthPercentage(12),
+  },
+  layout: {
+    justifyContent: 'center',
   },
   listItemContainer: {
-    paddingVertical: 10,
-    paddingHorizontal: 16,
+    paddingHorizontal: 20,
+    height: heightPercentage(48),
   },
 });
 

locales/en.json

@@ -19,9 +19,15 @@
       "inbox": "Inbox"
     },
     "settingsView": {
+      "greeting": "Hello,",
       "account": "Account",
       "language": "Language",
-      "contact": "Contact",
+      "notification": "Notification Settings",
+      "contact": "Contact us",
+      "termsOfService": "Terms of Service",
+      "privacyPolicy": "Privacy Policy",
+      "appVersion": "App Version",
+      "logout": "Logout",
       "deleteAccount": "Delete Account"
     },
     "settingsLanguageView": {

locales/ko.json

@@ -19,10 +19,17 @@
       "inbox": "인박스"
     },
     "settingsView": {
+      "setting": "환경설정",
+      "greeting": "안녕하세요,",
       "account": "계정",
       "language": "언어",
-      "contact": "문의",
-      "deleteAccount": "계정 삭제"
+      "notification": "알림설정",
+      "contact": "문의하기",
+      "termsOfService": "이용약관",
+      "privacyPolicy": "개인정보처리방침",
+      "appVersion": "앱 버전",
+      "logout": "로그아웃",
+      "deleteAccount": "탈퇴하기"
     },
     "settingsLanguageView": {
       "korean": "한국어",