feat: [LINKER-135] 캘린더에 데이터가 없을때 에러페이지 (#70)

YAPP-Github · Feb 23, 2024 · 72ebbdd · 72ebbdd
1 parent d2823b6
commit 72ebbdd
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 5 deletions.
diff --git a/services/web/src/app/my/contact/component/ContactDefault/ContactDefault.tsx b/services/web/src/app/my/contact/component/ContactDefault/ContactDefault.tsx
@@ -38,7 +38,7 @@ export default function ContactDefault({ defaultContact, bookmarksContact }: Pro
             {bookmarksContact.length}
           </Txt>
         </div>
-        {bookmarksContact.length > 0 ? (
+        {bookmarksContact.length > 1 ? (
           <button className={favoriteDropDown} onClick={onFavoriteClick}>
             {isClickFavorites ? <Icon name="down" size={24} /> : <Icon name="up" size={24} />}
           </button>

diff --git a/services/web/src/app/my/timeline/component/TimelineItem/TimelineItem.css.ts b/services/web/src/app/my/timeline/component/TimelineItem/TimelineItem.css.ts
@@ -46,10 +46,11 @@ export const timelineRowWrapper = style({
 
 export const timelineColorDivider = style({
   position: 'absolute',
-  left: '-1.4rem',
+  left: '1.4rem',
+  top: '0.9rem',
   width: '0.4rem',
   borderRadius: '0.8rem',
-  height: '100%',
+  height: '80%',
 });
 export const timelineItemDivider = style({
   marginTop: '1.2rem',

diff --git a/services/web/src/app/my/timeline/component/TimelineNull/TimelineNull.css.ts b/services/web/src/app/my/timeline/component/TimelineNull/TimelineNull.css.ts
@@ -0,0 +1,16 @@
+import { style } from '@vanilla-extract/css';
+
+export const container = style({
+  display: 'flex',
+  width: '100%',
+  height: '40rem',
+  justifyContent: 'center',
+  alignItems: 'center',
+});
+export const wrapper = style({
+  display: 'flex',
+  flexDirection: 'column',
+  width: '100%',
+  justifyContent: 'center',
+  alignItems: 'center',
+});
diff --git a/services/web/src/app/my/timeline/component/TimelineNull/TimelineNull.tsx b/services/web/src/app/my/timeline/component/TimelineNull/TimelineNull.tsx
@@ -1,9 +1,13 @@
 'use client';
 
-import { Calendar, Spacing } from '@linker/lds';
+import { Calendar, Txt } from '@linker/lds';
+import { colors } from '@linker/styles';
+import Image from 'next/image';
 import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 
+import { wrapper, container } from './TimelineNull.css';
+
 const TimelineNull = () => {
   const router = useRouter();
 
@@ -27,7 +31,22 @@ const TimelineNull = () => {
         }}
         withModeChange
       />
-      <Spacing size={20} />
+      <article className={container}>
+        <section className={wrapper}>
+          <Image
+            src={'https://static.im-linker.com/images/Subtract.svg'}
+            width={48}
+            height={48}
+            alt={'subtract'}
+          />
+          <Txt typography="p1" color={colors.gray700} fontWeight="regular">
+            예정된 일정이 없습니다.
+          </Txt>
+          <Txt typography="p1" color={colors.gray700} fontWeight="regular">
+            일정을 추가해주세요.
+          </Txt>
+        </section>
+      </article>
     </>
   );
 };