[#7] 공통 컴포넌트(Header, Footer, ScrollFloatBtn) 구현, [#9] 랜딩페이지 구현

components/shared/styled/layout.ts

@@ -1,3 +1,4 @@
+import Link from 'next/link';
 import styled from 'styled-components';
 
 export const BoxFlexCenter = styled.div`
@@ -9,6 +10,30 @@ export const BoxFlexCenter = styled.div`
 
 export const MaxContainer = styled.div`
 	position: relative;
+	width: 100%;
 	max-width: 1200px;
 	margin: 0 auto;
 `;
+
+export const UnorderList = styled.ul`
+	display: flex;
+	align-items: center;
+`;
+
+export const LinkWrapper = styled(Link)`
+	text-decoration: none;
+	cursor: pointer;
+`;
+
+type ImageBoxProps = {
+	width: string;
+	height: string;
+	backgroundImageSrc: string;
+};
+
+export const ImageBox = styled.div<ImageBoxProps>`
+	width: ${({ width }) => width};
+	height: ${({ height }) => height};
+	background: ${({ backgroundImageSrc, theme }) => (backgroundImageSrc ? `url(${backgroundImageSrc})` : theme.colors.gray_001)};
+	background-repeat: no-repeat;
+`;

styles/GlobalStyle.ts

@@ -199,6 +199,21 @@ const GlobalStyle = styled.createGlobalStyle`
 		/* Internet Explorer 10+ */
 		color: transparent;
 	}
+
+	// Web Accessibility Styles - IR
+	.visually-hidden {
+		position: absolute !important;
+		width: 1px;
+		height: 1px;
+		padding: 0;
+		margin: 0;
+		border: 0;
+		overflow: hidden;
+		clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
+		clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
+		clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
+		white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
+	}
 `;
 
 export default GlobalStyle;