[NDD-363] 문제집이 하나도 없을 때 생성 유도, QuestionSelectionBox 에서 면접세트 보러가기 페이지 유도(1.5h / 2h)

FE/src/components/common/QuestionSelectionBox/NoticeDialog/NoticeDialog.tsx

@@ -0,0 +1,68 @@
+import { Box, Button, Icon, Typography } from '@foundation/index';
+import { css, keyframes } from '@emotion/react';
+import { theme } from '@styles/theme';
+import { PATH } from '@constants/path';
+import { Link } from 'react-router-dom';
+import { useState } from 'react';
+
+const ShowDialog = keyframes`
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(0);
+  }
+`;
+
+const NoticeDialog = () => {
+  const [visible, setVisible] = useState(true);
+
+  if (!visible) return null;
+  return (
+    <Box
+      css={css`
+        position: fixed;
+        left: 1rem;
+        bottom: 1rem;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+        row-gap: 0.5rem;
+        margin-right: 30rem;
+        padding: 1rem;
+        width: 15rem;
+        height: auto;
+        background-color: ${theme.colors.surface.default};
+        z-index: ${theme.zIndex.contentOverlay.overlay3};
+        animation: 1s cubic-bezier(0.5, 1.5, 0.5, 1) 0s 1 ${ShowDialog};
+      `}
+    >
+      <Button
+        variants="secondary"
+        size="sm"
+        onClick={() => setVisible(false)}
+        css={css`
+          position: absolute;
+          top: 0.75rem;
+          right: 0.5rem;
+          display: flex;
+          border: none;
+          z-index: ${theme.zIndex.contentOverlay.overlay5};
+        `}
+      >
+        <Icon id="close-black" />
+      </Button>
+      <Typography variant="body1">
+        원하는 질문이 없나요?
+        <br />
+        다른 사람이 만든 면접 세트를 가져오거나
+        <br />새 면접 세트를 만들어보세요
+      </Typography>
+      <Link to={PATH.WORKBOOK}>
+        <Button size="sm">면접 세트 보러가기</Button>
+      </Link>
+    </Box>
+  );
+};
+
+export default NoticeDialog;

FE/src/components/common/QuestionSelectionBox/QuestionSelectionBox.tsx

@@ -11,6 +11,7 @@ import {
 import { css } from '@emotion/react';
 import { useState } from 'react';
 import useBreakpoint from '@hooks/useBreakPoint';
+import QuestionTabPanelBlank from '@common/QuestionSelectionBox/QuestionTabPanelBlank';
 
 const QuestionSelectionBox = () => {
   const isDeviceBreakpoint = useBreakpoint();
@@ -19,7 +20,7 @@ const QuestionSelectionBox = () => {
 
   const [isSidebarToggleOn, setIsSidebarToggleOn] = useState(true);
 
-  if (!workbookListData) return;
+  if (!workbookListData) return null;
   return (
     <>
       <Box
@@ -45,19 +46,23 @@ const QuestionSelectionBox = () => {
             <QuestionTabList workbookListData={workbookListData} />
           </QuestionSelectionBoxSidebarAreaDiv>
           <QuestionSelectionBoxTabPanelAreaDiv>
-            {workbookListData.map((workbook, index) => (
-              <TabPanelItem
-                key={workbook.workbookId}
-                tabIndex={index.toString()}
-                workbook={workbook}
-                isSidebarOpen={
-                  isSidebarToggleOn && isDeviceBreakpoint('tablet')
-                }
-                onSidebarToggleClick={() =>
-                  setIsSidebarToggleOn((prev) => !prev)
-                }
-              />
-            ))}
+            {workbookListData.length ? (
+              workbookListData.map((workbook, index) => (
+                <TabPanelItem
+                  key={workbook.workbookId}
+                  tabIndex={index.toString()}
+                  workbook={workbook}
+                  isSidebarOpen={
+                    isSidebarToggleOn && isDeviceBreakpoint('tablet')
+                  }
+                  onSidebarToggleClick={() =>
+                    setIsSidebarToggleOn((prev) => !prev)
+                  }
+                />
+              ))
+            ) : (
+              <QuestionTabPanelBlank />
+            )}
           </QuestionSelectionBoxTabPanelAreaDiv>
         </Tabs>
       </Box>

FE/src/components/common/QuestionSelectionBox/QuestionTabPanelBlank.tsx

@@ -0,0 +1,66 @@
+import { Button, Typography } from '@foundation/index';
+import { css } from '@emotion/react';
+import { theme } from '@styles/theme';
+import BlankBear from '@assets/images/blank-bear.png';
+import { Link } from 'react-router-dom';
+import { PATH } from '@constants/path';
+import WorkbookAddButton from '@common/QuestionSelectionBox/WorkbookAddButton';
+import useBreakpoint from '@hooks/useBreakPoint';
+
+const QuestionTabPanelBlank = () => {
+  const isDeviceBreakpoint = useBreakpoint();
+  return (
+    <div
+      css={css`
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        align-items: center;
+        row-gap: 1rem;
+        padding: 1rem;
+        height: 100%;
+      `}
+    >
+      <div
+        css={css`
+          display: flex;
+          flex-direction: column;
+          row-gap: 1rem;
+          padding: 1rem;
+          width: 100%;
+          border-radius: 1rem;
+          background-color: ${theme.colors.surface.default};
+        `}
+      >
+        <Typography variant="body1">
+          이런! 면접 질문이 하나도 없군요😥
+          <br />
+          다른 사람이 만든 면접 세트를 가져오거나
+          <br />새 면접 세트를 만들어보세요
+        </Typography>
+        <div
+          css={css`
+            display: flex;
+            justify-content: flex-end;
+            gap: 0.5rem;
+          `}
+        >
+          {isDeviceBreakpoint('tablet') && <WorkbookAddButton />}
+          <Link to={PATH.WORKBOOK}>
+            <Button
+              css={css`
+                width: 100%;
+                height: 100%;
+              `}
+            >
+              면접 세트 보러가기
+            </Button>
+          </Link>
+        </div>
+      </div>
+      <img height="350" src={BlankBear} alt="박스 옆에서 손을 흔드는 곰" />
+    </div>
+  );
+};
+
+export default QuestionTabPanelBlank;

FE/src/page/interviewSettingPage/QuestionSettingPage.tsx

@@ -2,6 +2,7 @@ import { questionSetting } from '@/atoms/interviewSetting';
 import { QuestionSelectionBox } from '@common/index';
 import { useRecoilValue } from 'recoil';
 import InterviewSettingContentLayout from '@components/interviewSettingPage/InterviewSettingContentLayout';
+import NoticeDialog from '@common/QuestionSelectionBox/NoticeDialog/NoticeDialog';
 
 type QuestionSettingPageProps = {
   onNextClick?: () => void;
@@ -15,13 +16,16 @@ const QuestionSettingPage: React.FC<QuestionSettingPageProps> = ({
   const setting = useRecoilValue(questionSetting);
 
   return (
-    <InterviewSettingContentLayout
-      onPrevClick={onPrevClick}
-      onNextClick={onNextClick}
-      disabledNext={!setting.isSuccess}
-    >
-      <QuestionSelectionBox />
-    </InterviewSettingContentLayout>
+    <>
+      <NoticeDialog />
+      <InterviewSettingContentLayout
+        onPrevClick={onPrevClick}
+        onNextClick={onNextClick}
+        disabledNext={!setting.isSuccess}
+      >
+        <QuestionSelectionBox />
+      </InterviewSettingContentLayout>
+    </>
   );
 };