dypark26 · no-pla · Jan 12, 2023 · Jan 12, 2023
diff --git a/src/Hooks/usePill.js b/src/Hooks/usePill.js
@@ -54,7 +54,6 @@ export const useAddPillData = () => {
     // 성공이든 실패든 끝나면 항상 리패치합니다.
     onSettled: () => {
       queryClient.invalidateQueries({ queryKey: ['pill-list'] });
-      console.log('성공');
     },
   });
 };

diff --git a/src/components/GraphicStatus.jsx b/src/components/GraphicStatus.jsx
@@ -3,11 +3,13 @@ import styled from '@emotion/native';
 import { COLORS } from '../shared/color';
 import { useUID } from '../Hooks/useAuth';
 import { useGetPillData } from '../Hooks/usePill';
-import { useState } from 'react';
+import { useContext, useState } from 'react';
 import ConfettiCannon from 'react-native-confetti-cannon';
+import { ThemeContext } from '../context/Theme';
 
 const GraphicStatus = () => {
   const { data: uid } = useUID();
+  const { theme } = useContext(ThemeContext);
   const { isError, error, isLoading, data: pillList } = useGetPillData(uid);
 
   //응원글과 먹은 약 상태글 토글하기 위한 state
@@ -57,7 +59,7 @@ const GraphicStatus = () => {
     //0~1까지 비율에 따라 투명도 다르게 주기
     switch (true) {
       case opacity == 0:
-        color = 'white';
+        color = theme === 'light' ? 'white' : '#343639';
         break;
       case opacity > 0 && opacity <= 0.2:
         color = COLORS.POINT_COLOR_20;
@@ -89,7 +91,7 @@ const GraphicStatus = () => {
     let pop = Math.floor(Math.random() * supportArr.length);
 
     return (
-      <GraphicContainer>
+      <GraphicContainer theme={theme}>
         {opacity === 1 ? (
           <ConfettiCannon
             count={200}
@@ -103,16 +105,20 @@ const GraphicStatus = () => {
           </TouchableOpacity>
           <View style={{ display: message ? 'none' : 'flex' }}>
             {opacity === 0 ? (
-              <SupportTextContainer>
-                <SupportText>아직 하나도 먹지 않았어요!</SupportText>
+              <SupportTextContainer theme={theme}>
+                <SupportText theme={theme}>
+                  아직 하나도 먹지 않았어요!
+                </SupportText>
               </SupportTextContainer>
             ) : opacity === 1 ? (
               <SupportTextContainer>
-                <SupportText>축하합니다! 캐치필 달성!</SupportText>
+                <SupportText theme={theme}>
+                  축하합니다! 캐치필 달성!
+                </SupportText>
               </SupportTextContainer>
             ) : (
-              <SupportTextContainer>
-                <SupportText>
+              <SupportTextContainer theme={theme}>
+                <SupportText theme={theme}>
                   와! 벌써 <TakenPill>{isTakenNum}</TakenPill>개나 드셨네요!
                 </SupportText>
               </SupportTextContainer>
@@ -121,13 +127,13 @@ const GraphicStatus = () => {
 
           <SupportTextContainer style={{ display: message ? 'flex' : 'none' }}>
             {/* 랜덤으로 뽑아준 인덱스 이용해서 응원글 랜덤 뽑기 */}
-            <SupportText>{supportArr[pop]}</SupportText>
+            <SupportText theme={theme}>{supportArr[pop]}</SupportText>
           </SupportTextContainer>
         </Supports>
         <LeftPill style={{ ...styles.circleShadow, backgroundColor: color }}>
-          <LeftpillText1>남은 약:</LeftpillText1>
-          <LeftpillText2>{leftPillNum}</LeftpillText2>
-          <LeftpillText3>/{totalPillNum}</LeftpillText3>
+          <LeftpillText1 theme={theme}>남은 약:</LeftpillText1>
+          <LeftpillText2 theme={theme}>{leftPillNum}</LeftpillText2>
+          <LeftpillText3 theme={theme}>/{totalPillNum}</LeftpillText3>
         </LeftPill>
       </GraphicContainer>
     );
@@ -154,14 +160,16 @@ const SupportEmoji = styled.Text`
 const SupportTextContainer = styled.View`
   width: 280px;
   padding: 10px;
-  background-color: lightgrey;
+  background-color: ${(props) =>
+    props.theme === 'light' ? '#d3d3d3' : '#343639'};
   border-radius: 22px;
   font-size: 20px;
   overflow: hidden;
 `;
 
 const SupportText = styled.Text`
   text-align: center;
+  color: ${(props) => (props.theme === 'light' ? 'black' : 'white ')};
 `;
 
 const TakenPill = styled.Text`
@@ -181,19 +189,22 @@ const LeftpillText1 = styled.Text`
   font-weight: 400;
   text-align: center;
   top: 10%;
+  color: ${(props) => (props.theme === 'light' ? 'black' : 'white')};
 `;
 const LeftpillText2 = styled.Text`
   font-size: 80px;
   font-weight: 600;
   top: 15%;
   text-align: center;
+  color: ${(props) => (props.theme === 'light' ? 'black' : 'white')};
 `;
 const LeftpillText3 = styled.Text`
   font-size: 50px;
   font-weight: 300;
   position: absolute;
   bottom: 0;
   right: -15%;
+  color: ${(props) => (props.theme === 'light' ? 'black' : 'white')};
 `;
 
 const styles = StyleSheet.create({

diff --git a/src/components/ManageList.jsx b/src/components/ManageList.jsx
@@ -3,10 +3,13 @@ import { COLORS } from '../shared/color';
 import { View, Alert, StyleSheet } from 'react-native';
 import { useDeletePillData } from '../Hooks/usePill';
 import TextButton from './TextButton';
+import { useContext } from 'react';
+import { ThemeContext } from '../context/Theme';
 
 // TODO: MyPage에 있는 약 목록을 삭제하는 기능을 구현합니다.
 const ManageList = ({ id, pillName, time, navigate }) => {
   const { mutate: deletePill } = useDeletePillData();
+  const { theme } = useContext(ThemeContext);
 
   const handleDeletePill = (id) => {
     Alert.alert(
@@ -29,12 +32,12 @@ const ManageList = ({ id, pillName, time, navigate }) => {
 
   return (
     <View style={styles.list}>
-      <ManageListContainer style={styles.list}>
-        <ManageListTitle>{pillName}</ManageListTitle>
+      <ManageListContainer theme={theme} style={styles.list}>
+        <ManageListTitle theme={theme}>{pillName}</ManageListTitle>
         <ButtonGroupContainer>
           <TextButton
             // 클릭하면 페이지 이동
-            buttonColor={COLORS.BLACK}
+            buttonColor={theme === 'light' ? COLORS.BLACK : 'white'}
             buttonText="편집"
             onPress={() =>
               navigate('Stacks', {
@@ -70,11 +73,14 @@ const ManageListContainer = styled.View`
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
+  background-color: ${(props) =>
+    props.theme === 'light' ? 'white' : '#343639'};
 `;
 
 const ManageListTitle = styled.Text`
   font-size: 28px;
   text-overflow: ellipsis;
+  color: ${(props) => (props.theme === 'light' ? 'black' : 'white')};
 `;
 
 const ButtonGroupContainer = styled.View`

diff --git a/src/components/PageContainer.jsx b/src/components/PageContainer.jsx
@@ -1,23 +1,30 @@
+import { useContext } from 'react';
 import { StyleSheet, SafeAreaView } from 'react-native';
+import { ThemeContext } from '../context/Theme';
 
 const PageContainer = ({ children }) => {
-  return <SafeAreaView style={styles.screenArea}>{children}</SafeAreaView>;
+  const { theme } = useContext(ThemeContext);
+  return (
+    <SafeAreaView
+      theme={theme}
+      style={{
+        ...Platform.select({
+          ios: {
+            flex: 1,
+            backgroundColor: 'white',
+          },
+          android: {
+            flex: 1,
+            paddingTop: 30,
+            backgroundColor: 'white',
+          },
+        }),
+        backgroundColor: theme === 'light' ? 'white' : 'black',
+      }}
+    >
+      {children}
+    </SafeAreaView>
+  );
 };
 
-const styles = StyleSheet.create({
-  screenArea: {
-    ...Platform.select({
-      ios: {
-        flex: 1,
-        backgroundColor: 'white',
-      },
-      android: {
-        flex: 1,
-        paddingTop: 30,
-        backgroundColor: 'white',
-      },
-    }),
-  },
-});
-
 export default PageContainer;
diff --git a/src/components/ToggleButton.jsx b/src/components/ToggleButton.jsx
@@ -1,16 +1,22 @@
 import { COLORS } from '../shared/color';
 import { useToggleTakenPill } from '../Hooks/usePill';
 import styled from '@emotion/native';
+import { useContext } from 'react';
+import { ThemeContext } from '../context/Theme';
 
 const ToggleButton = ({ id, togglePayload }) => {
   const { mutate: toggleTaken } = useToggleTakenPill();
   const isTaken = togglePayload.isTaken;
+  const { theme } = useContext(ThemeContext);
+
   return (
     <ToggleButtonContainer
       isTaken={isTaken}
       onPress={() => toggleTaken({ id, togglePayload })}
     >
-      <ToggleButtonText>{isTaken ? '취소' : '먹었어요!'}</ToggleButtonText>
+      <ToggleButtonText theme={theme}>
+        {isTaken ? '취소' : '먹었어요!'}
+      </ToggleButtonText>
     </ToggleButtonContainer>
   );
 };
@@ -28,6 +34,7 @@ const ToggleButtonContainer = styled.TouchableOpacity`
 const ToggleButtonText = styled.Text`
   font-size: 20px;
   line-height: 24px;
+  color: ${(props) => (props.theme === 'light' ? 'black' : 'white')};
 `;
 
 export default ToggleButton;
diff --git a/src/components/ToggleList.jsx b/src/components/ToggleList.jsx
@@ -3,19 +3,22 @@ import styled from '@emotion/native';
 import ToggleButton from './ToggleButton';
 import { strToObjTime, translateTime } from '../utils/transTime';
 import { View, StyleSheet } from 'react-native';
+import { useContext } from 'react';
+import { ThemeContext } from '../context/Theme';
 
 // TODO: 조건부 스타일링 isTaken값이 false랑 true에 따라 다른 UI가 보입니다.
 const ToggleList = ({ pillName, time, id, isTaken, uid }) => {
   const togglePayload = { pillName, time, isTaken, uid };
   const objTime = strToObjTime(time);
   const mainPageTime = translateTime(objTime);
+  const { theme } = useContext(ThemeContext);
 
   return (
     <View style={styles.list}>
-      <ToggleListItem isTaken={isTaken}>
+      <ToggleListItem theme={theme} isTaken={isTaken}>
         <ToggleListItemTextContainer>
-          <ToggleListItemTitle>{pillName}</ToggleListItemTitle>
-          <ToggleListItemTime>{mainPageTime}</ToggleListItemTime>
+          <ToggleListItemTitle theme={theme}>{pillName}</ToggleListItemTitle>
+          <ToggleListItemTime theme={theme}>{mainPageTime}</ToggleListItemTime>
         </ToggleListItemTextContainer>
         <ToggleButton id={id} togglePayload={togglePayload} />
       </ToggleListItem>
@@ -28,7 +31,11 @@ const ToggleListItem = styled.View`
   padding: 12px 16px;
   box-shadow: 0px 0px 8px rgba(202, 202, 202, 0.23);
   background-color: ${(props) =>
-    props.isTaken ? COLORS.POINT_COLOR_100 : 'white'};
+    props.isTaken
+      ? COLORS.POINT_COLOR_100
+      : props.theme === 'light'
+      ? 'white'
+      : '#343639'};
   margin: 8px 16px;
   border-radius: 16px;
   flex-direction: row;
@@ -44,14 +51,15 @@ const ToggleListItemTextContainer = styled.View`
 const ToggleListItemTitle = styled.Text`
   font-size: 28px;
   text-overflow: ellipsis;
+  color: ${(props) => (props.theme === 'light' ? 'black' : 'white')};
 `;
 
 const ToggleListItemTime = styled.Text`
   font-size: 16px;
   margin: 0 0 0 16px;
   text-overflow: ellipsis;
+  color: ${(props) => (props.theme === 'light' ? 'black' : 'white')};
 `;
-
 const styles = StyleSheet.create({
   list: {
     ...Platform.select({

diff --git a/src/context/Theme.jsx b/src/context/Theme.jsx
@@ -1,16 +1,17 @@
 import { createContext, useContext, useState } from 'react';
 import { Text, TouchableOpacity } from 'react-native';
+import CustomButton from '../components/CustomButton';
 
 const ThemeContext = createContext();
 
 export const ToggleModeButton = () => {
   const { theme, setTheme } = useContext(ThemeContext);
   return (
-    <TouchableOpacity
+    <CustomButton
+      title="Login"
+      buttonText={theme === 'light' ? '🌕 다크 모드로' : '☀️ 라이트 모드로'}
       onPress={() => (theme === 'light' ? setTheme('dark') : setTheme('light'))}
-    >
-      <Text>{theme === 'light' ? '☀️' : '🌕'}</Text>
-    </TouchableOpacity>
+    ></CustomButton>
   );
 };