Merge pull request #72 from kyubumjang/feature/54-mainpage-panel

Feature/54 mainpage panel

src/components/Header/Header.tsx → src/components/common/Header/Header.tsx

@@ -11,7 +11,9 @@ const Header = () => {
       <S.InnerContainer>
         <S.LogoWrapper>
           <Link href='/'>
-            <Logo />
+            <a>
+              <Logo />
+            </a>
           </Link>
         </S.LogoWrapper>
         <S.MenuContainer>

src/components/common/Panel/IconDescription/IconDescription.styles.ts

@@ -0,0 +1,3 @@
+import styled from '@emotion/styled';
+
+export const Container = styled('div')({});

src/components/common/Panel/IconDescription/IconDescription.tsx

@@ -0,0 +1,7 @@
+import * as S from './IconDescription.styles';
+
+const IconDescription = () => {
+  return <div></div>;
+};
+
+export default IconDescription;

src/components/common/Panel/IconServiceDescription/IconServiceDescription.styles.ts

@@ -0,0 +1,3 @@
+import styled from '@emotion/styled';
+
+export const Container = styled('div')({});

src/components/common/Panel/IconServiceDescription/IconServiceDescription.tsx

@@ -0,0 +1,7 @@
+import * as S from './IconServiceDescription.styles';
+
+const IconServiceDescription = () => {
+  return <div></div>;
+};
+
+export default IconServiceDescription;

src/components/common/Panel/InfoDescription/InfoDescription.styles.ts

@@ -0,0 +1,5 @@
+import styled from '@emotion/styled';
+
+export const Container = styled('div')({
+  width: '400px',
+});

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 (
+    <S.Container>
+      <Text tag='h4'>{description}</Text>
+    </S.Container>
+  );
+};
+
+export default InfoDescription;

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')<InfoTitleProps>(
+  {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    width: '100%',
+  },
+  ({ alignItems }) => {
+    return {
+      alignItems: alignItems,
+    };
+  },
+);
+
+export const SubTitleWrapper = styled('div')({
+  display: 'flex',
+  width: '400px',
+});

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 (
+    <S.Container alignItems={alignItems ?? 'flex-start'}>
+      <Text tag='h3'>{title}</Text>
+      <S.SubTitleWrapper>
+        <Text tag='h2'>{subTitle}</Text>
+      </S.SubTitleWrapper>
+    </S.Container>
+  );
+};
+
+export default InfoTitle;

src/components/Text/Text.tsx → src/components/common/Text/Text.tsx

@@ -27,60 +27,69 @@ 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`
         font-size: 50px;
         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`
         font-size: 23px;
         font-weight: 600;
         line-height: 1.5;
         color: rgb(51, 61, 75);
+        white-space: pre-line;
       `;
     if (tag === 'h5')
       return css`
         font-size: 22px;
         font-weight: 600;
         line-height: 1.5;
         color: rgb(107, 118, 132);
+        white-space: pre-line;
       `;
     if (tag === 'h6')
       return css`
         font-size: 20px;
         font-weight: 600;
         line-height: 1.5;
         color: #333d4b;
+        white-space: pre-line;
       `;
     if (tag === 'p')
       return css`
         font-size: 32px;
         font-weight: 700;
         line-height: 1.6;
         color: #191f28;
+        white-space: pre-line;
       `;
     if (tag === 'span')
       return css`
         font-size: 23px;
         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;
     `;
   };
 

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;

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;

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 (
     <Container>
       <Introduce />
+      <OrderStatus />
     </Container>
   );
 };

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,

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';

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

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 (
+    <S.Container>
+      <S.Wrapper>
+        <InfoTitle
+          title='홈 주문 현황'
+          subTitle='콜렛 주문 관리,
+        주문부터 일정까지 똑똑하게'
+        />
+        <S.InfoDescriptionWrapper>
+          <InfoDescription
+            description={`P&S에서 콜렛을 주문해 보세요.
+            원하는 콜렛을 주문 제작은 기본,
+            일자별 주문 현황을 확인할 수 있어요.`}
+          />
+        </S.InfoDescriptionWrapper>
+      </S.Wrapper>
+    </S.Container>
+  );
+};
+
+export default OrderStatus;

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';

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;

tsconfig.json

@@ -25,6 +25,7 @@
       "@/layouts/*": ["layouts/*"],
       "@/pages/*": ["pages/*"],
       "@/styles/*": ["styles/*"],
+      "@/templates/*": ["templates/*"],
       "@/types/*": ["types/*"]
     }
   },