[FE] 약속 주최자에게만 확정 취소 버튼 표시 및 미확정/취소 시 문구 표시 (#306)

* feat(ActionButtonGroup): 약속 주최자만 확정 취소 버튼이 보이게 구현

* chore: sadMomo svg 추가

* feat: 약속 확정 data가 없을 때  UnconfirmedMessage 컴포넌트 렌더링

* feat(UnconfirmedMessage): 약속 조회 페이지로 이동하는 handleMeetingPageNavigate 함수 구현

* design: height: 100%로 수정

* rename: svg 파일명 변경 (SadMomo → SadMomoCharacter)

* rename: svg 파일명 변경 (SadMomoCharacter → sadMomoCharacter)

frontend/src/pages/FixedMeetingTicketPage/FixedMeetingTicketPage.styles.ts

@@ -4,5 +4,7 @@ export const s_container = css`
   display: flex;
   flex-direction: column;
   gap: 2rem;
+
   width: 100%;
+  height: 100%;
 `;

frontend/src/pages/FixedMeetingTicketPage/components/ActionButtonGroup/index.tsx

@@ -56,10 +56,12 @@ function ActionButtonGroup({ uuid, data }: ActionButtonGroupProps) {
         <KakaoIcon width="48" height="48" />
       </button>
 
-      <button css={s_cancelCircleButton} onClick={() => handleFixedMeetingCancel()}>
-        <CancelIcon width="20" height="20" />
-        <div css={s_buttonText}>확정 취소</div>
-      </button>
+      {hostName === userName && (
+        <button css={s_cancelCircleButton} onClick={() => handleFixedMeetingCancel()}>
+          <CancelIcon width="16" height="16" />
+          <div css={s_buttonText}>확정 취소</div>
+        </button>
+      )}
     </div>
   );
 }

frontend/src/pages/FixedMeetingTicketPage/components/UnconfirmedMessage/UnconfirmedMessage.styles.ts

@@ -0,0 +1,12 @@
+import { css } from '@emotion/react';
+
+export const s_container = css`
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  align-items: center;
+  justify-content: center;
+
+  width: 100%;
+  height: 100%;
+`;

frontend/src/pages/FixedMeetingTicketPage/components/UnconfirmedMessage/index.tsx

@@ -0,0 +1,30 @@
+import { useNavigate } from 'react-router-dom';
+
+import { Button } from '@components/_common/Buttons/Button';
+
+import SadMomoCharacter from '@assets/images/sadMomoCharacter.svg';
+
+import { s_container } from './UnconfirmedMessage.styles';
+
+interface UnconfirmedMessageProps {
+  uuid: string;
+}
+function UnconfirmedMessage({ uuid }: UnconfirmedMessageProps) {
+  const navigate = useNavigate();
+
+  const handleMeetingPageNavigate = () => {
+    navigate(`/meeting/${uuid}`);
+  };
+
+  return (
+    <div css={s_container}>
+      <SadMomoCharacter width="128" height="128" />
+      <div>약속이 아직 확정되지 않았어요 :(</div>
+      <Button variant="primary" size="full" onClick={() => handleMeetingPageNavigate()}>
+        약속 조회하러 가기
+      </Button>
+    </div>
+  );
+}
+
+export default UnconfirmedMessage;

frontend/src/pages/FixedMeetingTicketPage/index.tsx

@@ -6,20 +6,22 @@ import { useGetConfirmedMeetingInfoQuery } from '@stores/servers/confirm/queries
 
 import { s_container } from './FixedMeetingTicketPage.styles';
 import ActionButtonGroup from './components/ActionButtonGroup';
+import UnconfirmedMessage from './components/UnconfirmedMessage';
 
 export default function FixedMeetingTicketPage() {
   const params = useParams<{ uuid: string }>();
   const uuid = params.uuid!;
   const { data } = useGetConfirmedMeetingInfoQuery(uuid);
-
-  if (!data) {
-    return null;
-  }
-
   return (
     <div css={s_container}>
-      <MeetingTicket data={data} />
-      <ActionButtonGroup uuid={uuid} data={data} />
+      {data ? (
+        <>
+          <MeetingTicket data={data} />
+          <ActionButtonGroup uuid={uuid} data={data} />
+        </>
+      ) : (
+        <UnconfirmedMessage uuid={uuid} />
+      )}
     </div>
   );
 }