-
{items.map((item) => (
-
-
- +
))}
{
- const next = e.target.value.trim();
+ const handleInputChange = (event: ChangeEvent) => {
+ const next = event.target.value.trim();
setContent(next);
};
- const handleEditSubmit = (e) => {
- e.preventDefault();
+ const handleEditSubmit = (event: FormEvent) => {
+ event.preventDefault();
alert(`test : Edit "${content}" from "${data.content.trim()}"`);
onCancel();
};
diff --git a/src/components/FileInput/FileInput.js b/src/components/FileInput/FileInput.tsx
similarity index 66%
rename from src/components/FileInput/FileInput.js
rename to src/components/FileInput/FileInput.tsx
index dfa15bae1..0a40d70ce 100644
--- a/src/components/FileInput/FileInput.js
+++ b/src/components/FileInput/FileInput.tsx
@@ -2,35 +2,51 @@ import { useEffect, useState } from "react";
import "./FileInput.css";
import ic_upload from "../../assets/images/ic_plus.svg";
+interface Image {
+ id: string;
+ image: File;
+}
+
+interface ImagePriview {
+ id: string;
+ src: string;
+}
+
const UPLOAD_LIMIT = 3;
-const PREVIEWS_DEFAULT = [];
+const PREVIEWS_DEFAULT: ImagePriview[] = [];
-function FileInput({ name, value, onChange, onDelete }) {
- const [previews, setPreviews] = useState(PREVIEWS_DEFAULT);
+function FileInput({
+ name,
+ value,
+ onChange,
+ onDelete,
+}: {
+ name: string;
+ value: Image[];
+ onChange: Function;
+ onDelete: Function;
+}) {
+ const [previews, setPreviews] = useState(PREVIEWS_DEFAULT);
- /**
- * 상품 이미지를 추가하기 위한 핸들러.
- * 파일이 업로드될 시 호출된다.
- * @param {Event} e 이벤트 객체
- */
- const handleChange = (e) => {
- if (value.length < UPLOAD_LIMIT) {
+ const handleChange = (event: React.ChangeEvent) => {
+ if (!(event.target instanceof HTMLElement)) return;
+ if (value.length >= UPLOAD_LIMIT) {
alert("상품 이미지는 최대 3개까지 업로드 할 수 있습니다.");
return;
}
- const image = e.target.files[0];
+ const image = event.target.files?.[0];
image && onChange(name, { id: Date.now().toString(), image: image });
};
- const handleDelete = (e) => {
- const id = e.currentTarget.dataset.id;
+ const handleDelete = (event: React.MouseEvent) => {
+ const id = event.currentTarget.dataset.id;
onDelete(name, id, "id");
};
/**
* 미이보기 이미지의 주소를 저장한 배열을 초기화 한다.
*/
- const handlePreviewsClear = () => {
+ const handlePreviewsClear = (): void => {
setPreviews((prev) => {
prev.forEach((img) => {
URL.revokeObjectURL(img.src);
@@ -39,14 +55,14 @@ function FileInput({ name, value, onChange, onDelete }) {
});
};
- useEffect(() => {
+ useEffect((): (() => void) | void => {
if (!Array.isArray(value)) return;
- const nextPreviews = [];
+ const nextPreviews: ImagePriview[] = [];
value.forEach((el) => {
nextPreviews.push({ id: el.id, src: URL.createObjectURL(el.image) });
});
setPreviews(nextPreviews);
- return () => handlePreviewsClear;
+ return () => handlePreviewsClear();
}, [value]);
return (
diff --git a/src/components/ItemDetail/ItemDetail.js b/src/components/ItemDetail/ItemDetail.tsx
similarity index 81%
rename from src/components/ItemDetail/ItemDetail.js
rename to src/components/ItemDetail/ItemDetail.tsx
index 27028f5c2..89ca6787a 100644
--- a/src/components/ItemDetail/ItemDetail.js
+++ b/src/components/ItemDetail/ItemDetail.tsx
@@ -2,8 +2,23 @@ import ic_profile from "../../assets/images/profile.svg";
import ic_favorite from "../../assets/images/ic_heart.svg";
import ic_kebab from "../../assets/images/ic_kebab.svg";
import styles from "./ItemDetail.module.css";
+import img_default from "../../assets/images/thumbnail-placeholder.png";
+import { ProductExtended } from "../../types/Product";
+
+function ItemDetail({
+ className,
+ item,
+}: {
+ className: string;
+ item: ProductExtended;
+}) {
+ const handleErrorLoadingImg = (
+ event: React.SyntheticEvent
+ ) => {
+ const img = event.target as HTMLImageElement;
+ img.src = img_default;
+ };
-function ItemDetail({ className, item }) {
return (
@@ -11,6 +26,7 @@ function ItemDetail({ className, item }) {
className={styles["image"]}
src={item?.images[0]}
alt={item?.name}
+ onError={handleErrorLoadingImg}
/>
diff --git a/src/components/ItemList/ItemList.js b/src/components/ItemList/ItemList.tsx
similarity index 63%
rename from src/components/ItemList/ItemList.js
rename to src/components/ItemList/ItemList.tsx
index b0f910531..1727a36ee 100644
--- a/src/components/ItemList/ItemList.js
+++ b/src/components/ItemList/ItemList.tsx
@@ -1,40 +1,38 @@
import { useEffect, useState } from "react";
-import { getProducts } from "../../api";
-import Item from "../Item/Item";
+import { getProductList } from "../../api";
+import ListItem from "../ListItem/ListItem";
import "./ItemList.css";
import Pagination from "../Pagination/Pagination";
import arrowDown from "../../assets/images/ic_arrow_down.svg";
import ic_sort from "../../assets/images/ic_sort.svg";
import ic_search from "../../assets/images/ic_search.svg";
-import { useDeviceType } from "../../contexts/DeviceTypeContext";
+import { DeviceType, useDeviceType } from "../../contexts/DeviceTypeContext";
import { Link } from "react-router-dom";
+import useAsync from "../../hooks/useAsync";
+import { Product } from "../../types/Product";
const PAGE_SIZE = {
desktop: 12,
tablet: 6,
mobile: 4,
-};
+} as const;
-/**
- * 전체 상품 리스트 컴포넌트다.
- * 키워드 검색, 상품 등록, 조건 검색 기능을 제공한다.
- * @returns 리스트 컴포넌트
- */
function ItemList() {
- const [items, setItems] = useState([]);
- const [page, setPage] = useState(1);
- const [order, setOrder] = useState("recent");
- const [total, setTotal] = useState(0);
+ const [items, setItems] = useState([]);
+ const [page, setPage] = useState(1);
+ const [order, setOrder] = useState("recent");
+ const [total, setTotal] = useState(0);
+ const { execute: getProductsAsync } = useAsync(getProductList);
const deviceType = useDeviceType();
useEffect(() => {
const fetchData = async () => {
- const result = await getProducts(page, PAGE_SIZE[deviceType], order);
+ const result = await getProductsAsync(page, PAGE_SIZE[deviceType], order);
setItems(result.list);
setTotal(result.totalCount);
};
fetchData();
- }, [deviceType, page, order]);
+ }, [deviceType, page, order, getProductsAsync]);
return (
@@ -50,13 +48,15 @@ function ItemList() {
);
}
-/**
- * 전체 상품 페이지의 헤더 컴포넌트
- * @param {Function} setOrder 정렬 조건 세터 함수
- * @returns 헤더 컴포넌트
- * @description 여러 유틸 기능을 포함한 헤더. 키워드 검색, 상품 등록, 검색 조건 셀렉터를 포함하고 있다.
- */
-function Header({ deviceType, order, setOrder }) {
+function Header({
+ deviceType,
+ order,
+ setOrder,
+}: {
+ deviceType: DeviceType;
+ order: string;
+ setOrder: React.Dispatch>;
+}) {
if (deviceType !== "mobile") {
return (
@@ -97,13 +97,29 @@ function Search() {
);
}
-function Select({ deviceType, order, setOrder }) {
- const handleSelectClick = (e) => {
- e.currentTarget.querySelector(".option-wrap").classList.toggle("show");
+function Select({
+ deviceType,
+ order,
+ setOrder,
+}: {
+ deviceType: DeviceType;
+ order: string;
+ setOrder: React.Dispatch>;
+}) {
+ const handleSelectClick = (event: React.MouseEvent) => {
+ const select = event.currentTarget;
+ if (!(select instanceof HTMLElement)) return;
+
+ const option = select.querySelector(".option-wrap");
+ if (!(option instanceof HTMLElement)) return;
+
+ option.classList.toggle("show");
};
- const handleSelectChange = (e) => {
- const orderBy = e.target.dataset.order;
+ const handleSelectChange = (event: React.MouseEvent) => {
+ const option = event.target;
+ if (!(option instanceof HTMLElement)) return;
+ const orderBy = option.dataset.order;
if (orderBy) {
setOrder(orderBy);
}
@@ -131,17 +147,12 @@ function Select({ deviceType, order, setOrder }) {
);
}
-/**
- * 상품 배열을 리스트로 보여주는 컴포넌트
- * @param {Object} items 상품 배열 객체
- * @returns 상품 리스트 컴포넌트
- */
-function Content({ items }) {
+function Content({ items }: { items: Product[] }) {
return (
+ ): void => {
+ const img = event.target as HTMLImageElement;
+ img.src = thumbDefault;
+ };
return (
-
{items.map((item) => (
-
-
- +
))}
- 
+ 
>;
+ pageSize: number;
+ total: number;
+}) {
// 마지막 페이지 번호
- const lastPage = Math.round(total / pageSize) + (total % pageSize > 0);
+ const lastPage = Math.ceil(total / pageSize);
const prev = page - 1;
const next = page + 1;
// 표시할 버튼 번호 배열
const range = getPageButtonRange(page, lastPage);
- /**
- * 페이지네이션 버튼 클릭 이벤트핸들러
- * @param {Event} e 이벤트 객체
- * @description 클릭한 버튼의 value 속성에 해당하는 페이지로 이동
- */
- const handlePageClick = (e) => {
- const data = e.target.dataset.page;
- console.log(data);
+ const handlePageClick = (event: React.MouseEvent) => {
+ if (!(event.target instanceof HTMLElement)) {
+ alert("페이지 선택 중 오류가 발생했습니다!");
+ return;
+ }
+
+ const data = event.target.dataset.page;
+
const targetPage = Number(data);
if (!targetPage) {
console.log("paginattion err 1");
@@ -105,14 +101,7 @@ function Pagination({ page, setPage, pageSize, total }) {
);
}
-/**
- * 페이지를 이동할 수 있는 버튼 컴포넌트
- * @param {Number} page 이 버튼에 해당하는 페이지
- * @param {Number} current 현재 사용자가 보고 있는 페이지
- * @returns 버튼 컴포넌트
- * @description 현재 페이지와 컴포넌트가 가리키는 페이지가 일치할 경우 강조된 버튼 반환
- */
-function PageButton({ page, current }) {
+function PageButton({ page, current }: { page: number; current: number }) {
const isCurrent = page === current ? "current" : "";
return (
{item.name}
{`${item.price}원`}
@@ -32,4 +42,4 @@ function Item({ item, type = null }) {
);
}
-export default Item;
+export default ListItem;
diff --git a/src/components/Pagination/Pagination.js b/src/components/Pagination/Pagination.tsx
similarity index 64%
rename from src/components/Pagination/Pagination.js
rename to src/components/Pagination/Pagination.tsx
index eddd0832d..5d3a8e76b 100644
--- a/src/components/Pagination/Pagination.js
+++ b/src/components/Pagination/Pagination.tsx
@@ -4,13 +4,7 @@ import arrowRight from "../../assets/images/arrow_right.svg";
import arrowLeftDouble from "../../assets/images/arrow_left_double.svg";
import arrowRightDouble from "../../assets/images/arrow_right_double.svg";
-/**
- * 렌더링할 페이지 번호 배열을 반환하는 함수
- * @param {Number} page 현재 페이지 번호
- * @param {Number} lastPage 마지막 페이지 번호
- * @return {Object} 버튼 번호 배열
- */
-function getPageButtonRange(page, lastPage) {
+function getPageButtonRange(page: number, lastPage: number) {
// 표시할 최대 버튼 수
const RANGE_WIDTH = 5;
const RANGE_WIDTH_HALF = 2;
@@ -40,30 +34,32 @@ function getPageButtonRange(page, lastPage) {
return range;
}
-/**
- *페이지네이션 컴포넌트
- * @param {Number} page 현재 페이지 번호
- * @param {Function} setPage 페이지 세터 함수
- * @param {Number} pageSize 페이지당 상품 수
- * @param {Number} total 총 상품 수
- * @returns 페이지네이션 컴포넌트 반환
- */
-function Pagination({ page, setPage, pageSize, total }) {
+function Pagination({
+ page,
+ setPage,
+ pageSize,
+ total,
+}: {
+ page: number;
+ setPage: React.Dispatch