feat: launchpad responsive detail page

packages/web/src/components/common/icons/IconChevronRight.tsx

@@ -0,0 +1,18 @@
+const IconChevronRight = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+    >
+      <path
+        d="M5.72668 11.06L8.78002 8L5.72668 4.94L6.66668 4L10.6667 8L6.66668 12L5.72668 11.06Z"
+        fill="#596782"
+      />
+    </svg>
+  );
+};
+
+export default IconChevronRight;

packages/web/src/components/common/launchpad-modal/launchpad-claim-all-modal/LaunchpadClaimAllModal.styles.ts

@@ -9,6 +9,9 @@ export const LaunchpadClaimAllModalWrapper = styled.div`
   max-width: 500px;
   width: 90vw;
   gap: 16px;
+  ${media.mobile} {
+    width: 328px;
+  }
   .modal-body {
     ${mixins.flexbox("column", "flex-start", "flex-start")};
     background-color: ${({ theme }) => theme.color.background06};
@@ -19,6 +22,10 @@ export const LaunchpadClaimAllModalWrapper = styled.div`
     width: 100%;
     gap: 16px;
     padding: 24px;
+    ${media.mobile} {
+      gap: 8px;
+      padding: 12px;
+    }
     .header {
       ${mixins.flexbox("row", "center", "space-between")};
       width: 100%;
@@ -56,6 +63,9 @@ export const LaunchpadClaimAllModalWrapper = styled.div`
       width: 100%;
       max-height: calc(80vh - 200px);
       overflow-y: auto;
+      ${media.mobile} {
+        padding: 0px;
+      }
     }
 
     .content {
@@ -80,6 +90,9 @@ export const LaunchpadClaimAllModalWrapper = styled.div`
             width: 100%;
             font-size: 14px;
             font-weight: 400;
+            ${media.mobile} {
+              font-size: 13px;
+            }
             .key {
               color: ${({ theme }) => theme.color.text04};
             }
@@ -101,9 +114,15 @@ export const LaunchpadClaimAllModalWrapper = styled.div`
       width: 100%;
       button {
         height: 57px;
+        ${media.mobile} {
+          height: 41px;
+        }
         span {
           font-size: 18px;
           font-weight: 500;
+          ${media.mobile} {
+            font-size: 16px;
+          }
         }
       }
     }

packages/web/src/components/common/launchpad-modal/launchpad-claim-all-modal/launchpad-claim-amount-field/LaunchpadClaimAmountField.styled.ts

@@ -1,5 +1,6 @@
 import mixins from "@styles/mixins";
 import styled from "@emotion/styled";
+import { media } from "@styles/media";
 
 export const ClaimAllFieldWrapper = styled.div`
   ${mixins.flexbox("column", "flex-end", "center")}
@@ -10,6 +11,9 @@ export const ClaimAllFieldWrapper = styled.div`
     color: ${({ theme }) => theme.color.text03};
     font-size: 14px;
     font-weight: 400;
+    ${media.mobile} {
+      font-size: 13px;
+    }
     img {
       width: 24px;
       height: 24px;

packages/web/src/components/common/launchpad-modal/launchpad-deposit-modal/LaunchpadDepositModal.styles.ts

@@ -9,6 +9,9 @@ export const LaunchpadDepositModalWrapper = styled.div`
   max-width: 500px;
   width: 90vw;
   gap: 16px;
+  ${media.mobile} {
+    width: 328px;
+  }
   .modal-body {
     ${mixins.flexbox("column", "flex-start", "flex-start")};
     background-color: ${({ theme }) => theme.color.background06};
@@ -19,6 +22,10 @@ export const LaunchpadDepositModalWrapper = styled.div`
     width: 100%;
     gap: 16px;
     padding: 24px;
+    ${media.mobile} {
+      gap: 12px;
+      padding: 16px;
+    }
     .header {
       ${mixins.flexbox("row", "center", "space-between")};
       width: 100%;
@@ -55,6 +62,9 @@ export const LaunchpadDepositModalWrapper = styled.div`
       ${mixins.flexbox("column", "flex-start", "flex-start")};
       gap: 16px;
       width: 100%;
+      ${media.mobile} {
+        gap: 12px;
+      }
       .data {
         ${mixins.flexbox("column", "flex-start", "flex-start")};
         gap: 8px;
@@ -74,13 +84,21 @@ export const LaunchpadDepositModalWrapper = styled.div`
           background: ${({ theme }) =>
             theme.themeKey === "dark" ? theme.color.backgroundOpacity : ""};
           padding: 16px;
+          ${media.mobile} {
+            padding: 12px;
+            gap: 8px;
+          }
           .data-row {
             ${mixins.flexbox("row", "center", "space-between")};
             width: 100%;
             font-size: 14px;
             font-weight: 400;
+            ${media.mobile} {
+              font-size: 13px;
+            }
             .key {
               color: ${({ theme }) => theme.color.text04};
+              ${media}
             }
             .value {
               ${mixins.flexbox("row", "center", "center")};
@@ -99,6 +117,9 @@ export const LaunchpadDepositModalWrapper = styled.div`
         border: 1px solid rgba(255, 159, 10, 0.1);
         background: rgba(255, 159, 10, 0.08);
         padding: 16px;
+        ${media.mobile} {
+          padding: 12px;
+        }
         .header {
           ${mixins.flexbox("row", "center", "flex-start")}
           gap: 8px;
@@ -142,9 +163,15 @@ export const LaunchpadDepositModalWrapper = styled.div`
       width: 100%;
       button {
         height: 57px;
+        ${media.mobile} {
+          height: 41px;
+        }
         span {
           font-size: 18px;
           font-weight: 500;
+          ${media.mobile} {
+            font-size: 16px;
+          }
         }
       }
     }

packages/web/src/components/common/table-skeleton/TableSkeleton.tsx

@@ -7,16 +7,16 @@ import {
   emptyArrayInit,
   pulseSkeletonStyle,
   TableInfoType,
-  TABLE_TITLE
+  TABLE_TITLE,
 } from "@constants/skeleton.constant";
 import { DEVICE_TYPE } from "@styles/media";
 
 import {
   SkeletonItem,
   SkeletonWrapper,
-  UnLoadingItem
+  UnLoadingItem,
 } from "./TableSkeleton.styles";
-
+import SwapPageButton from "@components/launchpad/swap-page-button/SwapPageButton";
 
 interface TableSkeletonProps {
   info: TableInfoType;
@@ -31,20 +31,25 @@ const TableSkeleton: React.FC<TableSkeletonProps> = ({ info, className }) => {
     <>
       {emptyArrayInit(info.total).map((_, index) => (
         <SkeletonWrapper key={index} title={info.title} className={className}>
-          {info.list.filter(item => !item.hideSkeleton).map((item, idx) => (
-            <SkeletonItem
-              key={idx}
-              className={cx({
-                left: item.left,
-                [item.className as string]: true,
-              })}
-              tdWidth={info.list[idx].width}
-            >
-              <span
-                css={pulseSkeletonStyle({ w: item.skeletonWidth, type: item.type })}
-              />
-            </SkeletonItem>
-          ))}
+          {info.list
+            .filter(item => !item.hideSkeleton)
+            .map((item, idx) => (
+              <SkeletonItem
+                key={idx}
+                className={cx({
+                  left: item.left,
+                  [item.className as string]: true,
+                })}
+                tdWidth={info.list[idx].width}
+              >
+                <span
+                  css={pulseSkeletonStyle({
+                    w: item.skeletonWidth,
+                    type: item.type,
+                  })}
+                />
+              </SkeletonItem>
+            ))}
           {info.title === TABLE_TITLE.ASSET_TABLE && (
             <>
               <UnLoadingItem
@@ -61,6 +66,11 @@ const TableSkeleton: React.FC<TableSkeletonProps> = ({ info, className }) => {
               </UnLoadingItem>
             </>
           )}
+          {info.title === TABLE_TITLE.LAUNCHPAD_TABLE && (
+            <UnLoadingItem tdWidth={ASSET_TD[ASSET_TD.length - 1]}>
+              <SwapPageButton onClick={() => false} disabled />
+            </UnLoadingItem>
+          )}
         </SkeletonWrapper>
       ))}
     </>

packages/web/src/components/launchpad/swap-page-button/SwapPageButton.styles.ts

@@ -0,0 +1,31 @@
+import styled from "@emotion/styled";
+import mixins from "@styles/mixins";
+
+export const SwapPageButtonWrapper = styled.button`
+  ${mixins.flexbox("row", "center", "center")}
+  gap: 4px;
+  color: ${({ theme }) => theme.color.text04};
+  font-weight: 400;
+  cursor: pointer;
+  .svg {
+    width: 16px;
+    height: 16px;
+    font-size: 0;
+    * {
+      fill: ${({ theme }) =>
+        theme.themeKey === "dark" ? "#596782" : "#90A2C0"};
+    }
+  }
+
+  &,
+  svg * {
+    transition: all 0.3s ease;
+  }
+
+  &:hover {
+    color: ${({ theme }) => theme.color.text03};
+    svg * {
+      fill: ${({ theme }) => theme.color.icon07};
+    }
+  }
+`;

packages/web/src/components/launchpad/swap-page-button/SwapPageButton.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+
+import IconChevronRight from "@components/common/icons/IconChevronRight";
+import { SwapPageButtonWrapper } from "./SwapPageButton.styles";
+
+const SwapPageButton = ({
+  className,
+  onClick,
+  disabled = false,
+}: {
+  className?: string;
+  onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
+  disabled?: boolean;
+}) => {
+  return (
+    <SwapPageButtonWrapper
+      className={className ? className : ""}
+      onClick={onClick}
+      disabled={disabled}
+    >
+      <span>Swap</span>
+      <IconChevronRight />
+    </SwapPageButtonWrapper>
+  );
+};
+
+export default SwapPageButton;

packages/web/src/constants/skeleton.constant.ts

@@ -548,7 +548,8 @@ export const PROJECT_INFO = {
       width: 200,
       type: SHAPE_TYPES.ROUNDED_SQUARE,
       left: false,
-      skeletonWidth: 161,
+      skeletonWidth: 200,
+      hideSkeleton: true,
     },
   ],
 };

packages/web/src/views/launchpad/LaunchpadLayout.styles.ts

@@ -93,7 +93,7 @@ export const LaunchpadLayoutWrapper = styled.div`
       color: ${({ theme }) => theme.color.text02};
       ${media.tablet} {
         font-size: clamp(3rem, 1.8041rem + 1.6216vw, 3.75rem);
-        font-weight: 600;
+        font-weight: 700;
       }
       ${media.mobile} {
         font-size: clamp(2.25rem, 1.9207rem + 1.4634vw, 3rem);
@@ -221,8 +221,7 @@ export const LaunchpadLayoutWrapper = styled.div`
     ${mixins.flexbox("row", "center", "center")};
     width: 100%;
     .mobile-title {
-      color: ${({ theme }) =>
-        theme.themeKey === "dark" ? theme.color.border07 : theme.color.text03};
+      color: ${({ theme }) => theme.color.text02};
     }
     font-size: clamp(1.9375rem, 1.471rem + 2.0732vw, 3rem);
     font-weight: 600;

packages/web/src/views/launchpad/components/launchpad-active-projects/launchpad-active-projects-content/LaunchpadActiveProjectsContent.tsx

@@ -3,6 +3,7 @@ import React from "react";
 import { LaunchpadProjectResponse } from "@repositories/launchpad/response";
 
 import LaunchpadActiveProjectsCardList from "./launchpad-active-projects-card-list/LaunchpadActiveProjectsCardList";
+import LaunchpadActiveProjectNoData from "./launchpad-active-project-no-data/LaunchpadActiveProjectNoData";
 
 export interface LaunchpadActiveProjectsContentProps {
   activeProjectList: LaunchpadProjectResponse[];
@@ -34,6 +35,9 @@ const LaunchpadActiveProjectsContent: React.FC<
   onClickLoadMore,
   moveProjectDetail,
 }) => {
+  if (isFetched && activeProjectList.length === 0) {
+    return <LaunchpadActiveProjectNoData />;
+  }
   return (
     <LaunchpadActiveProjectsCardList
       activeProjectList={activeProjectList}

packages/web/src/views/launchpad/components/launchpad-active-projects/launchpad-active-projects-content/launchpad-active-project-no-data/LaunchpadActiveProjectNoData.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import {
+  ActiveProjectsCardListWrapper,
+  ActiveProjectsGridWrapper,
+  BlankProjectCard,
+} from "../launchpad-active-projects-card-list/LaunchpadActiveProjectsCardList.styles";
+
+const LaunchpadActiveProjectNoData = () => {
+  return (
+    <ActiveProjectsCardListWrapper>
+      <ActiveProjectsGridWrapper>
+        {Array.from({ length: 4 }).map((_, idx) => {
+          return <BlankProjectCard key={idx} />;
+        })}
+      </ActiveProjectsGridWrapper>
+    </ActiveProjectsCardListWrapper>
+  );
+};
+
+export default LaunchpadActiveProjectNoData;

packages/web/src/views/launchpad/components/launchpad-active-projects/launchpad-active-projects-content/launchpad-active-projects-card-list/LaunchpadActiveProjectsCardList.styles.ts

@@ -52,3 +52,20 @@ export const ActiveProjectsGridWrapper = styled.div`
     border-radius: 10px;
   }
 `;
+
+export const BlankProjectCard = styled.div`
+  min-width: 322px;
+  width: 100%;
+  height: 317px;
+  border-radius: 10px;
+  border-radius: 10px;
+  background: ${({ theme }) =>
+    theme.themeKey === "dark" ? "rgba(20, 26, 41, 0.5);" : ""};
+  border: ${({ theme }) =>
+    theme.themeKey === "dark" ? "none" : `1px solid ${theme.color.border01}`};
+  box-shadow: ${({ theme }) =>
+    theme.themeKey === "dark" ? "4px 4px 20px 0px rgba(0, 0, 0, 0.05)" : ""};
+  ${media.tablet} {
+    height: 341px;
+  }
+`;