ui

assets/img/svg/ico_share_2.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" width="24px" height="24px" fill='#000'>
+    <path d="M 23 3 A 4 4 0 0 0 19 7 A 4 4 0 0 0 19.09375 7.8359375 L 10.011719 12.376953 A 4 4 0 0 0 7 11 A 4 4 0 0 0 3 15 A 4 4 0 0 0 7 19 A 4 4 0 0 0 10.013672 17.625 L 19.089844 22.164062 A 4 4 0 0 0 19 23 A 4 4 0 0 0 23 27 A 4 4 0 0 0 27 23 A 4 4 0 0 0 23 19 A 4 4 0 0 0 19.986328 20.375 L 10.910156 15.835938 A 4 4 0 0 0 11 15 A 4 4 0 0 0 10.90625 14.166016 L 19.988281 9.625 A 4 4 0 0 0 23 11 A 4 4 0 0 0 27 7 A 4 4 0 0 0 23 3 z"/>
+</svg>

src/components/common/Like.scss

@@ -1,7 +1,7 @@
 .btn_like {
   color: #888;
-  font-size: 12px;
-  line-height: 16px;
+  font-size: 20px;
+  display: inline-block;
 }
 
 .ico_heart {
@@ -10,6 +10,8 @@
   vertical-align: 0;
   vertical-align: top;
   fill: #888;
+  width: auto;
+  height: 18px;
   &.fill {
     margin-top: 0;
   }

src/components/common/Like.tsx

@@ -6,6 +6,7 @@ import { ReactComponent as IconFilledHeart } from '@assets/img/svg/ico_heart_red
 import styles from './Like.scss';
 import APIs from '@src/api/APIs';
 import useLogin from '@src/hooks/useLogin';
+import URLInfo from '@src/constants/URLInfo';
 const cx = classNames.bind(styles);
 
 interface IOwnProps {
@@ -27,6 +28,7 @@ const Like: React.FC<IOwnProps> = ({
   const [likeCount, setLikeCount] = useState<number>(0);
   const { checkLogin } = useLogin();
   const likeRef = useRef<HTMLButtonElement>(null);
+  const pathname = window.location.pathname;
 
   useEffect(() => {
     setSelectedLike(isLike);
@@ -34,6 +36,9 @@ const Like: React.FC<IOwnProps> = ({
   }, [isLike, likeCnt]);
 
   const handleClickLike = async () => {
+
+    if (!URLInfo.isSalePage())  return;
+    
     const likeEl = likeRef.current;
 
     if (!checkLogin() || !likeEl) {

src/components/common/NFTCard.scss

@@ -122,6 +122,18 @@
         line-height: 18px;
         letter-spacing: -0.45px;
     }
+    .collection_name_box {
+        display: flex;
+        align-items: center; 
+        justify-content: space-between; 
+        .collection_name {
+            @include ellipsis;
+            color: #888;
+            font-size: 12px;
+            line-height: 2;
+        }   
+    }
+   
     .price_box {
         height: 37px;
         padding-top: 10px;
@@ -142,11 +154,14 @@
     }
 }
 .like {
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    padding: 16px;
     color: #888;
     font-size: 12px;
     line-height: 16px;
+    & > button {
+        font-size: 14px;
+        & > svg{
+            width: auto;
+            height: 12px;
+        }
+    }
 }

src/components/common/NFTCard.tsx

@@ -20,6 +20,7 @@ interface IOwnProps {
   saleId: number;
   content_title: string;
   endTime: string;
+  collectionName: string;
   collectionThumb: string;
   authorThumb: string;
   authorName: string;
@@ -47,6 +48,7 @@ const NFTCard: React.FC<IOwnProps> = ({
   content_title,
   endTime,
   collectionThumb,
+  collectionName,
   authorThumb,
   authorName,
   thumbURL,
@@ -129,53 +131,60 @@ const NFTCard: React.FC<IOwnProps> = ({
   const isEnd = status !== ESaleStatus.ON_GOING;
 
   return (
-    <div className={cx('nft_card', isMulti && 'multi', className)}>
-      <div className={cx('card_wrap')}>
-        <div className={cx('profile_group')}>
-          <Link to={URLInfo.getProfileUserUrl(authorName)} className={cx('profile_area')}>
-            <div className={cx('thumb_box')}>
-              <span className={cx('thumb_inner')}>
-                <CircleThumb thumbSrc={collectionThumb} width={19} height={19} border={1} />
-              </span>
-              <span className={cx('thumb_inner')}>
-                <CircleThumb thumbSrc={authorThumb} width={19} height={19} border={1} />
-              </span>
-            </div>
-            <div className={cx('author_name')}>
-              {authorName}
-            </div>
-          </Link>
-          <ListMenu list={menuList} />
-        </div>
-        <Link to={isEnd ? URLInfo.getTokenUrl(tokenId) : URLInfo.getSaleUrl(saleId)} className={cx('contents_group')}>
-          <div className={cx('thumb_area')}>
+    <div className={cx("nft_card", isMulti && "multi", className)}>
+      <div className={cx("card_wrap")}>
+        <Link
+          to={isEnd ? URLInfo.getTokenUrl(tokenId) : URLInfo.getSaleUrl(saleId)}
+          className={cx("contents_group")}
+        >
+          <div className={cx("thumb_area")}>
             {FileUtil.isVideo(thumbURL) ? (
-              <video src={thumbURL} width="260" height="260" className={cx('thumb')} autoPlay muted playsInline loop preload='metadata' />
+              <video
+                src={thumbURL}
+                width="260"
+                height="260"
+                className={cx("thumb")}
+                autoPlay
+                muted
+                playsInline
+                loop
+                preload="metadata"
+              />
             ) : (
-              <Img src={thumbURL} alt="" width="260" height="260" className={cx('thumb')} />
+              <Img
+                src={thumbURL}
+                alt=""
+                width="260"
+                height="260"
+                className={cx("thumb")}
+              />
             )}
-            {saleType === ESaleType.TIME && (
-              (timeText === '00:00:00') ? (
-                <div className={cx('label')}>⌛️ 00:00:00</div>
+            {saleType === ESaleType.TIME &&
+              (timeText === "00:00:00" ? (
+                <div className={cx("label")}>⌛️ 00:00:00</div>
               ) : (
                 <>
-                  {timeText && (
-                    <div className={cx('label')}>
-                      🔥 {timeText}
-                    </div>
-                  )}
+                  {timeText && <div className={cx("label")}>🔥 {timeText}</div>}
                 </>
-              )
-            )}
+              ))}
           </div>
-          <div className={cx('info_area')}>
-            <div className={cx('description_box')}>
-              {content_title}
+          <div className={cx("info_area")}>
+            <div className={cx("collection_name_box")}>
+              <div className={cx("collection_name")}>{collectionName}</div>
+              <div className={cx("like")}>
+                <Like
+                  token_id={tokenId}
+                  likeCnt={likeCount}
+                  isLike={isLike}
+                  handleDisLike={handleDisLike}
+                />
+              </div>
             </div>
-            <div className={cx('price_box')}>
-              <div className={cx('price_inner')}>
+            <div className={cx("description_box")}>{content_title}</div>
+            <div className={cx("price_box")}>
+              <div className={cx("price_inner")}>
                 {saleType === ESaleType.FIXED && (
-                  <span className={cx('price')}>
+                  <span className={cx("price")}>
                     {isEnd ? (
                       <>
                         {lastestPrice ? (
@@ -183,7 +192,7 @@ const NFTCard: React.FC<IOwnProps> = ({
                             {Number(lastestPrice)} {_latestCurrency}
                           </>
                         ) : (
-                          '판매이력 없음'
+                          "판매이력 없음"
                         )}
                       </>
                     ) : (
@@ -196,19 +205,13 @@ const NFTCard: React.FC<IOwnProps> = ({
                 {saleType === ESaleType.AUCTION && (
                   <>
                     {isEnd ? (
-                      <>
-                        {lastestPrice ? (
-                          '판매 완료'
-                        ) : (
-                          '판매이력 없음'
-                        )}
-                      </>
+                      <>{lastestPrice ? "판매 완료" : "판매이력 없음"}</>
                     ) : (
                       <>
                         {price ? (
-                          <span className={cx('price')}>현재 최고 입찰가</span>
+                          <span className={cx("price")}>현재 최고 입찰가</span>
                         ) : (
-                          <span className={cx('price')}>현재 경매중</span>
+                          <span className={cx("price")}>현재 경매중</span>
                         )}
                       </>
                     )}
@@ -217,59 +220,43 @@ const NFTCard: React.FC<IOwnProps> = ({
                 {saleType === ESaleType.TIME && (
                   <>
                     {isEnd ? (
-                      <>
-                        {lastestPrice ? (
-                          '판매 완료'
-                        ) : (
-                          '판매이력 없음'
-                        )}
-                      </>
+                      <>{lastestPrice ? "판매 완료" : "판매이력 없음"}</>
                     ) : (
                       <>
                         {price ? (
-                          <span className={cx('price')}>최고입찰가</span>
+                          <span className={cx("price")}>최고입찰가</span>
                         ) : (
-                          <span className={cx('price')}>시작입찰가</span>
+                          <span className={cx("price")}>시작입찰가</span>
                         )}
                       </>
                     )}
                   </>
                 )}
-                <span className={cx('type')}>
+                <span className={cx("type")}>
                   {itemIndex ? itemIndex : 1}/{totalCount ? totalCount : 1}
                 </span>
               </div>
               {saleType === ESaleType.FIXED && (
-                <div className={cx('bid')}>
-                  {isEnd ? (
-                    <>
-                      {lastestPrice && (
-                        '판매완료'
-                      )}
-                    </>
-                  ) : (
-                    '즉시 구매'
-                  )}
+                <div className={cx("bid")}>
+                  {isEnd ? <>{lastestPrice && "판매완료"}</> : "즉시 구매"}
                 </div>
               )}
-              {(saleType === ESaleType.AUCTION) && (
+              {saleType === ESaleType.AUCTION && (
                 <>
                   {isEnd ? (
                     lastestPrice && (
-                      <div className={cx('bid')}>
+                      <div className={cx("bid")}>
                         Bid {Number(lastestPrice)} {_latestCurrency}
                       </div>
                     )
                   ) : (
                     <>
                       {price ? (
-                        <div className={cx('bid')}>
+                        <div className={cx("bid")}>
                           Bid {Number(price)} {_currency}
                         </div>
                       ) : (
-                        <div className={cx('bid')}>
-                          입찰하기
-                        </div>
+                        <div className={cx("bid")}>입찰하기</div>
                       )}
                     </>
                   )}
@@ -281,18 +268,18 @@ const NFTCard: React.FC<IOwnProps> = ({
                     <>
                       {isEnd ? (
                         lastestPrice && (
-                          <div className={cx('bid')}>
+                          <div className={cx("bid")}>
                             Bid {Number(lastestPrice)} {_latestCurrency}
                           </div>
                         )
                       ) : (
                         <>
                           {price ? (
-                            <div className={cx('bid')}>
+                            <div className={cx("bid")}>
                               Bid {Number(price)} {_currency}
                             </div>
                           ) : (
-                            <div className={cx('bid')}>
+                            <div className={cx("bid")}>
                               Bid {Number(startPrice)} {_currency}
                             </div>
                           )}
@@ -305,11 +292,8 @@ const NFTCard: React.FC<IOwnProps> = ({
             </div>
           </div>
         </Link>
-        <div className={cx('like')}>
-          <Like token_id={tokenId} likeCnt={likeCount} isLike={isLike} handleDisLike={handleDisLike} />
-        </div>
-      </div >
-    </div >
+      </div>
+    </div>
   );
 };
 

src/components/common/NFTCardList.tsx

@@ -32,6 +32,7 @@ const NFTCardList: React.FC<IOwnProps> = ({
               saleId={item.sale_id}
               content_title={item.content_title}
               collectionThumb={item.collection_thumbnail_image}
+              collectionName={item.collection_name}
               authorThumb={item.owner_thumbnail_image}
               authorName={item.owner_name}
               thumbURL={item.content_url}

src/components/common/ProfileModal.tsx

@@ -313,6 +313,9 @@ const ProfileModal: React.FC<IOwnProps> = ({ onClose }) => {
           >
             내 프로필
           </Link>
+        </li> 
+        <li className={cx('menu')}>
+          <Link to={URLInfo.ACTIVITY} className={cx('link')}>나의 활동</Link>
         </li>
         <li className={cx('menu')}>
           <Link to={URLInfo.USER_EDIT} className={cx('link')}>프로필 편집</Link>

src/components/common/sale/SaleButtonContainer.scss

@@ -1,5 +1,9 @@
 @import "/assets/css/_lib";
 
+.sale_button_container{
+ 
+}
+
 .btn_area {
   display: flex;
   padding: 12px;
@@ -7,7 +11,9 @@
     flex: 1 1 auto;
     padding: 0 4px;
   }
+
 }
+
 .btn {
   width: 100%;
   height: 37px;

src/components/common/sale/SaleButtonContainer.tsx

@@ -213,14 +213,13 @@ const ButtonContainer: React.FC<IButtonContainer> = ({ saleType, isOwner, isTime
         </div>
       );
     }
-
     // 지정가
     if (saleType === ESaleType.FIXED) {
       return (
         <div className={cx('btn_area')}>
-          <div className={cx('btn_wrap')}>
+          {/* <div className={cx('btn_wrap')}>
             <Button text='공유하기' onClick={handleShare} />
-          </div>
+          </div> */}
           <div className={cx('btn_wrap')}>
             <Button text='즉시 구매하기' useColor={true} onClick={handleClickBuy} />
           </div>

src/components/mobile/Header.tsx

@@ -14,6 +14,7 @@ import LayerContainer from '@src/containers/common/LayerContainer';
 import { useDispatch, useSelector } from 'react-redux';
 import useNoScroll from '@src/hooks/useNoScroll';
 import { fetchUserInfo } from '@src/store/reducers/UserReducer';
+import { ReactComponent as IconShare_2 } from '@assets/img/svg/ico_share_2.svg';
 
 const cx = classNames.bind(styles);
 
@@ -33,6 +34,12 @@ const Header: React.FC = ({ }) => {
     }
   }, [showProfile]);
 
+  const handleShare = () => {
+    navigator.clipboard.writeText(window.location.href).then(() => {
+      alert('복사되었습니다.');
+    });
+  };
+
   return (
     <div className={cx('header_wrap')}>
       <div className={cx('header_group')}>
@@ -43,6 +50,10 @@ const Header: React.FC = ({ }) => {
           </Link>
         </h1>
         <div className={cx('gnb')}>
+          <button type="button" className={cx('btn', 'btn_share')} onClick={handleShare}>
+            <span className={cx('blind')}>share</span>
+            <IconShare_2 className={cx('ico', 'ico_share')} />
+          </button>
           <button type="button" className={cx('btn', 'btn_search')} onClick={() => setShowSearch(true)}>
             <span className={cx('blind')}>Search</span>
             <IconSearch className={cx('ico', 'ico_search')} />

src/components/mobile/Menu.tsx

@@ -55,20 +55,20 @@ const Menu: React.FC<IOwnProps> = ({ onClose }) => {
             </Link>
           </li>
         )}
-        <li
+        {/* <li
           className={cx("menu_item")}
           aria-selected={URLInfo.isActivityPage(location)}
         >
           <Link to={URLInfo.ACTIVITY} className={cx("menu")}>
             활동
           </Link>
-        </li>
+        </li> */}
         <li
           className={cx("menu_item")}
           aria-selected={URLInfo.isGuidePage(location)}
         >
-          <Link to={URLInfo.GUIDE} className={cx("menu")}>
-            사용방법
+          <Link to={URLInfo.EXPLORE} className={cx("menu")}>
+            순위 100
           </Link>
         </li>
       </ul>
@@ -103,6 +103,11 @@ const Menu: React.FC<IOwnProps> = ({ onClose }) => {
               구독하기 (Subscribe)
             </Link>
           </li>
+          <li className={cx("community_item")}>
+            <Link to={URLInfo.GUIDE} className={cx("link_community")}>
+              사용방법
+            </Link>         
+          </li>
           <li className={cx("community_sns")}>
             <a
               href="https://twitter.com/metarare_nft"

src/components/mobile/NFTScrollList.tsx

@@ -27,6 +27,7 @@ const NFTScrollList: React.FC<IOwnProps> = ({
               saleId={item.sale_id}
               content_title={item.content_title}
               collectionThumb={item.collection_thumbnail_image}
+              collectionName={item.collection_name}
               authorThumb={item.owner_thumbnail_image}
               authorName={item.owner_name}
               thumbURL={item.content_url}

src/components/pc/Header.scss

@@ -74,7 +74,13 @@
     }
     .ico_search {
         vertical-align: top;
-    }
+    }   
+}
+.ico_share{
+    width: 24px;
+    height: 24px;
+    margin-top: 5px;
+    vertical-align: top;
 }
 .menu_list {
     white-space: nowrap;

src/components/pc/Header.tsx

@@ -89,14 +89,14 @@ const Header: React.FC = () => {
                 </Link>
               </li>
             )}
-            <li className={cx("menu_item")}>
+            {/* <li className={cx("menu_item")}>
               <Link to={URLInfo.ACTIVITY} className={cx("menu")}>
                 활동
               </Link>
-            </li>
+            </li> */}
             <li className={cx("menu_item")}>
-              <Link to={URLInfo.GUIDE} className={cx("menu")}>
-                사용방법
+              <Link to={URLInfo.EXPLORE} className={cx("menu")}>
+                순위 100
               </Link>
             </li>
             {/* <li className={cx("menu_item")}>
@@ -149,6 +149,11 @@ const Header: React.FC = () => {
                         구독하기 (Subscribe)
                       </Link>
                     </li>
+                    <li className={cx("community_item")}>
+                      <Link to={URLInfo.GUIDE} className={cx("link_community")}>
+                        사용방법
+                      </Link>
+                    </li>
                     <li className={cx("community_sns")}>
                       <a
                         href="https://twitter.com/metarare_nft                        "

src/components/pc/NFTScrollList.tsx

@@ -44,6 +44,7 @@ const NFTScrollList: React.FC<IOwnProps> = ({
                   saleId={item.sale_id}
                   content_title={item.content_title}
                   collectionThumb={item.collection_thumbnail_image}
+                  collectionName={item.collection_name}
                   authorThumb={item.owner_thumbnail_image}
                   authorName={item.owner_name}
                   thumbURL={item.content_url}

src/constants/URLInfo.ts

@@ -19,6 +19,7 @@ const URL = {
   GUIDE_DETAIL: '/guide/:id',
   LOGIN_CALLBACK: '/callback/:type',
   ERROR: '/error',
+  RANKING: '',
 };
 
 const SEARCH_PARAM = {

src/pages/Sale.scss

@@ -60,14 +60,15 @@
     line-height: 32px;
   }
   .info_area {
-    font-size: 13px;
-    line-height: 21px;
+    font-size: 18px;
+    line-height: 1.5;
   & + .info_area {
     padding-top: 15px;
   }
   .info_box {
     display: flex;
     padding-top: 7px;
+    align-items: center;
   }
   .info {
     flex: 1 1 auto;
@@ -87,8 +88,8 @@
   }
   .title {
     color: #888;
-    font-size: 13px;
-    line-height: 17px;
+    font-size: 16px;
+    line-height: 1.5;
   }
   .thumb {
     flex: 0 0 auto;
@@ -98,8 +99,8 @@
     @include ellipsis;
     flex: 1 1 auto;
     color: #000;
-    font-size: 12px;
-    line-height: 30px;
+    font-size: 18px;
+    line-height: 1.5;
   }
   }
   .description_area {
@@ -107,6 +108,53 @@
     padding-top: 38px;
   }
 }
+.header_box{
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  margin-bottom: 20px;
+  & > .name{
+    @include ellipsis;
+    color: #005abc;
+    font-size: 18px;
+    line-height: 1.5;
+  }
+  & > .group{
+    display: flex;
+    align-items: center;
+    justify-content: flex-end; 
+    gap: 10px;
+    & > .views{
+      color: #888;
+      font-size: 18px;
+      line-height: 1.5;
+    }
+    & > .share{
+      display: none;
+      align-items: center;
+      justify-content: center;
+      gap: 5px;
+      color: #888;
+      font-size: 13px;
+      line-height: 1.5;
+      padding: 5px 10px;
+      background-color: #eaeaea;
+      border-radius: 5px;
+      @include pc{
+        display: flex;
+      }
+      &:hover{
+        background-color: #d8d8d8;
+      }
+      & > svg{
+        width: 18px;
+        height: 18px;
+        fill: #888;
+      }
+    }
+  }
+}
 .btn_group {
   position: fixed;
   bottom: 0;

src/pages/Sale.tsx

@@ -1,43 +1,53 @@
-import React, { useEffect, useState } from 'react';
-import classNames from 'classnames/bind';
-import styles from './Sale.scss';
-import CircleThumb from '@src/components/common/CircleThumb';
-import ProfileDesc from '@src/components/common/ProfileDesc';
-import SaleButtonContainer from '@src/components/common/sale/SaleButtonContainer';
-import { ESaleStatus, ESaleType } from '@src/constants/Enums';
-import SaleTab from '@src/components/common/sale/SaleTab';
-import { useDispatch, useSelector } from 'react-redux';
-import { fetchSale } from '@src/store/reducers/SaleReducer';
-import DateUtil, { IDateFormat } from '@src/utils/DateUtil';
-import URLInfo from '@src/constants/URLInfo';
-import Like from '@src/components/common/Like';
-import { Link, useHistory } from 'react-router-dom';
-import { fetchToken } from '@src/store/reducers/TokenReducer';
-import { ISaleDetail, ITokenDetail } from 'metarare';
-import Loading from '@src/components/common/Loading';
-import FileUtil from '@src/utils/FileUtil';
+import React, { useEffect, useState } from "react";
+import classNames from "classnames/bind";
+import styles from "./Sale.scss";
+import CircleThumb from "@src/components/common/CircleThumb";
+import ProfileDesc from "@src/components/common/ProfileDesc";
+import SaleButtonContainer from "@src/components/common/sale/SaleButtonContainer";
+import { ESaleStatus, ESaleType } from "@src/constants/Enums";
+import SaleTab from "@src/components/common/sale/SaleTab";
+import { useDispatch, useSelector } from "react-redux";
+import { fetchSale } from "@src/store/reducers/SaleReducer";
+import DateUtil, { IDateFormat } from "@src/utils/DateUtil";
+import URLInfo from "@src/constants/URLInfo";
+import Like from "@src/components/common/Like";
+import { Link, useHistory } from "react-router-dom";
+import { fetchToken } from "@src/store/reducers/TokenReducer";
+import { ISaleDetail, ITokenDetail } from "metarare";
+import Loading from "@src/components/common/Loading";
+import FileUtil from "@src/utils/FileUtil";
+import { ReactComponent as IconShare_2 } from "@assets/img/svg/ico_share_2.svg";
+import useResize from "@src/hooks/useResize";
 
 const cx = classNames.bind(styles);
 
 const Sale: React.FC = () => {
+  const { isMobileSize } = useResize();
   const dispatch = useDispatch();
   const history = useHistory();
-  const { data: saleData, isDataLoaded: isSaleDataLoaded } = useSelector(store => store.sale);
-  const { data: tokenData, isDataLoaded: isTokenDataLoaded } = useSelector(store => store.token);
+  const { data: saleData, isDataLoaded: isSaleDataLoaded } = useSelector(
+    (store) => store.sale
+  );
+  const { data: tokenData, isDataLoaded: isTokenDataLoaded } = useSelector(
+    (store) => store.token
+  );
 
   const pageId = URLInfo.getId();
   const data = URLInfo.isSalePage() ? saleData?.sale : tokenData?.token;
 
   // 남은 시간
   const [dateText, setDateText] = useState<IDateFormat>({
-    d: 0, h: 0, m: 0, s: 0
+    d: 0,
+    h: 0,
+    m: 0,
+    s: 0,
   });
   const [isEnd, setIsEnd] = useState<boolean>(false);
   const [countStart, setCountStart] = useState<boolean>(false);
 
   useEffect(() => {
     if (data && URLInfo.isSalePage()) {
-      const { status, token_id, id } = (data as ISaleDetail);
+      const { status, token_id, id } = data as ISaleDetail;
       const isEnd = status !== ESaleStatus.ON_GOING;
 
       if (pageId === id && isEnd) {
@@ -63,7 +73,10 @@ const Sale: React.FC = () => {
     const endAt = (data as ISaleDetail)?.end_at;
 
     if (endAt) {
-      id = DateUtil.countDownDayTimer(DateUtil.getTimezoneToDate(endAt), setDateText).id;
+      id = DateUtil.countDownDayTimer(
+        DateUtil.getTimezoneToDate(endAt),
+        setDateText
+      ).id;
     }
 
     return () => {
@@ -75,7 +88,10 @@ const Sale: React.FC = () => {
 
   useEffect(() => {
     if (data && (data as ISaleDetail).sale_type === ESaleType.TIME) {
-      const isEnd = new Date(DateUtil.getTimezoneToDate((data as ISaleDetail).end_at)).getTime() < new Date().getTime();
+      const isEnd =
+        new Date(
+          DateUtil.getTimezoneToDate((data as ISaleDetail).end_at)
+        ).getTime() < new Date().getTime();
       setIsEnd(isEnd);
 
       const dateTextSum = Object.values(dateText).reduce((a, b) => a + b, 0);
@@ -90,27 +106,33 @@ const Sale: React.FC = () => {
   const highestPrice = (data as ISaleDetail)?.highest_price;
   const price = (data as ISaleDetail)?.price;
   const myBiddingPrice = (data as ISaleDetail)?.my_bidding_price;
-  let _currency = ""
-  if (saleData?.sale.currency === 'mr') {
-    _currency = "MTRA"
-  } 
-  if (saleData?.sale.currency === 'mf') {
-    _currency = "MF1"
-  } 
-  if (saleData?.sale.currency === 'eth') {
-    _currency = "ETH"
-  } 
+  let _currency = "";
+  if (saleData?.sale.currency === "mr") {
+    _currency = "MTRA";
+  }
+  if (saleData?.sale.currency === "mf") {
+    _currency = "MF1";
+  }
+  if (saleData?.sale.currency === "eth") {
+    _currency = "ETH";
+  }
+
+  const handleShare = () => {
+    navigator.clipboard.writeText(window.location.href).then(() => {
+      alert("복사되었습니다.");
+    });
+  };
 
   return (
-    <div className={cx('detail_item')}>
-      {(isSaleDataLoaded && isTokenDataLoaded) ? (
+    <div className={cx("detail_item")}>
+      {isSaleDataLoaded && isTokenDataLoaded ? (
         <>
           {data && (
-            <div className={cx('detail_wrap')}>
-              <div className={cx('thumb_group')}>
+            <div className={cx("detail_wrap")}>
+              <div className={cx("thumb_group")}>
                 {FileUtil.isVideo(data.content_url) ? (
                   <video
-                    className={cx('thumb')}
+                    className={cx("thumb")}
                     src={data.content_url}
                     width="100%"
                     height="auto"
@@ -118,7 +140,7 @@ const Sale: React.FC = () => {
                   />
                 ) : (
                   <img
-                    className={cx('thumb')}
+                    className={cx("thumb")}
                     src={data.content_url}
                     alt=""
                     width="100%"
@@ -126,81 +148,90 @@ const Sale: React.FC = () => {
                   />
                 )}
               </div>
-              <div className={cx('info_group')}>
-                <div className={cx('detail_info')}>
-                  <strong className={cx('title_area')}>{data.name}</strong>
-                  <div className={cx('info_area')}>
-                    <div className={cx('info_box')}>
-                      <div className={cx('info')}>
+              <div className={cx("info_group")}>
+                <div className={cx("header_box")}>
+                  <div className={cx("name")}>{data.collection_name}</div>
+                  <div className={cx("group")}>
+                    <div className={cx("views")}>견해: 0</div>
+                    <div className={cx("like")}>
+                      <Like
+                        token_id={
+                          URLInfo.isSalePage()
+                            ? (data as ISaleDetail).token_id
+                            : data.id
+                        }
+                        isLike={data.is_like}
+                        likeCnt={data.like_count}
+                      />
+                    </div>
+                    <div className={cx("share")} onClick={handleShare}>
+                      <IconShare_2 />
+                      공유하기
+                    </div>
+                  </div>
+                </div>
+                <div className={cx("detail_info")}>
+                  <strong className={cx("title_area")}>{data.name}</strong>
+                  <div className={cx("info_area")}>
+                    <div className={cx("info_box")}>
+                      <div className={cx("info")}>
                         {URLInfo.isSalePage() && (
                           <>
-                            <span className={cx('market')}>
-                              {saleType === ESaleType.FIXED && (
-                                '💰 지정가'
-                              )}
-                              {saleType === ESaleType.AUCTION && (
-                                highestPrice ? (
-                                  '🚀 현재 최고입찰가'
-                                ) : (
-                                  '🚀 현재 경매중'
-                                )
-                              )}
-                              {saleType === ESaleType.TIME && (
-                                highestPrice ? (
-                                  '🔥 현재 최고입찰가'
-                                ) : (
-                                  '🔥 시작입찰가'
-                                )
-                              )}
+                            <span className={cx("market")}>
+                              {saleType === ESaleType.FIXED && "💰 지정가"}
+                              {saleType === ESaleType.AUCTION &&
+                                (highestPrice
+                                  ? "🚀 현재 최고입찰가"
+                                  : "🚀 현재 경매중")}
+                              {saleType === ESaleType.TIME &&
+                                (highestPrice
+                                  ? "🔥 현재 최고입찰가"
+                                  : "🔥 시작입찰가")}
                             </span>
-                            <span className={cx('type')}>
-                              {data.total_count ? (
-                                `${data.index}/${data.total_count}`
-                              ) : (
-                                '1/1'
-                              )}
+                            <span className={cx("type")}>
+                              {data.total_count
+                                ? `${data.index}/${data.total_count}`
+                                : "1/1"}
                             </span>
                           </>
                         )}
                       </div>
-                      <div className={cx('like')}>
-                        <Like token_id={URLInfo.isSalePage() ? (data as ISaleDetail).token_id : data.id} isLike={data.is_like} likeCnt={data.like_count} />
-                      </div>
                     </div>
                     {URLInfo.isSalePage() && (
                       <>
                         {saleType === ESaleType.FIXED && (
-                          <div className={cx('price_box')}>
+                          <div className={cx("price_box")}>
                             {price} {_currency}
                           </div>
                         )}
                         {saleType === ESaleType.AUCTION && (
-                          <div className={cx('price_box')}>
-                            {highestPrice ? (
-                              `${highestPrice} ${_currency}`
-                            ) : (
-                              '입찰을 기다리고 있습니다.'
-                            )}
+                          <div className={cx("price_box")}>
+                            {highestPrice
+                              ? `${highestPrice} ${_currency}`
+                              : "입찰을 기다리고 있습니다."}
                           </div>
                         )}
                         {saleType === ESaleType.TIME && (
-                          <div className={cx('price_box')}>
-                            {highestPrice ? (
-                              `${highestPrice} ${_currency}`
-                            ) : (
-                              `${(data as ISaleDetail).start_price} ${_currency}`
-                            )}
+                          <div className={cx("price_box")}>
+                            {highestPrice
+                              ? `${highestPrice} ${_currency}`
+                              : `${
+                                  (data as ISaleDetail).start_price
+                                } ${_currency}`}
                           </div>
                         )}
                       </>
                     )}
                   </div>
-                  <div className={cx('info_area')}>
-                    <div className={cx('title')}>
+                  <div className={cx("info_area")}>
+                    <div className={cx("title")}>
                       작가 인세 {data.royalties}%
                     </div>
-                    <Link to={URLInfo.getProfileUserUrl(data.artist_name)} className={cx('info_box')}>
-                      <div className={cx('thumb')}>
+                    <Link
+                      to={URLInfo.getProfileUserUrl(data.artist_name)}
+                      className={cx("info_box")}
+                    >
+                      <div className={cx("thumb")}>
                         <CircleThumb
                           thumbSrc={data.artist_profile_image}
                           width={30}
@@ -210,17 +241,16 @@ const Sale: React.FC = () => {
                           officialHeight={10}
                         />
                       </div>
-                      <div className={cx('name')}>
-                        {data.artist_name}
-                      </div>
+                      <div className={cx("name")}>{data.artist_name}</div>
                     </Link>
                   </div>
-                  <div className={cx('info_area')}>
-                    <div className={cx('title')}>
-                      컬렉션
-                    </div>
-                    <Link to={URLInfo.getProfileCollectionUrl(data.collection_name)} className={cx('info_box')}>
-                      <div className={cx('thumb')}>
+                  {/* <div className={cx("info_area")}>
+                    <div className={cx("title")}>컬렉션</div>
+                    <Link
+                      to={URLInfo.getProfileCollectionUrl(data.collection_name)}
+                      className={cx("info_box")}
+                    >
+                      <div className={cx("thumb")}>
                         <CircleThumb
                           thumbSrc={data.collection_thumbnail_image}
                           width={30}
@@ -230,38 +260,158 @@ const Sale: React.FC = () => {
                           officialHeight={10}
                         />
                       </div>
-                      <div className={cx('name')}>
-                        {data.collection_name}
+                      <div className={cx("name_box")}>
+                        <div className={cx("name")}>{data.collection_name}</div>
+                        <div className={cx("like")}>
+                          <Like
+                            token_id={
+                              URLInfo.isSalePage()
+                                ? (data as ISaleDetail).token_id
+                                : data.id
+                            }
+                            isLike={data.is_like}
+                            likeCnt={data.like_count}
+                          />
+                        </div>
                       </div>
                     </Link>
-                  </div>
-                  <div className={cx('description_area')}>
+                  </div> */}
+                  <div className={cx("description_area")}>
                     <ProfileDesc description={data.description} />
                   </div>
+                  {URLInfo.isSalePage() && (
+                    <div
+                      className={cx("btn_group")}
+                      style={{
+                        position: "relative",
+                        width: "100%",
+                        boxShadow: "none",
+                      }}
+                    >
+                      {" "}
+                      {saleType === ESaleType.AUCTION && !!myBiddingPrice && (
+                        <div className={cx("price_area")}>
+                          내 입찰가
+                          <span className={cx("price")}>
+                            {myBiddingPrice} {_currency}
+                          </span>
+                        </div>
+                      )}
+                      {saleType === ESaleType.TIME &&
+                        (isEnd ? (
+                          <>
+                            <div className={cx("price_area")}>
+                              최종 입찰가
+                              <span className={cx("price", "final")}>
+                                {highestPrice} {_currency}
+                              </span>
+                            </div>
+                            <div className={cx("time_area")}>
+                              남은시간
+                              <span className={cx("time", "end")}>
+                                종료되었습니다
+                              </span>
+                            </div>
+                          </>
+                        ) : (
+                          <>
+                            {countStart && (
+                              <>
+                                {highestPrice ? (
+                                  <div className={cx("price_area")}>
+                                    현재 최고 입찰가{" "}
+                                    <span className={cx("price")}>
+                                      {highestPrice} {_currency}
+                                    </span>
+                                  </div>
+                                ) : (
+                                  <div className={cx("price_area")}>
+                                    시작 입찰가{" "}
+                                    <span className={cx("price")}>
+                                      {(data as ISaleDetail).start_price}{" "}
+                                      {_currency}
+                                    </span>
+                                  </div>
+                                )}
+                                <div className={cx("time_area")}>
+                                  남은시간
+                                  <span className={cx("time")}>
+                                    {dateText.d}d
+                                  </span>
+                                  <span className={cx("time")}>
+                                    {dateText.h}h
+                                  </span>
+                                  <span className={cx("time")}>
+                                    {dateText.m}m
+                                  </span>
+                                  <span className={cx("time")}>
+                                    {dateText.s}s
+                                  </span>
+                                </div>
+                              </>
+                            )}
+                          </>
+                        ))}{" "}
+                      <SaleButtonContainer
+                        type={
+                          URLInfo.isSalePage()
+                            ? (data as ISaleDetail).token_type
+                            : (data as ITokenDetail).type
+                        }
+                        saleType={saleType}
+                        isOwner={(data as ISaleDetail).is_owner}
+                        highestPrice={highestPrice}
+                        currency={(data as ISaleDetail).currency}
+                        name={data.name}
+                        artist_name={data.artist_name}
+                        myBiddingPrice={myBiddingPrice}
+                        price={price}
+                        isTimeout={isEnd}
+                        status={(data as ISaleDetail).status}
+                        tokenId={
+                          URLInfo.isSalePage()
+                            ? (data as ISaleDetail).token_id
+                            : (data as ITokenDetail).id
+                        }
+                        startPrice={(data as ISaleDetail).start_price}
+                      />
+                    </div>
+                  )}
                 </div>
-                <SaleTab type={URLInfo.isSalePage() ? (data as ISaleDetail).token_type : (data as ITokenDetail).type} saleType={(data as ISaleDetail).sale_type} />
+                <SaleTab
+                  type={
+                    URLInfo.isSalePage()
+                      ? (data as ISaleDetail).token_type
+                      : (data as ITokenDetail).type
+                  }
+                  saleType={(data as ISaleDetail).sale_type}
+                />
               </div>
-              <div className={cx('btn_group')}>
-                {URLInfo.isSalePage() && (
+              <div className={cx("btn_group")}>
+                {/* {URLInfo.isSalePage() && (
                   <>
-                    {saleType === ESaleType.AUCTION && (
-                      !!myBiddingPrice && (
-                        <div className={cx('price_area')}>
-                          내 입찰가
-                          <span className={cx('price')}>{myBiddingPrice} {_currency}</span>
-                        </div>
-                      )
+                    {saleType === ESaleType.AUCTION && !!myBiddingPrice && (
+                      <div className={cx("price_area")}>
+                        내 입찰가
+                        <span className={cx("price")}>
+                          {myBiddingPrice} {_currency}
+                        </span>
+                      </div>
                     )}
-                    {saleType === ESaleType.TIME && (
-                      isEnd ? (
+                    {saleType === ESaleType.TIME &&
+                      (isEnd ? (
                         <>
-                          <div className={cx('price_area')}>
+                          <div className={cx("price_area")}>
                             최종 입찰가
-                            <span className={cx('price', 'final')}>{highestPrice} {_currency}</span>
+                            <span className={cx("price", "final")}>
+                              {highestPrice} {_currency}
+                            </span>
                           </div>
-                          <div className={cx('time_area')}>
+                          <div className={cx("time_area")}>
                             남은시간
-                            <span className={cx('time', 'end')}>종료되었습니다</span>
+                            <span className={cx("time", "end")}>
+                              종료되었습니다
+                            </span>
                           </div>
                         </>
                       ) : (
@@ -269,29 +419,67 @@ const Sale: React.FC = () => {
                           {countStart && (
                             <>
                               {highestPrice ? (
-                                <div className={cx('price_area')}>
-                                  현재 최고 입찰가 <span className={cx('price')}>{highestPrice} {_currency}</span>
+                                <div className={cx("price_area")}>
+                                  현재 최고 입찰가{" "}
+                                  <span className={cx("price")}>
+                                    {highestPrice} {_currency}
+                                  </span>
                                 </div>
                               ) : (
-                                <div className={cx('price_area')}>
-                                  시작 입찰가 <span className={cx('price')}>{(data as ISaleDetail).start_price} {_currency}</span>
+                                <div className={cx("price_area")}>
+                                  시작 입찰가{" "}
+                                  <span className={cx("price")}>
+                                    {(data as ISaleDetail).start_price}{" "}
+                                    {_currency}
+                                  </span>
                                 </div>
                               )}
-                              <div className={cx('time_area')}>
+                              <div className={cx("time_area")}>
                                 남은시간
-                                <span className={cx('time')}>{dateText.d}d</span>
-                                <span className={cx('time')}>{dateText.h}h</span>
-                                <span className={cx('time')}>{dateText.m}m</span>
-                                <span className={cx('time')}>{dateText.s}s</span>
+                                <span className={cx("time")}>
+                                  {dateText.d}d
+                                </span>
+                                <span className={cx("time")}>
+                                  {dateText.h}h
+                                </span>
+                                <span className={cx("time")}>
+                                  {dateText.m}m
+                                </span>
+                                <span className={cx("time")}>
+                                  {dateText.s}s
+                                </span>
                               </div>
                             </>
                           )}
                         </>
-                      )
-                    )}
+                      ))}
                   </>
+                )} */}
+                {!URLInfo.isSalePage() && (
+                  <SaleButtonContainer
+                    type={
+                      URLInfo.isSalePage()
+                        ? (data as ISaleDetail).token_type
+                        : (data as ITokenDetail).type
+                    }
+                    saleType={saleType}
+                    isOwner={(data as ISaleDetail).is_owner}
+                    highestPrice={highestPrice}
+                    currency={(data as ISaleDetail).currency}
+                    name={data.name}
+                    artist_name={data.artist_name}
+                    myBiddingPrice={myBiddingPrice}
+                    price={price}
+                    isTimeout={isEnd}
+                    status={(data as ISaleDetail).status}
+                    tokenId={
+                      URLInfo.isSalePage()
+                        ? (data as ISaleDetail).token_id
+                        : (data as ITokenDetail).id
+                    }
+                    startPrice={(data as ISaleDetail).start_price}
+                  />
                 )}
-                <SaleButtonContainer type={URLInfo.isSalePage() ? (data as ISaleDetail).token_type : (data as ITokenDetail).type} saleType={saleType} isOwner={(data as ISaleDetail).is_owner} highestPrice={highestPrice} currency={(data as ISaleDetail).currency} name={data.name} artist_name={data.artist_name} myBiddingPrice={myBiddingPrice} price={price} isTimeout={isEnd} status={(data as ISaleDetail).status} tokenId={URLInfo.isSalePage() ? (data as ISaleDetail).token_id : (data as ITokenDetail).id} startPrice={(data as ISaleDetail).start_price} />
               </div>
             </div>
           )}
@@ -299,7 +487,6 @@ const Sale: React.FC = () => {
       ) : (
         <Loading />
       )}
-
     </div>
   );
 };