From 20c6d37617825a0e4e3d5b7b60241a15142d4b13 Mon Sep 17 00:00:00 2001 From: catherine <68558189+jg980404@users.noreply.github.com> Date: Mon, 22 Nov 2021 01:00:37 +0900 Subject: [PATCH] =?UTF-8?q?=EC=95=8C=EB=A6=BC=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20CSS=20=EC=9E=91=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + src/components/MissionList.js | 10 +-- src/routes/Mission.js | 2 +- src/routes/Notification.js | 149 +++++++++++++++++++++++++++++++++- src/routes/Settings.js | 2 +- yarn.lock | 17 +++- 6 files changed, 172 insertions(+), 9 deletions(-) diff --git a/package.json b/package.json index 93f7dcb..d2af1eb 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "react": "17.0.1", "react-dom": "17.0.1", "react-native": "0.64.3", + "react-native-modal": "^13.0.0", "react-native-safe-area-context": "3.3.2", "react-native-screens": "~3.8.0", "react-native-touchable-scale": "^2.1.2", diff --git a/src/components/MissionList.js b/src/components/MissionList.js index 20787ef..c9567b6 100644 --- a/src/components/MissionList.js +++ b/src/components/MissionList.js @@ -1,9 +1,9 @@ -import React from 'react'; +import React, { useState } from 'react'; import { StyleSheet, Text, View, TouchableOpacity } from 'react-native'; import styled from 'styled-components'; // Each 미션 리스트 -const EachMissionContainer = styled.TouchableOpacity` +const EachMissionContainer = styled.View` /* background-color: #E5C1C5; */ width: 100%; height: 18%; @@ -15,7 +15,7 @@ const EachMissionContainer = styled.TouchableOpacity` `; // 미션 진행 상황(green, red, gray) -const MissionResultContainer = styled.View` +const MissionResultContainer = styled.TouchableOpacity` flex: 1; justify-content: center; align-items: center; @@ -48,9 +48,9 @@ const MissionMoney = styled.Text` export default function MissionList() { return ( - + - + diff --git a/src/routes/Mission.js b/src/routes/Mission.js index 96f01a8..30d5e92 100644 --- a/src/routes/Mission.js +++ b/src/routes/Mission.js @@ -176,7 +176,7 @@ export default function Mission() { - + diff --git a/src/routes/Notification.js b/src/routes/Notification.js index 9fbb7e4..ad5a949 100644 --- a/src/routes/Notification.js +++ b/src/routes/Notification.js @@ -3,16 +3,163 @@ import { StyleSheet, Text, View } from 'react-native'; import styled from 'styled-components/native'; import BackButtonHeader from '../components/BackButtonHeader'; +const NotificationList = ['영어 숙제하기', '학원 다녀오기', '편식하지 않기', '게임 시간 줄이기', '집에 일찍 돌아오기', '저축 하기'] + +// 전체 화면 const Screen = styled.View` width: 100%; height: 100%; display: flex; `; +// 알림 내역 Layout +const TitleContainer = styled.View` + /* background-color: #C3E2DD; */ + width: 100%; + height: 13%; + position: absolute; + justify-content: center; + align-items: center; +`; + +const MainTitle = styled.Text` + position: absolute; + bottom: 20px; + font-family: Helvetica_Bold; + font-size: 18px; +`; + +// 알림 리스트 Layout +const NotificationContainer = styled.View` + /* background-color: #6ECEDA; */ + width: 100%; + height: 100%; +`; + +// Each 알림 리스트 컨테이너 +const EachNotificationContainer = styled.View` + /* background-color: #E5C1C5; */ + width: 100%; + height: 10%; + display: flex; + padding: 10px; +`; + +const NotificationManage = styled.View` + background-color: #ffffff; + width: 100%; + height: 100%; + border-radius: 15px; + display: flex; + justify-content: center; + flex-direction: row; + margin-bottom: 10px; +`; + +const NotificationPhotoContainer = styled.View` + justify-content: center; + flex: 1.2; + left: 10; +`; + +const NotificationPhoto = styled.View` + background-color: #7E7E7E; + width: 45px; + height: 45px; + border-radius: 45px; + opacity: 0.2; +`; + +const NotificationTitleContainer = styled.View` + flex: 2.5; + justify-content: center; +`; + +const NotificationTitle = styled.Text` + font-size: 15px; + color: #6E6E6E; +`; + +const NotificationMoney = styled.Text` + font-size: 10px; + color: #6E6E6E; + margin-top: 5px; +`; + +const NotificationTimeContainer = styled.View` + /* background-color: #E8E7D2; */ + width: 10%; + height: 100%; + justify-content: center; + flex: 0.5; +`; + +const NotificationTime = styled.Text` + font-size: 9px; + color: #505050; + text-align: center; +`; + +// 진행 상황(송금, 완료) +const NotificationResultContainer = styled.View` + /* background-color: #D2D5B8; */ + width: 10%; + height: 100%; + justify-content: center; + align-items: center; + flex: 1.5; +`; + +const NotificationResult = styled.View` + background-color: #00AC84; + width: 50%; + height: 50%; + border-radius: 15px; + justify-content: center; +`; + +const NotificationResultTitle = styled.Text` + font-size: 10px; + text-align: center; + color: white; +`; + export default function Notification() { return ( - + + 알림 내역 + + + + + + + { NotificationList.map((eachNotification) => ( + + + + + + + + {eachNotification} + 15000원 + + + + 3시간 전 + + + + + 송금 + + + + )) } + + ) } \ No newline at end of file diff --git a/src/routes/Settings.js b/src/routes/Settings.js index 626100e..b07673b 100644 --- a/src/routes/Settings.js +++ b/src/routes/Settings.js @@ -57,7 +57,7 @@ const TabArrow = styled.Image` `; -export default function Notification() { +export default function Settings() { const navigation = useNavigation(); diff --git a/yarn.lock b/yarn.lock index 5bf0874..5949ae2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4506,7 +4506,7 @@ prompts@^2.4.0: kleur "^3.0.3" sisteransi "^1.0.5" -prop-types@^15.6.0, prop-types@^15.7.2: +prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2: version "15.7.2" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5" integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ== @@ -4575,6 +4575,13 @@ react-is@^17.0.1: resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0" integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w== +react-native-animatable@1.3.3: + version "1.3.3" + resolved "https://registry.yarnpkg.com/react-native-animatable/-/react-native-animatable-1.3.3.tgz#a13a4af8258e3bb14d0a9d839917e9bb9274ec8a" + integrity sha512-2ckIxZQAsvWn25Ho+DK3d1mXIgj7tITkrS4pYDvx96WyOttSvzzFeQnM2od0+FUMzILbdHDsDEqZvnz1DYNQ1w== + dependencies: + prop-types "^15.7.2" + react-native-codegen@^0.0.6: version "0.0.6" resolved "https://registry.yarnpkg.com/react-native-codegen/-/react-native-codegen-0.0.6.tgz#b3173faa879cf71bfade8d030f9c4698388f6909" @@ -4584,6 +4591,14 @@ react-native-codegen@^0.0.6: jscodeshift "^0.11.0" nullthrows "^1.1.1" +react-native-modal@^13.0.0: + version "13.0.0" + resolved "https://registry.yarnpkg.com/react-native-modal/-/react-native-modal-13.0.0.tgz#b7117400cae8548e713eed760077dee44f78628e" + integrity sha512-k6r9T31mc7HIDFj1V53ceAAN1dwc8052c4JLtDVEmEQ19Bbq9yiLXoDsQuNb+hB8A+2tVOXmo5Gq4IQfb11upw== + dependencies: + prop-types "^15.6.2" + react-native-animatable "1.3.3" + react-native-safe-area-context@3.3.2: version "3.3.2" resolved "https://registry.yarnpkg.com/react-native-safe-area-context/-/react-native-safe-area-context-3.3.2.tgz#9549a2ce580f2374edb05e49d661258d1b8bcaed"