Skip to content

Commit

Permalink
Merge pull request #978 from 42organization/GGFE-199-관리자-아이템-조회-수정-ap…
Browse files Browse the repository at this point in the history 
…i-연결

[GGFE-199] 관리자 상점관리 - 아이템 조회 수정 api 연결
  • Loading branch information
@PHJoon
PHJoon authored Sep 6, 2023
2 parents 7b1824a + 7d83e4c commit 1d0bf3e
Show file tree
Hide file tree
Showing 12 changed files with 285 additions and 128 deletions.
40 changes: 27 additions & 13 deletions components/admin/store/ItemList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,11 @@ import {
TableRow,
} from '@mui/material';
import { Item, ItemList } from 'types/itemTypes';
import { mockInstance } from 'utils/mockAxios';
import { instance } from 'utils/axios';
import { modalState } from 'utils/recoil/modal';
import { toastState } from 'utils/recoil/toast';
import { tableFormat } from 'constants/admin/table';
import {
AdminContent,
AdminEmptyItem,
AdminTableHead,
} from 'components/admin/common/AdminTable';
Expand All @@ -34,19 +33,16 @@ const tableTitle: { [key: string]: string } = {
delete: '삭제',
};

const MAX_CONTENT_LENGTH = 15;

function ItemList() {
const [itemListData, setItemListData] = useState<ItemList>({
itemList: [],
});
const setModal = useSetRecoilState(modalState);
const setSnackBar = useSetRecoilState(toastState);

// api 연결 시 instanceInManage로 변경
const getItemListHandler = useCallback(async () => {
try {
const res = await mockInstance.get(`items/store`);
const res = await instance.get(`/pingpong/items/store`);
setItemListData(res.data);
} catch (e: unknown) {
setSnackBar({
Expand All @@ -72,6 +68,14 @@ function ItemList() {
});
};

const openDetailModal = (item: Item) => {
setModal({
modalName: 'ADMIN-DETAIL_CONTENT',
detailTitle: item.mainContent,
detailContent: item.subContent,
});
};

useEffect(() => {
getItemListHandler();
}, []);
Expand All @@ -90,11 +94,26 @@ function ItemList() {
<TableCell className={styles.tableBodyItem} key={index}>
{columnName === 'imageUri' ? (
<Image
src={item[columnName]}
src={
item.imageUri
? item[columnName]
: '/public/image/fallBackSrc.jpeg'
}
alt='Item Iamge'
width={30}
height={30}
/>
) : columnName === 'content' ? (
<div>
{item.mainContent}
<br />
<span
style={{ cursor: 'pointer', color: 'grey' }}
onClick={() => openDetailModal(item)}
>
...더보기
</span>
</div>
) : columnName === 'edit' ? (
<button
className={styles.editBtn}
Expand All @@ -110,12 +129,7 @@ function ItemList() {
삭제
</button>
) : (
<AdminContent
content={item[columnName as keyof Item].toString()}
maxLen={MAX_CONTENT_LENGTH}
detailTitle={item.itemName}
detailContent={item.mainContent}
/>
item[columnName as keyof Item]?.toString()
)}
</TableCell>
);
Expand Down
54 changes: 35 additions & 19 deletions components/admin/store/itemHistory.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,12 @@ import {
TableRow,
} from '@mui/material';
import { IitemHistory, IitemHistoryList } from 'types/admin/adminStoreTypes';
import { instanceInManage } from 'utils/axios';
import { dateToStringShort } from 'utils/handleTime';
import { mockInstance } from 'utils/mockAxios';
import { modalState } from 'utils/recoil/modal';
import { toastState } from 'utils/recoil/toast';
import { tableFormat } from 'constants/admin/table';
import {
AdminContent,
AdminEmptyItem,
AdminTableHead,
} from 'components/admin/common/AdminTable';
Expand All @@ -24,8 +24,8 @@ import styles from 'styles/admin/store/ItemHistory.module.scss';

const tableTitle: { [key: string]: string } = {
itemId: 'ID',
createdAt: '변경 시간',
itemName: '이름',
createdAt: '변경일',
name: '이름',
content: '설명',
imageUri: '이미지',
price: '원가',
Expand All @@ -35,8 +35,6 @@ const tableTitle: { [key: string]: string } = {
visible: '상점 노출',
};

const MAX_CONTENT_LENGTH = 16;

function ItemHistory() {
const [itemHistoryData, setItemHistoryData] = useState<IitemHistoryList>({
itemHistoryList: [],
Expand All @@ -45,15 +43,15 @@ function ItemHistory() {
});
const [currentPage, setCurrentPage] = useState<number>(1);
const setSnackBar = useSetRecoilState(toastState);
const setModal = useSetRecoilState(modalState);

// instanceInManage로 변경
const getItemHistoryListHandler = useCallback(async () => {
try {
const res = await mockInstance.get(
`/admin/items/history?page=${currentPage}&size=5`
const res = await instanceInManage.get(
`/items/history?page=${currentPage}&size=5`
);
setItemHistoryData({
itemHistoryList: res.data.itemHistoryList.map(
itemHistoryList: res.data.historyList.map(
(itemHistory: IitemHistory) => {
return {
...itemHistory,
Expand All @@ -74,6 +72,14 @@ function ItemHistory() {
}
}, [currentPage]);

const openDetailModal = (itemHistory: IitemHistory) => {
setModal({
modalName: 'ADMIN-DETAIL_CONTENT',
detailTitle: itemHistory.mainContent,
detailContent: itemHistory.subContent,
});
};

useEffect(() => {
getItemHistoryListHandler();
}, [currentPage]);
Expand All @@ -100,20 +106,30 @@ function ItemHistory() {
>
{columnName === 'imageUri' ? (
<Image
src={itemHistory[columnName]}
src={
itemHistory.imageUri
? itemHistory[columnName]
: '/public/image/fallBackSrc.jpeg'
}
width={30}
height={30}
alt='no'
/>
) : columnName === 'content' ? (
<div>
{itemHistory.mainContent}
<br />
<span
style={{ cursor: 'pointer', color: 'grey' }}
onClick={() => openDetailModal(itemHistory)}
>
...더보기
</span>
</div>
) : (
<AdminContent
content={itemHistory[
columnName as keyof IitemHistory
].toString()}
maxLen={MAX_CONTENT_LENGTH}
detailTitle={itemHistory.itemName}
detailContent={itemHistory.content}
/>
itemHistory[
columnName as keyof IitemHistory
]?.toString()
)}
</TableCell>
);
Expand Down
57 changes: 37 additions & 20 deletions components/modal/admin/AdminDeleteItem.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,22 @@
import { useRecoilValue, useSetRecoilState } from 'recoil';
import { useSetRecoilState } from 'recoil';
import { Item } from 'types/itemTypes';
import { mockInstance } from 'utils/mockAxios';
import { userState } from 'utils/recoil/layout';
import { instanceInManage } from 'utils/axios';
import { modalState } from 'utils/recoil/modal';
import { toastState } from 'utils/recoil/toast';
import styles from 'styles/admin/modal/AdminDeleteItem.module.scss';

export default function AdminDeleteItemModal(props: Item) {
const { itemId, itemName, mainContent } = props;
const { itemId, itemName, mainContent, subContent } = props;
const setModal = useSetRecoilState(modalState);
const setSnackBar = useSetRecoilState(toastState);
const user = useRecoilValue(userState).intraId;

// instanceInManage로 변경
// delete에 body 담기
const deleteItemHandler = async (itemId: number) => {
try {
await mockInstance.delete(`/admin/items/${itemId}`, {
data: { deleterIntraId: user },
});
await instanceInManage.delete(`/items/${itemId}`);
setSnackBar({
toastName: 'delete item',
severity: 'success',
message: `${itemId}번 ${name}이 삭제되었습니다!`,
message: `${itemId}번 ${itemName}이 삭제되었습니다!`,
clicked: true,
});
} catch (e: unknown) {
Expand All @@ -44,18 +38,41 @@ export default function AdminDeleteItemModal(props: Item) {
</div>
<div className={styles.body}>
<div className={styles.bodyWrap}>
<div className={styles.intraWrap}>
<div className={styles.bodyText}>아이템명 :</div>
<input className={styles.intraBlank} value={itemName} readOnly />
</div>
<div className={styles.contentWrap}>
<div className={styles.bodyText}>설명 :</div>
<textarea
className={styles.contentBlank}
value={mainContent}
<div className={styles.itemWrap}>
<label htmlFor='itemName' className={styles.bodyText}>
아이템명 :
</label>
<input
id='itemName'
className={styles.itemBlank}
value={itemName}
readOnly
/>
</div>
<div className={styles.contentWrap}>
<div className={styles.mainContentWrap}>
<label htmlFor='itemMainContent' className={styles.bodyText}>
주설명 :
</label>
<input
id='itemMainContent'
className={styles.mainContentBlank}
value={mainContent}
readOnly
/>
</div>
<div className={styles.subContentWrap}>
<label htmlFor='itemSubContent' className={styles.bodyText}>
부설명 :
</label>
<textarea
id='itemSubContent'
className={styles.subContentBlank}
value={subContent}
readOnly
/>
</div>
</div>
<div className={styles.checkWrap}>
{itemId} 번 아이템을 삭제하시겠습니까?
</div>
Expand Down
Loading

0 comments on commit 1d0bf3e

Please sign in to comment.