Skip to content

Commit

Permalink
Merge pull request #5 from develop-pix/chj950807
Browse files Browse the repository at this point in the history 
FEAT: Table UI
  • Loading branch information
@jsee53
jsee53 authored Oct 22, 2023
2 parents 4fd1ea9 + 0b6b611 commit dc41d28
Show file tree
Hide file tree
Showing 20 changed files with 661 additions and 71 deletions.
34 changes: 21 additions & 13 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,22 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<link rel="stylesheet" href="./src/styles/base/reset.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Dump in Admin</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
<html lang="kr">

<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;200;300;400;500;600;700;800;900&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="./src/styles/base/reset.css" />
<title>Dump in Admin</title>
</head>

<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>

</html>
26 changes: 13 additions & 13 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
"dependencies": {
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",
"@mui/icons-material": "^5.14.12",
"@mui/icons-material": "^5.14.14",
"@mui/material": "^5.14.12",
"@mui/styled-engine-sc": "^5.14.12",
"axios": "^1.5.1",
Expand Down
30 changes: 19 additions & 11 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,20 +6,28 @@ import EventManage from "./pages/EventManage";
import BranchManage from "./pages/BranchManage";
import ReviewManage from "./pages/ReviewManage";
import UserManage from "./pages/UserManage";
import { ThemeProvider, createTheme } from "@mui/material";

const theme = createTheme({
typography: {
fontFamily: "Noto Sans KR, Roboto, sans-serif",
},
});
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Login />}></Route>
<Route path="/dashboard" element={<DashBoard />}></Route>
<Route path="/event" element={<EventManage />}></Route>
<Route path="/branch" element={<BranchManage />}></Route>
<Route path="/user" element={<UserManage />}></Route>
<Route path="/review" element={<ReviewManage />}></Route>
<Route path="*" element={<NotFound />}></Route>
</Routes>
</BrowserRouter>
<ThemeProvider theme={theme}>
<BrowserRouter>
<Routes>
<Route path="/" element={<Login />}></Route>
<Route path="/dashboard" element={<DashBoard />}></Route>
<Route path="/event" element={<EventManage />}></Route>
<Route path="/branch" element={<BranchManage />}></Route>
<Route path="/user" element={<UserManage />}></Route>
<Route path="/review" element={<ReviewManage />}></Route>
<Route path="*" element={<NotFound />}></Route>
</Routes>
</BrowserRouter>
</ThemeProvider>
);
}

Expand Down
231 changes: 231 additions & 0 deletions src/components/event-manage/EventManage.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,231 @@
import { Box } from "@mui/material";
import Table from "../reuse/table/Table";
import { customColors } from "../../styles/base/Variable.style";
import { EventTableColumn } from "../../interface/EventManage.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() {
const [search, setSearch] = useState<string>("");
const [page, setPage] = useState<number>(0);

/* 표 제목 및 포맷 설정 */
const tablecolumns: EventTableColumn[] = [
{
id: "image",
label: "대표사진",
minWidth: 150,
align: "center",
format: (value: string) => {
return (
<Box sx={{ width: "15vh", height: "15vh" }}>
<img src={value} width="100%" height="100%" />
</Box>
);
},
},
{ id: "name", label: "포토부스명", minWidth: 120 },
{
id: "title",
label: "제목",
minWidth: 150,
},
{
id: "description",
label: "설명",
minWidth: 470,
},
{
id: "term",
label: "기간",
minWidth: 120,
},
{
id: "hashtag",
label: "해시태그",
minWidth: 130,
},
{
id: "id",
label: "편집",
minWidth: 100,
align: "center",
format: (value: string) => {
return (
<Box sx={{ display: "flex", gap: "10px" }}>
<EditButton value={value} />
<DeleteButton value={value} />
</Box>
);
},
},
];

