{fetchingError && fetchingError.message}
- {itemList?.map((item) => (
+ {itemList?.map((item: any) => (
- {} }) {
- const handleErrorImage = (e) => {
- e.target.src = ImgDefault;
+interface ItemProps {
+ item: any;
+ handleClick: (e: React.MouseEvent
) => void;
+}
+
+function Item({ item, handleClick }: ItemProps) {
+ const handleErrorImage = (
+ e: React.SyntheticEvent
+ ) => {
+ (e.target as HTMLImageElement).src = ImgDefault;
};
return (
@@ -19,7 +25,7 @@ function Item({ item, handleClick = () => {} }) {
diff --git a/src/components/items/ItemInfo/ItemInfo.jsx b/src/components/items/ItemInfo/ItemInfo.tsx
similarity index 91%
rename from src/components/items/ItemInfo/ItemInfo.jsx
rename to src/components/items/ItemInfo/ItemInfo.tsx
index 5f5722dce..c561ea746 100644
--- a/src/components/items/ItemInfo/ItemInfo.jsx
+++ b/src/components/items/ItemInfo/ItemInfo.tsx
@@ -4,6 +4,15 @@ import HorizontalLine from '../../../core/ui/lines/HorizontalLine/HorizontalLine
import TagList from '../../../core/ui/tags/TagList/TagList';
import styles from './ItemInfo.module.scss';
+interface ItemInfoProps {
+ itemImgSrc: string;
+ itemTitle: string;
+ itemPrice: number;
+ itemDesc: string;
+ itemTags: string[];
+ itemFavoriteCount: number;
+}
+
function ItemInfo({
itemImgSrc = '',
itemTitle = '',
@@ -11,7 +20,7 @@ function ItemInfo({
itemDesc = '',
itemTags = [],
itemFavoriteCount = 0,
-}) {
+}: ItemInfoProps) {
return (
<>
{item.name}
{item.price.toLocaleString()}원
-
diff --git a/src/components/items/PaginationBar/PaginationBar.jsx b/src/components/items/PaginationBar/PaginationBar.tsx
similarity index 71%
rename from src/components/items/PaginationBar/PaginationBar.jsx
rename to src/components/items/PaginationBar/PaginationBar.tsx
index 4060b546a..4d6f6dacc 100644
--- a/src/components/items/PaginationBar/PaginationBar.jsx
+++ b/src/components/items/PaginationBar/PaginationBar.tsx
@@ -1,9 +1,18 @@
-import React from 'react';
+// import { ReactComponent as IconArrowLeft } from '../../../assets/images/icons/arrow_left.svg';
+// import { ReactComponent as IconArrowRight } from '../../../assets/images/icons/arrow_right.svg';
import './PaginatinoBar.css';
-import { ReactComponent as IconArrowLeft } from '../../../assets/images/icons/arrow_left.svg';
-import { ReactComponent as IconArrowRight } from '../../../assets/images/icons/arrow_right.svg';
-function PaginationBar({ totalPageNum, activePageNum, onPageChange }) {
+interface PaginatinoBarProps {
+ totalPageNum: number;
+ activePageNum: number;
+ onPageChange: (i: number) => void;
+}
+
+function PaginationBar({
+ totalPageNum,
+ activePageNum,
+ onPageChange,
+}: PaginatinoBarProps) {
const maxVisiblePages = 5;
let startPage;
@@ -26,7 +35,7 @@ function PaginationBar({ totalPageNum, activePageNum, onPageChange }) {
disabled={activePageNum === 1}
onClick={() => onPageChange(activePageNum - 1)}
>
-
diff --git a/src/components/items/SellingItems/SellingItems.jsx b/src/components/items/SellingItems/SellingItems.tsx
similarity index 76%
rename from src/components/items/SellingItems/SellingItems.jsx
rename to src/components/items/SellingItems/SellingItems.tsx
index e3c385125..f0e819fe0 100644
--- a/src/components/items/SellingItems/SellingItems.jsx
+++ b/src/components/items/SellingItems/SellingItems.tsx
@@ -1,12 +1,16 @@
-import { ReactComponent as IconSearch } from '../../../assets/images/icons/ic_search.svg';
-import { ReactComponent as IconSort } from '../../../assets/images/icons/ic_sort.svg';
+// import { ReactComponent as IconSearch } from '../../../assets/images/icons/ic_search.svg';
+// import { ReactComponent as IconSort } from '../../../assets/images/icons/ic_sort.svg';
import { useEffect, useState } from 'react';
-import { getProducts } from '../../../pages/api/Items';
+import { getProducts, GetProductsProps } from '../../../pages/api/Items';
import Item from '../Item/Item';
import PaginationBar from '../PaginationBar/PaginationBar';
import './SellingItems.css';
import { useNavigate } from 'react-router-dom';
+interface Item {
+ id: number;
+}
+
const getPageSize = () => {
const width = window.innerWidth;
if (width < 768) {
@@ -20,44 +24,57 @@ const getPageSize = () => {
function SellingItems() {
// 상품
- const [itemList, setItemList] = useState([]);
+ const [itemList, setItemList] = useState
-
diff --git a/src/components/navigationBar/NavigationBar.jsx b/src/components/navigationBar/NavigationBar.tsx
similarity index 100%
rename from src/components/navigationBar/NavigationBar.jsx
rename to src/components/navigationBar/NavigationBar.tsx
diff --git a/src/core/ui/buttons/Button/Button.jsx b/src/core/ui/buttons/Button/Button.tsx
similarity index 55%
rename from src/core/ui/buttons/Button/Button.jsx
rename to src/core/ui/buttons/Button/Button.tsx
index cba8102f7..603d4d881 100644
--- a/src/core/ui/buttons/Button/Button.jsx
+++ b/src/core/ui/buttons/Button/Button.tsx
@@ -1,18 +1,27 @@
import { useEffect, useRef } from 'react';
-
import './Button.css';
+
+interface ButtonProps {
+ text?: string;
+ onClick?: (e: React.MouseEvent) => void;
+ isDisabled?: boolean;
+ iconFront?: React.ReactNode;
+ iconBack?: React.ReactNode;
+}
+
function Button({
text = '버튼',
onClick = () => {},
isDisabled = false,
iconFront,
iconBack,
- customBorderRound,
-}) {
- const ref = useRef();
+}: ButtonProps) {
+ const ref = useRef(null);
useEffect(() => {
- ref.current.disabled = isDisabled ? true : false;
+ if (ref.current) {
+ ref.current.disabled = isDisabled;
+ }
}, [isDisabled]);
return (
diff --git a/src/core/ui/buttons/FavoriteButton/FavoriteButton.jsx b/src/core/ui/buttons/FavoriteButton/FavoriteButton.tsx
similarity index 79%
rename from src/core/ui/buttons/FavoriteButton/FavoriteButton.jsx
rename to src/core/ui/buttons/FavoriteButton/FavoriteButton.tsx
index 09417d2cf..ead0ed6a3 100644
--- a/src/core/ui/buttons/FavoriteButton/FavoriteButton.jsx
+++ b/src/core/ui/buttons/FavoriteButton/FavoriteButton.tsx
@@ -1,5 +1,5 @@
import { useState } from 'react';
-import { ReactComponent as IconHeart } from '../../../../assets/images/icons/ic_heart.svg';
+// import { ReactComponent as IconHeart } from '../../../../assets/images/icons/ic_heart.svg';
import styles from './FavoriteButton.module.scss';
function FavoriteButton({ initCount = 0 }) {
@@ -13,7 +13,7 @@ function FavoriteButton({ initCount = 0 }) {
<>
diff --git a/src/core/ui/cards/ImageCard/ImageCard.jsx b/src/core/ui/cards/ImageCard/ImageCard.tsx
similarity index 72%
rename from src/core/ui/cards/ImageCard/ImageCard.jsx
rename to src/core/ui/cards/ImageCard/ImageCard.tsx
index 5932de1cb..e48379ae6 100644
--- a/src/core/ui/cards/ImageCard/ImageCard.jsx
+++ b/src/core/ui/cards/ImageCard/ImageCard.tsx
@@ -1,12 +1,19 @@
import styles from './ImageCard.module.scss';
import errImg from '../../../../assets/images/market/img_default.png';
+interface ImageCardProps {
+ imageSrc: string;
+ ImgDeafault?: string;
+ isRoundEdged?: boolean;
+ isRound?: boolean;
+}
+
function ImageCard({
imageSrc,
ImgDeafault,
isRoundEdged = false,
isRound = false,
-}) {
+}: ImageCardProps) {
return (
<>
@@ -18,7 +25,8 @@ function ImageCard({
`}
alt="상품 사진"
onError={(e) => {
- e.target.src = errImg;
+ const target = e.target as HTMLImageElement;
+ target.src = errImg;
}}
/>
diff --git a/src/core/ui/comments/CommentItem/CommentItem.jsx b/src/core/ui/comments/CommentItem/CommentItem.tsx
similarity index 87%
rename from src/core/ui/comments/CommentItem/CommentItem.jsx
rename to src/core/ui/comments/CommentItem/CommentItem.tsx
index a92d5cd85..aeb3541b9 100644
--- a/src/core/ui/comments/CommentItem/CommentItem.jsx
+++ b/src/core/ui/comments/CommentItem/CommentItem.tsx
@@ -1,12 +1,19 @@
import ImageCard from '../../cards/ImageCard/ImageCard';
import styles from './CommentItem.module.scss';
+interface CommentItemProps {
+ profileImageSrc: string;
+ nickname: string;
+ content: string;
+ updatedAt: string;
+}
+
export default function CommentItem({
profileImageSrc,
nickname = 'nickname',
content = 'content',
updatedAt = '0시간 전',
-}) {
+}: CommentItemProps) {
return (
<>
diff --git a/src/core/ui/comments/CommentList/CommentList.jsx b/src/core/ui/comments/CommentList/CommentList.tsx
similarity index 89%
rename from src/core/ui/comments/CommentList/CommentList.jsx
rename to src/core/ui/comments/CommentList/CommentList.tsx
index 05bfe9a99..82e05b4dc 100644
--- a/src/core/ui/comments/CommentList/CommentList.jsx
+++ b/src/core/ui/comments/CommentList/CommentList.tsx
@@ -2,12 +2,19 @@ import HorizontalLine from '../../lines/HorizontalLine/HorizontalLine';
import CommentItem from '../CommentItem/CommentItem';
import styles from './CommentList.module.scss';
+interface CommentListProps {
+ initCommentCount?: number;
+ comments?: any[];
+ emptyIcon?: any;
+ emptyMessage?: string;
+}
+
export default function CommentList({
initCommentCount = 3,
comments = [],
emptyIcon,
emptyMessage = '',
-}) {
+}: CommentListProps) {
return (
<>
diff --git a/src/core/ui/inputs/ImageFileInput/ImageFileInput.jsx b/src/core/ui/inputs/ImageFileInput/ImageFileInput.tsx
similarity index 75%
rename from src/core/ui/inputs/ImageFileInput/ImageFileInput.jsx
rename to src/core/ui/inputs/ImageFileInput/ImageFileInput.tsx
index 8aaa2e6f6..9dc1c25f4 100644
--- a/src/core/ui/inputs/ImageFileInput/ImageFileInput.jsx
+++ b/src/core/ui/inputs/ImageFileInput/ImageFileInput.tsx
@@ -1,20 +1,29 @@
import { useEffect, useRef, useState } from 'react';
-import { ReactComponent as IconUnion } from '../../../../assets/images/icons/ic_union.svg';
-import { ReactComponent as IconX } from '../../../../assets/images/icons/ic_X.svg';
+// import { ReactComponent as IconUnion } from '../../../../assets/images/icons/ic_union.svg';
+// import { ReactComponent as IconX } from '../../../../assets/images/icons/ic_X.svg';
import ImgDeafault from '../../../../assets/images/market/img_default.png';
import './ImageFileInput.css';
+
+interface ImageFileInputProps {
+ className?: string;
+ name: string;
+ value: Blob | MediaSource;
+ initialPreview: string;
+ onChange: (name: string, value: any) => void;
+}
+
function ImageFileInput({
className = '',
name,
value,
initialPreview,
onChange,
-}) {
+}: ImageFileInputProps) {
const [preview, setPreview] = useState(initialPreview);
- const inputRef = useRef();
+ const inputRef = useRef(null);
- const handleChange = (e) => {
- const nextValue = e.target.files[0];
+ const handleChange = (e: React.ChangeEvent) => {
+ const nextValue = e.target.files?.[0] || null;
onChange(name, nextValue);
};
@@ -42,10 +51,10 @@ function ImageFileInput({
{/* 추가 버튼 */}
@@ -71,10 +80,10 @@ function ImageFileInput({
className="btn-delete-input-image-file"
onClick={handleClearClick}
>
- ['type'];
+ placeholder: string;
+ isLabelVisible: boolean;
+}
+
export default function SimpleInput({
lable = '',
name = '',
diff --git a/src/core/ui/inputs/TagInput/TagInput.jsx b/src/core/ui/inputs/TagInput/TagInput.tsx
similarity index 66%
rename from src/core/ui/inputs/TagInput/TagInput.jsx
rename to src/core/ui/inputs/TagInput/TagInput.tsx
index 817f7a2f7..53c4345ce 100644
--- a/src/core/ui/inputs/TagInput/TagInput.jsx
+++ b/src/core/ui/inputs/TagInput/TagInput.tsx
@@ -1,16 +1,30 @@
import { useState } from 'react';
import './TagInput.css';
-function TagInput({ className = '', name, tags = [], onAdd, onRemove }) {
+interface TagInputProps {
+ className: string;
+ name: string;
+ tags: string[];
+ onAdd: (text: string) => void;
+ onRemove: (text: string) => void;
+}
+
+function TagInput({
+ className = '',
+ name,
+ tags = [],
+ onAdd,
+ onRemove,
+}: TagInputProps) {
const [targetText, setTargetText] = useState('');
- const handleChange = (e) => {
+ const handleChange = (e: React.ChangeEvent) => {
const { value } = e.target;
if (!value.trim()) return;
setTargetText(value);
};
- const handlePress = (e) => {
+ const handlePress = (e: React.KeyboardEvent) => {
if (e.key === 'Enter' && targetText) {
e.preventDefault();
onAdd(targetText.trim());
@@ -18,8 +32,8 @@ function TagInput({ className = '', name, tags = [], onAdd, onRemove }) {
}
};
- const handleDeleteTag = (e) => {
- onRemove(e.currentTarget.parentNode.dataset.tagName);
+ const handleDeleteTag = (e: React.MouseEvent) => {
+ onRemove((e.currentTarget.parentNode as HTMLElement).dataset.tagName || '');
};
return (
@@ -37,7 +51,7 @@ function TagInput({ className = '', name, tags = [], onAdd, onRemove }) {
/>
{tags.length > 0 && (
- {tags.map((tag, i) => (
+ {tags.map((tag: string, i: number) => (
{tags.length > 0 && (
- {tags.map((tag, i) => (
+ {tags.map((tag: string, i: number) => (
>;
+ const src: string;
+ export default src;
+}
diff --git a/src/lib/items/hooks/useItem.js b/src/lib/items/hooks/useItem.ts
similarity index 64%
rename from src/lib/items/hooks/useItem.js
rename to src/lib/items/hooks/useItem.ts
index 499fea4ea..cd98f2e49 100644
--- a/src/lib/items/hooks/useItem.js
+++ b/src/lib/items/hooks/useItem.ts
@@ -7,14 +7,14 @@ import { getProductById } from '../../../pages/api/Items';
* @param {array} deps
* @returns [imgSrc, title, price, desc, tags, favoriteCount]
*/
-export function useItem(productId = 0, deps = []) {
- const [imgSrc, setImgSrc] = useState('');
- const [title, setTitle] = useState('');
- const [price, setPrice] = useState(0);
- const [desc, setDesc] = useState('');
- const [tags, setTags] = useState([]);
- const [isFavorite, setIsFavorite] = useState(false);
- const [favoriteCount, setFavoriteCount] = useState(0);
+export function useItem(productId: number = 0, deps: any[] = []) {
+ const [imgSrc, setImgSrc] = useState('');
+ const [title, setTitle] = useState('');
+ const [price, setPrice] = useState(0);
+ const [desc, setDesc] = useState('');
+ const [tags, setTags] = useState([]);
+ const [isFavorite, setIsFavorite] = useState(false);
+ const [favoriteCount, setFavoriteCount] = useState(0);
const fetchProduct = async () => {
try {
@@ -44,5 +44,5 @@ export function useItem(productId = 0, deps = []) {
fetchProduct();
}, deps);
- return [imgSrc, title, price, desc, tags, isFavorite, favoriteCount];
+ return { imgSrc, title, price, desc, tags, isFavorite, favoriteCount };
}
diff --git a/src/lib/items/hooks/useItemComments.js b/src/lib/items/hooks/useItemComments.ts
similarity index 73%
rename from src/lib/items/hooks/useItemComments.js
rename to src/lib/items/hooks/useItemComments.ts
index 4acf5e4d2..8cfdc2344 100644
--- a/src/lib/items/hooks/useItemComments.js
+++ b/src/lib/items/hooks/useItemComments.ts
@@ -1,13 +1,25 @@
import { useEffect, useState } from 'react';
import { getCommentsByProductId } from '../../../pages/api/Items';
+interface useItemCommentsProps {
+ productId: number;
+ limit: number;
+ cursor: string;
+ deps: any[];
+}
+
/**
*
* @param {number} productId
* @param {array} deps
* @returns [imgSrc, title, price, desc, tags, favoriteCount]
*/
-export function useItemComments(productId = 0, limit = 1, cursor, deps = []) {
+export function useItemComments({
+ productId = 0,
+ limit = 1,
+ cursor,
+ deps = [],
+}: useItemCommentsProps) {
const [comments, setComments] = useState([]);
const [nextCursor, setNextCursor] = useState(null);
@@ -27,5 +39,5 @@ export function useItemComments(productId = 0, limit = 1, cursor, deps = []) {
fetchData();
}, deps);
- return [comments, nextCursor];
+ return { comments, nextCursor };
}
diff --git a/src/index.js b/src/main.tsx
similarity index 65%
rename from src/index.js
rename to src/main.tsx
index 593edf121..dcd8c1890 100644
--- a/src/index.js
+++ b/src/main.tsx
@@ -2,7 +2,9 @@ import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
-const root = ReactDOM.createRoot(document.getElementById('root'));
+const root = ReactDOM.createRoot(
+ document.getElementById('root') as ReactDOM.Container
+);
root.render(
('');
const [isAllValid, setIsAllValid] = useState(false);
- const handleChange = (name, value) => {
+ const handleChange = (name: string, value: any) => {
setValues((prevValues) => ({
...prevValues,
[name]: value,
@@ -34,12 +42,14 @@ function AddItems() {
}
};
- const handleInputChange = (e) => {
+ const handleInputChange = (
+ e: React.ChangeEvent
+ ) => {
const { name, value } = e.target;
handleChange(name, value);
};
- const addTag = (tag) => {
+ const addTag = (tag: string) => {
if (!values.tags.includes(tag)) {
handleChange(
'tags',
@@ -48,7 +58,7 @@ function AddItems() {
}
};
- const removeTag = (targetTag) => {
+ const removeTag = (targetTag: string) => {
// setValues(
// 'tags',
// values.tags.filter((tag) => tag !== targetTag)
@@ -59,7 +69,11 @@ function AddItems() {
);
};
- const handleSubmit = (e) => {
+ const handleSubmit = (
+ e:
+ | React.MouseEvent
+ | React.FormEvent
+ ) => {
e.preventDefault();
};
diff --git a/src/pages/api/Items.js b/src/pages/api/Items.ts
similarity index 92%
rename from src/pages/api/Items.js
rename to src/pages/api/Items.ts
index f817da1fd..2933108dd 100644
--- a/src/pages/api/Items.js
+++ b/src/pages/api/Items.ts
@@ -1,5 +1,12 @@
const BASE_URL = 'https://panda-market-api.vercel.app';
+export interface GetProductsProps {
+ order: 'recent' | 'favorite';
+ page: number;
+ pageSize: number;
+ keyword?: string;
+}
+
/**
* 상품 목록 조회
* @param {string} order 정렬 기준: recent, favorite
@@ -30,7 +37,7 @@ export async function getProducts({
page, // 페이지 번호
pageSize, // 페이지 당 상품 수
keyword, // 검색 키워드
-}) {
+}: GetProductsProps) {
const query = `orderBy=${order}&page=${page}&pageSize=${pageSize}&keyword=${keyword}`;
const response = await fetch(`${BASE_URL}/products?${query}`);
if (!response.ok) {
@@ -71,7 +78,7 @@ export async function getProductById(productId = 0) {
export async function getCommentsByProductId(
productId = 0,
limit = 1,
- nextCursor
+ nextCursor: string
) {
const param = `${productId}`;
let query = `?limit=${limit}`;
diff --git a/src/pages/faq/Faq.jsx b/src/pages/faq/Faq.tsx
similarity index 100%
rename from src/pages/faq/Faq.jsx
rename to src/pages/faq/Faq.tsx
diff --git a/src/pages/home/Home.jsx b/src/pages/home/Home.tsx
similarity index 100%
rename from src/pages/home/Home.jsx
rename to src/pages/home/Home.tsx
index 1dee4e3d6..b4bccee0b 100644
--- a/src/pages/home/Home.jsx
+++ b/src/pages/home/Home.tsx
@@ -1,4 +1,3 @@
-import './Home.css';
import imgPandaMarketLogo from '../../assets/images/logo/panda-market-logo.png';
import imgFeature1 from '../../assets/images/home/feature1-image.png';
import imgFeatureSearch from '../../assets/images/home/feature-search-img.png';
@@ -7,6 +6,7 @@ import imgFacebookLogo from '../../assets/images/social/facebook-logo.svg';
import imgTwitterLogo from '../../assets/images/social/twitter-logo.svg';
import imgYoutubeLogo from '../../assets/images/social/youtube-logo.svg';
import imgInstagramLogo from '../../assets/images/social/instagram-logo.svg';
+import './Home.css';
function Home() {
return (
diff --git a/src/pages/itemDetail/ItemDetail.jsx b/src/pages/itemDetail/ItemDetail.tsx
similarity index 79%
rename from src/pages/itemDetail/ItemDetail.jsx
rename to src/pages/itemDetail/ItemDetail.tsx
index 29208419d..bf59b3695 100644
--- a/src/pages/itemDetail/ItemDetail.jsx
+++ b/src/pages/itemDetail/ItemDetail.tsx
@@ -4,22 +4,27 @@ import ItemInfo from '../../components/items/ItemInfo/ItemInfo';
import HorizontalLine from '../../core/ui/lines/HorizontalLine/HorizontalLine';
import Button from '../../core/ui/buttons/Button/Button';
import CommentList from '../../core/ui/comments/CommentList/CommentList';
-import { ReactComponent as IconBack } from '../../assets/images/icons/ic_back.svg';
-import { ReactComponent as IconEmptyComment } from '../../assets/images/icons/ic_inquiry_empty.svg';
-import styles from './ItemDetail.module.scss';
+// import { ReactComponent as IconBack } from '../../assets/images/icons/ic_back.svg';
+// import { ReactComponent as IconEmptyComment } from '../../assets/images/icons/ic_inquiry_empty.svg';
import { useItemComments } from '../../lib/items/hooks/useItemComments';
import SimpleInput from '../../core/ui/inputs/SimpleInput/SimpleInput';
+import styles from './ItemDetail.module.scss';
function ItemDetail() {
- const { productId } = useParams();
+ const { productId } = useParams();
const navigate = useNavigate();
- const [imgSrc, title, price, desc, tags, isFavorite, favoriteCount] = useItem(
- productId,
+ const { imgSrc, title, price, desc, tags, favoriteCount } = useItem(
+ Number(productId),
[]
);
- const [comments, nextCursor] = useItemComments(productId, 3, undefined, []);
+ const { comments } = useItemComments({
+ productId: Number(productId),
+ limit: 3,
+ cursor: '',
+ deps: [],
+ });
return (
<>
@@ -56,13 +61,13 @@ function ItemDetail() {
}
+ // iconBack={
-
+
+