[FE-Feat] 겹치는 일정 처리하기

.github/workflows/fe-ci.yml

@@ -0,0 +1,53 @@
+name: fe-ci
+
+on:
+  pull_request:
+    branches:
+      - dev
+    paths:
+      - "frontend/**"
+
+jobs:
+  frontend:
+    runs-on: ubuntu-latest
+
+    defaults:
+      run:
+        working-directory: ./frontend
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+
+      - name: Cache node_modules
+        uses: actions/cache@v4
+        with:
+          path: ~/.pnpm-store
+          key: ${{ runner.os }}-pnpm-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9
+
+      - name: Set .env file
+        run: |
+          echo "${{ secrets.FE_ENV }}" > .env
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Lint
+        run: pnpm lint
+
+      - name: Build Frontend
+        run: pnpm build
+
+      - name: Run Tests
+        run: pnpm test

frontend/apps/client/__tests__/mocks/events.ts

@@ -0,0 +1,19 @@
+import type { PersonalEventResponse } from '@/features/my-calendar/model';
+
+export const createCards = (num: number): PersonalEventResponse[] => 
+  Array.from({ length: num }, (_, i) => {
+    const id = i + 1;
+    const baseDate = new Date('2023-10-01T00:00:00');
+    const start = new Date(baseDate.getTime() + i * 30 * 60 * 1000);
+    const end = new Date(start.getTime() + 60 * 60 * 1000);
+
+    return {
+      id,
+      title: `Test Event ${id}`,
+      startDateTime: start.toISOString(),
+      endDateTime: end.toISOString(),
+      isAdjustable: id % 2 === 1,
+      googleEventId: `google-event-id-${id}`,
+      calendarId: `calendar-id-${id}`,
+    };
+  });

frontend/apps/client/__tests__/unit/my-calendar/card.tsx

@@ -0,0 +1,43 @@
+import { render } from '@testing-library/react';
+
+import { CalendarCardList } from '@/features/my-calendar/ui/CalendarCardList';
+
+import { createCards } from '../../mocks/events';
+
+describe('CalendarCardList', () => {
+  it('일반 일정 카드 리스트 컨테이너 렌더링', () => {
+    // given
+    const cards = createCards(10);
+
+    // when
+    const { container } = render(<CalendarCardList cards={cards} isSelecting={true} />);
+    const cardList = container.querySelector('[class*="CalendarCardList"]'); 
+
+    // then
+    expect(cardList).toBeVisible();
+  });
+  it('일반 일정 카드 아이템 렌더링', () => {
+    // given
+    const cards = createCards(10);
+
+    // when
+    const { container } = render(<CalendarCardList cards={cards} isSelecting={true} />);
+
+    // then
+    const cardList = container.querySelector('[class*="CalendarCardList"]'); 
+    expect(cardList?.childElementCount).toBe(cards.length);
+  });
+  it.skip('겹치는 날짜 정렬 알고리즘 카드 렌더링 시간 100ms 이하', () => {
+    // given
+    const cards = createCards(1000);
+
+    // when
+    const start = performance.now();
+    render(<CalendarCardList cards={cards} isSelecting={true} />);
+    const end = performance.now();
+
+    // then
+    expect(end - start).toBeLessThan(100);
+  });
+},
+);

frontend/apps/client/package.json

