25-26-MOBILE-Assignment-07-유이준

.github/CODEOWNERS

@@ -1,17 +1,2 @@
-# Organizer
-* @kjoon418 @junseok0304
-
-# Backend
-* @jihoo2002 @bomin0214 @TwooTwoo @ggok0265
-
-# Web
-* @ten0213
-
 # Mobile
 * @Han6262
-
-# PM
-* @iamseoyoung @tto-oy
-
-# Design
-* @hyeonji44

.github/auto_assign.yml

@@ -1,2 +1,19 @@
-addReviewers: false
-addAssignees: author
+# Set to true to add reviewers to pull requests
+addReviewers: true
+
+# Set to true to add assignees to pull requests
+addAssignees: true
+
+# A list of reviewers to be added to pull requests (GitHub user name)
+reviewers: 
+  - reviewerA
+  - reviewerB
+  - reviewerC
+
+# A list of keywords to be skipped the process that add reviewers if pull requests include it 
+skipKeywords:
+  - wip
+
+# A number of reviewers added to the pull request
+# Set 0 to add all the reviewers (default: 0)
+numberOfReviewers: 0

App.js

@@ -0,0 +1,3 @@
+import App from "./src/App";
+
+export default App;

src/App.js

@@ -0,0 +1,22 @@
+import React from "react";
+import { StyleSheet, View } from "react-native";
+import { NavigationContainer } from "@react-navigation/native";
+import AuthStack from "../src/navigaitons/AuthStack";
+import { UserProvider } from "./context/UserContext"; 
+
+export default function App() {
+  return (
+    <UserProvider>
+      <NavigationContainer>
+        <AuthStack/>
+      </NavigationContainer>
+    </UserProvider>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#fff",
+  },
+});

src/api/auth.js

@@ -0,0 +1,11 @@
+export const signInAsync = (email, password) => {
+  return new Promise((resolve, reject) => {
+    setTimeout(() => {
+      if (email === "dlwns1221@gmail.com" && password === "qlalfqjsgh") {
+        resolve({ id: "u1", name: "어드민", email });
+      } else {
+        reject(new Error("INVALID_CREDENTIALS"));
+      }
+    }, 1000);
+  });
+};

src/componets/Button.js

@@ -0,0 +1,40 @@
+import React from "react";
+import { Pressable, Text, StyleSheet } from "react-native";
+import PropTypes from "prop-types";
+
+export default function Button({ title, onPress, disabled }) {
+  return (
+    <Pressable
+      onPress={onPress}
+      disabled={disabled}
+      style={[
+        styles.button,
+        { backgroundColor: disabled ? "#c8d7f1ff" : "#2d66f6ff" },
+      ]}
+    >
+      <Text style={styles.text}>{title}</Text>
+    </Pressable>
+  );
+}
+
+Button.propTypes = {
+  title: PropTypes.string.isRequired,
+  onPress: PropTypes.func,
+  disabled: PropTypes.bool,
+};
+
+const styles = StyleSheet.create({
+  button: {
+    width: "100%",
+    height: 48,
+    borderRadius: 10,
+    justifyContent: "center",
+    alignItems: "center",
+    marginTop: 28,
+  },
+  text: {
+    fontSize: 15,
+    fontWeight: "600",
+    color: "#ffffff",
+  },
+});

src/componets/Input.js

@@ -0,0 +1,73 @@
+import React, { useState } from "react";
+import { View, Text, TextInput, StyleSheet } from "react-native";
+import PropTypes from "prop-types";
+import { MaterialIcons } from "@expo/vector-icons";
+
+export const KeyboardTypes = {
+  DEFAULT: "default",
+  EMAIL: "email-address",
+};
+
+function Input({ title, placeholder, keyboardType , secureTextEntry, iconName, value, onChangeText }) {
+  const [isFocused, setIsFocused] = useState(false);
+  return (
+    <View style={styles.container}>
+      {!!title && <Text style={styles.title}>{title}</Text>}
+      <View style={[styles.wrap, { borderColor: isFocused ? "#2F6BFF" : "#ccc" },
+      ]}
+      >
+      <MaterialIcons name={iconName} size={20} color="blue" style={styles.icon} /> 
+      <TextInput  
+        style={styles.input}
+        placeholder={placeholder ?? title}
+        placeholderTextColor="#a3a3a3"
+        keyboardType={keyboardType}
+        secureTextEntry={secureTextEntry}
+        value={value}
+        onChangeText={onChangeText}
+        onFocus={() => setIsFocused(true)}
+        onBlur={() => setIsFocused(false)}
+      />
+    </View>
+  </View>
+  );
+}
+
+Input.propTypes = {
+  title: PropTypes.string.isRequired,
+  placeholder: PropTypes.string,
+  iconName: PropTypes.string,
+  value : PropTypes.string,
+  onChangeText : PropTypes.func,
+};
+
+export default Input;
+
+const styles = StyleSheet.create({
+  container: { 
+    width: "100%", 
+},
+  title: { 
+    fontSize: 14, 
+    color: "#7b7171ff", 
+    marginTop: 20,
+    marginBottom: 5,
+},
+  input: {
+    flex: 1,
+    color: "black",
+  },
+  wrap: {
+    width: "100%",
+    height: 49,
+    borderWidth: 1,
+    borderRadius: 7,
+    borderColor: "#2F6BFF",
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: 10,
+  },
+  icon: {
+    marginRight: 5,
+  },
+});

