style: apply eslint and fix code style to make compatable with eslint

.eslintrc.js

@@ -0,0 +1,9 @@
+// eslint-disable-next-line no-undef
+module.exports = {
+  extends: 'expo',
+  languageOptions: {
+    globals: {
+      AudioWorkletGlobalScope: 'readonly',
+    },
+  },
+}

app/authcode.tsx

@@ -9,18 +9,18 @@ import {
 } from '@gluestack-ui/themed'
 import { router } from 'expo-router'
 import React from 'react'
-import { Alert } from '../components/alert'
+import { Alert, AlertRef } from '../components/alert'
 import { tokenManager } from '../utils/localStorage'
 import Styles from './styles'
 import { poster } from './util'
 
 export default function AuthCodeScreen() {
   const [code, setCode] = React.useState('')
-  const alertRef = React.useRef<any>(null)
+  const alertRef = React.useRef<AlertRef>(null)
 
   function confirm() {
     if (!code)
-      return alertRef.current.openAlert(
+      return alertRef.current?.openAlert(
         '인증코드를 입력해주세요',
         '인증코드는 6자리 숫자로 이루어져있습니다'
       )
@@ -30,12 +30,12 @@ export default function AuthCodeScreen() {
         router.push('/tabs')
       } else {
         if (res.message === 'Forbidden') {
-          alertRef.current.openAlert(
+          alertRef.current?.openAlert(
             '인증코드가 만료되었어요',
             '인증코드는 5분간 유효해요'
           )
         } else {
-          alertRef.current.openAlert(
+          alertRef.current?.openAlert(
             '인증코드가 틀렸어요',
             '인증코드를 다시 확인해주세요'
           )

app/tabs/_layout.tsx

@@ -55,7 +55,6 @@ async function registerToken() {
 
 async function registerForPushNotificationsAsync() {
   try {
-    let token
     const { status: existingStatus } = await Notifications.getPermissionsAsync()
     let finalStatus = existingStatus
     if (existingStatus !== 'granted') {
@@ -67,7 +66,7 @@ async function registerForPushNotificationsAsync() {
       return
     }
 
-    token = (
+    const token = (
       await Notifications.getExpoPushTokenAsync({
         projectId: '260ef7f5-24f3-49b6-93ad-5632be016ff2',
       })

app/tabs/chat/chatroom.tsx

@@ -1,4 +1,5 @@
 import { Party } from '@/types/parties'
+import { UserMe } from '@/types/users'
 import FontAwesome from '@expo/vector-icons/FontAwesome'
 import {
   Avatar,
@@ -23,7 +24,7 @@ import { router, useLocalSearchParams, useNavigation } from 'expo-router'
 import React from 'react'
 import { Keyboard, Platform } from 'react-native'
 import { io, Socket } from 'socket.io-client'
-import { Alert } from '../../../components/alert'
+import { Alert, AlertRef } from '../../../components/alert'
 import { PayRequestModal } from '../../../components/payRequest'
 import { userManager } from '../../../utils/localStorage'
 import { fetcher, poster, Profile } from '../../util'
@@ -44,15 +45,16 @@ interface Message {
 export default function Chatroom() {
   const navigation = useNavigation()
   const { id } = useLocalSearchParams()
-  const alertRef = React.useRef<any>(null)
-  const [user, setUser] = React.useState<any>({})
+  const alertRef = React.useRef<AlertRef>(null)
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const scrollViewRef = React.useRef<any>(null)
+  const [user, setUser] = React.useState<UserMe | null>(null)
   const [value, setValue] = React.useState<string>('')
   const [messages, setMessages] = React.useState<Message[]>([])
   const [party, setParty] = React.useState<Party>()
   const [socket, setSocket] = React.useState<Socket | null>(null)
   const [payModalOpen, setPayModalOpen] = React.useState(false)
   const URL = process.env.EXPO_PUBLIC_WS_URL || 'http://localhost:3000'
-  const scrollViewRef = React.useRef<any>(null)
 
   React.useEffect(() => {
     const ws = io(URL)
@@ -107,7 +109,7 @@ export default function Chatroom() {
   }
 
   const handleSend = async () => {
-    if (!value) return
+    if (!value || !user) return
     const message = {
       content: value,
       senderId: user.id,
@@ -174,7 +176,7 @@ export default function Chatroom() {
                 alignItems: 'center',
               }}
             >
-              {party.ownerId !== user.id && (
+              {party.ownerId !== user?.id && (
                 <Button
                   size="sm"
                   variant="outline"
@@ -196,7 +198,7 @@ export default function Chatroom() {
                   </ButtonText>
                 </Button>
               )}
-              {party.ownerId === user.id && (
+              {party.ownerId === user?.id && (
                 <React.Fragment>
                   <Button
                     ml="$2"

app/tabs/settings.tsx

@@ -22,10 +22,17 @@ import { tokenManager, userManager } from '../../utils/localStorage'
 import styles from '../styles'
 import { fetcher, getDeviceId, poster, Profile } from '../util'
 
+interface ApiDevice {
+  id: number
+  device: string
+  platform: string
+  token: string
+  createdAt: string
+}
 export default function Tab() {
   const navigation = useNavigation()
   const [user, setUser] = React.useState<UserMe | null>(null)
-  const [devices, setDevices] = React.useState<string[]>([])
+  const [devices, setDevices] = React.useState<ApiDevice[]>([])
   const [currentdevice, setDevice] = React.useState<string>('')
   const [modal, setModal] = React.useState(false)
 
@@ -70,7 +77,7 @@ export default function Tab() {
   }
 
   const expireToken = (token: string) => {
-    setDevices(devices.filter((device: any) => device.token !== token))
+    setDevices(devices.filter((device: ApiDevice) => device.token !== token))
     poster('/auth/logout', { token })
   }
 
@@ -122,7 +129,7 @@ export default function Tab() {
         </Heading>
         <ScrollView style={{ maxHeight: '60%' }}>
           {devices && devices.length ? (
-            devices?.map((device: any) => (
+            devices?.map((device: ApiDevice) => (
               <Card
                 key={device.id}
                 style={{

app/util.ts

@@ -46,6 +46,7 @@ export const fetcher = async (url: string) => {
     const headers = await getHeaders()
     const { data } = await api.get(url, { headers })
     return data?.body
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
   } catch (error: any) {
     return error.response?.data
   }
@@ -56,6 +57,7 @@ export const poster = async (url: string, data: object) => {
     const headers = await getHeaders()
     const response = await api.post(url, data, { headers })
     return response.data
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
   } catch (error: any) {
     return error.response?.data
   }

babel.config.js

@@ -1,6 +1,7 @@
+/* eslint-disable */
 module.exports = function (api) {
-  api.cache(true);
+  api.cache(true)
   return {
     presets: ['babel-preset-expo'],
-  };
-};
+  }
+}

components/alert.tsx

@@ -19,7 +19,7 @@ export type AlertRef = {
   openAlert: (alertTitle: string, alertMessage: string) => void
   closeAlert: () => void
 }
-export const Alert = React.forwardRef<AlertRef, {}>(function AlertComponent(
+export const Alert = React.forwardRef<AlertRef, object>(function AlertComponent(
   props,
   ref
 ) {

components/destinationSelector.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types */
 import {
   Select,
   SelectBackdrop,

components/partyModal.tsx

@@ -48,7 +48,7 @@ export type PartyModalRef = {
   closeModal: () => void
 }
 
-export const PartyModal = React.forwardRef<PartyModalRef, {}>(
+export const PartyModal = React.forwardRef<PartyModalRef, object>(
   function AlertComponent(props, ref) {
     const [open, setOpen] = React.useState(false)
     const [data, setData] = React.useState<Party>()

fix-pods.js

@@ -1,11 +1,11 @@
+/* eslint-disable */
 /*
 Config plugin required when upgrading from 
 Expo 50 & react native 0.73 --> Expo 51 & react native 0.74
 ReactCommon.modulemap and React-RuntimeApple.modulemap have the same content and are defining the ReactCommon module, then the issue lies in the redefinition of the module.
 The error message "redefinition of module 'ReactCommon'" suggests that the module is being defined more than once in your project, leading to a conflict.
 */
 
-// postinstall.js
 const fs = require('fs')
 const path = require('path')
 

package.json

@@ -60,15 +60,21 @@
     "react-native-screens": "3.31.1",
     "react-native-svg": "15.2.0",
     "react-native-web": "~0.19.10",
-    "socket.io-client": "^4.7.5"
+    "socket.io-client": "^4.7.5",
+    "typescript-eslint": "^7.16.1"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
+    "@eslint/js": "^9.7.0",
     "@types/firebase": "^3.2.1",
     "@types/jest": "^29.5.12",
     "@types/md5": "^2.3.5",
     "@types/react": "~18.2.45",
     "@types/react-test-renderer": "^18.0.7",
+    "eslint": "^9.7.0",
+    "eslint-config-expo": "^7.0.0",
+    "eslint-plugin-react": "^7.35.0",
+    "globals": "^15.8.0",
     "jest": "^29.2.1",
     "jest-expo": "~51.0.3",
     "react-test-renderer": "18.2.0",

prettier.config.js

@@ -1,3 +1,4 @@
+/* eslint-disable */
 module.exports = {
   singleQuote: true,
   semi: false,