@@ -25,8 +25,6 @@
     "@tanstack/react-query": "^5.66.0",
     "@tanstack/react-router": "^1.109.2",
     "jotai": "^2.12.1",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
     "zod": "^3.24.1"
   },
   "devDependencies": {

frontend/apps/client/setup-file.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

frontend/apps/client/src/features/my-calendar/ui/CalendarCardList/DefaultCard.tsx

@@ -0,0 +1,51 @@
+import { calcPositionByDate } from '@endolphin/core/utils';
+import type { EndolphinDate } from '@endolphin/date-time';
+
+import { TIME_HEIGHT } from '@/constants/date';
+
+import type { PersonalEventResponse } from '../../model';
+import { CalendarCard } from '../CalendarCard';
+
+const calcSize = (height: number) => {
+  if (height < TIME_HEIGHT) return 'sm';
+  if (height < TIME_HEIGHT * 2.5) return 'md';
+  return 'lg';
+};
+
+export const DefaultCard = (
+  { card, start, end, idx }: 
+  { card: PersonalEventResponse; start: EndolphinDate; end: EndolphinDate; idx: number },
+) => {
+  const LEFT_MARGIN = 24;
+  const RIGHT_MARGIN = 8;
+  const SIDEBAR_WIDTH = 72;
+  const TOP_GAP = 16;
+  const DAYS = 7;
+  const { x: sx, y: sy } = calcPositionByDate(start.getDate());
+  const { y: ey } = calcPositionByDate(end.getDate());
+
+  if (sy === ey) return null;
+
+  const height = ey - sy;
+  return (
+    <CalendarCard
+      calendarId={card.calendarId}
+      endTime={new Date(card.endDateTime)}
+      id={card.id}
+      size={calcSize(height)}
+      startTime={new Date(card.startDateTime)}
+      status={card.isAdjustable ? 'adjustable' : 'fixed'}
+      style={{
+        width: `calc(
+          (100% - ${SIDEBAR_WIDTH}px) / ${DAYS} - ${RIGHT_MARGIN}px - ${idx * LEFT_MARGIN}px)`,
+        height,
+        position: 'absolute',
+        left: `calc(((100% - ${SIDEBAR_WIDTH}px) / ${DAYS} * ${sx}) + ${SIDEBAR_WIDTH}px)`,
+        marginLeft: idx * LEFT_MARGIN,
+        top: TOP_GAP + sy,
+      }}
+      title={card.title}
+    />
+  );
+};
+

frontend/apps/client/src/features/my-calendar/ui/CalendarCardList/index.css.ts

@@ -0,0 +1,18 @@
+import { recipe } from '@vanilla-extract/recipes';
+
+export const cardListStyle = recipe({
+  base: {},
+  variants: {
+    disable: {
+      true: {
+        pointerEvents: 'none',
+      },
+      false: {
+        pointerEvents: 'auto',
+      },
+    },
+  },
+  defaultVariants: {
+    disable: false,
+  },
+});

frontend/apps/client/src/features/my-calendar/ui/CalendarCardList/index.tsx

@@ -1,78 +1,52 @@
-import { TIME_HEIGHT } from '@constants/date';
-import { calcPositionByDate, getDateParts, isAllday  } from '@endolphin/core/utils';
+import { isAllday } from '@endolphin/core/utils';
+import type { GroupInfo } from '@endolphin/date-time';
+import { EndolphinDate, groupByDate, groupByOverlap, sortDates } from '@endolphin/date-time';
 
 import type { PersonalEventResponse } from '../../model';
-import { CalendarCard } from '../CalendarCard';
+import { DefaultCard } from './DefaultCard';
+import { cardListStyle } from './index.css';
 
-const calcSize = (height: number) => {
-  if (height < TIME_HEIGHT) return 'sm';
-  if (height < TIME_HEIGHT * 2.5) return 'md';
-  return 'lg';
+const createGroupInfo = (card: PersonalEventResponse): GroupInfo<PersonalEventResponse> => {
+  const start = new EndolphinDate(card.startDateTime);
+  const end = new EndolphinDate(card.endDateTime);
+  const { year: sy, month: sm, day: sd } = start.getDateParts();
+  const { year: ey, month: em, day: ed } = end.getDateParts();
+  return {
+    id: card.id.toString(),
+    start,
+    end,
+    data: card,
+    sy, sm, sd,
+    ey, em, ed,
+  };
 };
 
-const DefaultCard = (
-  { card, start, end }: { card: PersonalEventResponse; start: Date; end: Date },
-) => {
-  const { x: sx, y: sy } = calcPositionByDate(start);
-  const { y: ey } = calcPositionByDate(end);
-
-  if (sy === ey) return null;
+export const CalendarCardList = ({ cards, isSelecting }: { 
+  cards: PersonalEventResponse[]; 
+  isSelecting: boolean; 
+}) => {
+  const isNotAlldayCards 
+    = cards.filter((card)=>!isAllday(card.startDateTime, card.endDateTime)).map(createGroupInfo);
 
-  const height = ey - sy;
   return (
-    <CalendarCard
-      calendarId={card.calendarId}
-      endTime={new Date(card.endDateTime)}
-      id={card.id}
-      size={calcSize(height)}
-      startTime={new Date(card.startDateTime)}
-      status={card.isAdjustable ? 'adjustable' : 'fixed'}
-      style={{
-        width: 'calc((100% - 72px) / 7 - 0.5rem)',
-        height,
-        position: 'absolute',
-        left: `calc(((100% - 72px) / 7 * ${sx}) + 72px)`,
-        top: 16 + sy,
-      }}
-      title={card.title}
-    />
+    <div className={cardListStyle({ disable: isSelecting })}>
+      {groupByDate(isNotAlldayCards).map((dayCards) =>
+        groupByOverlap(dayCards.sort((a, b)=>
+          sortDates(
+            { start: a.start, end: a.end }, 
+            { start: b.start, end: b.end },
+          )))
+          .map(({ id, data, start, end, idx }) => (
+            <DefaultCard
+              card={data}
+              end={end}
+              idx={idx}
+              key={id}
+              start={start}
+            />
+          ),
+          ),
+      )}
+    </div>
   );
-};
-
-export const CalendarCardList = ({ cards }: { cards: PersonalEventResponse[] }) => (
-  <>
-    {cards.filter((card) => !isAllday(card.startDateTime, card.endDateTime))
-      .map((card) => {
-        const start = new Date(card.startDateTime);
-        const end = new Date(card.endDateTime);
-        const { year: sy, month: sm, day: sd } = getDateParts(start);
-        const { year: ey, month: em, day: ed } = getDateParts(end);
-
-        if (sd !== ed) {
-          return (
-            <div key={card.id}>
-              <DefaultCard
-                card={card}
-                end={new Date(sy, sm, sd, 23, 59)}
-                start={start}
-              />
-              <DefaultCard
-                card={card}
-                end={end}
-                start={new Date(ey, em, ed, 0, 0)}
-              />
-            </div>
-          );
-        }
-
-        return (
-          <DefaultCard
-            card={card}
-            end={end}
-            key={card.id}
-            start={start}
-          />
-        );
-      })}
-  </>
-);
+};

frontend/apps/client/src/features/my-calendar/ui/MyCalendar/CalendarTable.tsx

@@ -35,7 +35,7 @@ const CalendarTable = (
           type='add'
         />}
       <CalendarDiscussionBox />
-      <CalendarCardList cards={personalEvents} />
+      <CalendarCardList cards={personalEvents} isSelecting={time.isSelecting} />
       <CalendarTimeBar height={height} />
       <Calendar.Table 
         context={{

frontend/apps/client/src/features/my-calendar/ui/SchedulePopover/index.tsx

@@ -1,4 +1,8 @@
-import { calcPositionByDate, formatDateToBarString, formatDateToTimeString  } from '@endolphin/core/utils';
+import { 
+  calcPositionByDate, 
+  formatDateToBarString, 
+  formatDateToTimeString,  
+} from '@endolphin/core/utils';
 import { Flex } from '@endolphin/ui';
 import { useFormRef } from '@hooks/useFormRef';
 

frontend/apps/client/tsconfig.app.json

@@ -2,18 +2,19 @@
   "extends": "../../tsconfig.base.json",
   "compilerOptions": {
     "baseUrl": ".",
-    "types": ["vitest/globals"],
+    "types": ["vitest/globals", "@vitest/browser/providers/playwright"],
     "paths": {
       "@/*": ["src/*"],
       "@hooks/*": ["src/hooks/*"],
       "@utils/*": ["src/utils/*"],
       "@constants/*": ["src/constants/*"],
-      "@components/*": ["src/components/*"]
+      "@components/*": ["src/components/*"],
+      "@features/*": ["src/features/*"],
     },
     "lib": ["ES2023", "DOM", "DOM.Iterable"],
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
     "allowImportingTsExtensions": true,
     "noEmit": true,
   },
-  "include": ["src"]
+  "include": ["src", "__tests__"]
 }

frontend/apps/client/vite.config.ts

@@ -37,6 +37,7 @@ export default defineConfig({
       '@utils': path.resolve(dirname, 'src/utils'),
       '@constants': path.resolve(dirname, 'src/constants'),
       '@components': path.resolve(dirname, 'src/components'),
+      '@features': path.resolve(dirname, 'src/features'),
     },
   },
   ssr: {

frontend/apps/client/vitest.config.ts

@@ -10,8 +10,15 @@ export default mergeConfig(
   reactConfig,
   defineProject({
     root: dirname,
+    test: {
+      include: ['__tests__/unit/**/*.ts?(x)'],
+      setupFiles: ['./setup-file.ts'],
+    },
     resolve: {
-      alias: createAlias(dirname),
+      alias: {
+        ...createAlias(dirname),
+        '@features': path.resolve(dirname, 'src/features'),
+      },
     },
   }),
 );