지점 수정 페이지(1)

develop-pix · Oct 31, 2023 · bf2cc5a · bf2cc5a
1 parent 3284f18
commit bf2cc5a
Show file tree

Hide file tree

Showing 8 changed files with 719 additions and 211 deletions.
diff --git a/src/components/branch-edit/BranchEdit.tsx b/src/components/branch-edit/BranchEdit.tsx
@@ -0,0 +1,79 @@
+import { Box } from "@mui/material";
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { customColors } from "../../styles/base/Variable.style";
+import CancelButton from "../reuse/button/CancelButton";
+import SubmitButton from "../reuse/button/SubmitButton";
+import BranchEditInputForm from "./BranchEditInputForm";
+
+export default function BranchEdit() {
+  const [photoboothName, setPhotoboothName] = useState<string>("");
+  const [image, setImage] = useState<string[]>([]);
+  const [hashtag, setHashtag] = useState<string[]>([]);
+
+  const navigate = useNavigate();
+
+  /* 수정하기 버튼 입력시 */
+  const onSubmitHandler = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    try {
+      /* API 나오면 필수 값 검증 해야함. */
+      console.log(photoboothName);
+      /* image[0]은 대표사진, 나머지는 일반 사진으로 변수 변경 하여 전송 */
+      console.log(image);
+      console.log(hashtag);
+      navigate(-1);
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        justifyContent: "center",
+        margin: "40px 0px 40px 0px",
+        minWidth: "20vw",
+      }}
+      component="form"
+      onSubmit={onSubmitHandler}
+    >
+      <Box sx={{ width: "95%" }}>
+        <Box
+          sx={{
+            display: "flex",
+            width: "100%",
+            justifyContent: "space-between",
+          }}
+        >
+          <Box
+            sx={{
+              fontWeight: "600",
+              borderColor: `${customColors.color_border_gray}`,
+              borderBottom: "none",
+              padding: "13px 10px 5px 10px",
+              borderRadius: "10px 10px 0 0",
+              backgroundColor: `${customColors.sub_pink}`,
+              fontSize: "18px",
+            }}
+          >
+            포토부스 관리
+          </Box>
+          <Box sx={{ display: "flex", gap: "10px" }}>
+            <CancelButton />
+            <SubmitButton value={"수정"} />
+          </Box>
+        </Box>
+        <BranchEditInputForm
+          photoboothName={photoboothName}
+          setPhotoboothName={setPhotoboothName}
+          image={image}
+          setImage={setImage}
+          hashtag={hashtag}
+          setHashtag={setHashtag}
+        />
+      </Box>
+    </Box>
+  );
+}
diff --git a/src/components/branch-edit/BranchEditForm.tsx b/src/components/branch-edit/BranchEditForm.tsx
@@ -0,0 +1,12 @@
+import { Box } from "@mui/material";
+import SideBar from "../reuse/sidebar/SideBar";
+import BranchEdit from "./BranchEdit";
+
+export default function BranchEditForm() {
+  return (
+    <Box sx={{ display: "flex" }}>
+      <SideBar />
+      <BranchEdit />
+    </Box>
+  );
+}
diff --git a/src/components/branch-edit/BranchEditInputForm.tsx b/src/components/branch-edit/BranchEditInputForm.tsx
@@ -0,0 +1,210 @@
+import { useEffect } from "react";
+import { customColors } from "../../styles/base/Variable.style";
+import { Box, Typography, TextField } from "@mui/material";
+import MultiFileInput from "../reuse/input/MultiFileInput";
+import BranchHashTags from "../branch-new/BranchHashTags";
+import { BranchEditInputFormProps } from "../../interface/BranchEdit.interface";
+import { useLocation } from "react-router-dom";
+
+export default function BranchEditInputForm({
+  photoboothName,
+  setPhotoboothName,
+  image,
+  setImage,
+  hashtag,
+  setHashtag,
+}: BranchEditInputFormProps) {
+  const location = useLocation().pathname.split("/");
+
+  const GetEditData = (currentID: string) => {
+    /* 표 데이터 ( Test용 나중에 API로 데이터 GET) */
+    const tempData = [
+      {
+        id: "1",
+        representativeImage:
+          "https://upload.wikimedia.org/wikipedia/ko/4/4a/%EC%8B%A0%EC%A7%B1%EA%B5%AC.png",
+        image: [
+          "https://upload.wikimedia.org/wikipedia/ko/a/a6/Pok%C3%A9mon_Pikachu_art.png",
+          "https://upload.wikimedia.org/wikipedia/commons/thumb/7/73/BTS_during_a_White_House_press_conference_May_31%2C_2022_%28cropped%29.jpg/500px-BTS_during_a_White_House_press_conference_May_31%2C_2022_%28cropped%29.jpg",
+        ],
+        photoboothName: "인생네컷",
+        hashtag: ["캐릭터", "연예인"],
+      },
+      {
+        id: "2",
+        representativeImage:
+          "https://upload.wikimedia.org/wikipedia/ko/4/4a/%EC%8B%A0%EC%A7%B1%EA%B5%AC.png",
+        image: [],
+        photoboothName: "하루필름",
+        hashtag: ["콜라보"],
+      },
+      {
+        id: "3",
+        representativeImage:
+          "https://upload.wikimedia.org/wikipedia/ko/4/4a/%EC%8B%A0%EC%A7%B1%EA%B5%AC.png",
+        image: [
+          "https://upload.wikimedia.org/wikipedia/ko/a/a6/Pok%C3%A9mon_Pikachu_art.png",
+        ],
+        photoboothName: "포토이즘",
+        hashtag: ["계절", "이달의프레임"],
+      },
+      {
+        id: "4",
+        representativeImage:
+          "https://upload.wikimedia.org/wikipedia/ko/4/4a/%EC%8B%A0%EC%A7%B1%EA%B5%AC.png",
+        image: [
+          "https://upload.wikimedia.org/wikipedia/ko/a/a6/Pok%C3%A9mon_Pikachu_art.png",
+        ],
+        photoboothName: "포토매틱",
+        hashtag: ["캐릭터", "계절", "이달의프레임"],
+      },
+      {
+        id: "5",
+        representativeImage:
+          "https://upload.wikimedia.org/wikipedia/ko/4/4a/%EC%8B%A0%EC%A7%B1%EA%B5%AC.png",
+        image: [
+          "https://upload.wikimedia.org/wikipedia/ko/a/a6/Pok%C3%A9mon_Pikachu_art.png",
+        ],
+        photoboothName: "포토매틱",
+        hashtag: ["콜라보", "연예인"],
+      },
+      {
+        id: "6",
+        representativeImage:
+          "https://upload.wikimedia.org/wikipedia/ko/4/4a/%EC%8B%A0%EC%A7%B1%EA%B5%AC.png",
+        image: [
+          "https://upload.wikimedia.org/wikipedia/ko/a/a6/Pok%C3%A9mon_Pikachu_art.png",
+        ],
+        photoboothName: "포토매틱",
+        hashtag: [],
+      },
+      {
+        id: "7",
+        representativeImage:
+          "https://upload.wikimedia.org/wikipedia/ko/4/4a/%EC%8B%A0%EC%A7%B1%EA%B5%AC.png",
+        image: [
+          "https://upload.wikimedia.org/wikipedia/ko/a/a6/Pok%C3%A9mon_Pikachu_art.png",
+        ],
+        photoboothName: "인생네컷",
+        hashtag: ["계절"],
+      },
+      {
+        id: "8",
+        representativeImage:
+          "https://upload.wikimedia.org/wikipedia/ko/4/4a/%EC%8B%A0%EC%A7%B1%EA%B5%AC.png",
+        image: [
+          "https://upload.wikimedia.org/wikipedia/ko/a/a6/Pok%C3%A9mon_Pikachu_art.png",
+        ],
+        photoboothName: "인생네컷",
+        hashtag: ["캐릭터", "연예인"],
+      },
+      {
+        id: "9",
+        representativeImage:
+          "https://upload.wikimedia.org/wikipedia/ko/4/4a/%EC%8B%A0%EC%A7%B1%EA%B5%AC.png",
+        image: [
+          "https://upload.wikimedia.org/wikipedia/ko/a/a6/Pok%C3%A9mon_Pikachu_art.png",
+        ],
+        photoboothName: "인생네컷",
+        hashtag: [],
+      },
+      {
+        id: "10",
+        representativeImage:
+          "https://upload.wikimedia.org/wikipedia/ko/4/4a/%EC%8B%A0%EC%A7%B1%EA%B5%AC.png",
+        image: [
+          "https://upload.wikimedia.org/wikipedia/ko/a/a6/Pok%C3%A9mon_Pikachu_art.png",
+        ],
+        photoboothName: "하루필름",
+        hashtag: ["콜라보", "이달의프레임"],
+      },
+      {
+        id: "11",
+        representativeImage:
+          "https://upload.wikimedia.org/wikipedia/ko/4/4a/%EC%8B%A0%EC%A7%B1%EA%B5%AC.png",
+        image: [
+          "https://upload.wikimedia.org/wikipedia/ko/a/a6/Pok%C3%A9mon_Pikachu_art.png",
+        ],
+        photoboothName: "하루필름",
+        hashtag: ["연예인"],
+      },
+    ];
+
+    tempData.map((data) => {
+      if (data.id === currentID) {
+        setImage([data.representativeImage].concat(data.image));
+        setPhotoboothName(data.photoboothName);
+        setHashtag(data.hashtag);
+      }
+    });
+  };
+
+  useEffect(() => {
+    GetEditData(location[location.length - 1]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <Box
+      sx={{
+        width: "auto", // width를 "auto"로 설정
+        display: "inline-block", // display 속성을 "inline-block"으로 설정
+        overflow: "hidden",
+        border: "2px solid",
+        borderColor: `${customColors.sub_pink}`,
+        borderRadius: "0px 10px 10px 10px",
+      }}
+    >
+      <Box
+        sx={{
+          margin: "50px 20px 50px 20px",
+          display: "flex",
+          flexDirection: "column",
+          gap: "70px",
+        }}
+      >
+        <Box sx={{ display: "flex" }}>
+          <Typography
+            sx={{ width: "130px" }}
+            fontSize={18}
+            fontWeight={600}
+            display="flex"
+            alignItems="center"
+          >
+            포토부스명
+          </Typography>
+          <TextField
+            variant="outlined"
+            label="포토부스명"
+            value={photoboothName}
+            onChange={(e) => setPhotoboothName(e.target.value)}
+          />
+        </Box>
+        <Box sx={{ display: "flex" }}>
+          <Typography
+            sx={{ width: "130px" }}
+            fontSize={18}
+            fontWeight={600}
+            display="flex"
+            alignItems="center"
+          >
+            이미지
+          </Typography>
+          <MultiFileInput image={image} setImage={setImage} />
+        </Box>
+        <Box sx={{ display: "flex" }}>
+          <Typography
+            sx={{ width: "130px" }}
+            fontSize={18}
+            fontWeight={600}
+            display="flex"
+            alignItems="center"
+          >
+            해시태그
+          </Typography>
+          <BranchHashTags hashtag={hashtag} setHashtag={setHashtag} />
+        </Box>
+      </Box>
+    </Box>
+  );
+}
diff --git a/src/components/branch-manage/BranchManage.tsx b/src/components/branch-manage/BranchManage.tsx
@@ -51,7 +51,7 @@ export default function EventManage() {
 
   // 임의 데이터 100개
   const tablerows = Array.from({ length: 100 }, (_, index) => ({
-    id: "1", // 수정, 삭제로 넘겨줄 데이터 id 값
+    id: (index + 1).toString(), // 수정, 삭제로 넘겨줄 데이터 id 값
     name: "인생네컷",
     image:
       "https://upload.wikimedia.org/wikipedia/ko/4/4a/%EC%8B%A0%EC%A7%B1%EA%B5%AC.png",

diff --git a/src/components/branch-new/BranchHashTags.tsx b/src/components/branch-new/BranchHashTags.tsx
@@ -1,7 +1,7 @@
 import { Box, TextField, Typography } from "@mui/material";
 import { BranchHashTagProps } from "../../interface/BranchNew.interface";
 
-export default function EventHashTags({
+export default function BranchHashTags({
   hashtag,
   setHashtag,
 }: BranchHashTagProps) {

diff --git a/src/interface/BranchEdit.interface.ts b/src/interface/BranchEdit.interface.ts
@@ -0,0 +1,8 @@
+export interface BranchEditInputFormProps {
+  photoboothName: string;
+  setPhotoboothName: React.Dispatch<React.SetStateAction<string>>;
+  image: string[];
+  setImage: React.Dispatch<React.SetStateAction<string[]>>;
+  hashtag: string[];
+  setHashtag: React.Dispatch<React.SetStateAction<string[]>>;
+}
diff --git a/src/pages/BranchEdit.tsx b/src/pages/BranchEdit.tsx
@@ -1,10 +1,11 @@
 import SideBar from "../components/reuse/sidebar/SideBar";
+import BranchEditForm from "../components/branch-edit/BranchEditForm";
 
 export default function BranchEdit() {
   return (
     <div>
       <SideBar />
-      BranchEdit
+      <BranchEditForm />
     </div>
   );
 }