style: add responsive style AnnounceMessageBox

app/ui/result/result-category/result-cagegory-detail-lecture.tsx

@@ -1,5 +1,5 @@
 import { Table } from '../../view/molecule/table';
-import AnnounceMessage from '@/app/ui/view/molecule/announce-message/announce-massage';
+import AnnounceMessageBox from '@/app/ui/view/molecule/announce-message-box/announce-massage-box';
 import { ResultCategoryDetailLectures } from '@/app/business/result/result.query';
 import LabelContainer from '@/app/ui/view/atom/label-container/label-container';
 
@@ -26,7 +26,7 @@ function ResultCagegoryDetailLecture({ detailCategory, isTakenLecture }: ResultC
         }
       />
       {showCompleted ? (
-        <AnnounceMessage message="해당 파트의 졸업요건을 충족하셨습니다!" />
+        <AnnounceMessageBox message="해당 파트의 졸업요건을 충족하셨습니다!" />
       ) : (
         <Table headerInfo={headerInfo} data={isTakenLecture ? takenLectures : haveToLectures} />
       )}

app/ui/view/molecule/announce-message-box/announce-massage-box.stories.tsx

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import AnnounceMessageBox from './announce-massage-box';
+
+const meta = {
+  title: 'ui/view/molecule/AnnounceMessageBox',
+  component: AnnounceMessageBox,
+} satisfies Meta<typeof AnnounceMessageBox>;
+
+export default meta;
+
+interface AnnounceMessageBoxProp {
+  message: string;
+}
+
+export const Default: StoryObj<typeof meta> = {
+  args: {
+    message: '해당 파트의 졸업요건을 충족하셨습니다!',
+  },
+  render: (args: AnnounceMessageBoxProp) => <AnnounceMessageBox {...args} />,
+};

app/ui/view/molecule/announce-message-box/announce-massage-box.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import CompletedImage from '@/public/assets/completed-category.png';
+import CheckImage from '@/public/assets/check.svg';
+import Image from 'next/image';
+import { cn } from '@/app/utils/shadcn/utils';
+
+interface AnnounceMessageBoxProp {
+  message: string;
+}
+
+function AnnounceMessageBox({ message }: AnnounceMessageBoxProp) {
+  return (
+    <div className="relative flex justify-center items-center p-2 bg-yellow-5 min-h-fit">
+      <Image src={CompletedImage} width={1200} height={270} alt="category-fullfill-image" className="min-h-20" />
+      <div className="absolute">
+        <Image
+          className={cn('m-auto w-[30px]', 'md:w-[50px]')}
+          src={CheckImage}
+          width={50}
+          height={36}
+          alt="category-fullfill-image"
+        />
+        <p className={cn('zIndex-1 text-sm', 'md:text-lg')}>{message}</p>
+      </div>
+    </div>
+  );
+}
+
+export default AnnounceMessageBox;