diff --git a/.idea/other.xml b/.idea/other.xml new file mode 100644 index 0000000..4604c44 --- /dev/null +++ b/.idea/other.xml @@ -0,0 +1,252 @@ + + + + + + \ No newline at end of file diff --git a/frontend/components/myPage/MyPage.jsx b/frontend/components/myPage/MyPage.jsx index 7e0576c..daaa5e9 100644 --- a/frontend/components/myPage/MyPage.jsx +++ b/frontend/components/myPage/MyPage.jsx @@ -174,6 +174,7 @@ const styles = StyleSheet.create({ marginRight: 12, marginTop: 13, marginBottom: 20, + borderRadius: 3, }, // resize 모드 적용 // image: { diff --git a/frontend/components/story/Condition.jsx b/frontend/components/story/Condition.jsx index 7c8a4c5..1498f82 100644 --- a/frontend/components/story/Condition.jsx +++ b/frontend/components/story/Condition.jsx @@ -11,7 +11,7 @@ import { import {defaultScreen} from '../../styles/layout'; import {useNavigation} from '@react-navigation/native'; import {useRoute} from '@react-navigation/native'; -import codegenNativeCommands from 'react-native/Libraries/Utilities/codegenNativeCommands'; +import IonIcon from 'react-native-vector-icons/Ionicons'; const {width} = Dimensions.get('window'); @@ -24,54 +24,89 @@ function Condition() { navigation.navigate('OnStory', {situation, condition}); // 'Situation'으로 이동 }; + const goBack = () => { + navigation.navigate('Situation'); // 'StoryHome' 페이지로 네비게이트 + }; + return ( - - {situation} - - handlePress(situation, 1)} - style={styles.situation}> - - - handlePress(situation, 2)} - style={styles.situation}> - - - handlePress(situation, 3)} - style={styles.situation}> - - - handlePress(situation, 4)} - style={styles.situation}> - - + + + + + + + + 30분 코스 + 오늘의 컨디션을 선택해 주세요 + + + handlePress(situation, 1)} + style={styles.situation}> + + + handlePress(situation, 2)} + style={styles.situation}> + + + handlePress(situation, 3)} + style={styles.situation}> + + + handlePress(situation, 4)} + style={styles.situation}> + + + + ); } const styles = StyleSheet.create({ + bigContainer: { + flex: 1, + paddingHorizontal: '7%', + backgroundColor: 'white', + }, container: { flex: 1, - alignItems: 'center', justifyContent: 'center', + alignItems: 'center', padding: 20, }, + textContainer: { + alignItems: 'flex-start', + marginBottom: 45, + // backgroundColor: 'red', + }, + textBig: { + color: 'black', + fontSize: 26, + fontWeight: '700', + marginBottom: 7, + }, + textSmall: { + color: 'black', + fontSize: 13, + fontWeight: '300', + }, situationBox: { flexDirection: 'row', flexWrap: 'wrap', // 2x2 그리드로 배치 @@ -81,14 +116,9 @@ const styles = StyleSheet.create({ situation: { width: '48%', // 각 이미지의 너비 (전체의 절반 - 간격을 위한 여유) aspectRatio: 1, // 정사각형 비율 유지 - marginBottom: 10, // 아래쪽 간격 + marginBottom: 8, // 아래쪽 간격 marginRight: '2%', // 항목 간의 가로 간격 }, - inside: { - width: '100%', // 각 이미지의 너비 (전체의 절반 - 간격을 위한 여유) - aspectRatio: 1, // 정사각형 비율 유지 - backgroundColor: 'yellow', // 확인용 배경색 - }, image: { width: '100%', height: '100%', diff --git a/frontend/components/story/Home.jsx b/frontend/components/story/Home.jsx index b96f103..bf437ec 100644 --- a/frontend/components/story/Home.jsx +++ b/frontend/components/story/Home.jsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, {useState} from 'react'; import { View, Text, @@ -15,21 +15,35 @@ import {useNavigation} from '@react-navigation/native'; const {width} = Dimensions.get('window'); // 화면 너비 가져오기 const topCategories = [ - '홈', - '선사시대', - '삼국시대', - '고려시대', - '조선시대', - '일제강점기', - '근현대사', + {name: '홈', screen: 'HomeScreen'}, + {name: '선사시대', screen: 'PrehistoricScreen'}, + {name: '삼국시대', screen: 'ThreeKingdomsScreen'}, + {name: '고려시대', screen: 'GoryeoScreen'}, + {name: '조선시대', screen: 'JoseonScreen'}, + {name: '일제강점기', screen: 'ColonialScreen'}, + {name: '근현대사', screen: 'ModernHistoryScreen'}, ]; function Home() { + const [selectedCategory, setSelectedCategory] = useState('홈'); // 기본값 '홈' const navigation = useNavigation(); const renderItem = ({item, index}) => ( - - {item} + { + setSelectedCategory(item.name); + if (item.name !== '홈') { + navigation.navigate(item.screen); + } + }}> + + {item.name} + ); @@ -46,81 +60,119 @@ function Home() { item} + keyExtractor={item => item.name} horizontal // 가로 방향 스크롤 showsHorizontalScrollIndicator={false} // 가로 스크롤 인디케이터 숨기기 contentContainerStyle={styles.listContent} /> - 진행 중인 스토리 - - handleStoryPress('storyIndependence')}> - - - - - 전장의 한복판에서 (Coming soon) - - - handleStoryPress('storyImage2')}> - - - handleStoryPress('storyImage6')}> - - - handleStoryPress('storyImage5')}> - - - - - 살고 싶다면 일단 뛰어! (Coming soon) - - - handleStoryPress('storyImage3')}> - - - handleStoryPress('storyImage4')}> - - - handleStoryPress('storyImage1')}> - - - handleStoryPress('storyImage7')}> - - - + {selectedCategory === '홈' && ( + <> + 진행 중인 스토리 + + handleStoryPress('storyIndependence')}> + + + + + 전장의 한복판에서 (Coming soon) + + + handleStoryPress('storyImage2')}> + + + handleStoryPress('storyImage6')}> + + + handleStoryPress('storyImage5')}> + + + + + 살고 싶다면 일단 뛰어! (Coming soon) + + + handleStoryPress('storyImage3')}> + + + handleStoryPress('storyImage4')}> + + + handleStoryPress('storyImage1')}> + + + handleStoryPress('storyImage7')}> + + + + + )} + {selectedCategory === '선사시대' && ( + <> + + 문명의 뿌리를 찾아서, 선사시대의 놀라운 이야기로 떠나보세요. + + + handleStoryPress('storyImage3')}> + + + handleStoryPress('storyImage4')}> + + + handleStoryPress('storyImage1')}> + + + handleStoryPress('storyImage7')}> + + + + + )} ); } @@ -136,19 +188,13 @@ const styles = StyleSheet.create({ fontWeight: '700', fontSize: 15, }, - // // resizeMode 적용 - // image: { - // width: width * 0.3, // 화면 너비의 30% - // height: width * 0.6, // 화면 너비의 60% - // resizeMode: 'contain', // 이미지 비율 유지 - // marginHorizontal: 5, // 이미지 사이의 간격 - // }, image: { width: width * 0.3, height: width * 0.5, - marginRight: 12, + marginRight: 7, marginTop: 13, marginBottom: 20, + borderRadius: 3, }, listContent: { flexGrow: 1, @@ -167,6 +213,12 @@ const styles = StyleSheet.create({ fontWeight: 'bold', }, storyLists: {alignItems: 'center'}, + topCategoriesText: { + fontSize: 20, + color: 'black', + fontWeight: 'bold', + marginRight: 80, + }, }); export default Home; diff --git a/frontend/components/story/OnStory.jsx b/frontend/components/story/OnStory.jsx index 3e9b764..bba4b79 100644 --- a/frontend/components/story/OnStory.jsx +++ b/frontend/components/story/OnStory.jsx @@ -1,3 +1,4 @@ +<<<<<<< HEAD import React, {useEffect, useState} from 'react'; import { View, @@ -8,14 +9,21 @@ import { TouchableOpacity, Modal, } from 'react-native'; +======= +import React from 'react'; +import {View, Text, StyleSheet, Button, ActivityIndicator} from 'react-native'; +>>>>>>> a5dabd7d912b13d3845c8dd06b89330d89bd5d6b import {useDataTracking} from './useDataTracking'; import {useNavigation} from '@react-navigation/native'; import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome'; const OnStory = () => { const navigation = useNavigation(); +<<<<<<< HEAD const [modalVisible, setModalVisible] = useState(false); +======= +>>>>>>> a5dabd7d912b13d3845c8dd06b89330d89bd5d6b const { steps, distance, @@ -27,9 +35,9 @@ const OnStory = () => { error, isPaused, togglePause, - isMusicEnded, } = useDataTracking(); +<<<<<<< HEAD const closeModal = () => { setModalVisible(false); navigation.navigate('Home'); @@ -51,6 +59,11 @@ const OnStory = () => { return () => clearTimeout(timer); }, [isMusicEnded, navigation]); +======= + const handlePress = () => { + navigation.navigate('Condition'); + }; +>>>>>>> a5dabd7d912b13d3845c8dd06b89330d89bd5d6b const formatPace = pace => { const minutes = Math.floor(pace); @@ -73,6 +86,7 @@ const OnStory = () => { return ( +<<<<<<< HEAD {distance.toFixed(2)} @@ -130,6 +144,22 @@ const OnStory = () => { +======= + OnStory 화면 +