From 72ebbdd6842241e7508ef5e20859670624e430c6 Mon Sep 17 00:00:00 2001
From: JungminLee <85864699+JjungminLee@users.noreply.github.com>
Date: Fri, 23 Feb 2024 21:39:16 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20[LINKER-135]=20=EC=BA=98=EB=A6=B0?=
 =?UTF-8?q?=EB=8D=94=EC=97=90=20=EB=8D=B0=EC=9D=B4=ED=84=B0=EA=B0=80=20?=
 =?UTF-8?q?=EC=97=86=EC=9D=84=EB=95=8C=20=EC=97=90=EB=9F=AC=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20(#70)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ContactDefault/ContactDefault.tsx         |  2 +-
 .../TimelineItem/TimelineItem.css.ts          |  5 ++--
 .../TimelineNull/TimelineNull.css.ts          | 16 +++++++++++++
 .../component/TimelineNull/TimelineNull.tsx   | 23 +++++++++++++++++--
 4 files changed, 41 insertions(+), 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
index e80a55c2..b8c8f09e 100644
--- 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
index 291559ec..8e37333f 100644
--- 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
index e69de29b..ef3b170e 100644
--- 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
index 97af2dba..b9aded6e 100644
--- 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>
     </>
   );
 };