{productStatus}
;
+}
diff --git a/src/components/productItem.tsx b/src/components/productItem.tsx
index 5bdf131..638bc8e 100644
--- a/src/components/productItem.tsx
+++ b/src/components/productItem.tsx
@@ -2,6 +2,7 @@ import '@/styles/components/productItem.scss';
import { IProduct } from '@/types/interface';
import { AiOutlineHeart, AiFillHeart } from 'react-icons/ai';
import { useRouter } from 'next/navigation';
+import ProductBadge from './productBadge';
export default function ProductItem({ product }: { product: IProduct }) {
const router = useRouter();
@@ -17,6 +18,12 @@ export default function ProductItem({ product }: { product: IProduct }) {
{product.title}
{product.price}원
+ {product.status === '예약중' && (
+
{product.like ?
diff --git a/src/templates/login/loginPage.tsx b/src/templates/login/loginPage.tsx
index 2d378e5..5b71a40 100644
--- a/src/templates/login/loginPage.tsx
+++ b/src/templates/login/loginPage.tsx
@@ -10,10 +10,6 @@ import { postAuth } from '@/api/service';
export default function LoginPage() {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
- const [errors, setErrors] = useState<{ email: string; password: string }>({
- email: '',
- password: '',
- });
const [isLogin, setIsLogin] = useState(false);
const router = useRouter();
diff --git a/src/templates/mypage/mypageEdit.tsx b/src/templates/mypage/mypageEdit.tsx
new file mode 100644
index 0000000..9dcdf4d
--- /dev/null
+++ b/src/templates/mypage/mypageEdit.tsx
@@ -0,0 +1,128 @@
+'use client';
+import { getMyInfo, putEditProfile } from '@/api/service';
+import Btn from '@/components/btn';
+import Header from '@/components/header';
+import '@/styles/templates/mypage/mypageEdit.scss';
+import { AXIOSResponse, IUser } from '@/types/interface';
+import { useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { BsCamera } from 'react-icons/bs';
+
+export default function MypageEditPage() {
+ const router = useRouter();
+
+ const [user, setUser] = useState({
+ email: '',
+ nickname: '',
+ tel: '',
+ profileImage: '',
+ });
+
+ const [name, setName] = useState('');
+
+ const [previewImg, setPreviewImg] = useState(null);
+ const [profileImage, setProfileImage] = useState();
+
+ useEffect(() => {
+ const fetchData = async () => {
+ const res: AXIOSResponse = await getMyInfo();
+ if (res.statusCode === 200) {
+ setUser(res.data);
+ try {
+ const file = await convertURLtoFile(res.data.profileImage);
+ setProfileImage(file);
+ } catch (error) {
+ console.error('Failed to convert profile image to file:', error);
+ }
+ } else {
+ console.log('실패');
+ }
+ };
+ fetchData();
+ }, []);
+
+ const convertURLtoFile = async (imageUrl: string): Promise => {
+ try {
+ const response = await fetch(imageUrl, { mode: 'no-cors' });
+ const blob = await response.blob();
+ const filename = 'profile';
+ const file = new File([blob], filename, { type: blob.type });
+ return file;
+ } catch (error) {
+ console.error('Error fetching or converting the image:', error);
+ throw new Error('Image conversion failed');
+ }
+ };
+
+ const handleEditProfile = async () => {
+ try {
+ if (profileImage) {
+ const res = await putEditProfile(name || user.nickname, profileImage);
+ if (res.status === 200) {
+ alert('프로필 수정이 완료되었습니다.');
+ router.push('/mypage');
+ } else {
+ console.log(res);
+ }
+ }
+ } catch (error) {
+ alert('프로필 수정 중 오류가 발생했습니다. 다시 시도해 주세요.');
+ console.log(error);
+ }
+ };
+
+ const handleInputChange = (event: React.ChangeEvent) => {
+ const input = event.target;
+ if (input.files) {
+ setProfileImage(input.files && input.files[0]);
+ }
+ if (input.files && input.files[0]) {
+ const reader = new FileReader();
+
+ reader.onload = (e) => {
+ setPreviewImg(e.target?.result as string);
+ };
+
+ reader.readAsDataURL(input.files[0]);
+ }
+ };
+
+ return (
+
('all');
+ const [products, setProducts] = useState([]);
+ const handleChangeList: React.Dispatch> = (
+ value: SetStateAction,
+ ) => {
+ setFilter(value);
+ };
+ useEffect(() => {
+ const fetchData = async () => {
+ const res: AXIOSResponse = await getMyWishList();
+ console.log(res);
+ if (res.statusCode === 200) {
+ setProducts(() => {
+ return res.data.filter((product) => {
+ if (filter === 'all') {
+ return product;
+ } else if (
+ filter === 'completed' &&
+ product.status === '거래완료'
+ ) {
+ return product;
+ } else if (filter === 'sale' && product.status === '판매중') {
+ return product;
+ } else {
+ return;
+ }
+ });
+ });
+ }
+ };
+ fetchData();
+ }, [filter]);
+
+ console.log(products);
+ return (
+ <>
+ (null);
const [onLike, setOnLike] = useState(false);
+
const [isMenuOpen, setIsMenuOpen] = useState(false);
- const menuRef = useRef(null);
+ const menuRef = useRef(null);
+
const [selectedValue, setSelectedValue] = useState('1');
const selectRef = useRef(null);
+
+ const [isBooking, setIsBooking] = useState(false);
+
const handleSelectChange = () => {
if (selectRef.current) {
const selectedOption = selectRef.current.value;
@@ -69,6 +75,14 @@ export const ProductDetail = () => {
}
};
+ useEffect(() => {
+ if (selectedValue === '1') {
+ setIsBooking(false);
+ } else {
+ setIsBooking(true);
+ }
+ }, [selectedValue]);
+
const [isModal, setIsModal] = useState(false);
const toggleModal = () => {
@@ -120,7 +134,7 @@ export const ProductDetail = () => {
setProduct(null);
[];
};
- }, [id]);
+ }, [productId]);
const settings = {
dots: true, // 페이지 네비게이션(점) 표시
@@ -131,7 +145,7 @@ export const ProductDetail = () => {
autoplay: false, // 자동 재생
arrows: false,
};
- console.log(product);
+
return (
);
diff --git a/src/templates/product/productShowAll.tsx b/src/templates/product/productShowAll.tsx
index 0cea043..3ab219a 100644
--- a/src/templates/product/productShowAll.tsx
+++ b/src/templates/product/productShowAll.tsx
@@ -42,7 +42,6 @@ export default function ProductShowAll() {
};
fetchData();
}, [filter]);
- console.log(products);
return (
<>
diff --git a/src/templates/product/productStateList/productStateList.tsx b/src/templates/product/productStateList/productStateList.tsx
index 46af4b8..e4a64d5 100644
--- a/src/templates/product/productStateList/productStateList.tsx
+++ b/src/templates/product/productStateList/productStateList.tsx
@@ -9,7 +9,7 @@ export default function ProductStateList({
<>
diff --git a/src/templates/search/searchPage.tsx b/src/templates/search/searchPage.tsx
index 013100e..c80ed9a 100644
--- a/src/templates/search/searchPage.tsx
+++ b/src/templates/search/searchPage.tsx
@@ -5,7 +5,7 @@ import Header from '@/components/header';
import ProductList from '@/components/productList';
import '@/styles/templates/search/search.scss';
import { AXIOSResponse, IProduct } from '@/types/interface';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
export default function SearchPage() {
const [keyword, setKeyword] = useState('');
diff --git a/src/templates/signup/signupPage.tsx b/src/templates/signup/signupPage.tsx
index ebce195..6e9ea4b 100644
--- a/src/templates/signup/signupPage.tsx
+++ b/src/templates/signup/signupPage.tsx
@@ -112,9 +112,12 @@ export default function SignupPage() {
formData.phone,
formData.nickname,
);
- console.log(res.data);
- alert('회원가입 성공!');
- router.push('/login');
+ if (res.data.statusCode === 200) {
+ alert('회원가입 성공!');
+ router.push('/login');
+ } else {
+ console.log(res);
+ }
} catch (error: any) {
if (error.response.data.statusCode === 401) {
alert('이미 가입된 이메일이 있습니다.');
diff --git a/src/components/productList.tsx b/src/components/productList.tsx index 56ab079..5b7291c 100644 --- a/src/components/productList.tsx +++ b/src/components/productList.tsx @@ -1,5 +1,6 @@ import { IProduct } from '@/types/interface'; import ProductItem from './productItem'; +import '@/styles/components/productList.scss'; export default function ProductList({ data }: { data: IProduct[] }) { return ( diff --git a/src/components/productState.tsx b/src/components/productState.tsx index 11b21d3..10abec7 100644 --- a/src/components/productState.tsx +++ b/src/components/productState.tsx @@ -12,24 +12,24 @@ export default function ProductState({ <>
-
{
await updateProductState(product.id, 1);
setReLoad((prev: boolean) => !prev);
}}
className="product__state__btn--reserve">
판매중 변경
-
+
-
{
await updateProductState(product.id, 3);
setReLoad((prev: boolean) => !prev);
}}
className="product__state__btn--complete">
거래완료 변경
-
+
+
+ );
+}
diff --git a/src/templates/mypage/mypagePage.tsx b/src/templates/mypage/mypagePage.tsx
index a19bc51..597dfa2 100644
--- a/src/templates/mypage/mypagePage.tsx
+++ b/src/templates/mypage/mypagePage.tsx
@@ -19,6 +19,8 @@ export default function MypagePage() {
tel: '',
profileImage: '',
});
+ const [imageSrc, setImageSrc] = useState(user.profileImage);
+
const router = useRouter();
const onClick = (option: string) => {
@@ -35,12 +37,16 @@ export default function MypagePage() {
fetchData();
}, []);
+ useEffect(() => {
+ setImageSrc(user.profileImage + '?' + Date.now());
+ }, [user.profileImage]);
+
return (
+
+
+
+
+ 
+
+
+
+ setName(e.target.value)}
+ type="text"
+ placeholder={user.nickname}
+ />
+
+
- 
+ 
{user.nickname}
diff --git a/src/templates/mypage/mypageWish.tsx b/src/templates/mypage/mypageWish.tsx
new file mode 100644
index 0000000..3df407d
--- /dev/null
+++ b/src/templates/mypage/mypageWish.tsx
@@ -0,0 +1,52 @@
+'use client';
+import Header from '@/components/header';
+
+import { useState, useEffect, SetStateAction } from 'react';
+import { AXIOSResponse, IProduct } from '@/types/interface';
+import { getMyWishList } from '@/api/service';
+import ProductList from '@/components/productList';
+import ProductStateList from '../product/productStateList/productStateList';
+
+export default function MypageWish() {
+ const [filter, setFilter] = useState
@@ -207,19 +221,27 @@ export const ProductDetail = () => {
)}
@@ -273,12 +297,24 @@ export const ProductDetail = () => {
/>
)}
|
-
-
+ {!product?.myProduct && product?.status === '예약중' && (
+
- {!product?.myProduct && (
+ {product?.sellerProductInfos && (
{product?.title}
{' '} {product?.categoryName}
-⋅ 1일 전
{product?.content}
@@ -232,18 +254,20 @@ export const ProductDetail = () => {
- {product?.sellerProductInfos.map((product, index) => {
- return (
-
router.push(`/product/${product.id}`)}
- className="more-product"
- key={index}>
- 
-
- );
- })}
+ {product?.sellerProductInfos
+ .slice(0, 4)
+ .map((product, index) => {
+ return (
+ {product.title}
-{product.price}
- router.push(`/product/${product.id}`)}
+ className="more-product"
+ key={index}>
+
+
+ );
+ })}
{product.title}
+{`${product.price}원`}
+125만원
+{`${product?.price}원`}
router.push(`/product/${id}/chats`)}>
-
-
+ {product?.myProduct ? (
+ router.push(`/product/${id}/chats`)}>
+
+
+ ) : (
+ router.push(`/product/${id}/chats`)}>
+
+
+ )}
-
{
const productStates = document.querySelectorAll('.productState');
onChangeList('all');
@@ -19,10 +19,10 @@ export default function ProductStateList({
e.currentTarget.closest('.productState')?.classList.add('active');
}}>
전체
-
+
-
{
const productStates = document.querySelectorAll('.productState');
onChangeList('sale');
@@ -32,10 +32,10 @@ export default function ProductStateList({
e.currentTarget.closest('.productState')?.classList.add('active');
}}>
판매중
-
+
-
{
const productStates = document.querySelectorAll('.productState');
onChangeList('completed');
@@ -45,7 +45,7 @@ export default function ProductStateList({
e.currentTarget.closest('.productState')?.classList.add('active');
}}>
거래완료
-
+