style: 인수인계sec cursor 이슈 및 태그 글자수 이슈 수정

Team-Tiki · Nov 12, 2024 · 030f620 · 030f620
1 parent 205983b
commit 030f620
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 38 deletions.
diff --git a/src/page/dashboard/component/Handover/ListItem/ListItem.style.ts b/src/page/dashboard/component/Handover/ListItem/ListItem.style.ts
@@ -2,6 +2,8 @@ import { css } from '@emotion/react';
 
 import { theme } from '@/common/style/theme/theme';
 
+import { alignColor } from '@/page/dashboard/util/color';
+
 export const containerStyle = css({
   flexDirection: 'column',
   alignItems: 'center',
@@ -12,6 +14,8 @@ export const containerStyle = css({
   backgroundColor: theme.colors.gray_100,
   borderRadius: '8px',
 
+  cursor: 'pointer',
+
   ':hover': {
     backgroundColor: theme.colors.gray_200,
 
@@ -51,3 +55,15 @@ export const detailStyle = css({
 
   gap: '0.4rem',
 });
+
+export const tagStyle = (color: string) =>
+  css({
+    maxWidth: '18rem',
+
+    color: alignColor(color),
+
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+
+    textOverflow: 'ellipsis',
+  });
diff --git a/src/page/dashboard/component/Handover/ListItem/ListItem.tsx b/src/page/dashboard/component/Handover/ListItem/ListItem.tsx
@@ -11,11 +11,11 @@ import {
   contentStyle,
   detailContainerStyle,
   detailStyle,
+  tagStyle,
   titleStyle,
 } from '@/page/dashboard/component/Handover/ListItem/ListItem.style';
 import { ListTag } from '@/page/dashboard/type/listTag';
 import { getVisibleTags } from '@/page/dashboard/util/alignTags';
-import { alignColor } from '@/page/dashboard/util/color';
 
 export interface ListItemProps extends HTMLAttributes<HTMLDivElement> {
   title: string;
@@ -41,13 +41,7 @@ const ListItem = ({ title, content, date, tags = [], ...props }: ListItemProps)
         <div ref={tagContanierRef} css={[detailStyle, { display: 'flex', overflow: 'hidden' }]}>
           {visibleTags.map((tag) => {
             return (
-              <Tag
-                key={tag.tagId}
-                css={{
-                  color: alignColor(tag.bgColor),
-                  whiteSpace: 'nowrap',
-                }}
-                bgColor={tag.bgColor}>
+              <Tag key={tag.tagId} css={tagStyle(tag.bgColor)} bgColor={tag.bgColor}>
                 {tag.content}
               </Tag>
             );

diff --git a/src/page/dashboard/constant/notes.ts b/src/page/dashboard/constant/notes.ts
@@ -7,10 +7,10 @@ export const Notes: Note[] = [
     content: '티키의 3번째 정기 회의록입니다.티키의 3번째 정기 회의록입니다.',
     date: new Date(),
     tags: [
-      { tagId: 1, content: 'OT준비', bgColor: '#E2E8F8' },
-      { tagId: 2, content: '먀옹', bgColor: '#F8E2CB' },
-      { tagId: 3, content: '매옹', bgColor: '#F8E2CB' },
-      { tagId: 4, content: '난나난', bgColor: '#F8E2CB' },
+      { tagId: 0, content: 'OT준비', bgColor: '#E2E8F8' },
+      { tagId: 1, content: '먀옹', bgColor: '#F8E2CB' },
+      { tagId: 2, content: '매옹', bgColor: '#F8E2CB' },
+      { tagId: 3, content: '난나난', bgColor: '#F8E2CB' },
     ],
   },
   {
@@ -19,10 +19,10 @@ export const Notes: Note[] = [
     content: '티키의 3번째 정기 회의록입니다.티키의 3번째 정기 회의록입니다.',
     date: new Date(),
     tags: [
-      { tagId: 1, content: '고양이', bgColor: '#F8E2CB' },
-      { tagId: 2, content: 'D.C.', bgColor: '#F8E1F5' },
-      { tagId: 3, content: 'DormCat', bgColor: '#C4F2E5' },
-      { tagId: 4, content: 'I love', bgColor: '#F8E2CB' },
+      { tagId: 0, content: '고양이고양이고양이고양이고양이고양이고양이고양이', bgColor: '#F8E2CB' },
+      { tagId: 1, content: 'D.C.', bgColor: '#F8E1F5' },
+      { tagId: 2, content: 'DormCat', bgColor: '#C4F2E5' },
+      { tagId: 3, content: 'I love', bgColor: '#F8E2CB' },
     ],
   },
   {
@@ -31,12 +31,12 @@ export const Notes: Note[] = [
     content: '티키의 3번째 정기 회의록입니다.티키의 3번째 정기 회의록입니다.',
     date: new Date(),
     tags: [
-      { tagId: 1, content: '귀여운', bgColor: '#F8E1F5' },
-      { tagId: 2, content: '봄 MT', bgColor: '#F8E1F5' },
-      { tagId: 3, content: '가을 MT', bgColor: '#F8E1F5' },
-      { tagId: 4, content: '학과 엠티', bgColor: '#F8E1F5' },
-      { tagId: 5, content: '집부 엠티', bgColor: '#F8E1F5' },
-      { tagId: 6, content: '공대 엠티', bgColor: '#F8E1F5' },
+      { tagId: 0, content: '귀여운', bgColor: '#F8E1F5' },
+      { tagId: 1, content: '봄 MT', bgColor: '#F8E1F5' },
+      { tagId: 2, content: '가을 MT', bgColor: '#F8E1F5' },
+      { tagId: 3, content: '학과 엠티', bgColor: '#F8E1F5' },
+      { tagId: 4, content: '집부 엠티', bgColor: '#F8E1F5' },
+      { tagId: 5, content: '공대 엠티', bgColor: '#F8E1F5' },
     ],
   },
   {
@@ -45,31 +45,31 @@ export const Notes: Note[] = [
     content: '티키의 3번째 정기 회의록입니다.티키의 3번째 정기 회의록입니다.',
     date: new Date(),
     tags: [
-      { tagId: 1, content: '낄낄', bgColor: '#DCD8FA' },
-      { tagId: 2, content: '엠티 기간', bgColor: '#F8E2CB' },
-      { tagId: 3, content: '엠티 준비 위원회 회의', bgColor: '#DCD8FA' },
-      { tagId: 4, content: '엠엠', bgColor: '#F8E2CB' },
-      { tagId: 5, content: 'study', bgColor: '#DCD8FA' },
-      { tagId: 6, content: 'event', bgColor: '#F8E2CB' },
-      { tagId: 7, content: 'study', bgColor: '#DCD8FA' },
-      { tagId: 8, content: 'event', bgColor: '#F8E2CB' },
+      { tagId: 0, content: '낄낄', bgColor: '#DCD8FA' },
+      { tagId: 1, content: '엠티 기간', bgColor: '#F8E2CB' },
+      { tagId: 2, content: '엠티 준비 위원회 회의', bgColor: '#DCD8FA' },
+      { tagId: 3, content: '엠엠', bgColor: '#F8E2CB' },
+      { tagId: 4, content: 'study', bgColor: '#DCD8FA' },
+      { tagId: 5, content: 'event', bgColor: '#F8E2CB' },
+      { tagId: 6, content: 'study', bgColor: '#DCD8FA' },
+      { tagId: 7, content: 'event', bgColor: '#F8E2CB' },
     ],
   },
   {
     noteId: 5,
     title: '3차 정기 회의',
     content: '티키의 3번째 정기 회의록입니다.티키의 3번째 정기 회의록입니다.',
     date: new Date(),
-    tags: [{ tagId: 1, content: '시험기간', bgColor: '#F8E1F5' }],
+    tags: [{ tagId: 0, content: '시험기간', bgColor: '#F8E1F5' }],
   },
   {
     noteId: 6,
     title: '3차 정기 회의',
     content: '티키의 3번째 정기 회의록입니다.티키의 3번째 정기 회의록입니다.',
     date: new Date(),
     tags: [
-      { tagId: 1, content: 'study', bgColor: '#F8E1F5' },
-      { tagId: 2, content: 'notice', bgColor: '#C4F2E5' },
+      { tagId: 0, content: 'study', bgColor: '#F8E1F5' },
+      { tagId: 1, content: 'notice', bgColor: '#C4F2E5' },
     ],
   },
   {
@@ -78,10 +78,10 @@ export const Notes: Note[] = [
     content: '티키의 3번째 정기 회의록입니다.티키의 3번째 정기 회의록입니다.',
     date: new Date(),
     tags: [
-      { tagId: 1, content: 'recruiting', bgColor: '#E2E8F8' },
+      { tagId: 0, content: 'recruiting', bgColor: '#E2E8F8' },
+      { tagId: 1, content: 'event', bgColor: '#F8E2CB' },
       { tagId: 2, content: 'event', bgColor: '#F8E2CB' },
       { tagId: 3, content: 'event', bgColor: '#F8E2CB' },
-      { tagId: 4, content: 'event', bgColor: '#F8E2CB' },
     ],
   },
   {
@@ -90,8 +90,8 @@ export const Notes: Note[] = [
     content: '티키의 3번째 정기 회의록입니다.티키의 3번째 정기 회의록입니다.',
     date: new Date(),
     tags: [
-      { tagId: 1, content: 'study', bgColor: '#F8E1F5' },
-      { tagId: 2, content: 'notice', bgColor: '#C4F2E5' },
+      { tagId: 0, content: 'study', bgColor: '#F8E1F5' },
+      { tagId: 1, content: 'notice', bgColor: '#C4F2E5' },
     ],
   },
 ];
diff --git a/src/page/dashboard/util/alignTags.ts b/src/page/dashboard/util/alignTags.ts
@@ -18,7 +18,12 @@ export const getVisibleTags = (tags: ListTag[], maxWidth: number, tagGap: number
     document.body.removeChild(tempElement);
 
     //현재 태그까지 추가 후 너비 초과 검사
-    if (totalWidth + tagWidth * 2 + tagGap > maxWidth) break;
+    if (totalWidth + tagWidth * 2 + tagGap > maxWidth) {
+      if (tag.tagId == 0) {
+        visibleTags.push(tag);
+      }
+      break;
+    }
     totalWidth += tagWidth * 2 + tagGap;
     visibleTags.push(tag);
   }