#3 AfterQuiz Nav

22-s · Nov 24, 2024 · 55895ad · 55895ad
1 parent d4a43e4
commit 55895ad
Show file tree

Hide file tree

Showing 4 changed files with 94 additions and 68 deletions.
diff --git a/src/components/Quiz/AfterQuizComponent/OpenModalButton.js b/src/components/Quiz/AfterQuizComponent/OpenModalButton.js
@@ -1,9 +1,9 @@
-import React from 'react';
-import {StyleSheet, TouchableOpacity, Text} from 'react-native';
+import React from "react";
+import { StyleSheet, TouchableOpacity, Text } from "react-native";
 
-const OpenModalButton = () => {
+const OpenModalButton = ({ onPress }) => {
   return (
-    <TouchableOpacity style={styles.container}>
+    <TouchableOpacity style={styles.container} onPress={onPress}>
       <Text style={styles.text}>해설 보기</Text>
     </TouchableOpacity>
   );
@@ -13,15 +13,15 @@ const styles = StyleSheet.create({
   container: {
     width: 146,
     height: 53,
-    backgroundColor: '#D2E7FF',
+    backgroundColor: "#D2E7FF",
     borderRadius: 16,
-    justifyContent: 'center',
+    justifyContent: "center",
   },
   text: {
-    color: '#268AFF',
-    textAlign: 'center',
+    color: "#268AFF",
+    textAlign: "center",
     fontSize: 16,
-    fontWeight: '600',
+    fontWeight: "600",
   },
 });
 

diff --git a/src/components/Quiz/QuizDetailComponent/CorrectModal.js b/src/components/Quiz/QuizDetailComponent/CorrectModal.js
@@ -1,30 +1,45 @@
-import React from 'react';
-import {Modal, View, StyleSheet, Text} from 'react-native';
-import NextQuizButton from './button/NextQuizButton';
-import AddReviewButton from './button/AddReviewButton';
-import XButton from '../../../assets/images/QuizDetail/XButton.svg';
+import React from "react";
+import { Modal, View, StyleSheet, Text } from "react-native";
+import { useNavigation } from "@react-navigation/native";
+import NextQuizButton from "./button/NextQuizButton";
+import AddReviewButton from "./button/AddReviewButton";
+import XButton from "../../../assets/images/QuizDetail/XButton.svg";
+
+const CorrectModal = ({
+  content,
+  modalVisible,
+  setModalVisible,
+  isCorrect,
+}) => {
+  const navigation = useNavigation();
+
+  const handleClose = () => {
+    setModalVisible(false);
+    navigation.navigate("AfterQuiz");
+  };
 
-const CorrectModal = ({content, modalVisible, setModalVisible, isCorrect}) => {
   return (
     <Modal
       animationType="slide"
       transparent={true}
       visible={modalVisible}
       onRequestClose={() => {
         setModalVisible(false);
-      }}>
+      }}
+    >
       <View style={styles.centeredView}>
         <View style={styles.modalContainer}>
           <View style={styles.top}>
-           <XButton width={17} height={17} onPress={() => setModalVisible(false)} />
+            <XButton width={17} height={17} onPress={handleClose} />
           </View>
           <View style={styles.modalTitle}>
             <Text
               style={[
                 styles.titleText,
-                {color: isCorrect ? '#268AFF' : '#FF4326'},
-              ]}>
-              {isCorrect ? '정답입니다!' : '틀렸습니다'}
+                { color: isCorrect ? "#268AFF" : "#FF4326" },
+              ]}
+            >
+              {isCorrect ? "정답입니다!" : "틀렸습니다"}
             </Text>
           </View>
           <View style={styles.modalContent}>
@@ -42,57 +57,57 @@ const CorrectModal = ({content, modalVisible, setModalVisible, isCorrect}) => {
 
 const styles = StyleSheet.create({
   centeredView: {
-    backgroundColor: 'rgba(0, 0, 0, 0.40)',
+    backgroundColor: "rgba(0, 0, 0, 0.40)",
     flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
+    justifyContent: "center",
+    alignItems: "center",
   },
   modalContainer: {
-    flexDirection: 'column',
-    justifyContent: 'center',
-    alignItems: 'center',
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
     width: 288,
     height: 445,
     borderRadius: 15,
-    backgroundColor: '#FFFFFF',
+    backgroundColor: "#FFFFFF",
     padding: 21,
   },
   top: {
-    width: '100%',
-    flexDirection: 'row',
-    justifyContent: 'flex-end',
+    width: "100%",
+    flexDirection: "row",
+    justifyContent: "flex-end",
   },
   modalTitle: {
     width: 215.841,
     height: 60,
-    flexDirection: 'column',
-    justifyContent: 'center',
+    flexDirection: "column",
+    justifyContent: "center",
     marginBottom: 13,
   },
   titleText: {
-    textAlign: 'center',
+    textAlign: "center",
     fontSize: 20,
-    fontWeight: '700',
+    fontWeight: "700",
   },
   modalContent: {
-    alignItems: 'center',
+    alignItems: "center",
     width: 243,
     height: 249,
-    borderColor: '#BAC4CE',
+    borderColor: "#BAC4CE",
     borderWidth: 1,
     borderRadius: 15,
     padding: 10,
     marginBottom: 23,
   },
   text: {
     fontSize: 16,
-    fontWeight: '400',
-    color: '#72777A',
+    fontWeight: "400",
+    color: "#72777A",
   },
   bottom: {
     width: 243,
-    flexDirection: 'row',
-    justifyContent: 'space-between',
+    flexDirection: "row",
+    justifyContent: "space-between",
   },
 });
 

diff --git a/src/pages/Quiz/AfterQuiz.js b/src/pages/Quiz/AfterQuiz.js
@@ -1,18 +1,20 @@
-import React, {useState} from 'react';
-import {View, StyleSheet} from 'react-native';
-import Title from '../../components/Quiz/QuizDetailComponent/Title';
-import Content from '../../components/Quiz/QuizDetailComponent/Content';
-import CorrectModal from '../../components/Quiz/QuizDetailComponent/CorrectModal';
-import NavButtonNext from '../../components/Quiz/AfterQuizComponent/NavButtonNext';
-import NavButtonPrev from '../../components/Quiz/AfterQuizComponent/NavButtonPrev';
-import OpenModalButton from '../../components/Quiz/AfterQuizComponent/OpenModalButton';
-import AddReviewButton from '../../components/Quiz/AfterQuizComponent/AddReviewButton';
+import React, { useState } from "react";
+import { View, StyleSheet } from "react-native";
+import Title from "../../components/Quiz/QuizDetailComponent/Title";
+import Content from "../../components/Quiz/QuizDetailComponent/Content";
+import CorrectModal from "../../components/Quiz/QuizDetailComponent/CorrectModal";
+import NavButtonNext from "../../components/Quiz/AfterQuizComponent/NavButtonNext";
+import NavButtonPrev from "../../components/Quiz/AfterQuizComponent/NavButtonPrev";
+import OpenModalButton from "../../components/Quiz/AfterQuizComponent/OpenModalButton";
+import AddReviewButton from "../../components/Quiz/AfterQuizComponent/AddReviewButton";
 
 const AfterQuiz = () => {
-  const [modalVisible, setModalVisible] = useState(true);
+  const [modalVisible, setModalVisible] = useState(false);
   const [isCorrect, setIsCorrect] = useState(true);
   const [bookmark, setBookmark] = useState(false);
 
+  const openModal = () => setModalVisible(true);
+
   return (
     <View style={styles.container}>
       <View marginBottom={12}>
@@ -37,7 +39,7 @@ const AfterQuiz = () => {
         <NavButtonNext />
       </View>
       <View style={styles.bottomContainer}>
-        <OpenModalButton />
+        <OpenModalButton onPress={openModal} />
         <AddReviewButton />
       </View>
     </View>
@@ -47,32 +49,32 @@ const AfterQuiz = () => {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#F3F3F3',
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "#F3F3F3",
   },
   quizHeader: {
     marginBottom: 20,
   },
   answer: {
     width: 360,
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
     marginBottom: 20,
   },
   buttonContainer: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    width: '95%',
-    position: 'absolute',
+    flexDirection: "row",
+    justifyContent: "space-between",
+    width: "95%",
+    position: "absolute",
     zIndex: 10,
   },
   bottomContainer: {
     width: 330,
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
   },
 });
 

diff --git a/src/pages/Quiz/QuizDetail.js b/src/pages/Quiz/QuizDetail.js
@@ -1,18 +1,23 @@
 import React, { useState } from "react";
-import { View, StyleSheet } from "react-native";
+import { View, StyleSheet, Touchable } from "react-native";
 import Title from "../../components/Quiz/QuizDetailComponent/Title";
 import Content from "../../components/Quiz/QuizDetailComponent/Content";
 import O from "../../assets/images/QuizDetail/O.svg";
 import X from "../../assets/images/QuizDetail/X.svg";
 import CorrectModal from "../../components/Quiz/QuizDetailComponent/CorrectModal";
 import NavButtonNext from "../../components/Quiz/AfterQuizComponent/NavButtonNext";
 import NavButtonPrev from "../../components/Quiz/AfterQuizComponent/NavButtonPrev";
+import { TouchableOpacity } from "react-native-gesture-handler";
 
 const QuizDetail = ({ route }) => {
   const { quizId } = route.params;
-  const [modalVisible, setModalVisible] = useState(true);
+  const [modalVisible, setModalVisible] = useState(false);
   const [isCorrect, setIsCorrect] = useState(false);
 
+  const openModal = () => {
+    setModalVisible(true);
+  };
+
   return (
     <View style={styles.container}>
       <View marginBottom={12}>
@@ -26,8 +31,12 @@ const QuizDetail = ({ route }) => {
         <NavButtonNext />
       </View>
       <View style={styles.answer}>
-        <O width={165} height={75} />
-        <X width={165} height={75} />
+        <TouchableOpacity onPress={openModal}>
+          <O width={165} height={75} />
+        </TouchableOpacity>
+        <TouchableOpacity onPress={openModal}>
+          <X width={165} height={75} />
+        </TouchableOpacity>
       </View>
       <CorrectModal
         content="출근 시각 10분 일찍 출근해서 업무 시작 준비를 해야합니다! 여유를 가지고 하루 일과 및 계획을 점검하며, 간단한 청소 정리정돈으로 하루를 시작합니다."