feat : 일기쓰기 답변 모달, MolText 컴포넌트 mt 속성 추가 #12

feat : 일기쓰기 답변 모달, MolText 컴포넌트 mt 속성 추가

components/atom/Text/Text.tsx

@@ -15,6 +15,7 @@ type TextProps = HTMLAttributes<HTMLParagraphElement> & {
   label: string;
   align: TextAlign;
   color: TextColor;
+  mt?: string;
 };
 
 const MolText = (props: TextProps) => {
@@ -24,11 +25,12 @@ const MolText = (props: TextProps) => {
     align = "left",
     color = "black",
     label,
+    mt = "0",
     ...restProps
   } = props;
 
   return (
-    <StyledText size={size} weight={weight} align={align} color={color}>
+    <StyledText size={size} weight={weight} align={align} color={color} mt={mt}>
       {label}
     </StyledText>
   );
@@ -41,7 +43,9 @@ const StyledText = styled.Text<{
   weight: TextWeight;
   align: TextAlign;
   color: TextColor;
+  mt: string;
 }>`
+  margin-top: ${(props) => props.mt}px;
   color: ${({ color }) => {
     switch (color) {
       case "white":

components/organisms/widget/Widget.tsx

@@ -0,0 +1,79 @@
+import { Image, Text, View } from "react-native";
+import React from "react";
+import styled from "styled-components/native";
+import MolText from "../../atom/Text/Text";
+
+const Widget = () => {
+  return (
+    <Container>
+      <MolText
+        color="black"
+        label="어떤 답변을 원하나요?"
+        align="center"
+        size="22"
+        weight="bold"
+        mt="43"
+      />
+      <MolText
+        color="black"
+        label="내 상황에 맞는 답변을 들을 수 있어요."
+        align="center"
+        size="17"
+        mt="2"
+      />
+      <ButtonContainer>
+        <ButtonTextWrapper>
+          <Image
+            source={require("../../../assets/png/resultImg1.png")}
+            style={{
+              width: 88,
+              height: 88,
+              marginBottom: 4,
+              objectFit: "contain",
+            }}
+          />
+          <MolText color="black" label="위로해주기" align="center" size="17" />
+        </ButtonTextWrapper>
+        <ButtonTextWrapper>
+          <Image
+            source={require("../../../assets/png/resultImg2.png")}
+            style={{
+              width: 88,
+              height: 88,
+              marginBottom: 4,
+              objectFit: "contain",
+            }}
+          />
+          <MolText color="black" label="편들어주기" align="center" size="17" />
+        </ButtonTextWrapper>
+      </ButtonContainer>
+    </Container>
+  );
+};
+
+export default Widget;
+
+const Container = styled.View`
+  width: 319px;
+  height: 312px;
+  border-radius: 22px;
+  background-color: #e3f5fd;
+  display: flex;
+  align-items: center;
+  position: absolute;
+  z-index: 2;
+`;
+
+const ButtonContainer = styled.View`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-top: 34px;
+  width: 231px;
+  justify-content: space-between;
+`;
+
+const ButtonTextWrapper = styled.View`
+  display: flex;
+  align-items: center;
+`;

pages/Diary/DiaryWriting.tsx

@@ -5,16 +5,26 @@ import {
   Platform,
   Pressable,
 } from "react-native";
-import React, { Component } from "react";
+import React, { Component, useState } from "react";
 import Background from "../../components/atom/background/Background";
 import styled from "styled-components/native";
 import MolText from "../../components/atom/Text/Text";
 import MolButton from "../../components/atom/Button/MolButton";
 import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
+import Widget from "../../components/organisms/widget/Widget";
 
-export class DiaryWriting extends Component {
-  render() {
-    return (
+export const DiaryWriting = ({ navigation }: { navigation: any }) => {
+  const [onWidget, setOnWidget] = useState<boolean>(false);
+
+  return (
+    <>
+      {onWidget ? (
+        <WidgetContainer>
+          <Widget />
+        </WidgetContainer>
+      ) : (
+        <></>
+      )}
       <Background>
         <Pressable onPress={() => Keyboard.dismiss()}>
           <KeyboardAvoidingView
@@ -54,16 +64,20 @@ export class DiaryWriting extends Component {
                 />
               </DiaryWritingBox>
               <ButtonContainer>
-                <MolButton ColorType="grey" SizeType="big" text="작성취소" />
-                <MolButton ColorType="blue" SizeType="big" text="작성완료" />
+                <Pressable onPress={() => navigation.goBack()}>
+                  <MolButton ColorType="grey" SizeType="big" text="작성취소" />
+                </Pressable>
+                <Pressable onPress={() => setOnWidget(true)}>
+                  <MolButton ColorType="blue" SizeType="big" text="작성완료" />
+                </Pressable>
               </ButtonContainer>
             </Container>
           </KeyboardAvoidingView>
         </Pressable>
       </Background>
-    );
-  }
-}
+    </>
+  );
+};
 
 export default DiaryWriting;
 
@@ -107,3 +121,13 @@ const StyledTextInput = styled.TextInput`
   height: 100%;
   margin-top: 15px;
 `;
+
+const WidgetContainer = styled.View`
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  background: rgba(48, 48, 48, 0.7);
+  position: absolute;
+  z-index: 1;
+`;