-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Showing
27 changed files
with
316 additions
and
99 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
8 changes: 8 additions & 0 deletions
8
ios/BOB_FrontEnd.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| <?xml version="1.0" encoding="UTF-8"?> | ||
| <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd"> | ||
| <plist version="1.0"> | ||
| <dict> | ||
| <key>IDEDidComputeMac32BitWarning</key> | ||
| <true/> | ||
| </dict> | ||
| </plist> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,121 @@ | ||
| import React, {FC, useEffect, useRef} from 'react'; | ||
| import {View, Animated, Text, StyleSheet} from 'react-native'; | ||
| import {TouchableOpacity} from 'react-native-gesture-handler'; | ||
| import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; | ||
| import {useStyle} from '../hooks'; | ||
| import {CircleBar} from './CircleBar'; | ||
|
|
||
| const HEADER_HEIGHT = 250; | ||
| type AnimatedHeaderProps = { | ||
| animatedValue: Animated.Value; | ||
| }; | ||
|
|
||
| export const AnimatedHeader: FC<AnimatedHeaderProps> = ({animatedValue}) => { | ||
| const heightAnimStyle = useStyle({ | ||
| height: animatedValue.interpolate({ | ||
| inputRange: [0, HEADER_HEIGHT], | ||
| outputRange: [HEADER_HEIGHT, 120], | ||
| extrapolate: 'clamp', | ||
| }), | ||
| }); | ||
|
|
||
| const circleAnimStyle = useStyle({ | ||
| opacity: animatedValue.interpolate({ | ||
| inputRange: [100, 140], | ||
| outputRange: [1, 0], | ||
| extrapolate: 'clamp', | ||
| }), | ||
| transform: [ | ||
| { | ||
| scale: animatedValue.interpolate({ | ||
| inputRange: [50, 150], | ||
| outputRange: [1, 0.4], | ||
| extrapolate: 'clamp', | ||
| }), | ||
| }, | ||
| ], | ||
| }); | ||
|
|
||
| const barAnimStyle = useStyle({ | ||
| opacity: animatedValue.interpolate({ | ||
| inputRange: [130, 160], | ||
| outputRange: [0, 1], | ||
| extrapolate: 'clamp', | ||
| }), | ||
| }); | ||
|
|
||
| const styles = StyleSheet.create({ | ||
| headerWrap: { | ||
| position: 'absolute', | ||
| top: 0, | ||
| left: 0, | ||
| right: 0, | ||
| zIndex: 10, | ||
| backgroundColor: 'white', | ||
| width: '100%', | ||
| shadowColor: '#000', | ||
| shadowOffset: { | ||
| width: 0, | ||
| height: 2, | ||
| }, | ||
| shadowOpacity: 0.35, | ||
| shadowRadius: 3.84, | ||
| elevation: 5, | ||
| borderBottomLeftRadius: 20, | ||
| borderBottomRightRadius: 20, | ||
| }, | ||
| flexRow: { | ||
| flexDirection: 'row', | ||
| alignItems: 'center', | ||
| }, | ||
| locationText: { | ||
| fontSize: 20, | ||
| fontWeight: '600', | ||
| }, | ||
| headerRow1: { | ||
| margin: 15, | ||
| }, | ||
| circleWrap: { | ||
| position: 'absolute', | ||
| bottom: 20, | ||
| alignSelf: 'center', | ||
| }, | ||
| barWrap: { | ||
| marginTop: 20, | ||
| marginLeft: 15, | ||
| }, | ||
| }); | ||
|
|
||
| const expandHeader = () => { | ||
| return ( | ||
| <Animated.View style={[styles.circleWrap, circleAnimStyle]}> | ||
| <CircleBar radius={75} progress={7} /> | ||
| <Text style={{marginTop: 5}}>미션 10개 달성시 1000P</Text> | ||
| </Animated.View> | ||
| ); | ||
| }; | ||
|
|
||
| const shrinkHeader = () => { | ||
| return ( | ||
| <Animated.View style={[barAnimStyle, styles.barWrap]}> | ||
| <View style={{width: '80%', borderWidth: 5, borderColor: '#615EFF'}} /> | ||
| <Text style={{marginTop: 5}}>미션 10개 달성시 1000P</Text> | ||
| </Animated.View> | ||
| ); | ||
| }; | ||
|
|
||
| return ( | ||
| <Animated.View style={[styles.headerWrap, heightAnimStyle]}> | ||
| <View style={[styles.flexRow, styles.headerRow1]}> | ||
| <TouchableOpacity style={[styles.flexRow]}> | ||
| <Text style={[styles.locationText]}>삼성동</Text> | ||
| <Icon name="menu-down" size={18} color="black" /> | ||
| </TouchableOpacity> | ||
| </View> | ||
| {shrinkHeader()} | ||
| {expandHeader()} | ||
| </Animated.View> | ||
| ); | ||
| }; | ||
|
|
||
| export default AnimatedHeader; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| import React, {useEffect} from 'react'; | ||
| import type {FC} from 'react'; | ||
| import {View, StyleSheet, Text} from 'react-native'; | ||
| import {Colors} from 'react-native-paper'; | ||
|
|
||
| export type CircleBarProps = { | ||
| radius: number; | ||
| progress: number; | ||
| }; | ||
| export const CircleBar: FC<CircleBarProps> = ({radius, progress}) => { | ||
| const styles = StyleSheet.create({ | ||
| flex: {flex: 1}, | ||
| bigCircle: { | ||
| width: radius * 2, | ||
| height: radius * 2, | ||
| borderRadius: radius, | ||
| backgroundColor: '#EDEDED', | ||
| justifyContent: 'center', | ||
| alignItems: 'center', | ||
| }, | ||
| progressLayer: { | ||
| width: radius * 2, | ||
| height: radius * 2, | ||
| borderRadius: radius, | ||
| borderWidth: 7, | ||
| borderColor: '#615EFF', | ||
| position: 'absolute', | ||
| }, | ||
| }); | ||
| return ( | ||
| <View style={[styles.flex]}> | ||
| <View style={styles.bigCircle}> | ||
| <View style={[styles.progressLayer]} /> | ||
| <Text>{progress}</Text> | ||
| </View> | ||
| </View> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| import React from 'react'; | ||
| import type {FC} from 'react'; | ||
| import {View, StyleSheet, Text, TouchableOpacity} from 'react-native'; | ||
| import {Colors} from 'react-native-paper'; | ||
|
|
||
| export type HomeMissionProps = { | ||
| name: string; | ||
| category: string; | ||
| day: number; | ||
| minCost: number; | ||
| point: number; | ||
| }; | ||
|
|
||
| export const HomeMission: FC<HomeMissionProps> = ({name, category, day, minCost, point}) => { | ||
| return ( | ||
| <View style={[styles.missionBox]}> | ||
| <Text style={[styles.dDay]}>D-{day}</Text> | ||
| <View style={[styles.nameBox]}> | ||
| <Text style={[styles.nameText]}>{name}</Text> | ||
| <Text style={[styles.categoryText]}>{category}</Text> | ||
| </View> | ||
| <View style={[styles.seperateLine]} /> | ||
| <View style={[styles.contentBox]}> | ||
| <Text> | ||
| <Text style={[styles.boldText]}>{minCost}원 이상</Text> | ||
| <Text>의 식사시 </Text> | ||
| <Text style={[styles.pointText]}>{point}P 적립</Text> | ||
| </Text> | ||
| </View> | ||
| <TouchableOpacity> | ||
| <View style={[styles.missionButton]}> | ||
| <Text>미션 도전!</Text> | ||
| </View> | ||
| </TouchableOpacity> | ||
| </View> | ||
| ); | ||
| }; | ||
|
|
||
| const styles = StyleSheet.create({ | ||
| missionBox: { | ||
| flex: 1, | ||
| height: 190, | ||
| width: '100%', | ||
| backgroundColor: Colors.white, | ||
| }, | ||
| dDay: {position: 'absolute', top: 20, right: 30, fontWeight: '600', color: '#615EFF'}, | ||
| nameBox: {flexDirection: 'column', justifyContent: 'center', alignItems: 'center'}, | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| export * from './AnimatedHeader'; | ||
| export * from './HomeMission'; | ||
| export * from './CircleBar'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export * from './useStyle'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| import {useMemo} from 'react'; | ||
|
|
||
| export const useStyle = (style: object, deps: any[] = []) => { | ||
| return useMemo(() => style, deps); | ||
| }; |
Oops, something went wrong.