[Setting] nativewind 세팅 추가

.expo/README.md

@@ -0,0 +1,8 @@
+> Why do I have a folder named ".expo" in my project?
+The ".expo" folder is created when an Expo project is started using "expo start" command.
+> What do the files contain?
+- "devices.json": contains information about devices that have recently opened this project. This is used to populate the "Development sessions" list in your development builds.
+- "settings.json": contains the server configuration that is used to serve the application manifest.
+> Should I commit the ".expo" folder?
+No, you should not share the ".expo" folder. It does not contain any information that is relevant for other developers working on the project, it is specific to your machine.
+Upon project creation, the ".expo" folder is already added to your ".gitignore" file.

.expo/devices.json

@@ -0,0 +1,3 @@
+{
+  "devices": []
+}

apps/mobile/app/(tabs)/index.tsx

@@ -1,4 +1,3 @@
-import { Input } from "@ui/index";
 import { Image, StyleSheet, Platform } from "react-native";
 
 import { HelloWave } from "@/components/HelloWave";
@@ -13,9 +12,9 @@ export default function HomeScreen() {
       headerImage={<Image source={require("@/assets/images/partial-react-logo.png")} style={styles.reactLogo} />}
     >
       <ThemedView style={styles.titleContainer}>
-        <ThemedText type="title">Welcome!</ThemedText>
-        <div className="size-40 bg-purple-50">tailwind 확인용</div>
-        <Input id="email" type="email" placeholder="tailwind 확인용" />
+        <ThemedText className="bg-custom-black rounded-lg border-2 border-purple-500" type="title">
+          Welcome! 테일윈드 확인용
+        </ThemedText>
         <HelloWave />
       </ThemedView>
       <ThemedView style={styles.stepContainer}>

apps/mobile/app/_layout.tsx

@@ -4,9 +4,9 @@ import { Stack } from "expo-router";
 import * as SplashScreen from "expo-splash-screen";
 import { useEffect } from "react";
 
-import "react-native-reanimated";
 import { useColorScheme } from "@/hooks/useColorScheme";
 
+import "react-native-reanimated";
 import "../global.css";
 
 // Prevent the splash screen from auto-hiding before asset loading is complete.

apps/mobile/metro.config.js

@@ -5,20 +5,17 @@ const path = require("path");
 const projectRoot = __dirname;
 const monorepoRoot = path.resolve(projectRoot, "../..");
 
-/** @type {import('expo/metro-config').MetroConfig} */
-const config = getDefaultConfig(projectRoot);
+const config = getDefaultConfig(__dirname, { isCSSEnabled: true });
 
-// const monorepoPackages = {
-//   "@repo/ui": path.resolve(monorepoRoot, "packages/ui"),
-//   "@repo/types": path.resolve(monorepoRoot, "packages/types"),
-//   "@repo/constants": path.resolve(monorepoRoot, "packages/constants"),
-//   "@repo/eslint-config": path.resolve(monorepoRoot, "packages/eslint-config"),
-// };
-
-// config.resolver.extraNodeModules = monorepoPackages;
-// config.watchFolders = [monorepoRoot, ...Object.values(monorepoPackages)];
-config.watchFolders = [monorepoRoot];
+const monorepoPackages = {
+  //   "@repo/ui": path.resolve(monorepoRoot, "packages/ui"),
+  //   "@repo/types": path.resolve(monorepoRoot, "packages/types"),
+  //   "@repo/constants": path.resolve(monorepoRoot, "packages/constants"),
+  //   "@repo/eslint-config": path.resolve(monorepoRoot, "packages/eslint-config"),
+};
+config.watchFolders = [monorepoRoot, ...Object.values(monorepoPackages)];
 
+config.resolver.extraNodeModules = monorepoPackages;
 config.resolver.nodeModulesPaths = [
   path.resolve(projectRoot, "node_modules"),
   path.resolve(monorepoRoot, "node_modules"),

apps/mobile/tailwind.config.js

@@ -1,8 +1,14 @@
+import sharedConfig from "@repo/tailwind-config/tailwind.config";
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  // NOTE: Update this to include the paths to all of your component files.
-  content: ["./app/**/*.{js,jsx,ts,tsx}"],
-  presets: [require("nativewind/preset")],
+  content: [
+    "./src/**/*.{js,ts,jsx,tsx}",
+    "./app/**/*.{js,ts,jsx,tsx}",
+    "../../packages/ui/src/**/*.{ts,tsx}",
+    "./components/**/*.{js,ts,jsx,tsx}",
+  ],
+  presets: [require("nativewind/preset"), sharedConfig],
   theme: {
     extend: {},
   },

apps/mobile/tsconfig.json

@@ -4,15 +4,9 @@
     "strict": true,
     "baseUrl": ".",
     "paths": {
-      "@/*": [
-        "./*"
-      ],
-      "@ui/*": [
-        "../../packages/ui/*"
-      ],
-      "@/public/*": [
-        "./public/*"
-      ]
+      "@/*": ["./*"],
+      "@ui/*": ["../../packages/ui/*"],
+      "@/public/*": ["./public/*"]
     }
   },
   "include": [

apps/web/components/common/ErrorResetBoundary/index.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { type ReactNode, type ComponentType } from "react";
-import { QueryErrorResetBoundary } from "@tanstack/react-query";
 import { ErrorBoundary, type FallbackProps } from "react-error-boundary";
 
 interface ErrorResetBoundaryProps {
@@ -13,13 +12,5 @@ export default function ErrorResetBoundary({
   children,
   fallbackComponent: FallbackComponent,
 }: ErrorResetBoundaryProps): JSX.Element {
-  return (
-    <QueryErrorResetBoundary>
-      {({ reset }) => (
-        <ErrorBoundary onReset={reset} FallbackComponent={FallbackComponent}>
-          {children}
-        </ErrorBoundary>
-      )}
-    </QueryErrorResetBoundary>
-  );
+  return <ErrorBoundary FallbackComponent={FallbackComponent}>{children}</ErrorBoundary>;
 }

apps/web/components/common/Fallback/index.tsx

@@ -1,14 +1,18 @@
 "use client";
 
 import { Button } from "@ui/index";
+import { getQueryClient } from "@/lib/queryClient";
 
 interface ErrorFallbackProps {
   error: Error;
   resetErrorBoundary: () => void;
 }
 
 export default function ErrorFallback({ error, resetErrorBoundary }: ErrorFallbackProps): JSX.Element {
+  const queryClient = getQueryClient();
+
   const handleResetErrorBoundary = (): void => {
+    queryClient.removeQueries();
     resetErrorBoundary();
   };