/* 표 데이터 ( Test용 나중에 API로 데이터 GET) */
const tablerows = [
{
id: "1",
image:
"https://upload.wikimedia.org/wikipedia/ko/4/4a/%EC%8B%A0%EC%A7%B1%EA%B5%AC.png",
name: "인생네컷",
title: "대충30글자대충30글자대충30글자대충30글자대충30글자",
description:
"Lorem ipsum dolor sit, amet consectetur adipisicing elit. Excepturi adipisci ullam pariatur dignissimos expedita minus, tempora, culpa voluptate eaque asperiores facilis velit impedit quidem quis eos libero veritatis nulla voluptatem?",
term: "term1",
hashtag: "hashtag1, 포토이즘, 인생네컷",
},
{
id: "2",
image:
"https://upload.wikimedia.org/wikipedia/ko/4/4a/%EC%8B%A0%EC%A7%B1%EA%B5%AC.png",
name: "홍대포토스",
title: "제목제목제목",
description:
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro dolorum assumenda, hic pariatur consequuntur excepturi eaque perferendis architecto praesentium mollitia quod modi quaerat id eos quisquam adipisci delectus earum deserunt?",
term: "term2",
hashtag: "hashtag2",
},
{
id: "3",
image:
"https://upload.wikimedia.org/wikipedia/ko/4/4a/%EC%8B%A0%EC%A7%B1%EA%B5%AC.png",
name: "포토그레이",
title: "TestTest",
description: "짧은글",
term: "term3",
hashtag: "hashtag3",
},
{
id: "4",
image:
"https://upload.wikimedia.org/wikipedia/ko/4/4a/%EC%8B%A0%EC%A7%B1%EA%B5%AC.png",
name: "셀프사진관 예뻐서, 봄",
title: "다음주까지 50% 할인",
description:
"Lorem ipsum dolor sit, amet consectetur adipisicing elit. Totam ex atque blanditiis aut neque error dignissimos adipisci incidunt nobis. Veniam ut nemo quos nam a officiis necessitatibus dolorem ratione sed.",
term: "term4",
hashtag: "hashtag4",
},
{
id: "5",
image:
"https://upload.wikimedia.org/wikipedia/ko/4/4a/%EC%8B%A0%EC%A7%B1%EA%B5%AC.png",
name: "포토이즘박스",
title: "내일까지 오면 1+1",
description:
"300글자채워봅시다300글자채워봅시다300글자채워봅시다300글자채워봅시다300글자채워봅시다300글자채워봅시다300글자채워봅시다300글자채워봅시다300글자채워봅시다300글자채워봅시다300글자채워봅시다300글자채워봅시다300글자채워봅시다300글자채워봅시다300글자채워봅시다300글자채워봅시다300글자채워봅시다300글자채워봅시다300글자채워봅시다300글자채워봅시다300글자채워봅시다300글자채워봅시다300글자채워봅시다300글자채워봅시다300글자채워봅시다300글자채워봅시다300글자채워봅시다300글자채워봅시다300글자채워봅시다300글자채워봅시끝",
term: "term5",
hashtag: "hashtag5",
},
{
id: "6",
image:
"https://upload.wikimedia.org/wikipedia/ko/4/4a/%EC%8B%A0%EC%A7%B1%EA%B5%AC.png",
name: "포토이즘박스",
title: "강아지와 함께하면 90% 할인",
description:
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam quas recusandae eius amet, qui unde labore omnis aliquid facilis delectus nam voluptas esse at laborum, error rem ipsum! Omnis, nesciunt!",
term: "term6",
hashtag: "hashtag6",
},
{
id: "7",
image:
"https://upload.wikimedia.org/wikipedia/ko/4/4a/%EC%8B%A0%EC%A7%B1%EA%B5%AC.png",
name: "비룸스튜디오",
title: "신규 오픈 5% 할인",
description: "할인할인",
term: "term7",
hashtag: "hashtag7",
},
{
id: "8",
image:
"https://upload.wikimedia.org/wikipedia/ko/4/4a/%EC%8B%A0%EC%A7%B1%EA%B5%AC.png",
name: "인생네컷",
title: "회원가입하면 4컷 무료",
description:
"긴글한번더긴글한번더긴글한번더긴글한번더긴글한번더긴글한번더긴글한번더긴글한번더긴글한번더긴글한번더긴글한번더긴글한번더긴글한번더긴글한번더긴글한번더긴글한번더긴글한번더긴글한번더긴글한번더긴글한번더긴글한번더긴글한번더긴글한번더긴글한번더긴글한번더긴글한번더긴글한번더긴글한번더긴글한번더긴글한번더긴글한번더긴글한번더긴글한번더긴글한번더긴글한번더긴글한번더긴글한번더긴글한번더긴글한번더긴글한번더긴글한번더긴글한번더긴글한번더긴글한번더긴글한번더",
term: "term8",
hashtag: "hashtag8",
},
{
id: "9",
image:
"https://upload.wikimedia.org/wikipedia/ko/4/4a/%EC%8B%A0%EC%A7%B1%EA%B5%AC.png",
name: "폴라스튜디오",
title: "짧",
description: "Test",
term: "term9",
hashtag: "hashtag9",
},
{
id: "10",
image:
"https://upload.wikimedia.org/wikipedia/ko/4/4a/%EC%8B%A0%EC%A7%B1%EA%B5%AC.png",
name: "포토베어 ",
title: "제목",
description: "description10",
term: "term10",
hashtag: "hashtag10",
},
{
id: "11",
image:
"https://upload.wikimedia.org/wikipedia/ko/4/4a/%EC%8B%A0%EC%A7%B1%EA%B5%AC.png",
name: "낭만출력소",
title: "test123",
description: "testtestetstewststse",
term: "term11",
hashtag: "hashtag11",
},
];

return (
<Box
sx={{
display: "flex",
justifyContent: "center",
margin: "40px 0px 40px 0px",
minWidth: "90vw",
}}
>
<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.main}`,
fontSize: "18px",
}}
>
이벤트 관리
</Box>
<Box sx={{ display: "flex", gap: "50px" }}>
<SearchInput search={search} setSearch={setSearch} />
<AddButton />
</Box>
</Box>
<Table
columns={tablecolumns}
rows={tablerows}
page={page}
setPage={setPage}
/>
</Box>
</Box>
);
}
4 changes: 2 additions & 2 deletions src/components/event-manage/EventManageForm.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import SideBar from "../reuse/sidebar/SideBar";
import Box from "@mui/material/Box";
import EventManage from "./EventManage";

// 이벤트 관리 페이지
export default function EventManageForm() {
return (
<Box sx={{ display: "flex" }}>
<SideBar />
이벤트 관리 페이지
<EventManage />
</Box>
);
}
Loading

0 comments on commit dc41d28

Please sign in to comment.