Renew/store page (#245)

AboutClan · Nov 18, 2024 · f8855c2 · f8855c2
1 parent c09e2bd
commit f8855c2
Show file tree

Hide file tree

Showing 37 changed files with 1,038 additions and 795 deletions.
diff --git a/components/Icons/ArrowIcons.tsx b/components/Icons/ArrowIcons.tsx
@@ -1,11 +1,19 @@
-export function ShortArrowIcon({ dir }: { dir: "right" | "bottom" | "top" }) {
+export function ShortArrowIcon({
+  dir,
+  color = "mint",
+}: {
+  color?: "mint" | "white";
+  dir: "right" | "bottom" | "top" | "left";
+}) {
+  const colorText = color === "mint" ? "#00C2B3" : "white";
+
   return dir === "right" ? (
     <svg xmlns="http://www.w3.org/2000/svg" width="13" height="12" viewBox="0 0 13 12" fill="none">
       <path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M4.8124 10.0502C4.6399 10.0502 4.4674 9.98271 4.3324 9.85521C4.20645 9.72871 4.13574 9.55747 4.13574 9.37896C4.13574 9.20045 4.20645 9.02921 4.3324 8.90271L7.2349 6.00021L4.3324 3.10521C4.20645 2.97871 4.13574 2.80747 4.13574 2.62896C4.13574 2.45045 4.20645 2.27921 4.3324 2.15271C4.4589 2.02677 4.63014 1.95605 4.80865 1.95605C4.98716 1.95605 5.1584 2.02677 5.2849 2.15271L8.6599 5.52771C8.78585 5.65421 8.85656 5.82545 8.85656 6.00396C8.85656 6.18247 8.78585 6.35371 8.6599 6.48021L5.2849 9.85521C5.1574 9.98271 4.9849 10.0502 4.8124 10.0502"
-        fill="#00C2B3"
+        fill={colorText}
       />
     </svg>
   ) : dir === "bottom" ? (
@@ -14,7 +22,17 @@ export function ShortArrowIcon({ dir }: { dir: "right" | "bottom" | "top" }) {
         fillRule="evenodd"
         clipRule="evenodd"
         d="M1.95 4.3124C1.95 4.1399 2.0175 3.9674 2.145 3.8324C2.2715 3.70645 2.44274 3.63574 2.62125 3.63574C2.79976 3.63574 2.971 3.70645 3.0975 3.8324L6 6.7349L8.895 3.8324C9.0215 3.70645 9.19274 3.63574 9.37125 3.63574C9.54976 3.63574 9.721 3.70645 9.8475 3.8324C9.97345 3.9589 10.0442 4.13014 10.0442 4.30865C10.0442 4.48716 9.97345 4.6584 9.8475 4.7849L6.4725 8.1599C6.346 8.28585 6.17476 8.35656 5.99625 8.35656C5.81774 8.35656 5.6465 8.28585 5.52 8.1599L2.145 4.7849C2.0175 4.6574 1.95 4.4849 1.95 4.3124Z"
-        fill="#00C2B3"
+        fill={colorText}
+      />
+    </svg>
+  ) : dir === "left" ? (
+    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+      <rect width="20" height="20" />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M12.8125 16.75C12.6648 16.75 12.5185 16.7209 12.3821 16.6643C12.2456 16.6077 12.1217 16.5246 12.0175 16.42L6.3925 10.795C6.28799 10.6905 6.2051 10.5665 6.14854 10.4299C6.09198 10.2934 6.06287 10.1471 6.06287 9.99933C6.06287 9.85157 6.09198 9.70525 6.14854 9.56873C6.2051 9.43222 6.28799 9.30818 6.3925 9.20371L12.0175 3.57871C12.1212 3.47061 12.2453 3.38429 12.3828 3.32481C12.5202 3.26534 12.6682 3.23391 12.8179 3.23236C12.9677 3.23081 13.1163 3.25919 13.2549 3.31581C13.3936 3.37244 13.5195 3.45618 13.6254 3.56212C13.7312 3.66806 13.8149 3.79407 13.8714 3.93276C13.9279 4.07146 13.9561 4.22004 13.9545 4.36979C13.9528 4.51955 13.9213 4.66747 13.8617 4.80487C13.8021 4.94227 13.7157 5.0664 13.6075 5.16996L8.77875 9.99996L13.6075 14.8287C13.7651 14.986 13.8724 15.1864 13.916 15.4048C13.9596 15.6231 13.9374 15.8494 13.8523 16.0551C13.7672 16.2608 13.6229 16.4366 13.4378 16.5603C13.2527 16.684 13.0351 16.75 12.8125 16.75Z"
+        fill={colorText}
       />
     </svg>
   ) : (
@@ -23,7 +41,7 @@ export function ShortArrowIcon({ dir }: { dir: "right" | "bottom" | "top" }) {
         fillRule="evenodd"
         clipRule="evenodd"
         d="M1.95 7.6876C1.95 7.8601 2.0175 8.0326 2.145 8.1676C2.2715 8.29355 2.44274 8.36426 2.62125 8.36426C2.79976 8.36426 2.971 8.29355 3.0975 8.1676L6 5.2651L8.895 8.1676C9.0215 8.29355 9.19274 8.36426 9.37125 8.36426C9.54976 8.36426 9.721 8.29355 9.8475 8.1676C9.97345 8.0411 10.0442 7.86986 10.0442 7.69135C10.0442 7.51284 9.97345 7.3416 9.8475 7.2151L6.4725 3.8401C6.346 3.71415 6.17476 3.64344 5.99625 3.64344C5.81774 3.64344 5.6465 3.71415 5.52 3.8401L2.145 7.2151C2.0175 7.3426 1.95 7.5151 1.95 7.6876Z"
-        fill="#00C2B3"
+        fill={colorText}
       />
     </svg>
   );

diff --git a/components/Icons/CircleIcons.tsx b/components/Icons/CircleIcons.tsx
@@ -131,3 +131,21 @@ export function XCircleIcon({ size }: { size: "sm" | "md" }) {
     </svg>
   );
 }
+
+export function InfoCircleIcon() {
+  return <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+    <g clip-path="url(#clip0_2444_1052)">
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M10 7.66671C9.73479 7.66671 9.48044 7.56135 9.2929 7.37381C9.10537 7.18628 9.00001 6.93192 9.00001 6.66671C9.00001 6.40149 9.10537 6.14714 9.2929 5.9596C9.48044 5.77206 9.73479 5.66671 10 5.66671C10.2652 5.66671 10.5196 5.77206 10.7071 5.9596C10.8947 6.14714 11 6.40149 11 6.66671C11 6.93192 10.8947 7.18628 10.7071 7.37381C10.5196 7.56135 10.2652 7.66671 10 7.66671ZM10.8333 13.8625C10.8333 14.0836 10.7455 14.2955 10.5893 14.4518C10.433 14.6081 10.221 14.6959 10 14.6959C9.779 14.6959 9.56704 14.6081 9.41076 14.4518C9.25447 14.2955 9.16668 14.0836 9.16668 13.8625V9.69587C9.16668 9.47486 9.25447 9.2629 9.41076 9.10662C9.56704 8.95034 9.779 8.86254 10 8.86254C10.221 8.86254 10.433 8.95034 10.5893 9.10662C10.7455 9.2629 10.8333 9.47486 10.8333 9.69587V13.8625ZM10 0.833374C4.93751 0.833374 0.833344 4.93754 0.833344 10C0.833344 15.0625 4.93751 19.1667 10 19.1667C15.0625 19.1667 19.1667 15.0625 19.1667 10C19.1667 4.93754 15.0625 0.833374 10 0.833374Z"
+        fill="#E0E0E0"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_2444_1052">
+        <rect width="20" height="20" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+}
diff --git a/components/Icons/DotIcons.tsx b/components/Icons/DotIcons.tsx
@@ -1,4 +1,10 @@
-export function EllipsisIcon({ size }: { size: "sm" | "md" }) {
+export function EllipsisIcon({
+  size,
+  color = "gray",
+}: {
+  size: "sm" | "md";
+  color?: "white" | "gray";
+}) {
   const width = size === "sm" ? 12 : 20;
   return (
     <svg
@@ -12,7 +18,7 @@ export function EllipsisIcon({ size }: { size: "sm" | "md" }) {
         fillRule="evenodd"
         clipRule="evenodd"
         d="M4.16667 11.6674C3.94774 11.6674 3.73097 11.6242 3.52873 11.5404C3.32649 11.4565 3.14275 11.3337 2.98798 11.1788C2.83322 11.024 2.71047 10.8402 2.62674 10.6379C2.54301 10.4356 2.49995 10.2188 2.5 9.99992C2.50005 9.78099 2.54323 9.56422 2.62706 9.36199C2.71089 9.15975 2.83373 8.976 2.98857 8.82124C3.14341 8.66647 3.32722 8.54372 3.5295 8.45999C3.73178 8.37626 3.94858 8.3332 4.1675 8.33325C4.60964 8.33336 5.03362 8.50911 5.34618 8.82182C5.65874 9.13454 5.83428 9.55861 5.83417 10.0008C5.83406 10.4429 5.65831 10.8669 5.34559 11.1794C5.03288 11.492 4.6088 11.6675 4.16667 11.6674ZM9.80917 11.6674C9.36714 11.6674 8.94322 11.4918 8.63066 11.1793C8.31809 10.8667 8.1425 10.4428 8.1425 10.0008C8.1425 9.55872 8.31809 9.1348 8.63066 8.82224C8.94322 8.50968 9.36714 8.33409 9.80917 8.33409C10.2512 8.33409 10.6751 8.50968 10.9877 8.82224C11.3002 9.1348 11.4758 9.55872 11.4758 10.0008C11.4758 10.4428 11.3002 10.8667 10.9877 11.1793C10.6751 11.4918 10.2512 11.6674 9.80917 11.6674ZM15.4508 11.6674C15.2319 11.6674 15.0151 11.6242 14.8129 11.5404C14.6107 11.4565 14.4269 11.3337 14.2721 11.1788C14.1174 11.024 13.9946 10.8402 13.9109 10.6379C13.8272 10.4356 13.7841 10.2188 13.7842 9.99992C13.7842 9.78099 13.8274 9.56422 13.9112 9.36199C13.9951 9.15975 14.1179 8.976 14.2727 8.82124C14.4276 8.66647 14.6114 8.54372 14.8137 8.45999C15.016 8.37626 15.2327 8.3332 15.4517 8.33325C15.8938 8.33336 16.3178 8.50911 16.6304 8.82182C16.9429 9.13454 17.1184 9.55861 17.1183 10.0008C17.1182 10.4429 16.9425 10.8669 16.6298 11.1794C16.317 11.492 15.893 11.6675 15.4508 11.6674Z"
-        fill="#BDBDBD"
+        fill={color === "gray" ? "#BDBDBD" : "white"}
       />
     </svg>
   );

diff --git a/components/Icons/RuleIcon.tsx b/components/Icons/RuleIcon.tsx
@@ -1,11 +1,12 @@
 import styled from "styled-components";
 
 import { IModal } from "../../types/components/modalTypes";
+import { InfoCircleIcon } from "./CircleIcons";
 
 function RuleIcon({ setIsModal }: IModal) {
   return (
     <Layout onClick={() => setIsModal(true)}>
-      <i className="fa-regular fa-info-circle fa-lg" style={{ color: "var(--gray-600)" }} />
+      <InfoCircleIcon />
     </Layout>
   );
 }

diff --git a/components/Icons/icons.tsx b/components/Icons/icons.tsx
@@ -11,6 +11,15 @@ export function UserIcon() {
   );
 }
 
+export function TrophyIcon() {
+  return <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+    <path
+      d="M4.66667 7.2V4.66667H3.33333V5.33333C3.33333 5.75556 3.45556 6.13611 3.7 6.475C3.94444 6.81389 4.26667 7.05556 4.66667 7.2ZM11.3333 7.2C11.7333 7.05556 12.0556 6.81389 12.3 6.475C12.5444 6.13611 12.6667 5.75556 12.6667 5.33333V4.66667H11.3333V7.2ZM7.33333 12.6667V10.6C6.78889 10.4778 6.30278 10.2472 5.875 9.90833C5.44722 9.56944 5.13333 9.14444 4.93333 8.63333C4.1 8.53333 3.40278 8.16944 2.84167 7.54167C2.28056 6.91389 2 6.17778 2 5.33333V4.66667C2 4.3 2.13056 3.98611 2.39167 3.725C2.65278 3.46389 2.96667 3.33333 3.33333 3.33333H4.66667C4.66667 2.96667 4.79722 2.65278 5.05833 2.39167C5.31944 2.13056 5.63333 2 6 2H10C10.3667 2 10.6806 2.13056 10.9417 2.39167C11.2028 2.65278 11.3333 2.96667 11.3333 3.33333H12.6667C13.0333 3.33333 13.3472 3.46389 13.6083 3.725C13.8694 3.98611 14 4.3 14 4.66667V5.33333C14 6.17778 13.7194 6.91389 13.1583 7.54167C12.5972 8.16944 11.9 8.53333 11.0667 8.63333C10.8667 9.14444 10.5528 9.56944 10.125 9.90833C9.69722 10.2472 9.21111 10.4778 8.66667 10.6V12.6667H10.6667C10.8556 12.6667 11.0139 12.7306 11.1417 12.8583C11.2694 12.9861 11.3333 13.1444 11.3333 13.3333C11.3333 13.5222 11.2694 13.6806 11.1417 13.8083C11.0139 13.9361 10.8556 14 10.6667 14H5.33333C5.14444 14 4.98611 13.9361 4.85833 13.8083C4.73056 13.6806 4.66667 13.5222 4.66667 13.3333C4.66667 13.1444 4.73056 12.9861 4.85833 12.8583C4.98611 12.7306 5.14444 12.6667 5.33333 12.6667H7.33333Z"
+      fill="#FFA500"
+    />
+  </svg>
+}
+
 export function KakaoChatIcon() {
   return (
     <svg

diff --git a/components/atoms/ButtonWrapper.tsx b/components/atoms/ButtonWrapper.tsx
@@ -16,6 +16,7 @@ function ButtonWrapper({ text, children, onClick, url, size = "md" }: ButtonWrap
       {url ? (
         <Link href={url}>
           <Button
+            bg="inherit"
             as="div"
             variant="unstyled"
             w={width}

diff --git a/components/atoms/CountNum.tsx b/components/atoms/CountNum.tsx
@@ -1,3 +1,4 @@
+import { Box } from "@chakra-ui/react";
 import styled from "styled-components";
 
 import { useToast } from "../../hooks/custom/CustomToast";
@@ -34,10 +35,10 @@ function CountNum({ value, setValue, unit, min = 1, isSmall, maxValue }: ICountN
       >
         <i className="fa-regular fa-minus fa-sm" />
       </IconWrapper>
-      <Count>
+      <Box as="span" fontSize="20px" mx={1}>
         {value}
         {unit}
-      </Count>
+      </Box>
       <IconWrapper isMinus={false} isVisible={true} isSmall={isSmall} onClick={onClickUpValue}>
         <i className="fa-regular fa-plus fa-sm" />
       </IconWrapper>
@@ -48,7 +49,7 @@ function CountNum({ value, setValue, unit, min = 1, isSmall, maxValue }: ICountN
 const Layout = styled.div<{ isSmall: boolean }>`
   display: flex;
   align-items: center;
-  font-size: ${(props) => (props.isSmall ? "14px" : "20px")};
+  font-size: ${(props) => (props.isSmall ? "14px" : "18px")};
 `;
 
 const IconWrapper = styled.button<{
@@ -65,6 +66,4 @@ const IconWrapper = styled.button<{
   cursor: pointer;
 `;
 
-const Count = styled.span``;
-
 export default CountNum;
diff --git a/components/atoms/InfoCol.tsx b/components/atoms/InfoCol.tsx
@@ -0,0 +1,36 @@
+import { Box, Flex } from "@chakra-ui/react";
+
+export interface InfoColOptions {
+  left: string;
+  right: string;
+}
+
+interface InfoColProps {
+  optionsArr: InfoColOptions[];
+  isMint?: boolean;
+}
+
+function InfoCol({ optionsArr, isMint }: InfoColProps) {
+  return (
+    <Flex
+      direction="column"
+      w="full"
+      border="1px solid F7F7F7"
+      borderRadius="8px"
+      px={3}
+      py={2}
+      bg="rgba(97,106,97,0.04)"
+    >
+      {optionsArr.map(({ left, right }, idx) => (
+        <Flex key={idx} justify="space-between" fontSize="11px" my={1}>
+          <Box color="gray.600">{left}</Box>
+          <Box color={isMint ? "mint" : "gray.800"} fontWeight="medium">
+            {right}
+          </Box>
+        </Flex>
+      ))}
+    </Flex>
+  );
+}
+
+export default InfoCol;
diff --git a/components/atoms/InfoColSkeleton.tsx b/components/atoms/InfoColSkeleton.tsx
@@ -0,0 +1,22 @@
+import { Box, Flex, Skeleton } from "@chakra-ui/react";
+
+interface InfoColSkeletonProps {
+  leftArr: string[];
+}
+
+function InfoColSkeleton({ leftArr }: InfoColSkeletonProps) {
+  return (
+    <Flex direction="column" w="full">
+      {leftArr.map((text, idx) => (
+        <Flex key={idx} justify="space-between" fontSize="11px" my={1}>
+          <Box color="gray.600">{text}</Box>
+          <Box w="36px" h="20px">
+            <Skeleton>1</Skeleton>
+          </Box>
+        </Flex>
+      ))}
+    </Flex>
+  );
+}
+
+export default InfoColSkeleton;
diff --git a/components/atoms/buttons/ArrowBackButton.tsx b/components/atoms/buttons/ArrowBackButton.tsx
@@ -1,13 +1,20 @@
 import { useRouter } from "next/navigation";
 
+import { ShortArrowIcon } from "../../Icons/ArrowIcons";
 import ButtonWrapper from "../ButtonWrapper";
 
 interface IArrowBackButton {
   defaultUrl?: string;
   url?: string;
   func?: () => void;
+  color?: "mint" | "white";
 }
-export default function ArrowBackButton({ url, func, defaultUrl }: IArrowBackButton) {
+export default function ArrowBackButton({
+  url,
+  func,
+  defaultUrl,
+  color = "white",
+}: IArrowBackButton) {
   const router = useRouter();
 
   const handleGoBack = () => {
@@ -20,13 +27,19 @@ export default function ArrowBackButton({ url, func, defaultUrl }: IArrowBackBut
     else router.push(defaultUrl);
   };
 
-  return <ArrowBackButtonUI onClick={handleGoBack} />;
+  return <ArrowBackButtonUI onClick={handleGoBack} color={color} />;
 }
 
-export function ArrowBackButtonUI({ onClick }: { onClick: () => void }) {
+export function ArrowBackButtonUI({
+  onClick,
+  color,
+}: {
+  onClick: () => void;
+  color: "mint" | "white";
+}) {
   return (
     <ButtonWrapper onClick={onClick}>
-      <i className="fa-solid fa-chevron-left fa-sm" />
+      <ShortArrowIcon dir="left" color={color} />
     </ButtonWrapper>
   );
 }
diff --git a/components/atoms/buttons/MenuButton.tsx b/components/atoms/buttons/MenuButton.tsx
@@ -2,7 +2,6 @@ import { Button, Menu, MenuButton as ChakraMenuButton, MenuItem, MenuList } from
 
 import { EllipsisIcon } from "../../Icons/DotIcons";
 import KakaoShareBtn from "../../Icons/KakaoShareBtn";
-import ButtonWrapper from "../ButtonWrapper";
 
 export interface MenuProps {
   text?: string;
@@ -21,9 +20,7 @@ function MenuButton({ menuArr }: MenuButtonProps) {
       {({ isOpen }) => (
         <>
           <ChakraMenuButton isActive={isOpen} as={Button} variant="unstyled">
-            <ButtonWrapper>
-              <EllipsisIcon size="md" />
-            </ButtonWrapper>
+            <EllipsisIcon size="md" color="white" />
           </ChakraMenuButton>
           <MenuList fontSize="14px">
             {menuArr.map((menu) => (

diff --git a/components/layouts/Header.tsx b/components/layouts/Header.tsx
@@ -14,6 +14,7 @@ interface IHeader {
   isBorder?: boolean;
   children?: React.ReactNode;
   defaultUrl?: string;
+  isTransparent?: boolean;
 }
 
 export default function Header({
@@ -24,20 +25,29 @@ export default function Header({
   rightPadding,
   func,
   children,
-  isCenter,
+  isCenter = true,
   isBorder = true,
   defaultUrl,
+  isTransparent,
 }: IHeader) {
   function HeaderLayout() {
     return (
       <HeaderContainer
         isBack={isBack}
         isCenter={isCenter}
-        isBorder={isBorder}
+        isBorder={!isTransparent && isBorder}
         rightPadding={rightPadding}
+        isTransparent={isTransparent}
       >
         <Flex align="center">
-          {isBack && <ArrowBackButton defaultUrl={defaultUrl} url={url} func={func} />}
+          {isBack && (
+            <ArrowBackButton
+              color={isTransparent ? "white" : "mint"}
+              defaultUrl={defaultUrl}
+              url={url}
+              func={func}
+            />
+          )}
           {!isCenter && (
             <Box ml={isBack && 1} fontWeight={700}>
               {title}
@@ -72,8 +82,9 @@ const HeaderContainer = styled.header<{
   isBack?: boolean;
   isCenter?: boolean;
   rightPadding: number;
+  isTransparent: boolean;
 }>`
-  background-color: white;
+  background-color: ${(props) => (props.isTransparent ? "transparent" : "white")};
   height: var(--header-h);
   font-size: 16px;
   padding-right: ${(props) => props.rightPadding || 20}px;

diff --git a/components/molecules/navs/TabNav.tsx b/components/molecules/navs/TabNav.tsx
@@ -58,7 +58,7 @@ export default function TabNav({
               p={!isMain ? "8px 20px" : "8px 16px"}
               flex={isFullSize ? 1 : undefined}
               key={tab.text}
-              color={tab.text === selected ? "black" : undefined}
+              color={tab.text === selected ? (isBlack ? "black" : "mint") : undefined}
               onClick={tab.text !== selected ? tab.func : undefined}
               _focus={{
                 outline: "none",