[#47] Feat CheckSignUpPage

- AdminDetailPage 퍼블리싱
potato-club · May 15, 2023 · cda9fc5 · cda9fc5
1 parent 9a65e5b
commit cda9fc5
Show file tree

Hide file tree

Showing 9 changed files with 525 additions and 5 deletions.
diff --git a/pages/admin/[id].tsx b/pages/admin/[id].tsx
@@ -0,0 +1,8 @@
+import type { NextPage } from "next";
+import { AdminDetailPage } from "../../src/components/adminPage/AdminDetailPage";
+
+const AdminDetail: NextPage = () => {
+  return <AdminDetailPage />;
+};
+
+export default AdminDetail;
diff --git a/src/components/adminPage/AdminDetailPage.tsx b/src/components/adminPage/AdminDetailPage.tsx
@@ -0,0 +1,70 @@
+import styled from "styled-components";
+import { customColor } from "../customColor";
+import { SignUpAddInfo } from "./SignUpAddInfo";
+import { SignUpSiteInfo } from "./SignUpSiteInfo";
+import { SignUpUserInfo } from "./SignUpUserInfo";
+
+export const AdminDetailPage = () => {
+  return (
+    <Wrapper>
+      <WrapperInner>
+        <Division />
+        <SignUpUserInfo />
+        <SignUpSiteInfo />
+        <SignUpAddInfo />
+      </WrapperInner>
+    </Wrapper>
+  );
+};
+
+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;
+  }
+`;
+const WrapperInner = styled.div`
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  padding: 8px 76px;
+  width: 100%;
+  gap: 56px 0;
+`;
+const Division = styled.div`
+  display: flex;
+  position: absolute;
+  z-index: 1;
+  width: 2px;
+  height: 100%;
+  background: ${customColor.darkGray};
+  border-radius: 1px;
+  left: 212px;
+  top: 50%;
+  transform: translate(0, -50%);
+`;
diff --git a/src/components/adminPage/SignUpAddInfo.tsx b/src/components/adminPage/SignUpAddInfo.tsx
@@ -0,0 +1,107 @@
+import styled from "styled-components";
+import { MdTune } from "react-icons/md";
+import { useEffect, useState } from "react";
+import { customColor } from "../customColor";
+import { TwoRadioBoxs } from "./components/TwoRadioBoxs";
+
+export const SignUpAddInfo = () => {
+  return (
+    <Content>
+      <Lbel>
+        <MdTune size={20} />
+        추가 정보
+      </Lbel>
+      <Box>
+        <BoxItem>
+          <BoxItemLabel>브랜드 컬러1</BoxItemLabel>
+          <BoxItemContent>&[수정필요]&</BoxItemContent>
+        </BoxItem>
+        <BoxItem>
+          <BoxItemLabel>브랜드 컬러2</BoxItemLabel>
+          <BoxItemContent>&[수정필요]&</BoxItemContent>
+        </BoxItem>
+        <BoxItem>
+          <BoxItemLabel>페이지 수</BoxItemLabel>
+          <BoxItemContent>3</BoxItemContent>
+        </BoxItem>
+        <BoxItem>
+          <BoxItemLabel>로그인 필요 유무</BoxItemLabel>
+          <BoxItemContent>
+            <TwoRadioBoxs value1="예" value2="아니요" data="예" />
+          </BoxItemContent>
+        </BoxItem>
+        <BoxItem>
+          <BoxItemLabel>DB 필요 유무</BoxItemLabel>
+          <BoxItemContent>
+            <TwoRadioBoxs value1="예" value2="아니요" data="예" />
+          </BoxItemContent>
+        </BoxItem>
+        <BoxItem>
+          <BoxItemLabel>사이트 컨셉 참고자료 첨부</BoxItemLabel>
+          <BoxItemContent>&[수정필요]&</BoxItemContent>
+        </BoxItem>
+        <BoxItem>
+          <BoxItemLabel>기타사항</BoxItemLabel>
+          <BoxItemContent>응애</BoxItemContent>
+        </BoxItem>
+        <BoxItem>
+          <BoxItemLabel>*첫 미팅 희망날짜</BoxItemLabel>
+          <BoxItemContent>2023-05-15(월) / 10:00</BoxItemContent>
+        </BoxItem>
+      </Box>
+    </Content>
+  );
+};
+
+const Content = styled.div`
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  gap: 0 16px;
+  align-items: flex-start;
+`;
+const Lbel = styled.p`
+  display: flex;
+  min-width: 120px;
+  font-size: 18px;
+  color: ${customColor.lightGray};
+  letter-spacing: -0.5px;
+  font-weight: bold;
+  gap: 0 4px;
+  align-items: center;
+  justify-content: flex-end;
+`;
+const Box = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 28px 0;
+  flex: auto;
+  padding-top: 36px;
+`;
+const BoxItem = styled.div`
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  gap: 6px 0;
+`;
+const BoxItemLabel = styled.div`
+  display: flex;
+  font-size: 16px;
+  color: ${customColor.gray};
+  letter-spacing: -0.5px;
+  padding-left: 12px;
+  justify-content: space-between;
+  align-items: flex-end;
+  white-space: nowrap;
+`;
+const BoxItemContent = styled.div`
+  display: flex;
+  flex-direction: row;
+  background-color: ${customColor.indigo3};
+  min-height: 38px;
+  width: 100%;
+  align-items: center;
+  padding: 10px 12px 9px 32px;
+  border-top-right-radius: 20px;
+  border-bottom-right-radius: 20px;
+`;
diff --git a/src/components/adminPage/SignUpSiteInfo.tsx b/src/components/adminPage/SignUpSiteInfo.tsx
@@ -0,0 +1,84 @@
+import styled from "styled-components";
+import { CgWebsite } from "react-icons/cg";
+import { customColor } from "../customColor";
+import { OrdererRadioBoxs } from "./components/OrdererRadioBoxs";
+
+export const SignUpSiteInfo = () => {
+  return (
+    <Content>
+      <Label>
+        <CgWebsite size={20} />
+        웹사이트 정보
+      </Label>
+      <Box>
+        <BoxItem>
+          <BoxItemLabel>*사이트 이름</BoxItemLabel>
+          <BoxItemContent>DOS</BoxItemContent>
+        </BoxItem>
+        <BoxItem>
+          <BoxItemLabel>*사이트 목적</BoxItemLabel>
+          <BoxItemContent>웹 발주를 위한 사이트</BoxItemContent>
+        </BoxItem>
+        <BoxItem>
+          <BoxItemLabel>*사이트 운영자</BoxItemLabel>
+          <BoxItemContent>
+            <OrdererRadioBoxs data="COMPANY" />
+          </BoxItemContent>
+        </BoxItem>
+      </Box>
+    </Content>
+  );
+};
+
+const Content = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 0 16px;
+  width: 100%;
+  align-items: flex-start;
+`;
+const Label = styled.p`
+  display: flex;
+  width: 120px;
+  font-size: 18px;
+  color: ${customColor.lightGray};
+  letter-spacing: -0.5px;
+  font-weight: bold;
+  gap: 0 4px;
+  align-items: center;
+  justify-content: flex-end;
+`;
+const Box = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 28px 0;
+  flex: auto;
+  padding-top: 36px;
+`;
+const BoxItem = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 6px 0;
+`;
+const BoxItemLabel = styled.div`
+  display: flex;
+  font-size: 16px;
+  color: ${customColor.gray};
+  letter-spacing: -0.5px;
+  padding-left: 12px;
+  justify-content: space-between;
+  align-items: flex-end;
+  white-space: nowrap;
+`;
+const BoxItemContent = styled.div`
+  display: flex;
+  flex-direction: row;
+  background-color: ${customColor.indigo3};
+  min-height: 38px;
+  width: 100%;
+  align-items: center;
+  padding-left: 32px;
+  border-top-right-radius: 20px;
+  border-bottom-right-radius: 20px;
+  overflow: hidden;
+`;
diff --git a/src/components/adminPage/SignUpUserInfo.tsx b/src/components/adminPage/SignUpUserInfo.tsx
@@ -0,0 +1,85 @@
+import styled from "styled-components";
+import { HiOutlineUser } from "react-icons/hi";
+import { customColor } from "../customColor";
+
+export const SignUpUserInfo = () => {
+  return (
+    <Content>
+      <Label>
+        <HiOutlineUser size={20} />
+        신청자 정보
+      </Label>
+      <Box>
+        <BoxItem>
+          <BoxItemLabel>*성함 또는 회사명(단체명)</BoxItemLabel>
+          <BoxItemContent>조금주</BoxItemContent>
+        </BoxItem>
+        <BoxItem>
+          <BoxItemLabel>*이메일</BoxItemLabel>
+          <BoxItemContent>[email protected]</BoxItemContent>
+        </BoxItem>
+        <BoxItem>
+          <BoxItemLabel>*전화번호1</BoxItemLabel>
+          <BoxItemContent>010-3474-8702</BoxItemContent>
+        </BoxItem>
+        <BoxItem>
+          <BoxItemLabel>전화번호2</BoxItemLabel>
+          <BoxItemContent>010-1234-5678</BoxItemContent>
+        </BoxItem>
+      </Box>
+    </Content>
+  );
+};
+
+const Content = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 0 16px;
+  width: 100%;
+  align-items: flex-start;
+`;
+const Label = styled.p`
+  display: flex;
+  width: 120px;
+  font-size: 18px;
+  color: ${customColor.lightGray};
+  letter-spacing: -0.5px;
+  font-weight: bold;
+  gap: 0 4px;
+  align-items: center;
+  justify-content: flex-end;
+`;
+const Box = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 28px 0;
+  flex: auto;
+  padding-top: 36px;
+`;
+const BoxItem = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 6px 0;
+`;
+const BoxItemLabel = styled.div`
+  display: flex;
+  font-size: 16px;
+  color: ${customColor.gray};
+  letter-spacing: -0.5px;
+  padding-left: 12px;
+  justify-content: space-between;
+  align-items: flex-end;
+  white-space: nowrap;
+`;
+const BoxItemContent = styled.div`
+  display: flex;
+  flex-direction: row;
+  background-color: ${customColor.indigo3};
+  min-height: 38px;
+  width: 100%;
+  align-items: center;
+  padding-left: 32px;
+  border-top-right-radius: 20px;
+  border-bottom-right-radius: 20px;
+  overflow: hidden;
+`;