[Feature] Qa 0721 (#41)

* feat: 아이콘 추가 & 메타 태그 설정 * feat: 온보딩 중복 제출 방지 * feat: 아이콘 svg 경로 수정 * feat: 용어 생성 및 수정시 용어이름이 100자가 넘으면 범용 오류가 발생 * design: 영단어 크기 조정 css * feat: 용어집 이름 글자 제한 * feat: 동의어 표기 수정 * feat: 확장프로그램 설치 링크 * feat: 체크박스 선택 로직 개선 * feat: 페이지 이동 시 상태관리 초기화 * feat: 사이드바 수정
makevook · Jul 25, 2024 · ebd43dd · ebd43dd
1 parent d9e2dfb
commit ebd43dd
Show file tree

Hide file tree

Showing 12 changed files with 65 additions and 11 deletions.
diff --git a/apps/web/public/apple-icon.png b/apps/web/public/apple-icon.png
diff --git a/apps/web/public/icon.svg b/apps/web/public/icon.svg
diff --git a/apps/web/src/app/(afterLogin)/vocabulary/[id]/_component/term/Term.tsx b/apps/web/src/app/(afterLogin)/vocabulary/[id]/_component/term/Term.tsx
@@ -62,7 +62,10 @@ const SortableListHeader = ({
       >
         <Checkbox
           onChange={() => {}}
-          checked={checkList.length === response.result.length}
+          checked={
+            checkList.length === response.result.length ||
+            checkList.includes('all')
+          }
         />
       </List>
       <List
@@ -242,6 +245,7 @@ export const Term = () => {
   const [sorts, setSorts] = useState<TermSortValues[]>([])
   const [selectedTermUid, setSelectedTermUid] = useState('')
   const [updated, setUpdated] = useState(false)
+  const { reset } = useVocabularyStore()
 
   const { data: response, isLoading } = useGetTermQuery(id, sorts)
 
@@ -255,6 +259,10 @@ export const Term = () => {
     },
   })
 
+  useEffect(() => {
+    reset()
+  }, [id, reset])
+
   useEffect(() => {
     if (!response) {
       return

diff --git a/apps/web/src/app/(onboarding)/onboarding/job/page.tsx b/apps/web/src/app/(onboarding)/onboarding/job/page.tsx
@@ -77,7 +77,9 @@ const OnboardingJobPage = () => {
   )
 
   const onSubmitFunnel = () => {
-    mutation.mutate()
+    if (!mutation.isPending || !mutation.isSuccess) {
+      mutation.mutate()
+    }
   }
 
   const onClickJob = (job: OnboardingJob) => {

diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx
@@ -13,8 +13,9 @@ import TokenSender from '@/components/TokenSender/TokenSender'
 import { ModalContextProvider } from 'src/hooks/useModal/useModal'
 
 export const metadata: Metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
+  title: 'Vook',
+  description: 'IT 용어를 가장 쉽고 빠르게 찾는 방법',
+  icons: { icon: '/icon.svg' },
 }
 
 const RootLayout = ({

diff --git a/apps/web/src/components/Sidebar/Profile/ProfileDropbox/ProfileDropbox.tsx b/apps/web/src/components/Sidebar/Profile/ProfileDropbox/ProfileDropbox.tsx
@@ -23,6 +23,15 @@ const ProfileDropbox = () => {
     location.href = '/login'
   }
 
+  // Dropbox랑 에러가 있는지 기존 hyperLink나 Link의 _blank 속성이 작동하지 않아서 아래왁 같이 해결함.
+  const handleOpenNewWindow = () => {
+    window.open(
+      'https://chromewebstore.google.com/detail/%EB%B6%80%ED%81%ACvook-it-%EC%9A%A9%EC%96%B4-%EC%82%AC%EC%A0%84/dodbjjjelcmemgenpimncmpheaaabbeb?authuser=0&hl=ko',
+      '_blank',
+      'noopener,noreferrer',
+    )
+  }
+
   return (
     <Dropbox>
       <Dropbox.Trigger>
@@ -39,7 +48,7 @@ const ProfileDropbox = () => {
             </div>
           </Dropbox.Option>
         </Link>
-        <Dropbox.Option>
+        <Dropbox.Option onClick={handleOpenNewWindow}>
           <div className={profileSettingItem}>
             <Icon name="download-medium" />
             <Text type="body-2">확장 프로그램 다운</Text>

diff --git a/apps/web/src/components/Sidebar/Sidebar.css.ts b/apps/web/src/components/Sidebar/Sidebar.css.ts
@@ -16,6 +16,7 @@ export const sideBar = style({
   height: `calc(100dvh - ${HEADER_HEIGHT}px)`,
 
   borderRight: `1px solid ${vars.colors['semantic-line-normal']}`,
+  zIndex: 10,
 })
 
 export const sideBarWorkspace = style({
@@ -33,5 +34,6 @@ export const sideBarWorkspace = style({
 })
 
 export const sideBarWorkspaceInner = style({
+  width: '100%',
   overflowY: 'auto',
 })
diff --git a/apps/web/src/modals/Modal/Modal.tsx b/apps/web/src/modals/Modal/Modal.tsx
@@ -110,6 +110,7 @@ const ModalInputContent = ({ children, register }: ModalInput) => {
       <Input
         // eslint-disable-next-line jsx-a11y/no-autofocus
         autoFocus
+        maxLength={20}
         {...register('name', { required: true })}
       />
     </div>
@@ -130,6 +131,7 @@ const ModalFormInputContent = ({
       </Text>
 
       <Input
+        maxLength={100}
         // eslint-disable-next-line jsx-a11y/no-autofocus
         autoFocus
         placeholder={placeholder}
@@ -163,9 +165,11 @@ const ModalTextareaContent = ({
 const ModalLowerTextContent = ({
   leftText = '',
   RightText,
+  length = '2000',
 }: {
   leftText?: string
   RightText: number
+  length?: string
 }) => {
   return (
     <div className={modalLowerTextGroup}>
@@ -180,7 +184,7 @@ const ModalLowerTextContent = ({
           /
         </Text>
         <Text type="label" color="semantic-label-alternative">
-          2000
+          {length}
         </Text>
       </div>
     </div>

diff --git a/apps/web/src/modals/TermModal/TermModal.tsx b/apps/web/src/modals/TermModal/TermModal.tsx
@@ -84,6 +84,12 @@ export const TermCreateModal = () => {
         >
           용어
         </Modal.InputForm>
+        <Modal.LowerTextGroup
+          // leftText={errors.meaning && '뜻을 입력해 주세요.'}
+          RightText={watch('name') ? watch('name').length : 0}
+          length="100"
+        />
+
         {/* <div className={modalLowerTextGroup}>
           <Text type="label" color="status-error">
             {errors.name && '용어를 입력해 주세요.'}
@@ -145,7 +151,7 @@ export const TermEditModal = () => {
     defaultValues: {
       name: modalData.name,
       meaning: modalData.meaning,
-      synonyms: modalData.synonym.join(', '),
+      synonyms: modalData.synonym.join(','),
     },
   })
   const queryClient = useQueryClient()
@@ -201,6 +207,11 @@ export const TermEditModal = () => {
         >
           용어
         </Modal.InputForm>
+        <Modal.LowerTextGroup
+          // leftText={errors.meaning && '뜻을 입력해 주세요.'}
+          RightText={watch('name') ? watch('name').length : 0}
+          length="100"
+        />
         {/* <div className={modalLowerTextGroup}>
           <Text type="label" color="status-error">
             {errors.name && '용어를 입력해 주세요.'}

diff --git a/apps/web/src/modals/VocabularyModal/VocabularyModal.tsx b/apps/web/src/modals/VocabularyModal/VocabularyModal.tsx
@@ -45,6 +45,10 @@ export const VocabularyCreateModal = () => {
       <form onSubmit={onSubmit} style={{ width: '100%' }}>
         <Modal.Headline>용어집 생성</Modal.Headline>
         <Modal.Input register={register}>용어집 이름</Modal.Input>
+        <Modal.LowerTextGroup
+          RightText={watch('name') ? watch('name').length : 0}
+          length="20"
+        />
         <Modal.ButtonGroup>
           <Button
             size="middle"
@@ -158,6 +162,10 @@ export const VocabularyEditModal = ({
       <form onSubmit={onSubmit} style={{ width: '100%' }}>
         <Modal.Headline>용어집 수정</Modal.Headline>
         <Modal.Input register={register}>용어집 이름</Modal.Input>
+        <Modal.LowerTextGroup
+          RightText={watch('name') ? watch('name').length : 0}
+          length="20"
+        />
         <Modal.ButtonGroup>
           <Button
             size="middle"

diff --git a/apps/web/src/store/term.ts b/apps/web/src/store/term.ts
@@ -10,12 +10,13 @@ export interface TermModalDataType {
 
 interface VocabularyState {
   modalData: TermModalDataType
-  checkList: string[]
   setModalData: (data: TermModalDataType) => void
+  checkList: string[]
   setCheckList: (
     list: string[] | ((prevCheckList: string[]) => string[]),
   ) => void
   handleCheckList: (uid: string, response: GetTermResponse | null) => void
+  reset: () => void
 }
 
 export const useVocabularyStore = create<VocabularyState>((set, get) => ({
@@ -34,14 +35,15 @@ export const useVocabularyStore = create<VocabularyState>((set, get) => ({
   handleCheckList: (uid, response) => {
     const { checkList, setCheckList } = get()
 
-    if (uid === 'all' && checkList.length > 0) {
+    if (uid === 'all' && checkList.length > 0 && checkList.includes('all')) {
       setCheckList([])
       return
     }
     if (uid === 'all') {
       if (response !== null) {
         setCheckList(response.result.map((data) => data.termUid))
       }
+      setCheckList((prevCheckList) => [...prevCheckList, 'all'])
       return
     }
 
@@ -51,11 +53,12 @@ export const useVocabularyStore = create<VocabularyState>((set, get) => ({
       setCheckList((prevCheckList) => [...prevCheckList, uid])
     }
   },
+  reset: () => set({ checkList: [] }),
 }))
 
 export const useVocabulary = () => {
-  const { modalData, checkList, setModalData, setCheckList } =
+  const { modalData, checkList, setModalData, setCheckList, reset } =
     useVocabularyStore()
 
-  return { modalData, checkList, setModalData, setCheckList }
+  return { modalData, checkList, setModalData, setCheckList, reset }
 }
diff --git a/packages/design-system/src/components/List/List.css.ts b/packages/design-system/src/components/List/List.css.ts
@@ -6,6 +6,7 @@ export const list = recipe({
   base: {
     padding: '16px 12px',
     boxSizing: 'border-box',
+    overflowWrap: 'break-word',
   },
   variants: {
     page: {