Merge pull request #30 from YAPP-Github/feat/LINKER-70

feat : [LINKER-70] 연락처탭 및 타임라인 컴포넌트 개발

.env

@@ -0,0 +1,2 @@
+NEXT_PUBLIC_MSW_MOCK = enabled
+NEXT_PUBLIC_API_URL = https://api.im-linker.com

.gitignore

@@ -27,6 +27,7 @@ yarn-error.log*
 
 # local env files
 .env*.local
+.env
 
 # vercel
 .vercel

packages/styles/src/typography.css.ts

@@ -69,6 +69,21 @@ export const typography = recipe({
         fontWeight: font.bold,
         lineHeight: font.lineHeight24,
       },
+      b2: {
+        fontSize: font.size14,
+        fontWeight: font.bold,
+        lineHeight: font.lineHeight24,
+      },
+      b3: {
+        fontSize: font.size13,
+        fontWeight: font.bold,
+        lineHeight: font.lineHeight24,
+      },
+      b4: {
+        fontSize: font.size12,
+        fontWeight: font.bold,
+        lineHeight: font.lineHeight24,
+      },
     },
   },
 });

packages/styles/types.ts

@@ -16,6 +16,9 @@ export type Typography =
   | 'p2'
   | 'p3'
   | 'p4'
-  | 'b1';
+  | 'b1'
+  | 'b2'
+  | 'b3'
+  | 'b4';
 
 export type FontWeight = 'regular' | 'medium' | 'bold' | 'extrabold';

services/web/package.json

@@ -6,6 +6,7 @@
     "dev": "next dev",
     "mock": "ts-node ./src/__server__/http.ts",
     "dev:mock": "concurrently --kill-others \"yarn dev\" \"yarn mock\"",
+
     "build": "next build",
     "start": "next start",
     "lint": "next lint",

services/web/src/app/my/timeline/Feed.css.ts

@@ -0,0 +1,16 @@
+import { style } from '@vanilla-extract/css';
+
+export const timelineItemWrapper = style({
+  marginTop: '1.1rem',
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '1.2rem',
+});
+
+export const timelineCountWrapper = style({
+  display: 'flex',
+  flexDirection: 'row',
+  gap: '0.3rem',
+  marginTop: '3.7rem',
+  paddingLeft: '2rem',
+});

services/web/src/app/my/timeline/Feed.tsx

@@ -1,9 +1,13 @@
 'use client';
-
-import { Calendar, Spacing, Txt } from '@linker/lds';
-import { format } from 'date-fns';
+import { Calendar, Spacing } from '@linker/lds';
+import { Txt } from '@linker/lds';
+import { colors } from '@linker/styles';
 import { useState } from 'react';
 
+import { timelineItemWrapper, timelineCountWrapper } from './Feed.css';
+import TimelineItem from './TimelineItem/TimelineItem';
+import timelineMockdata from './__mock__';
+
 const Feed = () => {
   const [date, setDate] = useState(new Date());
 
@@ -18,7 +22,27 @@ const Feed = () => {
       />
 
       <Spacing size={20} />
-      <Txt>선택한 날짜: {format(date, 'yyyy-MM-dd')}</Txt>
+      <section className={timelineCountWrapper}>
+        <Txt typography="p3" fontWeight="medium" color={colors.gray950}>
+          내 정보
+        </Txt>
+        <Txt typography="p3" fontWeight="medium" color={colors.primary}>
+          {timelineMockdata.length}
+        </Txt>
+      </section>
+      <section className={timelineItemWrapper}>
+        {timelineMockdata.map((item) => (
+          <div key={item.title}>
+            <TimelineItem
+              title={item.title}
+              time={item.time}
+              hashtag={item.hashtag || []}
+              member={item.member}
+              memo={item.memo || ''}
+            />
+          </div>
+        ))}
+      </section>
     </>
   );
 };

services/web/src/app/my/timeline/__mock__.ts

@@ -0,0 +1,28 @@
+interface TimelineItemProps {
+  id: number;
+  title: string;
+  time: string;
+  member: string;
+  hashtag?: string[];
+  memo?: string;
+}
+export const timelineMockData: TimelineItemProps[] = [
+  {
+    id: 0,
+    title: '이지우 커피챗',
+    time: '오후 4:00- 6:00',
+    member: '이지우 외 + 3명',
+    hashtag: ['스포츠', '골프', '테니스'],
+    memo: '선생님이 너무 친절하시고 프라이빗한 공간이라 친구와 함께 얘기하면서 즐겁게 체험즐겁게 체험즐...',
+  },
+  {
+    id: 1,
+    title: '이지우 커피챗',
+    time: '오후 4:00- 6:00',
+    member: '이지우 외 + 3명',
+    memo: '선생님이 너무 친절하시고 프라이빗한 공간이라 친구와 함께 얘기하면서 즐겁게 체험즐겁게 체험즐...',
+  },
+  { id: 2, title: '이지우 커피챗', time: '오후 4:00- 6:00', member: '이지우 외 + 3명' },
+];
+
+export default timelineMockData;

