fix: daily-term-box qa

MZ-OFFISSU · Oct 12, 2023 · a18b40c · a18b40c
1 parent 21538f6
commit a18b40c
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 5 deletions.
diff --git a/TERMTERM/src/components/common/Bookmark.tsx b/TERMTERM/src/components/common/Bookmark.tsx
@@ -45,7 +45,7 @@ export const BookmarkButtonComponent = ({ fill, ...props }: Props) => {
 
   return (
     <BookmarkWrapper
-      style={{ backgroundColor: mode ? "#e2e2e279" : "#2c2c2c7a" }}
+      style={{ backgroundColor: mode ? "#e2e2e279" : "#00000058" }}
       {...props}
     >
       {fill ? (
@@ -58,7 +58,7 @@ export const BookmarkButtonComponent = ({ fill, ...props }: Props) => {
         <Ionicons
           name="ios-bookmark-outline"
           size={22}
-          color={mode ? "white" : " #DEE0E2"}
+          color={mode ? "white" : "#DEE0E2"}
         />
       )}
     </BookmarkWrapper>

diff --git a/TERMTERM/src/components/home/DailyTermBox.tsx b/TERMTERM/src/components/home/DailyTermBox.tsx
@@ -8,10 +8,10 @@ import { useWordReg } from "@hooks/useWordReg";
 import { RootStackParamList } from "@interfaces/RootStackParamList";
 import { useNavigation } from "@react-navigation/native";
 import { StackNavigationProp } from "@react-navigation/stack";
-import { TEXT_STYLES, colorTheme, TYPO_STYLE } from "@style/designSystem";
+import { colorTheme, TYPO_STYLE } from "@style/designSystem";
 import { booleanConverter } from "@utils/booleanConverter";
 import { truncateString } from "@utils/wordCutter";
-import styled from "styled-components/native";
+import styled, { css } from "styled-components/native";
 
 /**
  * 오늘의 용어 박스
@@ -25,6 +25,8 @@ const DailyTermBox = ({ bookmarked, id, name, description }: Preview) => {
 
   return (
     <Container
+      COLOR={COLOR}
+      mode={mode}
       style={{ borderWidth: 1, borderColor: COLOR.Background.onSurface }}
       onPress={() => navigation.push("TermDetail", { id: `${id}` })}
     >
@@ -54,10 +56,14 @@ const DailyTermBox = ({ bookmarked, id, name, description }: Preview) => {
   );
 };
 
-const Container = styled.TouchableOpacity`
+const Container = styled.TouchableOpacity<{ COLOR: colorTheme; mode: boolean }>`
   min-width: 165px;
   width: 49%;
   height: 205px;
+  background-color: ${(props) =>
+    props.mode
+      ? props.COLOR.Background.surface
+      : props.COLOR.Background.onSurface};
   border-radius: 10px;
   display: flex;
   flex-direction: column;