Feat#22 BusinessCard를 추가합니다. (#63)

* feat: BusinessCard를 추가합니다.

* feat: BusinessCard에 애니메이션을 추가합니다.

src/components/home/BusinessCard/BusinessCard.stories.tsx

@@ -0,0 +1,57 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { View } from 'react-native';
+
+import { color } from '@/styles/theme';
+
+import BusinessCard from './';
+
+const SkeletonMeta: Meta<typeof BusinessCard> = {
+  title: 'home/BusinessCard',
+  component: BusinessCard,
+  argTypes: {
+    name: {
+      control: {
+        type: 'text',
+      },
+      description: '이름을 입력해주세요',
+    },
+    review: {
+      control: {
+        type: 'text',
+      },
+      description: '리뷰를 입력해주세요',
+    },
+    projectName: {
+      control: {
+        type: 'text',
+      },
+      description: '프로젝트 이름을 입력해주세요',
+    },
+    isActive: {
+      control: {
+        type: 'boolean',
+      },
+      description: '스크린에 보이는지 여부를 입력해주세요',
+    },
+  },
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+export default SkeletonMeta;
+
+export const Primary: StoryObj<typeof BusinessCard> = {
+  args: {
+    review: '문제를 척척 해결하는\n' + '책임감 넘치는 슈퍼히어로',
+    projectName: 'wepro',
+    name: '김프로',
+  },
+  render: (args) => {
+    return (
+      <View style={{ flex: 1, backgroundColor: color.Background.Alternative, padding: 100 }}>
+        <BusinessCard {...args} />
+      </View>
+    );
+  },
+};

src/components/home/BusinessCard/index.tsx

@@ -0,0 +1,74 @@
+import { memo } from 'react';
+import { Image } from 'react-native';
+import Animated, { useAnimatedStyle, withTiming } from 'react-native-reanimated';
+
+import Typography from '@/components/common/typography';
+import { shadow } from '@/styles/shadow';
+import { color } from '@/styles/theme';
+
+import * as S from './style';
+
+type Props = {
+  name: string;
+  projectName: string;
+  review: string;
+  isActive?: boolean;
+};
+
+function BusinessCard({ name, review, projectName, isActive = false }: Props) {
+  const animationStyle = useAnimatedStyle(() => {
+    return {
+      display: 'flex',
+      flexDirection: 'column',
+      position: 'absolute',
+      bottom: -36,
+      left: -16,
+      gap: 6,
+      width: 210,
+      paddingHorizontal: 24,
+      paddingVertical: 16,
+      borderRadius: 16,
+      backgroundColor: color.Label.Strong,
+      opacity: withTiming(isActive ? 1 : 0),
+    };
+  });
+
+  return (
+    <S.Container style={shadow[2]}>
+      <S.NameBox>
+        <Typography
+          variant='Heading1'
+          color={color.Common['0']}
+          fontWeight='semiBold'>
+          {name}
+        </Typography>
+      </S.NameBox>
+      <Image
+        style={{
+          width: '100%',
+          aspectRatio: 1,
+          borderWidth: 0,
+        }}
+        source={{ uri: require('/assets/images/main-mock.png') }}
+        resizeMode='center'
+        width={300}
+        height={300}
+      />
+      <Animated.View style={[animationStyle]}>
+        <Typography
+          variant='Body1/Normal'
+          fontWeight='semiBold'
+          color={color.Common['100']}>
+          {review}
+        </Typography>
+        <Typography
+          variant='Caption2'
+          color={color.Label.Assistive}>
+          #{projectName}
+        </Typography>
+      </Animated.View>
+    </S.Container>
+  );
+}
+
+export default memo(BusinessCard);

src/components/home/BusinessCard/style.ts

@@ -0,0 +1,16 @@
+import styled from '@emotion/native';
+
+export const Container = styled.View`
+  position: relative;
+  width: 300px;
+  padding: 74px 0;
+  background: ${({ theme }) => theme.color.Background.Normal};
+  border-radius: 17px;
+`;
+
+export const NameBox = styled.View`
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: 20px;
+`;