diff --git a/src/components/Button/Button.styles.ts b/src/components/common/Button/Button.styles.ts similarity index 100% rename from src/components/Button/Button.styles.ts rename to src/components/common/Button/Button.styles.ts diff --git a/src/components/Button/Button.tsx b/src/components/common/Button/Button.tsx similarity index 100% rename from src/components/Button/Button.tsx rename to src/components/common/Button/Button.tsx diff --git a/src/components/Footer/Footer.styles.ts b/src/components/common/Footer/Footer.styles.ts similarity index 100% rename from src/components/Footer/Footer.styles.ts rename to src/components/common/Footer/Footer.styles.ts diff --git a/src/components/Footer/Footer.tsx b/src/components/common/Footer/Footer.tsx similarity index 100% rename from src/components/Footer/Footer.tsx rename to src/components/common/Footer/Footer.tsx diff --git a/src/components/Header/Header.styles.ts b/src/components/common/Header/Header.styles.ts similarity index 100% rename from src/components/Header/Header.styles.ts rename to src/components/common/Header/Header.styles.ts diff --git a/src/components/Header/Header.tsx b/src/components/common/Header/Header.tsx similarity index 96% rename from src/components/Header/Header.tsx rename to src/components/common/Header/Header.tsx index 7b6d0ab..6c98b16 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/common/Header/Header.tsx @@ -11,7 +11,9 @@ const Header = () => { - + + + diff --git a/src/components/common/Panel/IconDescription/IconDescription.styles.ts b/src/components/common/Panel/IconDescription/IconDescription.styles.ts new file mode 100644 index 0000000..b9957a7 --- /dev/null +++ b/src/components/common/Panel/IconDescription/IconDescription.styles.ts @@ -0,0 +1,3 @@ +import styled from '@emotion/styled'; + +export const Container = styled('div')({}); diff --git a/src/components/common/Panel/IconDescription/IconDescription.tsx b/src/components/common/Panel/IconDescription/IconDescription.tsx new file mode 100644 index 0000000..d5ab8c6 --- /dev/null +++ b/src/components/common/Panel/IconDescription/IconDescription.tsx @@ -0,0 +1,7 @@ +import * as S from './IconDescription.styles'; + +const IconDescription = () => { + return
; +}; + +export default IconDescription; diff --git a/src/components/common/Panel/IconServiceDescription/IconServiceDescription.styles.ts b/src/components/common/Panel/IconServiceDescription/IconServiceDescription.styles.ts new file mode 100644 index 0000000..b9957a7 --- /dev/null +++ b/src/components/common/Panel/IconServiceDescription/IconServiceDescription.styles.ts @@ -0,0 +1,3 @@ +import styled from '@emotion/styled'; + +export const Container = styled('div')({}); diff --git a/src/components/common/Panel/IconServiceDescription/IconServiceDescription.tsx b/src/components/common/Panel/IconServiceDescription/IconServiceDescription.tsx new file mode 100644 index 0000000..78b47a0 --- /dev/null +++ b/src/components/common/Panel/IconServiceDescription/IconServiceDescription.tsx @@ -0,0 +1,7 @@ +import * as S from './IconServiceDescription.styles'; + +const IconServiceDescription = () => { + return
; +}; + +export default IconServiceDescription; diff --git a/src/components/common/Panel/InfoDescription/InfoDescription.styles.ts b/src/components/common/Panel/InfoDescription/InfoDescription.styles.ts new file mode 100644 index 0000000..f89d5d0 --- /dev/null +++ b/src/components/common/Panel/InfoDescription/InfoDescription.styles.ts @@ -0,0 +1,5 @@ +import styled from '@emotion/styled'; + +export const Container = styled('div')({ + width: '400px', +}); diff --git a/src/components/common/Panel/InfoDescription/InfoDescription.tsx b/src/components/common/Panel/InfoDescription/InfoDescription.tsx new file mode 100644 index 0000000..95225cc --- /dev/null +++ b/src/components/common/Panel/InfoDescription/InfoDescription.tsx @@ -0,0 +1,16 @@ +import Text from '../../Text/Text'; +import * as S from './InfoDescription.styles'; + +interface InfoDescriptionProps { + description: string; +} + +const InfoDescription = ({ description }: InfoDescriptionProps) => { + return ( + + {description} + + ); +}; + +export default InfoDescription; diff --git a/src/components/common/Panel/InfoTitle/InfoTitle.styles.ts b/src/components/common/Panel/InfoTitle/InfoTitle.styles.ts new file mode 100644 index 0000000..5f1cdc1 --- /dev/null +++ b/src/components/common/Panel/InfoTitle/InfoTitle.styles.ts @@ -0,0 +1,24 @@ +import styled from '@emotion/styled'; + +interface InfoTitleProps { + alignItems: 'flex-start' | 'flex-end'; +} + +export const Container = styled('div')( + { + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + width: '100%', + }, + ({ alignItems }) => { + return { + alignItems: alignItems, + }; + }, +); + +export const SubTitleWrapper = styled('div')({ + display: 'flex', + width: '400px', +}); diff --git a/src/components/common/Panel/InfoTitle/InfoTitle.tsx b/src/components/common/Panel/InfoTitle/InfoTitle.tsx new file mode 100644 index 0000000..483883f --- /dev/null +++ b/src/components/common/Panel/InfoTitle/InfoTitle.tsx @@ -0,0 +1,22 @@ +import Text from '@/components/common/Text/Text'; + +import * as S from './InfoTitle.styles'; + +interface Props { + title: string; + subTitle: string; + alignItems?: 'flex-start' | 'flex-end'; +} + +const InfoTitle = ({ title, subTitle, alignItems }: Props) => { + return ( + + {title} + + {subTitle} + + + ); +}; + +export default InfoTitle; diff --git a/src/components/Text/Text.tsx b/src/components/common/Text/Text.tsx similarity index 86% rename from src/components/Text/Text.tsx rename to src/components/common/Text/Text.tsx index 57a31c5..2952642 100644 --- a/src/components/Text/Text.tsx +++ b/src/components/common/Text/Text.tsx @@ -27,6 +27,7 @@ const Text = ({ children, tag, fontSize, fontWeight, color }: Props) => { font-weight: 700; line-height: 1.4; color: rgb(0, 0, 0); + white-space: pre-line; `; if (tag === 'h2') return css` @@ -34,13 +35,15 @@ const Text = ({ children, tag, fontSize, fontWeight, color }: Props) => { font-weight: 700; line-height: 1.4; color: #191f28; + white-space: pre-line; `; if (tag === 'h3') return css` - font-size: 40px; + font-size: 28px; font-weight: 700; line-height: 1.4; - color: rgb(51, 61, 75); + color: #3c5fa6; + white-space: pre-line; `; if (tag === 'h4') return css` @@ -48,6 +51,7 @@ const Text = ({ children, tag, fontSize, fontWeight, color }: Props) => { font-weight: 600; line-height: 1.5; color: rgb(51, 61, 75); + white-space: pre-line; `; if (tag === 'h5') return css` @@ -55,6 +59,7 @@ const Text = ({ children, tag, fontSize, fontWeight, color }: Props) => { font-weight: 600; line-height: 1.5; color: rgb(107, 118, 132); + white-space: pre-line; `; if (tag === 'h6') return css` @@ -62,6 +67,7 @@ const Text = ({ children, tag, fontSize, fontWeight, color }: Props) => { font-weight: 600; line-height: 1.5; color: #333d4b; + white-space: pre-line; `; if (tag === 'p') return css` @@ -69,6 +75,7 @@ const Text = ({ children, tag, fontSize, fontWeight, color }: Props) => { font-weight: 700; line-height: 1.6; color: #191f28; + white-space: pre-line; `; if (tag === 'span') return css` @@ -76,11 +83,13 @@ const Text = ({ children, tag, fontSize, fontWeight, color }: Props) => { font-weight: 600; line-height: 1.5; color: rgb(51, 61, 75); + white-space: pre-line; `; return css` font-size: ${fontSize}; font-weight: ${fontWeight}; color: ${color}; + white-space: pre-line; `; }; diff --git a/src/constants/colors.ts b/src/constants/colors.ts index 199c061..f2ee3b8 100644 --- a/src/constants/colors.ts +++ b/src/constants/colors.ts @@ -124,6 +124,22 @@ const colors = { darkLayeredBackground: inverseGrey50, floatBackground: white, darkFloatBackground: inverseGrey100, + primary: { + lavender: '#A0B3D9', + shipCove: '#698EBF', + blue: '#3C5FA6', + gulfBlue: '#021859', + blueCharcoal: '#010326', + contrastText: '#fff', + }, + secondary: { + shipGray: '#3C3940', + holly: '#01261C', + yellow: '#F2BF80', + donkeyBrown: '#A69580', + codGray: '#0D0D0D', + contrastText: '#fff', + }, }; export default colors; diff --git a/src/layouts/layout.tsx b/src/layouts/layout.tsx index 57e9dd5..600c78f 100644 --- a/src/layouts/layout.tsx +++ b/src/layouts/layout.tsx @@ -1,7 +1,7 @@ import { ReactNode } from 'react'; -import Footer from '@/components/Footer/Footer'; -import Header from '@/components/Header/Header'; +import Footer from '@/components/common/Footer/Footer'; +import Header from '@/components/common/Header/Header'; interface Props { children: ReactNode; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index af22a46..fa22916 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,12 +1,14 @@ import type { NextPage } from 'next'; import { Container } from '@/styles/common'; -import Introduce from 'templates/main/Introduce/Introduce'; +import Introduce from '@/templates/main/Introduce/Introduce'; +import OrderStatus from '@/templates/main/OrderStatus/OrderStatus'; const Home: NextPage = () => { return ( + ); }; diff --git a/src/templates/main/Introduce/Introduce.styles.ts b/src/templates/main/Introduce/Introduce.styles.ts index 2583271..dd4ca75 100644 --- a/src/templates/main/Introduce/Introduce.styles.ts +++ b/src/templates/main/Introduce/Introduce.styles.ts @@ -16,6 +16,7 @@ export const SloganContainer = styled('div')({ }); export const ImgBgWrapper = styled('div')({ + position: 'relative', width: 'auto', height: '100vh', zIndex: -1, diff --git a/src/templates/main/Introduce/Introduce.tsx b/src/templates/main/Introduce/Introduce.tsx index da4e7fa..1a10f46 100644 --- a/src/templates/main/Introduce/Introduce.tsx +++ b/src/templates/main/Introduce/Introduce.tsx @@ -3,7 +3,7 @@ import Link from 'next/link'; import { AiFillTool, AiFillShopping } from 'react-icons/ai'; import { SlArrowDown } from 'react-icons/sl'; -import Text from '@/components/Text/Text'; +import Text from '@/components/common/Text/Text'; import { LinkContentWrapper } from '@/styles/common'; import mainBg from '../../../../public/assets/images/main.png'; diff --git a/src/templates/main/OrderStatus/OrderStatus.styles.ts b/src/templates/main/OrderStatus/OrderStatus.styles.ts new file mode 100644 index 0000000..49b3f73 --- /dev/null +++ b/src/templates/main/OrderStatus/OrderStatus.styles.ts @@ -0,0 +1,18 @@ +import styled from '@emotion/styled'; + +export const Container = styled('div')({ + height: '800px', +}); + +export const Wrapper = styled('div')({ + display: 'flex', + flexDirection: 'column', + padding: '100px', + gap: '100px', +}); + +export const InfoDescriptionWrapper = styled('div')({ + display: 'flex', + flexDirection: 'column', + alignItems: 'flex-end', +}); diff --git a/src/templates/main/OrderStatus/OrderStatus.tsx b/src/templates/main/OrderStatus/OrderStatus.tsx new file mode 100644 index 0000000..fb8eb62 --- /dev/null +++ b/src/templates/main/OrderStatus/OrderStatus.tsx @@ -0,0 +1,27 @@ +import InfoDescription from '@/components/common/Panel/InfoDescription/InfoDescription'; +import InfoTitle from '@/components/common/Panel/InfoTitle/InfoTitle'; + +import * as S from './OrderStatus.styles'; + +const OrderStatus = () => { + return ( + + + + + + + + + ); +}; + +export default OrderStatus; diff --git a/src/templates/prepare/Prepare.tsx b/src/templates/prepare/Prepare.tsx index 312e778..d8e210b 100644 --- a/src/templates/prepare/Prepare.tsx +++ b/src/templates/prepare/Prepare.tsx @@ -1,7 +1,7 @@ import Link from 'next/link'; import { AiFillHome } from 'react-icons/ai'; -import Text from '@/components/Text/Text'; +import Text from '@/components/common/Text/Text'; import { LinkContentWrapper } from '@/styles/common'; import * as S from './Prepare.styles'; diff --git a/src/types/emotion.d.ts b/src/types/emotion.d.ts index 3bdcb8c..e9c6b4b 100644 --- a/src/types/emotion.d.ts +++ b/src/types/emotion.d.ts @@ -123,6 +123,22 @@ declare module '@emotion/react' { darkLayeredBackground: string; floatBackground: string; darkFloatBackground: string; + primary: { + lavender: string; + shipCove: string; + blue: string; + gulfBlue: string; + blueCharcoal: string; + contrastText: string; + }; + secondary: { + shipGray: string; + holly: string; + yellow: string; + donkeyBrown: string; + codGray: string; + contrastText: string; + }; }; fontSize: { xl: string; diff --git a/tsconfig.json b/tsconfig.json index f68fa65..4f8979e 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -25,6 +25,7 @@ "@/layouts/*": ["layouts/*"], "@/pages/*": ["pages/*"], "@/styles/*": ["styles/*"], + "@/templates/*": ["templates/*"], "@/types/*": ["types/*"] } },