src/context/UserContext.js

@@ -0,0 +1,13 @@
+import React, { createContext, useState } from "react";
+
+export const UserContext = createContext();
+
+export function UserProvider({ children }) {
+  const [user, setUser] = useState(null);
+
+  return (
+    <UserContext.Provider value={{ user, setUser }}>
+      {children}
+    </UserContext.Provider>
+  );
+}

src/navigaitons/AuthStack.js

@@ -0,0 +1,35 @@
+import React from "react";
+import { createNativeStackNavigator } from "@react-navigation/native-stack";
+import SignInScreen from "../screens/SignInScreen";
+import ListScreen from "../screens/ListScreen";
+
+const Stack = createNativeStackNavigator();
+
+const AuthStack = () => {
+  return (
+    <Stack.Navigator
+      initialRouteName="SignIn"
+      screenOptions={{
+        headerTintColor: "red",
+        headerBackTitle: "뒤로가기",
+      }}
+    >
+      <Stack.Screen
+        name="SignIn"
+        component={SignInScreen}
+        options={{
+          headerShown: false,
+        }}
+      />
+      <Stack.Screen
+        name="List"
+        component={ListScreen}
+        options={{
+          headerTintColor: "green",
+        }}
+      />
+    </Stack.Navigator>
+  );
+};
+
+export default AuthStack;

src/screens/ListScreen.js

@@ -0,0 +1,67 @@
+import React, { useContext, useState, memo } from "react";
+import { View, Text, FlatList, Pressable, StyleSheet } from "react-native";
+import { UserContext } from "../context/UserContext";
+
+export default function ListScreen() {
+  const { user } = useContext(UserContext);
+  const [todos, setTodos] = useState([
+    { id: 1, text: "잠자기", done: false },
+    { id: 2, text: "밥먹기", done: false },
+    { id: 3, text: "GDG 과제하기..", done: true},
+  ]);
+
+  const toggle = (id) => {
+    setTodos((prev) =>
+      prev.map((t) => (t.id === id ? { ...t, done: !t.done } : t))
+    );
+  };
+
+  const remove = (id) => {
+    setTodos((prev) => prev.filter((t) => t.id !== id));
+  };
+
+  const TodoItem = memo(({ item }) => (
+    <View style={styles.row}>
+      <Pressable onPress={() => toggle(item.id)}>
+        <Text style={styles.check}>{item.done ? "O" : "X"}</Text>   {/*체크 아이콘 나중에 수정할 예정*/}
+      </Pressable>
+
+      <Text style={[styles.text, item.done && styles.done]}>
+        {item.text}
+      </Text>
+
+      <Pressable onPress={() => remove(item.id)}>
+        <Text style={styles.delete}>쓰레기통</Text>  {/*스레기통 아이콘 나중에 수정할 예정*/}
+      </Pressable>
+    </View>
+  ));
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>리스트 페이지</Text>
+
+      <Text style={styles.user}>
+        {user ? `로그인: ${user.email}` : "로그인 정보 없음"}
+      </Text>
+
+      <FlatList
+        data={todos}
+        keyExtractor={(item) => item.id.toString()}
+        renderItem={({ item }) => <TodoItem item={item} />}
+        ListEmptyComponent={<Text style={styles.empty}>할 일을 추가해주세요</Text>}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1, paddingTop: 50, paddingHorizontal: 20 },
+  title: { fontSize: 22, fontWeight: "bold", marginBottom: 10 },
+  user: { marginBottom: 20, fontSize: 14 },
+  row: { flexDirection: "row", alignItems: "center", paddingVertical: 10 },
+  check: { fontSize: 24, marginRight: 10 },
+  text: { flex: 1, fontSize: 16 },
+  done: { textDecorationLine: "line-through", color: "#777" },
+  delete: { fontSize: 20, marginLeft: 10 },
+  empty: { textAlign: "center", marginTop: 30, fontSize: 16 },
+});