Merge pull request #160 from Team-Lecue/feature/DetailPage

[ DetailPage ] dev 머지 PR입니다!

src/Detail/components/EmptyView/EmptyView.style.ts

@@ -0,0 +1,21 @@
+import styled from '@emotion/styled';
+
+export const EmptyViewWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+
+  width: 100%;
+  height: calc(100vh - 39rem);
+`;
+
+export const EmptyViewTextWrapper = styled.div`
+  text-align: center;
+  margin-top: 2.1rem;
+`;
+
+export const EmptyViewText = styled.p`
+  color: ${({ theme }) => theme.colors.MG};
+  ${({ theme }) => theme.fonts.Body3_R_14};
+`;

src/Detail/components/EmptyView/index.tsx

@@ -0,0 +1,16 @@
+import { ImgEmpty } from '../../../assets';
+import * as S from './EmptyView.style';
+
+function EmptyView() {
+  return (
+    <S.EmptyViewWrapper>
+      <ImgEmpty />
+      <S.EmptyViewTextWrapper>
+        <S.EmptyViewText>아직 레큐노트가 없습니다.</S.EmptyViewText>
+        <S.EmptyViewText>가장 먼저 작성해보세요!</S.EmptyViewText>
+      </S.EmptyViewTextWrapper>
+    </S.EmptyViewWrapper>
+  );
+}
+
+export default EmptyView;

src/Detail/components/LecueNoteListContainer/index.tsx

@@ -12,6 +12,7 @@ import {
 import Button from '../../../components/common/Button';
 import usePostStickerState from '../../../StickerAttach/hooks/usePostStickerState';
 import { NoteType, postedStickerType } from '../../type/lecueBookType';
+import EmptyView from '../EmptyView';
 import LecueNoteListHeader from '../LecueNoteLIstHeader';
 import LinearView from '../LinearView';
 import ZigZagView from '../ZigZagView';
@@ -120,7 +121,9 @@ function LecueNoteListContainer({
         buttonOnClick={() => setIsZigZagView(!isZigZagView)}
       />
       <S.LecueNoteListViewWrapper>
-        {isZigZagView ? (
+        {noteList.length === 0 ? (
+          <EmptyView />
+        ) : isZigZagView ? (
           <ZigZagView
             savedScrollPosition={savedScrollPosition}
             noteList={noteList}
@@ -138,11 +141,9 @@ function LecueNoteListContainer({
       {!isEditable && (
         <>
           <S.StickerButton type="button" onClick={handleClickStickerButton}>
-            {backgroundColor === '#F5F5F5' ? (
-              <BtnFloatingSticker />
-            ) : (
-              <BtnFloatingStickerOrange />
-            )}
+            {backgroundColor === '#F5F5F5'
+              ? noteList.length !== 0 && <BtnFloatingSticker />
+              : noteList.length !== 0 && <BtnFloatingStickerOrange />}
           </S.StickerButton>
           <S.WriteButton type="button" onClick={handleClickWriteButton}>
             {backgroundColor === '#F5F5F5' ? (

src/assets/index.ts

@@ -23,6 +23,7 @@ import ImgBook from './img/img_book.svg?react';
 import ImgBookBackgray from './img/img_book_backgray.svg?react';
 import ImgBookOrange from './img/img_book_orange.svg?react';
 import ImgBookOrangeBig from './img/img_book_orange_big.svg?react';
+import ImgEmpty from './img/img_empty.svg?react';
 import ImgError from './img/img_error.svg?react';
 import ImgEvent from './img/img_event.svg?react';
 import ImgKakao01 from './img/img_kakao_01.svg?react';
@@ -67,6 +68,7 @@ export {
   ImgBookBackgray,
   ImgBookOrange,
   ImgBookOrangeBig,
+  ImgEmpty,
   ImgError,
   ImgEvent,
   ImgKakao01,