💄 Upload 초기 스타일링

#40

components/Upload/Editor/Editor.style.ts

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 
 export const Wrapper = styled.div`
-  margin-top: 24px;
+  margin: 24px 0;
 `;
 
 export const EditorWrapper = styled.div``;

components/Upload/Register/Register.style.ts

@@ -1,3 +1,59 @@
 import styled from 'styled-components';
 
-export const Wrapper = styled.div``;
+import Image from 'next/image';
+
+export const Wrapper = styled.div`
+  position: relative;
+  width: 1140px;
+  min-height: 689px;
+  padding-top: 240px;
+  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.12), 0px 0px 8px rgba(0, 0, 0, 0.12);
+  overflow: scroll;
+`;
+
+export const RegisterInfo = styled.div``;
+
+export const RegisterSubInfo = styled.p`
+  margin-bottom: 24px;
+  text-align: center;
+  font-size: 20px;
+  font-weight: 400;
+  line-height: 29px;
+  color: #757575;
+`;
+
+export const RegisterButtonWrapper = styled.div`
+  width: 280px;
+  margin: 0 auto;
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+`;
+
+export const RegisterButton = styled.button`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 72px;
+  height: 72px;
+  border-radius: 12px;
+  background-color: #e4facc;
+  cursor: pointer;
+`;
+
+export const UploadIcon = styled(Image)``;
+
+export const UploadButton = styled.button`
+  position: absolute;
+  bottom: 24px;
+  right: 24px;
+  width: 161px;
+  height: 48px;
+  border-radius: 30px;
+  font-size: 20px;
+  font-weight: 500;
+  line-height: 29px;
+  background-color: #bdf486;
+  color: #212121;
+  cursor: pointer;
+`;

components/Upload/Register/index.tsx

@@ -1,8 +1,41 @@
 import React from 'react';
 import * as S from './Register.style';
 
+import ImageUploadWrapper from 'components/common/ImageUploadWrapper';
+
+const contents = ['image', 'edit', 'video'];
+
 const Register: React.FC = () => {
-  return <S.Wrapper>register</S.Wrapper>;
+  return (
+    <S.Wrapper>
+      <S.RegisterInfo>
+        <S.RegisterSubInfo>컨텐츠를 등록 해주세요!</S.RegisterSubInfo>
+        <S.RegisterButtonWrapper>
+          {contents.map((content) => {
+            return (
+              <ImageUploadWrapper name="works" key={content}>
+                <S.RegisterButton>
+                  <S.UploadIcon
+                    alt={`${content}`}
+                    src={`${
+                      content === 'image'
+                        ? '/images/icon-upload_image.svg'
+                        : content === 'edit'
+                        ? '/images/icon-upload_edit.svg'
+                        : '/images/icon-upload_video.svg'
+                    }`}
+                    width="20px"
+                    height="20px"
+                  />
+                </S.RegisterButton>
+              </ImageUploadWrapper>
+            );
+          })}
+        </S.RegisterButtonWrapper>
+      </S.RegisterInfo>
+      <S.UploadButton>업로드 하기</S.UploadButton>
+    </S.Wrapper>
+  );
 };
 
 export default Register;