[#47] Feat CheckSignUpPage

- AdminDetailPage 퍼블리싱
potato-club · May 29, 2023 · 226febf · 226febf
1 parent 3f037bb
commit 226febf
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 4 deletions.
diff --git a/src/components/adminPage/SignUpAddInfo.tsx b/src/components/adminPage/SignUpAddInfo.tsx
@@ -3,6 +3,7 @@ import { MdTune } from "react-icons/md";
 import { useEffect, useState } from "react";
 import { customColor } from "../customColor";
 import { TwoRadioBoxs } from "./components/TwoRadioBoxs";
+import { ColorPalette } from "./components/ColorPalette";
 
 export const SignUpAddInfo = () => {
   return (
@@ -14,11 +15,15 @@ export const SignUpAddInfo = () => {
       <Box>
         <BoxItem>
           <BoxItemLabel>브랜드 컬러1</BoxItemLabel>
-          <BoxItemContent>&[수정필요]&</BoxItemContent>
+          <BoxItemContent>
+            <ColorPalette data={["#ffffff", "#fff245", "#975657"]} />
+          </BoxItemContent>
         </BoxItem>
         <BoxItem>
           <BoxItemLabel>브랜드 컬러2</BoxItemLabel>
-          <BoxItemContent>&[수정필요]&</BoxItemContent>
+          <BoxItemContent>
+            <ColorPalette data={["#ffffff", "#fff245", "#975657"]} />
+          </BoxItemContent>
         </BoxItem>
         <BoxItem>
           <BoxItemLabel>페이지 수</BoxItemLabel>

diff --git a/src/components/adminPage/components/ColorPalette.tsx b/src/components/adminPage/components/ColorPalette.tsx
@@ -0,0 +1,83 @@
+import styled from "styled-components";
+import { customColor } from "../../customColor";
+
+interface Props {
+  data: string[];
+}
+interface BoxProps {
+  colorValue: string;
+}
+
+export const ColorPalette = ({ data }: Props) => {
+  return (
+    <Wrapper>
+      <Box>
+        <ColorList>
+          {data.map((i, id) => {
+            return (
+              <ColorBox key={id}>
+                {i}
+                <ColorInput>
+                  <ColorInputValue colorValue={i} />
+                </ColorInput>
+              </ColorBox>
+            );
+          })}
+        </ColorList>
+      </Box>
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.article`
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0 4px;
+  overflow-x: auto;
+`;
+const Box = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+`;
+const ColorList = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+`;
+const ColorBox = styled.div`
+  display: flex;
+  flex-direction: row;
+  position: relative;
+  margin-right: 26px;
+  width: 94px;
+  height: 26px;
+  border: 1px solid ${customColor.darkGray};
+  border-radius: 4px;
+  padding-right: 28px;
+  padding-left: 5px;
+  font-size: 14px;
+  align-items: center;
+`;
+const ColorInput = styled.div`
+  display: flex;
+  position: absolute;
+  height: 100%;
+  width: 24px;
+  right: 1px;
+  top: 50%;
+  transform: translate(0, -50%);
+  border-left: 1px solid ${customColor.darkGray};
+  padding-left: 1px;
+  align-items: center;
+  justify-content: center;
+`;
+const ColorInputValue = styled.div<BoxProps>`
+  height: 18px;
+  width: 18px;
+  background: ${(props) => props.colorValue};
+  border-radius: 2px;
+`;
diff --git a/src/components/signUpPage/components/FormColor.tsx b/src/components/signUpPage/components/FormColor.tsx
@@ -31,13 +31,13 @@ export const FormColor = (props: Props) => {
   const handlePlusBtn = () => {
     setColorList((prev) => [...prev, `${count}`]);
     setIsHover((prev) => [...prev, false]);
-    event.preventDefault();
+    event?.preventDefault();
     setCount(count + 1);
   };
   const handleDeleteBtn = (i: string, id: number) => {
     setColorList(colorList.filter((i, idx) => id !== idx));
     setIsHover(isHover.filter((i, idx) => id !== idx));
-    event.preventDefault();
+    event?.preventDefault();
     props.unregister(props.value + `-${i}`);
   };
   const onMouseEnter = (id: number) => {