[#47] Feat CheckSignUpPage

- AdminPage 수정 및 SignUpItem 생성

src/components/adminPage/AdminPage.tsx

@@ -1,7 +1,54 @@
 import styled from "styled-components";
+import { customColor } from "../customColor";
+import { SignUpItem } from "./components/SignUpItem";
 
 export const AdminPage = () => {
-  return <Wrapper>123</Wrapper>;
+  return (
+    <Wrapper>
+      <SignUpItem />
+      <SignUpItem />
+      <SignUpItem />
+      <SignUpItem />
+      <SignUpItem />
+      <SignUpItem />
+      <SignUpItem />
+      <SignUpItem />
+      <SignUpItem />
+      <SignUpItem />
+      <SignUpItem />
+      <SignUpItem />
+    </Wrapper>
+  );
 };
 
-const Wrapper = styled.section``;
+const Wrapper = styled.section`
+  display: flex;
+  flex-direction: column;
+  flex: auto;
+  padding: 16px 28px 28px 28px;
+  color: ${customColor.white};
+  gap: 12px;
+  overflow-y: overlay;
+  scroll-behavior: smooth;
+  ::-webkit-scrollbar {
+    width: 14px;
+  }
+  ::-webkit-scrollbar-thumb {
+    background-color: ${customColor.gray};
+    border-radius: 10px;
+    background-clip: padding-box;
+    border: 4px solid transparent;
+  }
+  ::-webkit-scrollbar-track {
+    background-color: transparent;
+    border-radius: 10px;
+  }
+  ::-webkit-scrollbar-button:start:decrement {
+    background-color: transparent;
+    height: 12px;
+  }
+  ::-webkit-scrollbar-button:end:increment {
+    background-color: transparent;
+    height: 24px;
+  }
+`;

src/components/adminPage/components/SignUpItem.tsx

@@ -0,0 +1,80 @@
+import styled from "styled-components";
+import { customColor } from "../../customColor";
+import { IoDocumentTextOutline } from "react-icons/io5";
+
+export const SignUpItem = () => {
+  return (
+    <Wrapper>
+      <Name>
+        <DocumentIcon />
+        <Highlighting>김민주</Highlighting>님의 발주신청
+      </Name>
+      <SiteInfo>
+        <SiteName>DOS</SiteName>
+        <SitePurpose>발주신청을 위한 사이트</SitePurpose>
+      </SiteInfo>
+      <ID>ID 13532</ID>
+      <Date>2023-05-03 16:12</Date>
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.article`
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  background: ${customColor.indigo3};
+  padding: 20px;
+  gap: 16px;
+`;
+const DocumentIcon = styled(IoDocumentTextOutline)`
+  font-size: 28px;
+  margin-right: 4px;
+  color: ${customColor.lightGray};
+`;
+const Name = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+  gap: 4px;
+  color: ${customColor.gray};
+  font-size: 16px;
+`;
+const Highlighting = styled.p`
+  font-size: 20px;
+  font-weight: bold;
+  color: ${customColor.white};
+`;
+
+const SiteInfo = styled.div`
+  display: flex;
+  flex-direction: row;
+  padding: 0 8px 0 32px;
+  gap: 8px;
+  align-items: flex-end;
+  justify-content: flex-end;
+`;
+const SiteName = styled.p`
+  font-size: 20px;
+  color: ${customColor.blue};
+`;
+const SitePurpose = styled.p`
+  color: ${customColor.lightGray};
+  font-size: 16px;
+`;
+const ID = styled.p`
+  display: flex;
+  position: absolute;
+  color: ${customColor.gray};
+  font-size: 12px;
+  top: 8px;
+  right: 12px;
+`;
+const Date = styled.p`
+  display: flex;
+  position: absolute;
+  color: ${customColor.gray};
+  font-size: 12px;
+  bottom: 14px;
+  left: 18px;
+`;