Merge branch 'main' into origin/feat/#9

components/atom/Button/MolButton.tsx

@@ -0,0 +1,61 @@
+import { View, Text } from "react-native";
+import React, { HTMLAttributes } from "react";
+import styled from "styled-components/native";
+import MolText from "../Text/Text";
+
+type ColorType = "blue" | "grey";
+
+type SizeType = "small" | "big";
+
+type ButtonProps = HTMLAttributes<HTMLParagraphElement> & {
+  ColorType: ColorType;
+  SizeType: SizeType;
+  text: string;
+};
+const MolButton = (props: ButtonProps) => {
+  const { ColorType, SizeType, text } = props;
+  return (
+    <Container ColorType={ColorType} SizeType={SizeType}>
+      <MolText
+        label={text}
+        align="center"
+        size="17"
+        weight="bold"
+        color="white"
+      />
+    </Container>
+  );
+};
+
+export default MolButton;
+
+const Container = styled.View<{ ColorType: ColorType; SizeType: SizeType }>`
+  border-radius: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: ${({ ColorType }) => {
+    switch (ColorType) {
+      case "blue":
+        return "#9DE1FF";
+      case "grey":
+        return "#C5C5C5";
+    }
+  }};
+  width: ${({ SizeType }) => {
+    switch (SizeType) {
+      case "small":
+        return "55px";
+      case "big":
+        return "125px";
+    }
+  }};
+  height: ${({ SizeType }) => {
+    switch (SizeType) {
+      case "small":
+        return "35px";
+      case "big":
+        return "45px";
+    }
+  }};
+`;

components/atom/Text/Text.tsx

@@ -7,24 +7,30 @@ type TextWeight = "regular" | "bold";
 
 type TextAlign = "left" | "center";
 
+type TextColor = "white" | "black";
+
 type TextProps = HTMLAttributes<HTMLParagraphElement> & {
   size?: TextSize;
   weight?: TextWeight;
   label: string;
   align: TextAlign;
+  color: TextColor;
+  mt?: string;
 };
 
 const MolText = (props: TextProps) => {
   const {
     size = "12",
     weight = "regular",
     align = "left",
+    color = "black",
     label,
+    mt = "0",
     ...restProps
   } = props;
 
   return (
-    <StyledText size={size} weight={weight} align={align}>
+    <StyledText size={size} weight={weight} align={align} color={color} mt={mt}>
       {label}
     </StyledText>
   );
@@ -36,7 +42,18 @@ const StyledText = styled.Text<{
   size: TextSize;
   weight: TextWeight;
   align: TextAlign;
+  color: TextColor;
+  mt: string;
 }>`
+  margin-top: ${(props) => props.mt}px;
+  color: ${({ color }) => {
+    switch (color) {
+      case "white":
+        return "white";
+      case "black":
+        return "black";
+    }
+  }};
   font-size: ${({ size }) => {
     switch (size) {
       case "12":

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;
+`;

package.json

@@ -31,6 +31,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-native": "0.72.3",
+    "react-native-keyboard-aware-scroll-view": "^0.9.5",
     "react-native-linear-gradient": "^2.8.2",
     "react-native-safe-area-context": "4.6.3",
     "react-native-screens": "~3.22.0",