✨Feat : 판매 중인 상품 리스트 모달창, 링크 연결

FRONTENDSCHOOL5 · Jun 23, 2023 · 340c2be · 340c2be
1 parent d837481
commit 340c2be
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 14 deletions.
diff --git a/src/components/modal/ProductModal/ProductModal.jsx b/src/components/modal/ProductModal/ProductModal.jsx
@@ -3,26 +3,45 @@ import { Container, Ul, Li, GrayLine, Button } from '../styled';
 import ProductAlert from './ProductAlert';
 import { useNavigate } from 'react-router-dom';
 
-export default function ProductModal({ setisModalOpen }) {
+export default function ProductModal({
+  setisModalOpen,
+  isMyProfile,
+  productList,
+}) {
   const [isAlertOpen, setIsAlertOpen] = useState(false);
   const navigate = useNavigate();
   const handleToEdit = () => {
     navigate('/product/edit/${productId}'); //백틱으로 나중에바꿔주기
   };
+  console.log(productList, 'ji');
   return (
     <>
       <Container onClick={() => setisModalOpen(false)}></Container>
       <Ul>
         <GrayLine></GrayLine>
-        <Li>
-          <Button onClick={() => setIsAlertOpen(true)}>삭제</Button>
-        </Li>
-        <Li>
-          <Button onClick={handleToEdit}>수정</Button>
-        </Li>
-        <Li>
-          <Button>웹사이트에서 상품 보기</Button>
-        </Li>
+        {isMyProfile ? (
+          <>
+            <Li>
+              <Button onClick={() => setIsAlertOpen(true)}>삭제</Button>
+            </Li>
+            <Li>
+              <Button onClick={handleToEdit}>수정</Button>
+            </Li>
+            <Li>
+              <Button>웹사이트에서 상품 보기</Button>
+            </Li>
+          </>
+        ) : (
+          <Li>
+            <a
+              href={productList.link}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <Button>웹사이트에서 상품 보기</Button>
+            </a>
+          </Li>
+        )}
       </Ul>
       {isAlertOpen ? <ProductAlert setIsAlertOpen={setIsAlertOpen} /> : null}
     </>

diff --git a/src/pages/profile/Profile.jsx b/src/pages/profile/Profile.jsx
@@ -17,10 +17,11 @@ import {
   MediumFollowButton,
   UnfollowButton,
 } from '../../components/common/button/Button';
-import Product from '../../components/common/product/Product';
+//import Product from '../../components/common/product/Product';
 import HomePost from '../../components/common/home/HomePost';
 import HomeAlbum from '../../components/common/home/HomeAlbum';
 import TabMenu from '../../components/common/tab/TabMenu';
+import ProductModal from '../../components/modal/ProductModal/ProductModal';
 
 // 스타일
 import * as S from './Profile.style';
@@ -50,6 +51,10 @@ export default function Profile() {
   const myPostArray = myPost.post;
   const [productList, setProductList] = useState([]);
   const navigate = useNavigate();
+  const [isModalOpen, setisModalOpen] = useState(false);
+  const showModal = () => {
+    setisModalOpen(true);
+  };
 
   useEffect(() => {
     setIsMyProfile(accountname === myAccountname);
@@ -144,6 +149,15 @@ export default function Profile() {
   // console.log('isMyProfile:', isMyProfile);
   // console.log(myPostArray);
 
+  const handleProductClick = (e) => {
+    if (isMyProfile) {
+      e.preventDefault();
+      showModal();
+    } else {
+      e.stopPropagation();
+    }
+  };
+
   return (
     <div>
       <TopBasicNav />
@@ -217,9 +231,16 @@ export default function Profile() {
             <S.ProductListUl>
               {productList.map((product, index) => (
                 <S.ProductListLi key={index}>
-                  <S.ProductItem src={product.itemImage} key={index} />
-                  <S.ProductTitle>{product.itemName}</S.ProductTitle>
-                  <S.ProductPrice>{product.price}</S.ProductPrice>
+                  <a
+                    href={product.link}
+                    onClick={(e) => {
+                      handleProductClick(e);
+                    }}
+                  >
+                    <S.ProductItem src={product.itemImage} key={index} />
+                    <S.ProductTitle>{product.itemName}</S.ProductTitle>
+                    <S.ProductPrice>{product.price}</S.ProductPrice>
+                  </a>
                 </S.ProductListLi>
               ))}
             </S.ProductListUl>
@@ -247,6 +268,13 @@ export default function Profile() {
         </S.PostContainer>
       </S.ProfileWrapper>
       <TabMenu />
+      {isModalOpen ? (
+        <ProductModal
+          setisModalOpen={setisModalOpen}
+          isMyProfile={isMyProfile}
+          productList={productList}
+        />
+      ) : null}
     </div>
   );
 }