services/web/src/app/my/timeline/component/TimelineItem/TimelineItem.css.ts

@@ -0,0 +1,58 @@
+import { colors } from '@linker/styles';
+import { style } from '@vanilla-extract/css';
+
+export const timelineItmeInfoWrapper = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '0.5rem',
+});
+export const timelineRowWrapper = style({
+  display: 'flex',
+  flexDirection: 'row',
+  gap: '0.4rem',
+});
+
+export const timelineItemHashtagWrapper = style({
+  marginTop: '2.6rem',
+  display: 'flex',
+  flexDirection: 'row',
+  gap: '0.7rem',
+});
+export const timelineItemHashtagBoxWrapper = style({
+  background: `${colors.gray100}`,
+  borderRadius: '0.3rem',
+  display: 'inline-block',
+  justifyContent: 'center',
+  alignItems: 'center',
+  height: '2.6rem',
+  paddingTop: '0.3rem',
+  paddingRight: '1.3rem',
+  paddingLeft: '1.1rem',
+  paddingBottom: '0.5rem',
+});
+
+export const timelineItemDivider = style({
+  marginTop: '1.2rem',
+  width: '100%',
+  height: '0.1rem',
+  background: `${colors.gray100}`,
+});
+
+export const timelineItemMemoWrapper = style({
+  marginTop: '1.4rem',
+  display: 'flex',
+  flexDirection: 'column',
+});
+
+export const timelineItemSubjectWrapper = style({
+  width: '100%',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  border: `0.1rem solid ${colors.gray200}`,
+  borderRadius: '0.8rem',
+  marginTop: '1.7rem',
+  height: '4rem',
+  paddingTop: '1rem',
+  paddingBottom: '1rem',
+});

services/web/src/app/my/timeline/component/TimelineItem/TimelineItem.tsx

@@ -0,0 +1,87 @@
+import { List } from '@linker/lds';
+import { Txt } from '@linker/lds';
+import { colors } from '@linker/styles';
+import Image from 'next/image';
+
+import {
+  timelineRowWrapper,
+  timelineItemDivider,
+  timelineItemHashtagWrapper,
+  timelineItmeInfoWrapper,
+  timelineItemMemoWrapper,
+  timelineItemHashtagBoxWrapper,
+} from './TimelineItem.css';
+
+interface TimelineItemProps {
+  title: string;
+  time: string;
+  member: string;
+  hashtag: string[];
+  memo: string;
+}
+
+function TimelineItem({ title, time, member, hashtag, memo }: TimelineItemProps) {
+  return (
+    <List>
+      <List.Header
+        title={title}
+        rightAddon={
+          <button type="button">
+            <img
+              src="https://static.im-linker.com/dots-vertical.svg"
+              alt=""
+              width={28}
+              height={28}
+            />
+          </button>
+        }
+      />
+      <section className={timelineItmeInfoWrapper}>
+        <div className={timelineRowWrapper}>
+          <Image
+            width={20}
+            height={20}
+            alt="아이콘"
+            src="https://static.im-linker.com/dots-vertical.svg"
+          />
+          <Txt typography="p3" color={colors.gray700} fontWeight="regular">
+            {time}
+          </Txt>
+        </div>
+        <div className={timelineRowWrapper}>
+          <Image
+            width={20}
+            height={20}
+            alt="아이콘"
+            src="https://static.im-linker.com/dots-vertical.svg"
+          />
+          <Txt typography="p3" color={colors.gray700} fontWeight="regular">
+            {member}
+          </Txt>
+        </div>
+      </section>
+      {hashtag && (
+        <section className={timelineItemHashtagWrapper}>
+          {hashtag.map((item) => (
+            <div className={timelineItemHashtagBoxWrapper} key={item}>
+              <Txt typography="p4" color={colors.gray700} fontWeight="regular">
+                {item}
+              </Txt>
+            </div>
+          ))}
+        </section>
+      )}
+      {memo && (
+        <div>
+          <div className={timelineItemDivider}></div>
+          <section className={timelineItemMemoWrapper}>
+            <Txt typography="p2" color={colors.gray900} fontWeight="regular">
+              {memo}
+            </Txt>
+          </section>
+        </div>
+      )}
+    </List>
+  );
+}
+export default TimelineItem;