feat(#43): Banner 컴포넌트 생성

Author: wkdtnqls0506

src/app/member/profile/_components/Banner/Banner.css.ts

@@ -0,0 +1,18 @@
+import { style } from "@vanilla-extract/css";
+
+import { colors, semantic } from "@/styles";
+
+export const wrapper = style({
+  backgroundColor: colors.redOrange[90],
+  padding: "1.4rem 2.4rem",
+});
+
+export const linkWrapper = style({
+  display: "flex",
+  alignItems: "center",
+  gap: "0.4rem",
+});
+
+export const icon = style({
+  color: semantic.icon.black,
+});

src/app/member/profile/_components/Banner/Banner.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import Image from "next/image";
+import Link from "next/link";
+
+import RightArrowIcon from "@/assets/right-arrow.svg";
+import { Bleed } from "@/components/ui/Bleed";
+import { HStack, VStack } from "@/components/ui/Stack";
+import { Text } from "@/components/ui/Text";
+
+import * as styles from "./Banner.css";
+
+export const Banner = () => {
+  return (
+    <Bleed inline={20} className={styles.wrapper}>
+      <HStack align='center' gap={8}>
+        <Image
+          src='/images/store.png'
+          alt='가게 이미지'
+          width={55}
+          height={55}
+        />
+        <VStack gap={4} justify='center'>
+          <Text typo='body1Sb' color='neutral.10'>
+            당신의 소중한 가게를 소개해주세요
+          </Text>
+          {/* TODO: [가게 등록하기] url로 변경 */}
+          <Link href='/' className={styles.linkWrapper}>
+            <Text typo='label2' color='neutral.10'>
+              가게 등록하기
+            </Text>
+            <RightArrowIcon width={16} height={16} className={styles.icon} />
+          </Link>
+        </VStack>
+      </HStack>
+    </Bleed>
+  );
+};

src/app/member/profile/_components/Banner/index.ts

@@ -0,0 +1 @@
+export { Banner } from "./Banner";