🩹 관심강좌 제거 시 모달 안 닫히는 이슈 픽스 (#155)

https://wafflestudio.slack.com/archives/C0PAVPS5T/p1716724965976609?thread_ts=1716399538.928789&cid=C0PAVPS5T
wafflestudio · May 26, 2024 · 56cb238 · 56cb238
1 parent d3e9c40
commit 56cb238
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 6 deletions.
diff --git a/apps/snutt-webclient/e2e/main/lecture-section.spec.ts b/apps/snutt-webclient/e2e/main/lecture-section.spec.ts
@@ -149,3 +149,36 @@ test('검색 결과 탭에서 추가 기능이 정상 동작한다 (실패)', as
   await page.getByTestId('main-lecture-listitem').nth(0).getByText('추가').click();
   await expect(page.getByTestId('error-dialog-message')).toHaveText('강의 시간이 서로 겹칩니다.');
 });
+
+test('검색 결과 탭에서 관심강좌를 제거할 수 있다', async ({ page }) => {
+  await page.goto('/');
+  await givenUser(page, { login: true });
+  await page.getByTestId('main-searchbar-search').click();
+  await page.getByTestId('main-lecture-listitem').nth(0).getByTestId('main-lecture-listitem-bookmark').click();
+  await Promise.all([
+    page.waitForRequest(
+      (req) =>
+        req.method() === 'DELETE' &&
+        req.url().includes('/v1/bookmarks/lecture') &&
+        req.postDataJSON().lecture_id === '6329ab4ecb360c002b6eec57',
+    ),
+    await page.getByTestId('bookmark-delete-confirm').click(),
+  ]);
+  await expect(page.getByTestId('bookmark-delete-confirm')).toHaveCount(0);
+});
+
+test('검색 결과 탭에서 관심강좌를 추가할 수 있다', async ({ page }) => {
+  await page.goto('/');
+  await givenUser(page, { login: true });
+  await page.getByTestId('main-searchbar-search').click();
+
+  await Promise.all([
+    page.waitForRequest(
+      (req) =>
+        req.method() === 'POST' &&
+        req.url().includes('/v1/bookmarks/lecture') &&
+        req.postDataJSON().lecture_id === '6329ab4ecb360c002b6ee9b6',
+    ),
+    await page.getByTestId('main-lecture-listitem').nth(1).getByTestId('main-lecture-listitem-bookmark').click(),
+  ]);
+});
diff --git a/apps/snutt-webclient/playwright.config.ts b/apps/snutt-webclient/playwright.config.ts
@@ -6,7 +6,7 @@ const config: PlaywrightTestConfig = {
   testDir: './e2e',
   timeout: 5000,
 
-  expect: { timeout: 2000 },
+  expect: { timeout: 5000 },
 
   fullyParallel: true,
   forbidOnly: !!process.env.CI,

diff --git a/apps/snutt-webclient/src/mocks/fixtures/bookmark.ts b/apps/snutt-webclient/src/mocks/fixtures/bookmark.ts
@@ -5,7 +5,7 @@ export const mockBookmarks: SnuttApiSuccessResponseData<'GET /v1/bookmarks'> = {
   semester: 1,
   lectures: [
     {
-      _id: '60b3b3b3b3b3b3b3b3b3b3b3',
+      _id: '6329ab4ecb360c002b6eec57',
       course_title: '관심강의1',
       class_time_json: [],
       class_time_mask: [],

diff --git a/apps/snutt-webclient/src/mocks/handlers/index.ts b/apps/snutt-webclient/src/mocks/handlers/index.ts
@@ -385,7 +385,17 @@ export const handlers = [
 
   http.get(
     `*/v1/bookmarks`,
-    withValidateAccess(() => ({ type: 'success', body: mockBookmarks }), { token: false }),
+    withValidateAccess(() => ({ type: 'success', body: mockBookmarks })),
+  ),
+
+  http.post(
+    `*/v1/bookmarks/lecture`,
+    withValidateAccess(() => ({ type: 'success', body: {} })),
+  ),
+
+  http.delete(
+    `*/v1/bookmarks/lecture`,
+    withValidateAccess(() => ({ type: 'success', body: {} })),
   ),
 ];
 

diff --git a/...ient/src/pages/main/main-lecture-section/common/main-lecture-listitem/index.component.tsx b/...ient/src/pages/main/main-lecture-section/common/main-lecture-listitem/index.component.tsx
@@ -44,7 +44,11 @@ export const MainLectureListitem = ({
           </div>
           <div className={styles.bookmarkWrapper}>
             {vm.header.bookmark.isShow && (
-              <button onClick={vm.header.bookmark.onClick} className={styles.bookmarkButton}>
+              <button
+                onClick={vm.header.bookmark.onClick}
+                className={styles.bookmarkButton}
+                data-testid="main-lecture-listitem-bookmark"
+              >
                 {
                   {
                     'bookmark-fill': <IcBookmarkFill className={styles.bookmarkIcon} />,
@@ -118,7 +122,12 @@ export const MainLectureListitem = ({
           <Button color="gray" size="small" onClick={vm.deleteBookmarkDialog.onClose}>
             취소
           </Button>
-          <Button color="red" size="small" onClick={vm.deleteBookmarkDialog.onClick}>
+          <Button
+            color="red"
+            size="small"
+            onClick={vm.deleteBookmarkDialog.onClick}
+            data-testid="bookmark-delete-confirm"
+          >
             제거하기
           </Button>
         </Dialog.Actions>

diff --git a/...lient/src/pages/main/main-lecture-section/common/main-lecture-listitem/index.presenter.ts b/...lient/src/pages/main/main-lecture-section/common/main-lecture-listitem/index.presenter.ts
@@ -171,7 +171,12 @@ export const mainLectureListitemPresenter = {
         onClose: () => setDeleteBookmarkDialogOpen(false),
         onClick: () =>
           deleteBookmarkMutation.mutate(undefined, {
-            onSuccess: (data) => data.type === 'success' && onMouseLeave?.(),
+            onSuccess: (data) => {
+              if (data.type === 'success') {
+                onMouseLeave?.();
+                setDeleteBookmarkDialogOpen(false);
+              }
+            },
           }),
       },
     };