[FEATURE #8]: vitest, msw, storybook 패키지 추가 및 초기화

app.json

@@ -19,7 +19,8 @@
         "monochromeImage": "./assets/images/android-icon-monochrome.png"
       },
       "edgeToEdgeEnabled": true,
-      "predictiveBackGestureEnabled": false
+      "predictiveBackGestureEnabled": false,
+      "package": "com.anonymous.payperclientv2tmp"
     },
     "web": {
       "output": "static",

app/(tabs)/index.tsx

@@ -1,9 +1,45 @@
-import { Text, View } from "react-native";
+import { Text, View, Pressable, StyleSheet } from "react-native";
+import { Button } from "@/shared/ui/Button";
 
 export default function Home() {
   return (
-    <View className="flex-1 items-center justify-center bg-white">
+    <View className="flex-1 items-center justify-center bg-white gap-3 px-6">
       <Text className="text-2xl font-bold mb-6">payper 홈 화면</Text>
+
+      {/* 일반 Pressable 테스트 */}
+      {/*<Pressable style={testStyles.button}>*/}
+      {/*  <Text style={testStyles.text}>일반 Pressable 버튼</Text>*/}
+      {/*</Pressable>*/}
+
+      <Button onPress={() => alert("Primary!")}>Primary 버튼</Button>
+      <Button variant="outline" color="primary">Outline 버튼</Button>
+      <Button variant="ghost" color="primary">Ghost 버튼</Button>
+
+      <View className="flex-row gap-2 mt-4">
+        <Button size="sm" color="success">Small</Button>
+        <Button size="md" color="warning">Medium</Button>
+        <Button size="lg" color="danger">Large</Button>
+      </View>
+
+      <Button fullWidth color="default" className="mt-4">전체 너비 버튼</Button>
+      <Button isLoading>로딩 중...</Button>
+      <Button disabled>비활성화</Button>
     </View>
   );
 }
+
+// const testStyles = StyleSheet.create({
+//   button: {
+//     backgroundColor: "#F67154",
+//     paddingVertical: 12,
+//     paddingHorizontal: 24,
+//     borderRadius: 8,
+//     alignItems: "center",
+//     justifyContent: "center",
+//   },
+//   text: {
+//     color: "#FFFFFF",
+//     fontSize: 16,
+//     fontWeight: "600",
+//   },
+// });

mocks/handlers.ts

@@ -0,0 +1,10 @@
+import { http, HttpResponse } from 'msw'
+
+export const handlers = [
+  http.get('https://api.example.com/user', () => {
+    return HttpResponse.json({
+      id: 1,
+      name: 'Donghyuk',
+    })
+  }),
+]

mocks/server.ts

@@ -0,0 +1,4 @@
+import { setupServer } from 'msw/node'
+import { handlers } from './handlers'
+
+export const server = setupServer(...handlers)