refactor: 홈 navbar 수정

Author: sikkzz

src/assets/svg/ic-logo.svg

@@ -27,9 +27,6 @@ export const HomeNavbar: Story = {
   name: "HomeNavbar",
   render: () => (
     <Navbar>
-      <Navbar.LeftButton>
-        <Icon name="logo" />
-      </Navbar.LeftButton>
       <Navbar.RightButton>
         <Text variant="bodySm" color="secondary">
           앱 공유하기

src/assets/svg/ic-share.svg

@@ -4,9 +4,9 @@ import CloseIcon from "@/assets/svg/ic-close.svg?react";
 import EmptyCircleIcon from "@/assets/svg/ic-empty-circle.svg?react";
 import GalleryIcon from "@/assets/svg/ic-gallery.svg?react";
 import LeftArrowIcon from "@/assets/svg/ic-left-arrow.svg?react";
-import LogoIcon from "@/assets/svg/ic-logo.svg?react";
 import PasteIcon from "@/assets/svg/ic-paste.svg?react";
 import PlusIcon from "@/assets/svg/ic-plus.svg?react";
+import ShareIcon from "@/assets/svg/ic-share.svg?react";
 
 export type IconNameType =
   | "camera"
@@ -17,7 +17,7 @@ export type IconNameType =
   | "plus"
   | "checkCircle"
   | "emptyCircle"
-  | "logo";
+  | "share";
 
 export interface IconProps {
   name: IconNameType;
@@ -32,7 +32,7 @@ export const ICONS = {
   plus: PlusIcon,
   checkCircle: CheckCircleIcon,
   emptyCircle: EmptyCircleIcon,
-  logo: LogoIcon,
+  share: ShareIcon,
 };
 
 // 추후 사이즈, 컬러등 추가 가능

src/components/Navbar/Navbar.stories.tsx

@@ -1,5 +1,27 @@
 @use "@/styles/_mixins.scss" as *;
 
+.FeedbackButton {
+  padding: 0.5rem 0.75rem;
+  background-color: var(--color-gray200);
+  border-radius: 0.75rem;
+  height: 2.25rem;
+  white-space: nowrap;
+  color: var(--color-text-primary);
+  line-height: 1.5rem;
+  align-items: center;
+  @include bodyM;
+}
+
+.ShareButton {
+  width: 2.25rem;
+  height: 2.25rem;
+  background-color: var(--color-gray200);
+  border-radius: 0.75rem;
+  align-items: center;
+  justify-content: center;
+  margin-left: 0.625rem;
+}
+
 .Home {
   padding-left: 1.25rem;
   padding-right: 1.25rem;
@@ -59,7 +81,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  margin-top: 3.75rem;
+  z-index: 1;
 
   & > img {
     width: 14.375rem;

src/components/ui/Icon/Icon.tsx

@@ -3,9 +3,11 @@ import { useEffect } from "react";
 import Navbar from "@/components/Navbar/Navbar";
 import { AppBridgeMessageType } from "@/components/provider/AppBridgeProvider/AppBridgeMessage.types";
 import { useAppBridge } from "@/components/provider/AppBridgeProvider/AppBridgeProvider";
+import Icon from "@/components/ui/Icon/Icon";
 import IconButton from "@/components/ui/IconButton/IconButton";
 import Text from "@/components/ui/Text/Text";
 
+import { useChannelTalk } from "@/hooks/common/useChannelTalk";
 import { useRoute } from "@/hooks/common/useRoute";
 
 import styles from "@/pages/HomePage/HomePage.module.scss";
@@ -18,6 +20,8 @@ const SHARE_TEXT =
   "영수증을 촬영하면 AI가 자동으로 맛집 리뷰를 생성! 🍽️✨ 간편하게 추억을 남기고, 나만의 미식 기록을 완성하세요. 미식 경험을 더욱 스마트하게, 미식 MISIK!";
 
 const HomePage = () => {
+  const { openChannelTalk } = useChannelTalk();
+
   const { send } = useAppBridge();
 
   const { scanData } = useScanDataStore();
@@ -37,16 +41,20 @@ const HomePage = () => {
   return (
     <>
       <Navbar>
-        <Navbar.RightButton
-          onClick={() => {
-            gTagLogEvent("share_button");
-
-            send({ type: AppBridgeMessageType.SHARE, payload: { shareText: SHARE_TEXT } });
-          }}
-        >
-          <Text variant="bodySm" color="secondary">
-            앱 공유하기
-          </Text>
+        <Navbar.RightButton>
+          <button className={styles.FeedbackButton} onClick={openChannelTalk}>
+            의견 남기기
+          </button>
+          <button
+            className={styles.ShareButton}
+            onClick={() => {
+              gTagLogEvent("share_button");
+
+              send({ type: AppBridgeMessageType.SHARE, payload: { shareText: SHARE_TEXT } });
+            }}
+          >
+            <Icon name="share" />
+          </button>
         </Navbar.RightButton>
       </Navbar>
 
@@ -58,9 +66,10 @@ const HomePage = () => {
               손쉬운 음식 리뷰 작성
             </Text>
           </div>
-          <div className={styles.HomeImage}>
-            <img src="/assets/img/img-graphic-logo.webp" alt="mainLogo" />
-          </div>
+        </div>
+
+        <div className={styles.HomeImage}>
+          <img src="/assets/img/img-graphic-logo.webp" alt="mainLogo" />
         </div>
 
         <div className={styles.HomeBottom}>