[NDD-429] css 버그 및 약간의 기획 변경 (7h/4h) (#36)

* design: 듀토리얼 투어 애니메이션 및 css 디자인 수정 * design: 페이지 진입시 깜빡이는 tooltip 제거 - navigation text 수정 * fix: api response 변경에 따른 date format 변경 * design: 작성자 이름이 한줄 이상일경우 ...처리 * design: 동영상 썸네일의 이미지 비율 및 예외처리 - 사용자 이름이 1줄 넘어갈 경우 ...처리 - 제목이 2줄 이상일 경우 ...처리 * design: mypage의 날짜 format 수정 * design: 면접 세트는 내 페이지에서만 공개여부를 전환할 수 있음 - menu 이름 변경 * fix: categoryName을 찾을때 useSuspense query를 이용해 로딩이 throw 되도록 변경 * design: 면접 세트 추가 공개범위 코드 제거 * design: 비디오 세부 페이지 날짜 format 변경 * fix: 듀토리얼을 초기화할때 localStorage를 사용하도록 수정 * fix: 초기 랜더링 줄이기 - msw가 prod에도 실행되는 현상 수정 - 첫진입시 로그인 확인은 1번만 수행 해서 blocking 상태를 제거
the-NDD · Apr 16, 2024 · a03cf7e · a03cf7e
1 parent 7899468
commit a03cf7e
Show file tree

Hide file tree

Showing 18 changed files with 125 additions and 319 deletions.
diff --git a/apps/gomterview-com/src/atoms/serviceTour.ts b/apps/gomterview-com/src/atoms/serviceTour.ts
@@ -1,11 +1,18 @@
+import dayjs from 'dayjs';
 import { atom } from 'recoil';
 
 export const runState = atom<{
   isRunning: boolean;
 }>({
   key: 'runState',
   default: {
-    isRunning: false,
+    isRunning: (() => {
+      const skipped = localStorage.getItem('skipped');
+      if (!skipped) {
+        return true;
+      }
+      return dayjs(skipped).isAfter(dayjs());
+    })(),
   },
 });
 

diff --git a/...com/src/components/common/QuestionSelectionBox/WorkbookGeneratorModal/WorkbookAddForm.tsx b/...com/src/components/common/QuestionSelectionBox/WorkbookGeneratorModal/WorkbookAddForm.tsx
@@ -1,4 +1,4 @@
-import { Button, Input, InputArea, Tooltip } from '@foundation/index';
+import { Button, Input, InputArea, Typography } from '@foundation/index';
 import { css } from '@emotion/react';
 import { FormEventHandler, useState } from 'react';
 import LabelBox from '@common/QuestionSelectionBox/WorkbookGeneratorModal/LabelBox';
@@ -8,7 +8,6 @@ import { theme } from '@styles/theme';
 import useCategoryQuery from '@hooks/apis/queries/useCategoryQuery';
 import useWorkbookAdd from '@hooks/useWorkbookAdd';
 import { toast } from '@foundation/Toast/toast';
-import { ShareRangeToggle } from '@common/index';
 
 type WorkbookAddFormProps = {
   closeModal: () => void;
@@ -112,22 +111,14 @@ const WorkbookAddForm: React.FC<WorkbookAddFormProps> = ({ closeModal }) => {
         />
       </LabelBox>
       <LabelBox labelName="공개 범위">
-        <Tooltip
-          title={'문제를 추가하여 공개로 전환할 수 있습니다.'}
-          position="bottom"
+        <Typography
+          variant="captionWeak"
+          css={css`
+            padding-left: 0.25rem;
+          `}
         >
-          <ShareRangeToggle
-            isPublic={false}
-            onClick={() =>
-              toast.info('문제가 존재하지 않아 공개로 전환할 수 없습니다.')
-            }
-            publicText={{
-              text: '곰터뷰의 모든 사용자',
-              description:
-                '비회원을 포함한 곰터뷰의 모든 사용자에게 공개됩니다.',
-            }}
-          />
-        </Tooltip>
+          문제 추가 후 수정에서 공개로 전환할 수 있습니다.
+        </Typography>
       </LabelBox>
       <LabelBox labelName="설명">
         <InputArea

diff --git a/...om/src/components/common/QuestionSelectionBox/WorkbookGeneratorModal/WorkbookEditForm.tsx b/...om/src/components/common/QuestionSelectionBox/WorkbookGeneratorModal/WorkbookEditForm.tsx
diff --git a/.../components/common/QuestionSelectionBox/WorkbookGeneratorModal/WorkbookGeneratorModal.tsx b/.../components/common/QuestionSelectionBox/WorkbookGeneratorModal/WorkbookGeneratorModal.tsx
@@ -1,17 +1,14 @@
 import { css } from '@emotion/react';
-import WorkbookEditForm from '@common/QuestionSelectionBox/WorkbookGeneratorModal/WorkbookEditForm';
 import WorkbookAddForm from '@common/QuestionSelectionBox/WorkbookGeneratorModal/WorkbookAddForm';
 import ModalHeader from '@foundation/Modal/ModalHeader';
 import { Modal } from '@foundation/index';
 import { theme } from '@styles/theme';
 
 type WorkbookGeneratorModalProps = {
   closeModal: () => void;
-  workbookId?: number;
 };
 const WorkbookGeneratorModal: React.FC<WorkbookGeneratorModalProps> = ({
   closeModal,
-  workbookId,
 }) => {
   return (
     <Modal
@@ -28,20 +25,14 @@ const WorkbookGeneratorModal: React.FC<WorkbookGeneratorModalProps> = ({
         }
       `}
     >
-      <ModalHeader closeModal={closeModal}>
-        {workbookId !== undefined ? '면접 세트 수정' : '새 면접 세트'}
-      </ModalHeader>
+      <ModalHeader closeModal={closeModal}>새 면접 세트</ModalHeader>
       <div
         css={css`
           max-height: 80vh;
           padding: 1.5rem;
         `}
       >
-        {workbookId !== undefined ? (
-          <WorkbookEditForm workbookId={workbookId} closeModal={closeModal} />
-        ) : (
-          <WorkbookAddForm closeModal={closeModal} />
-        )}
+        <WorkbookAddForm closeModal={closeModal} />
       </div>
     </Modal>
   );

diff --git a/apps/gomterview-com/src/components/common/Thumbnail/Thumbnail.tsx b/apps/gomterview-com/src/components/common/Thumbnail/Thumbnail.tsx
@@ -100,12 +100,13 @@ const Thumbnail: React.FC<ThumbnailProps> = ({
           crossOrigin="use-credentials"
           src={image}
           onError={(e) => (e.currentTarget.src = `${logo}`)}
+          // TODO: 에러 부분 때문에 첫 로딩시 layout shift가 발생합니다.
           alt={videoName}
           css={css`
-            aspect-ratio: 3 / 2;
+            aspect-ratio: 3 /2;
             width: 100%;
             height: auto;
-            object-fit: contain;
+            object-fit: cover;
             border-radius: 1rem;
           `}
         />

diff --git a/apps/gomterview-com/src/components/common/VideoItem/VideoItem.tsx b/apps/gomterview-com/src/components/common/VideoItem/VideoItem.tsx
@@ -24,10 +24,15 @@ const VideoItem: React.FC<VideoItemProps> = ({
     <Link
       to={path}
       css={css`
-        display: flex;
-        flex-direction: column;
         text-decoration: none;
         color: ${theme.colors.text.default};
+
+        &:hover {
+          > div {
+            text-decoration: underline;
+            text-decoration-color: ${theme.colors.text.subStrong};
+          }
+        }
       `}
     >
       {children}
@@ -38,42 +43,53 @@ const VideoItem: React.FC<VideoItemProps> = ({
           justify-content: space-between;
           row-gap: 0.5rem;
           padding: 1rem 0.5rem;
-          height: 100%;
           cursor: pointer;
         `}
       >
         <Typography
           variant="body2"
           css={css`
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 2;
+            overflow: hidden;
+            text-overflow: ellipsis;
             line-height: 1.25rem;
-
-            &:hover {
-              text-decoration: underline;
-              text-decoration-color: ${theme.colors.text.subStrong};
-            }
           `}
         >
           {videoName}
         </Typography>
         <div
           css={css`
             display: flex;
+            flex-direction: row;
             justify-content: space-between;
+            gap: 0.6rem;
           `}
         >
-          <div
-            css={css`
-              display: flex;
-              gap: 0.625rem;
-            `}
-          >
-            {userThumbnail && nickname && (
-              <>
-                <Avatar src={userThumbnail} width="1.5rem" height="1.5rem" />
-                <Typography variant="body3">{nickname}</Typography>
-              </>
-            )}
-          </div>
+          {userThumbnail && nickname && (
+            <>
+              <Avatar
+                src={userThumbnail}
+                css={css`
+                  max-width: 1.5rem;
+                  min-width: 1.5rem;
+                  height: auto;
+                `}
+              />
+              <Typography
+                variant="body3"
+                noWrap
+                css={css`
+                  overflow: hidden;
+                  flex-grow: 1;
+                  text-overflow: ellipsis; // 넘치는 텍스트에 말줄임표 표시
+                `}
+              >
+                {nickname}
+              </Typography>
+            </>
+          )}
           <Typography variant="body3" color={theme.colors.text.subStrong}>
             {date}
           </Typography>