fix: Feedback 0718 - 1,2,5,6,7 수정

makevook · Jul 18, 2024 · 6ab30d8 · 6ab30d8
1 parent 2a0ee44
commit 6ab30d8
Show file tree

Hide file tree

Showing 10 changed files with 68 additions and 22 deletions.
diff --git a/apps/web/src/app/(afterLogin)/vocabulary/[id]/_component/term/Term.css.ts b/apps/web/src/app/(afterLogin)/vocabulary/[id]/_component/term/Term.css.ts
@@ -42,3 +42,16 @@ export const highlightHit = style({
 export const highlight = style({
   backgroundColor: vars.colors.yellow,
 })
+
+export const dropboxItem = style({
+  display: 'flex',
+  alignItems: 'center',
+  width: 174,
+  gap: 10,
+})
+
+export const headerIconContainer = style({
+  display: 'flex',
+  alignItems: 'center',
+  gap: 2,
+})
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
@@ -8,26 +8,22 @@ import {
   termSort,
   useDeleteTermMutation,
   useGetTermQuery,
+  GetTermResponse,
+  TermSortValues,
 } from '@vook-client/api'
 import { useQueryClient } from '@tanstack/react-query'
 import { usePathname, useSearchParams } from 'next/navigation'
 import clsx from 'clsx'
-import {
-  GetTermResponse,
-  TermSortValues,
-} from 'node_modules/@vook-client/api/src/services/term/model'
 
 import { useToast } from '@/hooks/useToast'
 import { useVocabularyStore } from '@/store/term'
 import { useModal } from '@/hooks/useModal'
 import { ModalTypes } from '@/hooks/useModal/useModal'
+import { LoadingComponent, NoneDataComponent } from '@/components/common'
 
 import {
-  LoadingComponent,
-  NoneDataComponent,
-} from '../../../../../../components/common/Common'
-
-import {
+  dropboxItem,
+  headerIconContainer,
   highlight,
   highlightHit,
   termContainer,
@@ -37,8 +33,6 @@ import {
   textContainer,
 } from './Term.css'
 
-import { dropboxItem } from 'src/app/(afterLogin)/workspace/_components/VocabularyItem.css'
-
 const TextContainer = ({ length }: { length?: number }) => (
   <div className={textContainer}>
     <Text type="body-1">👀 용어목록</Text>
@@ -51,9 +45,11 @@ const TextContainer = ({ length }: { length?: number }) => (
 const SortableListHeader = ({
   handleSort,
   response,
+  sorts,
 }: {
   response: GetTermResponse
   handleSort: (sort: TermSort) => void
+  sorts: TermSortValues[]
 }) => {
   const { checkList, handleCheckList } = useVocabularyStore()
 
@@ -74,29 +70,59 @@ const SortableListHeader = ({
         kind="title"
         onClick={() => handleSort(termSort.Term)}
       >
-        용어
+        <div className={headerIconContainer}>
+          용어
+          {sorts.includes(termSort.Term.Asc) && <Icon name="arrow-up-small" />}
+          {sorts.includes(termSort.Term.Desc) && (
+            <Icon name="arrow-down-small" />
+          )}
+        </div>
       </List>
       <List
         variant="reading"
         kind="title"
         onClick={() => handleSort(termSort.Synonym)}
       >
-        동의어
+        <div className={headerIconContainer}>
+          동의어
+          {sorts.includes(termSort.Synonym.Asc) && (
+            <Icon name="arrow-up-small" />
+          )}
+          {sorts.includes(termSort.Synonym.Desc) && (
+            <Icon name="arrow-down-small" />
+          )}
+        </div>
       </List>
       <List
         variant="reading"
         kind="title"
         style={{ flex: 1 }}
         onClick={() => handleSort(termSort.Meaning)}
       >
-        뜻
+        <div className={headerIconContainer}>
+          뜻
+          {sorts.includes(termSort.Meaning.Asc) && (
+            <Icon name="arrow-up-small" />
+          )}
+          {sorts.includes(termSort.Meaning.Desc) && (
+            <Icon name="arrow-down-small" />
+          )}
+        </div>
       </List>
       <List
         variant="reading"
         kind="title"
         onClick={() => handleSort(termSort.CreatedAt)}
       >
-        생성일자
+        <div className={headerIconContainer}>
+          생성일자
+          {sorts.includes(termSort.CreatedAt.Asc) && (
+            <Icon name="arrow-up-small" />
+          )}
+          {sorts.includes(termSort.CreatedAt.Desc) && (
+            <Icon name="arrow-down-small" />
+          )}
+        </div>
       </List>
       <List variant="reading" kind="icon" />
     </div>
@@ -293,7 +319,11 @@ export const Term = () => {
         {response?.result.length ? (
           <>
             <TextContainer length={response?.result.length} />
-            <SortableListHeader handleSort={handleSort} response={response} />
+            <SortableListHeader
+              handleSort={handleSort}
+              response={response}
+              sorts={sorts}
+            />
             {response?.result.map((termData) => (
               <TermItem
                 key={termData.termUid}

diff --git a/apps/web/src/app/(afterLogin)/vocabulary/[id]/_component/term/TermHeader.tsx b/apps/web/src/app/(afterLogin)/vocabulary/[id]/_component/term/TermHeader.tsx
diff --git a/apps/web/src/app/(beforeLogin)/terms/privacy/page.tsx b/apps/web/src/app/(beforeLogin)/terms/privacy/page.tsx
@@ -296,7 +296,7 @@ const PrivacyTermPage = () => {
         </Text>
         <br />
         <Text type="body-2-reading" color="semantic-label-alternative">
-          개인정보 관리책임자 • 성명 : 박재은 • 연락처 : pitapan1248@gmail.com
+          개인정보 관리책임자 • 성명 : 박재은 • 연락처 : vook.help@gmail.com
         </Text>
         <br />
         <Text type="heading-2" fontWeight="medium">

diff --git a/apps/web/src/app/(landing)/_components/Footer/Footer.tsx b/apps/web/src/app/(landing)/_components/Footer/Footer.tsx
@@ -35,7 +35,7 @@ const Footer = () => {
           </Text>
         </div>
         <div className={flexBox} style={{ gap: 4 }}>
-          <Link href="https://www.instagram.com/yong4.zip/">
+          <Link href="https://www.instagram.com/vook_help/">
             <Icon name="instagram" />
           </Link>
           <Link href="https://vook.tistory.com/">

diff --git a/apps/web/src/app/(landing)/_components/HeroBanner/HeroBanner.tsx b/apps/web/src/app/(landing)/_components/HeroBanner/HeroBanner.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import { Button, Text } from '@vook-client/design-system'
 import clsx from 'clsx'
+import Link from 'next/link'
 
 import { AppearBottom } from '@/components/AppearBottom'
 
@@ -64,7 +65,9 @@ export const HeroBanner = () => {
         </div>
       </AppearBottom>
       <AppearBottom delay={1.5}>
-        <Button>무료로 시작하기</Button>
+        <Link href="/login">
+          <Button>무료로 시작하기</Button>
+        </Link>
       </AppearBottom>
     </div>
   )

diff --git a/apps/web/src/app/(landing)/_components/RedirectBanner/RedirectBanner.css.ts b/apps/web/src/app/(landing)/_components/RedirectBanner/RedirectBanner.css.ts
@@ -10,7 +10,6 @@ export const redirectBanner = style({
   flexDirection: 'column',
   alignItems: 'center',
   justifyContent: 'center',
-  width: '100vw',
   gap: 48,
   padding: 90,
   marginBottom: FOOTER_HEIGHT,

diff --git a/apps/web/src/app/(landing)/page.tsx b/apps/web/src/app/(landing)/page.tsx
@@ -7,7 +7,7 @@ import { RedirectBanner } from './_components/RedirectBanner'
 
 const LandingPage = () => {
   return (
-    <div>
+    <div style={{ width: '100%' }}>
       <HeroBanner />
       <IconSection />
       <div style={{ height: 720 }} />

diff --git a/apps/web/src/components/Header/Header.tsx b/apps/web/src/components/Header/Header.tsx
@@ -20,7 +20,7 @@ export const Header = ({ children, full = true }: HeaderProps) => {
         })}
       >
         <div className="logo">
-          <Link href="/">
+          <Link href="/workspace">
             <TypoLogo size="big" />
           </Link>
         </div>

diff --git a/packages/api/src/index.ts b/packages/api/src/index.ts
@@ -52,6 +52,7 @@ export type {
   GetTermResponse,
   Terms,
   TermSort,
+  TermSortValues,
 } from './services/term/model'
 export { termSort } from './services/term/model'
 export {