From 55895add98f2768c2f38d2114bebebac24c803fb Mon Sep 17 00:00:00 2001 From: et357 Date: Sun, 24 Nov 2024 15:48:57 +0900 Subject: [PATCH] #3 AfterQuiz Nav --- .../AfterQuizComponent/OpenModalButton.js | 18 ++--- .../Quiz/QuizDetailComponent/CorrectModal.js | 77 +++++++++++-------- src/pages/Quiz/AfterQuiz.js | 50 ++++++------ src/pages/Quiz/QuizDetail.js | 17 +++- 4 files changed, 94 insertions(+), 68 deletions(-) diff --git a/src/components/Quiz/AfterQuizComponent/OpenModalButton.js b/src/components/Quiz/AfterQuizComponent/OpenModalButton.js index 4f51d5a..2733ac4 100644 --- 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 ( - + 해설 보기 ); @@ -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 index 425e71a..073ea51 100644 --- a/src/components/Quiz/QuizDetailComponent/CorrectModal.js +++ b/src/components/Quiz/QuizDetailComponent/CorrectModal.js @@ -1,10 +1,23 @@ -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 ( { visible={modalVisible} onRequestClose={() => { setModalVisible(false); - }}> + }} + > - setModalVisible(false)} /> + - {isCorrect ? '정답입니다!' : '틀렸습니다'} + { color: isCorrect ? "#268AFF" : "#FF4326" }, + ]} + > + {isCorrect ? "정답입니다!" : "틀렸습니다"} @@ -42,43 +57,43 @@ 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, @@ -86,13 +101,13 @@ const styles = StyleSheet.create({ }, 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 index f50c317..69e0699 100644 --- 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 ( @@ -37,7 +39,7 @@ const AfterQuiz = () => { - + @@ -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 index 949654b..3f5137c 100644 --- a/src/pages/Quiz/QuizDetail.js +++ b/src/pages/Quiz/QuizDetail.js @@ -1,5 +1,5 @@ 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"; @@ -7,12 +7,17 @@ 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 ( @@ -26,8 +31,12 @@ const QuizDetail = ({ route }) => { - - + + + + + +