[Feature] 랜딩 페이지 구현 (#37)

* refactor: 헤더 로그인 로직 분리

* feat: 랜딩 레이아웃 구현

* feat: 아이콘 컴포넌트 제작

* feat: 히어로 랜딩 구현

* refactor: 컴포넌트 구조 변경

* feat: 카드 컴포넌트 개발

* feat: 아이콘 섹션 일부 구현

* feat: 랜딩페이지 - 상세설명 레이아웃 섹션 구현

* feat: 랜딩페이지 하단 UI 레이아웃 구현

* feat: 애니메이션 적용

* feat: 랜딩 페이지 아이콘 섹션 일부 구현

* design: 아이콘 섹션 별 추가

* design: 푸터 디자인 수정

* fix: api 변경사항 적용

* fix: 누락된 페이지 복구

* fix: 아이콘 오류 해결

* fix: 아이콘 빌드 에러 수정

* chore: 도커 빌드 테스트

* fix: 아이콘 경로 수정

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

---------

Co-authored-by: Kim Min-gyu <[email protected]>
Co-authored-by: Kim Min-gyu <[email protected]>

apps/web/.env.development

@@ -1,3 +1,2 @@
 NEXT_PUBLIC_DOMAIN=http://localhost:3000
-NEXT_PUBLIC_API_URL=https://dev-api.vook.app
-NEXT_PUBLIC_GOOGLE_LOGIN_URL=https://dev-api.vook.app/oauth2/authorization/google
+NEXT_PUBLIC_API_URL=https://dev-api.vook.app

apps/web/.env.production

@@ -1,3 +1,3 @@
 NEXT_PUBLIC_DOMAIN=https://vook.app
 NEXT_PUBLIC_API_URL=https://api.vook.app
-NEXT_PUBLIC_GOOGLE_LOGIN_URL=https://api.vook.app/oauth2/authorization/google
+NEXT_PUBLIC_GOOGLE_LOGIN_URL=https://api.vook.app/oauth2/authorization/google

apps/web/.env.staging

@@ -1,3 +1,3 @@
 NEXT_PUBLIC_DOMAIN=https://stag.vook.app
 NEXT_PUBLIC_API_URL=https://stag-api.vook.app
-NEXT_PUBLIC_GOOGLE_LOGIN_URL=https://stag-api.vook.app/oauth2/authorization/google
+NEXT_PUBLIC_GOOGLE_LOGIN_URL=https://stag-api.vook.app/oauth2/authorization/google

apps/web/package.json

@@ -22,6 +22,7 @@
     "@vook-client/api": "*",
     "@vook-client/design-system": "*",
     "dayjs": "^1.11.11",
+    "framer-motion": "^11.3.2",
     "js-cookie": "^3.0.5",
     "next": "^14.1.1",
     "react": "^18.2.0",

apps/web/src/app/(afterLogin)/layout.css.ts

@@ -7,12 +7,11 @@ export const mainArea = style({
 
   minHeight: `calc(100vh - ${HEADER_HEIGHT}px)`,
 
-  padding: 40,
-  // paddingBottom: 400,
-
   marginTop: HEADER_HEIGHT,
   marginLeft: SIDE_BAR_WIDTH,
 
+  padding: '40px',
+
   display: 'flex',
   flexDirection: 'column',
 })

apps/web/src/app/(afterLogin)/layout.tsx

@@ -9,6 +9,7 @@ import { Header } from '@/components/Header'
 import { UserProvider } from '@/store/user'
 import { getQueryClient } from '@/utils/react-query'
 import { SilentRefresh } from '@/components/SilentRefresh/SilentRefresh'
+import { SearchBox, SearchHistoryProvider } from '@/components/SearchBox'
 
 import { mainArea } from './layout.css'
 
@@ -43,7 +44,11 @@ const Layout = async ({ children }: PropsWithChildren) => {
     <div className={mainArea}>
       <HydrationBoundary state={dehydrateState}>
         <UserProvider user={user.result}>
-          <Header />
+          <Header>
+            <SearchHistoryProvider>
+              <SearchBox />
+            </SearchHistoryProvider>
+          </Header>
           <Sidebar />
           {children}
         </UserProvider>

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,
+})

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/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}

apps/web/src/app/(afterLogin)/workspace/VocabularyItem.tsx → apps/web/src/app/(afterLogin)/workspace/_components/VocabularyItem.tsx

@@ -3,13 +3,14 @@ import { Dropbox, Icon, Text } from '@vook-client/design-system'
 import { useModal } from '@/hooks/useModal'
 import { ModalTypes } from '@/hooks/useModal/useModal'
 
+import { VocabularyModalDataType } from '../page'
+
 import {
   dropboxItem,
   vocabularyItemContainer,
   vocabularyItemFooter,
   vocabularyItemHeader,
 } from './VocabularyItem.css'
-import { VocabularyModalDataType } from './page'
 
 interface VocabularyItem {
   id: string

apps/web/src/app/(afterLogin)/workspace/layout.css.ts

@@ -0,0 +1,34 @@
+import { style } from '@vanilla-extract/css'
+
+export const workspaceContainer = style({
+  display: 'flex',
+  flexDirection: 'column',
+  flex: 1,
+  gap: 40,
+  height: '100%',
+})
+
+export const workspaceInnerContainer = style({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  flex: 1,
+})
+
+export const workspaceInnerAlignCenter = style({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  gap: '24px',
+})
+
+export const workspaceInnerAlignRow = style({
+  display: 'flex',
+  alignSelf: 'start',
+  flexWrap: 'wrap',
+  gap: 20,
+})
+export const workspaceHeader = style({
+  display: 'flex',
+  justifyContent: 'space-between',
+})

apps/web/src/app/(afterLogin)/workspace/layout.tsx

@@ -0,0 +1,41 @@
+import { PropsWithChildren } from 'react'
+import { userService, UserStatus } from '@vook-client/api'
+import { cookies, headers } from 'next/headers'
+import { redirect } from 'next/navigation'
+import { dehydrate, HydrationBoundary } from '@tanstack/react-query'
+
+import { getQueryClient } from '@/utils/react-query'
+
+const Layout = async ({ children }: PropsWithChildren) => {
+  const cookieStore = cookies()
+  const isAuthorization = headers().get('X-AuthConfirm')
+
+  if (isAuthorization !== 'confirmed') {
+    redirect('/login')
+  }
+
+  const access = cookieStore.get('access')?.value || ''
+  const refresh = cookieStore.get('refresh')?.value || ''
+
+  if (!access && !refresh) {
+    redirect('/login')
+  }
+
+  const queryClient = getQueryClient()
+  queryClient.setQueryData(['access'], access)
+  queryClient.setQueryData(['refresh'], refresh)
+
+  const user = await userService.userInfo(queryClient)
+
+  if (user.result.status !== UserStatus.Registered) {
+    redirect('/signup')
+  }
+
+  const dehydrateState = dehydrate(queryClient)
+
+  return (
+    <HydrationBoundary state={dehydrateState}>{children}</HydrationBoundary>
+  )
+}
+
+export default Layout