Skip to content

Commit 43dcd14

Browse files
owjs3901owjs3901
committed
Implement Footer
1 parent 578a4af commit 43dcd14

File tree

2 files changed

+109
-66
lines changed

2 files changed

+109
-66
lines changed

‎apps/landing/src/app/layout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export default function RootLayout({
2323
<head>
2424
<ThemeScript auto />
2525
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
26-
<base href={URL_PREFIX} />
26+
{URL_PREFIX && <base href={URL_PREFIX} />}
2727
<link href={URL_PREFIX + '/favicon.ico'} rel="shortcut icon" />
2828
</head>
2929
<body

‎apps/landing/src/components/Footer.tsx‎

Lines changed: 108 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,76 +1,119 @@
1-
import { Flex, Image, Text, VStack } from '@devup-ui/react'
1+
import { Box, css, Flex, Image, Text, VStack } from '@devup-ui/react'
2+
import Link from 'next/link'
23

34
import { URL_PREFIX } from '../constants'
45

56
export function Footer() {
67
return (
7-
<VStack bg="$footerBg" gap="80px">
8-
<Flex justifyContent="space-between">
9-
<VStack flex="1" gap="20px">
10-
<Text color="$footerTitle" typography="buttonS">
11-
메뉴 타이틀 1
12-
</Text>
13-
<VStack gap="14px">
14-
<Text color="$footerText" typography="footerMenu">
15-
상세 메뉴 1
16-
</Text>
17-
<Text color="$footerText" typography="footerMenu">
18-
상세 메뉴 2
19-
</Text>
20-
<Text color="$footerText" typography="footerMenu">
21-
상세 메뉴 3
22-
</Text>
23-
<Text color="$footerText" typography="footerMenu">
24-
상세 메뉴 4
8+
<Box as="footer" bg="$footerBg" px="16px" py={['30px', '60px']}>
9+
<VStack gap={['50px', '80px']} maxW="1280px" mx="auto">
10+
<Flex
11+
flexDir={['column', 'row']}
12+
gap={['10px', 0]}
13+
justifyContent="space-between"
14+
>
15+
<VStack flex="1" gap={[1, 0]}>
16+
<Link
17+
className={css({ textDecoration: 'none' })}
18+
href={URL_PREFIX + '/docs/overview'}
19+
>
20+
<Text color="$footerTitle" typography="buttonS">
21+
Docs
22+
</Text>
23+
</Link>
24+
<VStack gap="14px">
25+
<Link
26+
className={css({ textDecoration: 'none' })}
27+
href={URL_PREFIX + '/docs/overview'}
28+
>
29+
<Text color="$footerText" typography="footerMenu">
30+
Overview
31+
</Text>
32+
</Link>
33+
34+
<Link
35+
className={css({ textDecoration: 'none' })}
36+
href={URL_PREFIX + '/docs/installation'}
37+
>
38+
<Text color="$footerText" typography="footerMenu">
39+
Installation
40+
</Text>
41+
</Link>
42+
<Link
43+
className={css({ textDecoration: 'none' })}
44+
href={URL_PREFIX + '/docs/features'}
45+
>
46+
<Text color="$footerText" typography="footerMenu">
47+
Features
48+
</Text>
49+
</Link>
50+
<Link
51+
className={css({ textDecoration: 'none' })}
52+
href={URL_PREFIX + '/docs/api/box'}
53+
>
54+
<Text color="$footerText" typography="footerMenu">
55+
API
56+
</Text>
57+
</Link>
58+
<Link
59+
className={css({ textDecoration: 'none' })}
60+
href={URL_PREFIX + '/docs/devup/devup-json'}
61+
>
62+
<Text color="$footerText" typography="footerMenu">
63+
Devup
64+
</Text>
65+
</Link>
66+
</VStack>
67+
</VStack>
68+
<VStack flex="1" gap="20px">
69+
<Link
70+
className={css({ textDecoration: 'none' })}
71+
href={URL_PREFIX + '/team'}
72+
>
73+
<Text color="$footerTitle" typography="buttonS">
74+
Team
75+
</Text>
76+
</Link>
77+
</VStack>
78+
</Flex>
79+
<Flex
80+
alignItems={['center', 'flex-end']}
81+
flexDir={['column', 'row']}
82+
justifyContent="space-between"
83+
>
84+
<Link href={URL_PREFIX + '/'}>
85+
<Image
86+
alt="white-logo"
87+
src={URL_PREFIX + '/white-logo.svg'}
88+
w={['164px', '204px']}
89+
/>
90+
</Link>
91+
<VStack
92+
alignItems={['center', 'flex-end']}
93+
gap="10px"
94+
pt={['20px', 0]}
95+
>
96+
<Text
97+
color="$footerText"
98+
textAlign={['center', 'right']}
99+
typography="small"
100+
>
101+
상호: (주)데브파이브 | 대표자명: 오정민 |{' '}
102+
<Box as="br" display={[null, null, 'none']} />
103+
사업자등록번호: 사업자등록번호: 868-86-03159
104+
<Box as="br" display={[null, null, 'none']} />
105+
주소: 경기 고양시 덕양구 마상로140번길 81 4층
25106
</Text>
26-
<Text color="$footerText" typography="footerMenu">
27-
상세 메뉴 5
107+
<Text
108+
color="$footerTitle"
109+
textAlign={['center', 'right']}
110+
typography="small"
111+
>
112+
Copyright © 2021-2024 데브파이브. All Rights Reserved.
28113
</Text>
29114
</VStack>
30-
</VStack>
31-
<VStack flex="1" gap="20px">
32-
<Text color="$footerTitle" typography="buttonS">
33-
메뉴 타이틀 2
34-
</Text>
35-
<Text color="$footerText" typography="footerMenu">
36-
상세 메뉴 1
37-
</Text>
38-
<Text color="$footerText" typography="footerMenu">
39-
상세 메뉴 2
40-
</Text>
41-
</VStack>
42-
<VStack flex="1" gap="20px">
43-
<Text color="$footerTitle" typography="buttonS">
44-
메뉴 타이틀 3
45-
</Text>
46-
<Text color="$footerText" typography="footerMenu">
47-
상세 메뉴 1
48-
</Text>
49-
<Text color="$footerText" typography="footerMenu">
50-
상세 메뉴 2
51-
</Text>
52-
<Text color="$footerText" typography="footerMenu">
53-
상세 메뉴 3
54-
</Text>
55-
<Text color="$footerText" typography="footerMenu">
56-
상세 메뉴 4
57-
</Text>
58-
</VStack>
59-
</Flex>
60-
<Flex alignItems="flex-end" justifyContent="space-between">
61-
<Flex alignItems="flex-end">
62-
<Image alt="white-logo" src={URL_PREFIX + '/white-logo.svg'} />
63115
</Flex>
64-
<VStack alignItems="flex-end" gap="10px">
65-
<Text color="$footerText" textAlign="right" typography="small">
66-
상호: (주)데브파이브 | 대표자명: 오정민 | 사업자등록번호:
67-
868-86-03159 주소: 경기 고양시 덕양구 마상로140번길 81 4층
68-
</Text>
69-
<Text color="$footerTitle" textAlign="right" typography="small">
70-
Copyright © 2021-2024 데브파이브. All Rights Reserved.
71-
</Text>
72-
</VStack>
73-
</Flex>
74-
</VStack>
116+
</VStack>
117+
</Box>
75118
)
76119
}

0 commit comments

Comments
 (0)