renew: store page

AboutClan · Nov 18, 2024 · 27d5fea · 27d5fea
1 parent a7b82e8
commit 27d5fea
Show file tree

Hide file tree

Showing 25 changed files with 690 additions and 693 deletions.
diff --git a/components/Icons/CircleIcons.tsx b/components/Icons/CircleIcons.tsx
@@ -132,8 +132,8 @@ export function XCircleIcon({ size }: { size: "sm" | "md" }) {
   );
 }
 
-export const InfoCircleIcon = () => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+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"
@@ -148,4 +148,4 @@ export const InfoCircleIcon = () => (
       </clipPath>
     </defs>
   </svg>
-);
+}
diff --git a/components/Icons/icons.tsx b/components/Icons/icons.tsx
@@ -11,14 +11,14 @@ export function UserIcon() {
   );
 }
 
-export const TrophyIcon = () => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+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 (

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,15 +1,20 @@
 import { useRouter } from "next/navigation";
-import { ShortArrowIcon } from "../../Icons/ArrowIcons";
 
+import { ShortArrowIcon } from "../../Icons/ArrowIcons";
 import ButtonWrapper from "../ButtonWrapper";
 
 interface IArrowBackButton {
   defaultUrl?: string;
   url?: string;
   func?: () => void;
-  color: "mint" | "white";
+  color?: "mint" | "white";
 }
-export default function ArrowBackButton({ url, func, defaultUrl, color }: IArrowBackButton) {
+export default function ArrowBackButton({
+  url,
+  func,
+  defaultUrl,
+  color = "white",
+}: IArrowBackButton) {
   const router = useRouter();
 
   const handleGoBack = () => {
@@ -34,7 +39,7 @@ export function ArrowBackButtonUI({
 }) {
   return (
     <ButtonWrapper onClick={onClick}>
-      <ShortArrowIcon dir="left" color={ color} />
+      <ShortArrowIcon dir="left" color={color} />
     </ButtonWrapper>
   );
 }
diff --git a/components/organisms/imageSlider/imageSliderType/ImageSliderBanner.tsx b/components/organisms/imageSlider/imageSliderType/ImageSliderBanner.tsx
@@ -4,12 +4,12 @@ import "swiper/css/pagination";
 import { Box } from "@chakra-ui/react";
 import Image from "next/image";
 import { useRouter } from "next/navigation";
+import { useState } from "react";
 import styled from "styled-components";
 import SwiperCore from "swiper";
 import { Autoplay, Pagination, Scrollbar } from "swiper/modules";
 import { Swiper, SwiperSlide } from "swiper/react";
 
-import { useState } from "react";
 import { useTypeToast } from "../../../../hooks/custom/CustomToast";
 
 SwiperCore.use([Autoplay, Scrollbar]);

diff --git a/modals/Modals.tsx b/modals/Modals.tsx
@@ -70,8 +70,8 @@ export function ModalLayout({
   const onClose = () => setIsModal(false);
 
   const { main, sub, isFull = true } = footerOptions || {};
-  const { text = "확인", func = onClose } = main || {};
-  const { text: subText = "취소", func: subFunc = onClose } = sub || {};
+  const { text = "확 인", func = onClose } = main || {};
+  const { text: subText = "취 소", func: subFunc = onClose } = sub || {};
   const [modalTop, setModalTop] = useState("0%");
 
   useEffect(() => {

diff --git a/modals/RuleModal.tsx b/modals/RuleModal.tsx
@@ -1,8 +1,7 @@
-import styled from "styled-components";
+import { Box } from "@chakra-ui/react";
 
-import { ModalSubtitle } from "../styles/layout/modal";
 import { IModal } from "../types/components/modalTypes";
-import { IFooterOptions, IPaddingOptions, ModalLayout } from "./Modals";
+import { ModalLayout } from "./Modals";
 
 export interface IContentBasic {
   title: string;
@@ -15,66 +14,18 @@ export interface IRuleModalContent {
 }
 
 interface IRuleModal extends IModal {
-  content: IRuleModalContent;
+  title: string;
+  text: string;
+  children: React.ReactNode;
 }
 
-function RuleModal({ setIsModal, content }: IRuleModal) {
-  if (!content) return null;
-  const header = content.headerContent;
-  const main = content.mainContent;
-
-  function ContentItem({ title, texts }: IContentBasic) {
-    return (
-      <Item>
-        <RuleTitle>{title}</RuleTitle>
-        <ItemContent>
-          {texts.map((text, idx) => (
-            <li key={idx}>{text}</li>
-          ))}
-        </ItemContent>
-      </Item>
-    );
-  }
-
-  const footerOptions: IFooterOptions = {
-    main: {},
-    isFull: false,
-  };
-
-  const paddingOptions: IPaddingOptions = {
-    body: {
-      bottom: 0,
-    },
-  };
-
+function RuleModal({ setIsModal, title, text, children }: IRuleModal) {
   return (
-    <ModalLayout
-      title={header.title}
-      footerOptions={footerOptions}
-      setIsModal={setIsModal}
-      paddingOptions={paddingOptions}
-    >
-      <ModalSubtitle>{header.text}</ModalSubtitle>
-      {main.map((item, idx) => (
-        <ContentItem title={item.title} texts={item.texts} key={idx} />
-      ))}
+    <ModalLayout title={title} footerOptions={{}} setIsModal={setIsModal}>
+      <Box mb={3}>{text}</Box>
+      {children}
     </ModalLayout>
   );
 }
 
-const Item = styled.div``;
-
-const ItemContent = styled.ul`
-  font-size: 13px;
-  margin-left: var(--gap-4);
-  margin-top: var(--gap-1);
-  margin-bottom: var(--gap-3);
-  line-height: 1.8;
-`;
-
-const RuleTitle = styled.span`
-  font-weight: 600;
-  font-size: 14px;
-`;
-
 export default RuleModal;
diff --git a/modals/gather/GatherRuleModal.tsx b/modals/gather/GatherRuleModal.tsx
@@ -1,35 +1,32 @@
-import { IModal } from "../../types/components/modalTypes";
-import RuleModal, { IRuleModalContent } from "../RuleModal";
+function GatherRuleModal() {
+  // const content: IRuleModalContent = {
+  //   headerContent: {
+  //     title: "모임 게시판",
+  //     text: "다양한 주제의 모임과 번개를 개설하거나 참여할 수 있어요! 재밌는 모임 같이 참여해요~!",
+  //   },
+  //   mainContent: [
+  //     {
+  //       title: "ABOUT 모임 게시판은 어떤게 다르나요?",
+  //       texts: [
+  //         "누구나 모임을 개설할 수 있어요! 날짜와 장소, 주제를 선택해서 모임을 열어봐요!",
+  //         "필요한 내용들을 형식화해서 쉽게 모임을 열 수 있어요!",
+  //         "주제, 장소, 참여시간, 진행방식 등의 요소들을 한 눈에 볼 수 있어서 따로 고민하거나 설명하지 않아도 진행이 간단해요!",
+  //         "같은 동아리여도 초면인 사람들이 많아서 모임에 나가기가 고민될 수 있어요! 인원 수, 성별, 나이 등을 고려하여 참여자를 받을 수 있어서 새로운 만남에 대한 부담이 적어요!",
+  //       ],
+  //     },
+  //     {
+  //       title: "모임 개설자 필독",
+  //       texts: [
+  //         "카카오톡 공유를 통해 모임글을 공지 톡방에 올려주세요!",
+  //         "모임이 확정되면 인원들과 단톡방을 만들어주세요!",
+  //         "모임 취소는 신청자가 없는 경우 완전히 삭제되고, 신청자가 있는 경우에는 취소 상태로 변경됩니다.",
+  //         "모임 진행시 간단한 인증 사진을 찍어주세요!",
+  //       ],
+  //     },
+  //   ],
+  // };
 
-function GatherRuleModal({ setIsModal }: IModal) {
-  const content: IRuleModalContent = {
-    headerContent: {
-      title: "모임 게시판",
-      text: "다양한 주제의 모임과 번개를 개설하거나 참여할 수 있어요! 재밌는 모임 같이 참여해요~!",
-    },
-    mainContent: [
-      {
-        title: "ABOUT 모임 게시판은 어떤게 다르나요?",
-        texts: [
-          "누구나 모임을 개설할 수 있어요! 날짜와 장소, 주제를 선택해서 모임을 열어봐요!",
-          "필요한 내용들을 형식화해서 쉽게 모임을 열 수 있어요!",
-          "주제, 장소, 참여시간, 진행방식 등의 요소들을 한 눈에 볼 수 있어서 따로 고민하거나 설명하지 않아도 진행이 간단해요!",
-          "같은 동아리여도 초면인 사람들이 많아서 모임에 나가기가 고민될 수 있어요! 인원 수, 성별, 나이 등을 고려하여 참여자를 받을 수 있어서 새로운 만남에 대한 부담이 적어요!",
-        ],
-      },
-      {
-        title: "모임 개설자 필독",
-        texts: [
-          "카카오톡 공유를 통해 모임글을 공지 톡방에 올려주세요!",
-          "모임이 확정되면 인원들과 단톡방을 만들어주세요!",
-          "모임 취소는 신청자가 없는 경우 완전히 삭제되고, 신청자가 있는 경우에는 취소 상태로 변경됩니다.",
-          "모임 진행시 간단한 인증 사진을 찍어주세요!",
-        ],
-      },
-    ],
-  };
-
-  return <RuleModal content={content} setIsModal={setIsModal} />;
+  return null;
 }
 
 export default GatherRuleModal;