Merge pull request #15 from develop-pix/chj950807

RENAME: Branch to Photobooth 파일및 폴더명 변경

src/App.tsx

@@ -3,15 +3,15 @@ import NotFound from "./pages/NotFound";
 import Login from "./pages/Login";
 import DashBoard from "./pages/Dashboard";
 import EventManage from "./pages/EventManage";
-import BranchManage from "./pages/BranchManage";
+import PhotoboothManage from "./pages/PhotoboothManage";
 import ReviewManage from "./pages/ReviewManage";
 import UserManage from "./pages/UserManage";
 import PushMessage from "./pages/PushMessage";
 import { ThemeProvider, createTheme } from "@mui/material";
 import EventNew from "./pages/EventNew";
 import EventEdit from "./pages/EventEdit";
-import BrnachNew from "./pages/BranchNew";
-import BranchEdit from "./pages/BranchEdit";
+import PhotoboothNew from "./pages/PhotoboothNew";
+import PhotoboothEdit from "./pages/PhotoboothEdit";
 
 const theme = createTheme({
   typography: {
@@ -28,9 +28,9 @@ function App() {
           <Route path="/event" element={<EventManage />}></Route>
           <Route path="/event/new" element={<EventNew />}></Route>
           <Route path="/event/edit/:id" element={<EventEdit />}></Route>
-          <Route path="/branch/new" element={<BrnachNew />}></Route>
-          <Route path="/branch/edit/:id" element={<BranchEdit />}></Route>
-          <Route path="/branch" element={<BranchManage />}></Route>
+          <Route path="/branch/new" element={<PhotoboothNew />}></Route>
+          <Route path="/branch/edit/:id" element={<PhotoboothEdit />}></Route>
+          <Route path="/branch" element={<PhotoboothManage />}></Route>
           <Route path="/user" element={<UserManage />}></Route>
           <Route path="/pushmessage" element={<PushMessage />}></Route>
           <Route path="/review" element={<ReviewManage />}></Route>

src/components/event-manage/EventManage.tsx

@@ -1,5 +1,5 @@
 import { Box } from "@mui/material";
-import Table from "../reuse/table/Table";
+import TableForm from "../reuse/table/TableForm";
 import { customColors } from "../../styles/base/Variable.style";
 import { EventTableColumn } from "../../interface/EventManage.interface";
 import { useState } from "react";
@@ -219,7 +219,7 @@ export default function EventManage() {
             <AddButton />
           </Box>
         </Box>
-        <Table
+        <TableForm
           columns={tablecolumns}
           rows={tablerows}
           page={page}

src/components/branch-edit/BranchEdit.tsx → src/components/photobooth-edit/PhotoboothEdit.tsx

@@ -4,9 +4,9 @@ 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";
+import PhotoboothEditInputForm from "./PhotoboothEditInputForm";
 
-export default function BranchEdit() {
+export default function PhotoboothhEdit() {
   const [photoboothName, setPhotoboothName] = useState<string>("");
   const [image, setImage] = useState<string[]>([]);
   const [hashtag, setHashtag] = useState<string[]>([]);
@@ -65,7 +65,7 @@ export default function BranchEdit() {
             <SubmitButton value={"수정"} />
           </Box>
         </Box>
-        <BranchEditInputForm
+        <PhotoboothEditInputForm
           photoboothName={photoboothName}
           setPhotoboothName={setPhotoboothName}
           image={image}

src/components/branch-new/BranchNewForm.tsx → src/components/photobooth-edit/PhotoboothEditForm.tsx

@@ -1,12 +1,12 @@
 import { Box } from "@mui/material";
 import SideBar from "../reuse/sidebar/SideBar";
-import BrnachNew from "./BranchNew";
+import PhotoboothhEdit from "./PhotoboothEdit";
 
-export default function BrnachNewForm() {
+export default function PhotoboothEditForm() {
   return (
     <Box sx={{ display: "flex" }}>
       <SideBar />
-      <BrnachNew />
+      <PhotoboothhEdit />
     </Box>
   );
 }

src/components/branch-edit/BranchEditInputForm.tsx → src/components/photobooth-edit/PhotoboothEditInputForm.tsx

@@ -2,18 +2,18 @@ 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 PhotoboothHashTags from "../photobooth-new/PhotoboothHashTags";
+import { PhotoboothEditInputFormProps } from "../../interface/PhotoboothEdit.interface";
 import { useLocation } from "react-router-dom";
 
-export default function BranchEditInputForm({
+export default function PhotoboothEditInputForm({
   photoboothName,
   setPhotoboothName,
   image,
   setImage,
   hashtag,
   setHashtag,
-}: BranchEditInputFormProps) {
+}: PhotoboothEditInputFormProps) {
   const location = useLocation().pathname.split("/");
 
   const GetEditData = (currentID: string) => {
@@ -202,7 +202,7 @@ export default function BranchEditInputForm({
           >
             해시태그
           </Typography>
-          <BranchHashTags hashtag={hashtag} setHashtag={setHashtag} />
+          <PhotoboothHashTags hashtag={hashtag} setHashtag={setHashtag} />
         </Box>
       </Box>
     </Box>

src/components/branch-manage/BranchManage.tsx → src/components/photobooth-manage/PhotoboothManage.tsx

@@ -1,19 +1,19 @@
 import { Box } from "@mui/material";
-import Table from "../reuse/table/Table";
+import TableForm from "../reuse/table/TableForm";
 import { customColors } from "../../styles/base/Variable.style";
-import { BranchTableColumn } from "../../interface/BranchManage.interface";
+import { PhotoboothTableColumn } from "../../interface/PhotoboothManage.interface";
 import { useState } from "react";
 import SearchInput from "../reuse/input/SearchInput";
 import AddButton from "../reuse/button/AddButton";
 import EditButton from "../reuse/button/EditButton";
 import DeleteButton from "../reuse/button/DeleteButton";
 
-export default function EventManage() {
+export default function PhotoboothManage() {
   const [search, setSearch] = useState<string>("");
   const [page, setPage] = useState<number>(0);
 
   /* 표 제목 및 포맷 설정 */
-  const tablecolumns: BranchTableColumn[] = [
+  const tablecolumns: PhotoboothTableColumn[] = [
     { id: "name", label: "포토부스명", minWidth: 120 },
     {
       id: "image",
@@ -93,7 +93,7 @@ export default function EventManage() {
             <AddButton />
           </Box>
         </Box>
-        <Table
+        <TableForm
           columns={tablecolumns}
           rows={tablerows}
           page={page}

src/components/branch-manage/BranchManageForm.tsx → src/components/photobooth-manage/PhotoboothManageForm.tsx

@@ -1,13 +1,13 @@
 import SideBar from "../reuse/sidebar/SideBar";
 import Box from "@mui/material/Box";
-import BranchManage from "./BranchManage";
+import PhotoboothManage from "./PhotoboothManage";
 
 // 포토부스 관리 페이지
-export default function BranchManageForm() {
+export default function PhotoboothManageForm() {
   return (
     <Box sx={{ display: "flex" }}>
       <SideBar />
-      <BranchManage />
+      <PhotoboothManage />
     </Box>
   );
 }

src/components/branch-new/BranchHashTags.tsx → src/components/photobooth-new/PhotoboothHashTags.tsx

@@ -1,13 +1,17 @@
 import { Box, TextField, Typography } from "@mui/material";
-import { BranchHashTagProps } from "../../interface/BranchNew.interface";
+import { PhotoboothHashTagProps } from "../../interface/PhotoboothNew.interface";
 
-export default function BranchHashTags({
+export default function PhotoboothHashTags({
   hashtag,
   setHashtag,
-}: BranchHashTagProps) {
-  const handleHashTagChange = (index: number, value: string) => {
+}: PhotoboothHashTagProps) {
+  const handleHashTagChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+    index: number
+  ) => {
+    e.preventDefault();
     const updatedHashtags = [...hashtag];
-    updatedHashtags[index] = value;
+    updatedHashtags[index] = e.target.value;
     setHashtag(updatedHashtags);
   };
 
@@ -23,8 +27,8 @@ export default function BranchHashTags({
             <TextField
               label={`해시태그`}
               variant="outlined"
-              value={hashtag[index]}
-              onChange={(e) => handleHashTagChange(index, e.target.value)}
+              value={hashtag[index] ? hashtag[index] : ""}
+              onChange={(e) => handleHashTagChange(e, index)}
             />
           </Box>
         ))}

src/components/branch-new/BranchInputForm.tsx → src/components/photobooth-new/PhotoboothInputForm.tsx

@@ -1,17 +1,17 @@
 import { Box, Typography, TextField } from "@mui/material";
 import { customColors } from "../../styles/base/Variable.style";
-import { BranchInputFormProps } from "../../interface/BranchNew.interface";
-import BranchHashTags from "./BranchHashTags";
+import { PhotoboothInputFormProps } from "../../interface/PhotoboothNew.interface";
+import PhotoboothHashTags from "./PhotoboothHashTags";
 import MultiFileInput from "../reuse/input/MultiFileInput";
 
-export default function BranchInputForm({
+export default function PhotoboothInputForm({
   photoboothName,
   setPhotoboothName,
   image,
   setImage,
   hashtag,
   setHashtag,
-}: BranchInputFormProps) {
+}: PhotoboothInputFormProps) {
   return (
     <Box
       sx={{
@@ -70,7 +70,7 @@ export default function BranchInputForm({
           >
             해시태그
           </Typography>
-          <BranchHashTags hashtag={hashtag} setHashtag={setHashtag} />
+          <PhotoboothHashTags hashtag={hashtag} setHashtag={setHashtag} />
         </Box>
       </Box>
     </Box>

src/components/branch-new/BranchNew.tsx → src/components/photobooth-new/PhotoboothNew.tsx

@@ -1,12 +1,12 @@
 import { Box } from "@mui/material";
 import { customColors } from "../../styles/base/Variable.style";
-import BranchInputForm from "./BranchInputForm";
+import PhotoboothInputForm from "./PhotoboothInputForm";
 import { useState } from "react";
 import CancelButton from "../reuse/button/CancelButton";
 import SubmitButton from "../reuse/button/SubmitButton";
 import { useNavigate } from "react-router-dom";
 
-export default function BrnachNew() {
+export default function PhotoboothNew() {
   const [photoboothName, setPhotoboothName] = useState<string>("");
   const [image, setImage] = useState<string[]>([]);
   const [hashtag, setHashtag] = useState<string[]>([]);
@@ -69,7 +69,7 @@ export default function BrnachNew() {
             <SubmitButton value="등록" />
           </Box>
         </Box>
-        <BranchInputForm
+        <PhotoboothInputForm
           photoboothName={photoboothName}
           setPhotoboothName={setPhotoboothName}
           image={image}

src/components/branch-edit/BranchEditForm.tsx → src/components/photobooth-new/PhotoboothNewForm.tsx

@@ -1,12 +1,12 @@
 import { Box } from "@mui/material";
 import SideBar from "../reuse/sidebar/SideBar";
-import BranchEdit from "./BranchEdit";
+import PhotoboothNew from "./PhotoboothNew";
 
-export default function BranchEditForm() {
+export default function PhotoboothNewForm() {
   return (
     <Box sx={{ display: "flex" }}>
       <SideBar />
-      <BranchEdit />
+      <PhotoboothNew />
     </Box>
   );
 }

src/components/reuse/sidebar/SideBar.tsx

@@ -11,7 +11,9 @@ export default function SideBar() {
 
   // url이 변경될 때마다 /이후 첫번째 인자를 선택된 인덱스로 저장
   useEffect(() => {
-    setSelectedIndex(location.pathname.split("/").filter((item) => item !== "")[0]);
+    setSelectedIndex(
+      location.pathname.split("/").filter((item) => item !== "")[0]
+    );
   }, [location]);
 
   const handleListClick = (index: string) => {
@@ -46,7 +48,7 @@ export default function SideBar() {
         />
         <SideBarListItem
           url="/branch"
-          text="지점 관리"
+          text="포토부스 관리"
           selectedIndex={selectedIndex}
           handleListClick={handleListClick}
         />