wip

components/BottomNav.tsx

@@ -9,13 +9,7 @@ import { getStudyStandardDate } from "../libs/study/date/getStudyStandardDate";
 import { slideDirectionState } from "../recoils/navigationRecoils";
 import { convertLocationLangTo } from "../utils/convertUtils/convertDatas";
 import { getBottomNavSize } from "../utils/mathUtils";
-import {
-  CommunityIcon,
-  HomeIcon,
-  StudyIcon,
-  ThunderIcon,
-  UserIcon,
-} from "./atoms/Icons/BottomNavIcons";
+import { CommunityIcon, HomeIcon, StudyIcon, ThunderIcon, UserIcon } from "./Icons/BottomNavIcons";
 
 interface INavButtonProps {
   url: string;

components/atoms/Icons/AlphabetIcon.tsx → components/Icons/AlphabetIcon.tsx

@@ -1,7 +1,7 @@
 import styled from "styled-components";
 
-import { TABLE_STRING_COLORS_BG, TABLE_STRONG_COLORS } from "../../../constants/styles";
-import { Alphabet } from "../../../types/models/collections";
+import { TABLE_STRING_COLORS_BG, TABLE_STRONG_COLORS } from "../../constants/styles";
+import { Alphabet } from "../../types/models/collections";
 
 interface IAlphabetIcon {
   alphabet: Alphabet;

components/Icons/ArrowIcons.tsx

@@ -0,0 +1,10 @@
+export const RightShortArrowIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="5" height="10" viewBox="0 0 5 10" fill="none">
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M0.8124 9.05021C0.6399 9.05021 0.4674 8.98271 0.3324 8.85521C0.206453 8.72871 0.135742 8.55747 0.135742 8.37896C0.135742 8.20045 0.206453 8.02921 0.3324 7.90271L3.2349 5.00021L0.3324 2.10521C0.206453 1.97871 0.135742 1.80747 0.135742 1.62896C0.135742 1.45045 0.206453 1.27921 0.3324 1.15271C0.458901 1.02677 0.630142 0.956055 0.80865 0.956055C0.987159 0.956055 1.1584 1.02677 1.2849 1.15271L4.6599 4.52771C4.78585 4.65421 4.85656 4.82545 4.85656 5.00396C4.85656 5.18247 4.78585 5.35371 4.6599 5.48021L1.2849 8.85521C1.1574 8.98271 0.9849 9.05021 0.8124 9.05021"
+      fill="#00C2B3"
+    />
+  </svg>
+);

components/atoms/Icons/CopyIcon.tsx → components/Icons/CopyIcon.tsx

@@ -1,7 +1,7 @@
 import { Button } from "@chakra-ui/react";
 import styled from "styled-components";
 
-import { useCompleteToast, useToast } from "../../../hooks/custom/CustomToast";
+import { useCompleteToast, useToast } from "../../hooks/custom/CustomToast";
 
 interface ICopyBtn {
   size?: string;

components/atoms/Icons/HeartCircleIcon.tsx → components/Icons/HeartCircleIcon.tsx

@@ -3,12 +3,12 @@ import { useSession } from "next-auth/react";
 import { useEffect, useState } from "react";
 import styled from "styled-components";
 
-import { LIKE_HEART } from "../../../constants/keys/localStorage";
-import { POINT_SYSTEM_PLUS } from "../../../constants/serviceConstants/pointSystemConstants";
-import { useAdminPointMutation } from "../../../hooks/admin/mutation";
-import { useCompleteToast, useErrorToast } from "../../../hooks/custom/CustomToast";
-import { useInteractionMutation } from "../../../hooks/user/sub/interaction/mutations";
-import { isHeartCheckLocalStorage, pushArrToLocalStorage } from "../../../utils/storageUtils";
+import { LIKE_HEART } from "../../constants/keys/localStorage";
+import { POINT_SYSTEM_PLUS } from "../../constants/serviceConstants/pointSystemConstants";
+import { useAdminPointMutation } from "../../hooks/admin/mutation";
+import { useCompleteToast, useErrorToast } from "../../hooks/custom/CustomToast";
+import { useInteractionMutation } from "../../hooks/user/sub/interaction/mutations";
+import { isHeartCheckLocalStorage, pushArrToLocalStorage } from "../../utils/storageUtils";
 
 interface IHeartCircleIcon {
   toUid: string;

components/atoms/Icons/HeartIcon.tsx → components/Icons/HeartIcon.tsx

@@ -3,12 +3,12 @@ import { useSession } from "next-auth/react";
 import { useEffect, useState } from "react";
 import styled from "styled-components";
 
-import { LIKE_HEART } from "../../../constants/keys/localStorage";
-import { POINT_SYSTEM_PLUS } from "../../../constants/serviceConstants/pointSystemConstants";
-import { useAdminPointMutation } from "../../../hooks/admin/mutation";
-import { useCompleteToast, useErrorToast } from "../../../hooks/custom/CustomToast";
-import { useInteractionMutation } from "../../../hooks/user/sub/interaction/mutations";
-import { isHeartCheckLocalStorage, pushArrToLocalStorage } from "../../../utils/storageUtils";
+import { LIKE_HEART } from "../../constants/keys/localStorage";
+import { POINT_SYSTEM_PLUS } from "../../constants/serviceConstants/pointSystemConstants";
+import { useAdminPointMutation } from "../../hooks/admin/mutation";
+import { useCompleteToast, useErrorToast } from "../../hooks/custom/CustomToast";
+import { useInteractionMutation } from "../../hooks/user/sub/interaction/mutations";
+import { isHeartCheckLocalStorage, pushArrToLocalStorage } from "../../utils/storageUtils";
 
 interface IHeartIcon {
   toUid: string;

components/atoms/Icons/KakaoShareBtn.tsx → components/Icons/KakaoShareBtn.tsx

@@ -2,7 +2,7 @@ import { Button } from "@chakra-ui/react";
 import { useEffect } from "react";
 import styled from "styled-components";
 
-import { REVIEW_DATA } from "../../../storage/Review";
+import { REVIEW_DATA } from "../../storage/Review";
 
 const kakaoAppKey = process.env.NEXT_PUBLIC_KAKAO_JS;
 

components/atoms/Icons/NoticeIcons.tsx → components/Icons/NoticeIcons.tsx

@@ -1,8 +1,8 @@
 import styled from "styled-components";
 
-import { COLOR_SCHEME_BG, TABLE_COLORS } from "../../../constants/styles";
-import { NoticeCategory } from "../../../storage/notice";
-import { InteractionType } from "../../../types/globals/interaction";
+import { COLOR_SCHEME_BG, TABLE_COLORS } from "../../constants/styles";
+import { NoticeCategory } from "../../storage/notice";
+import { InteractionType } from "../../types/globals/interaction";
 
 interface INoticeIcon {
   type: NoticeCategory;

components/atoms/Icons/RuleIcon.tsx → components/Icons/RuleIcon.tsx

@@ -1,6 +1,6 @@
 import styled from "styled-components";
 
-import { IModal } from "../../../types/components/modalTypes";
+import { IModal } from "../../types/components/modalTypes";
 
 function RuleIcon({ setIsModal }: IModal) {
   return (

components/Icons/SolidIcons.tsx

@@ -0,0 +1,21 @@
+export const CalendarCheckIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M13.3797 8.08738L8.68284 12.7842C8.52511 12.9419 8.3112 13.0305 8.08817 13.0305C7.86513 13.0305 7.65123 12.9419 7.49349 12.7842L4.62022 9.91009C4.54213 9.832 4.48018 9.73929 4.43792 9.63725C4.39565 9.53522 4.3739 9.42586 4.3739 9.31542C4.3739 9.20498 4.39565 9.09562 4.43792 8.99359C4.48018 8.89155 4.54213 8.79884 4.62022 8.72075C4.69832 8.64265 4.79103 8.58071 4.89306 8.53844C4.9951 8.49618 5.10445 8.47443 5.2149 8.47443C5.32534 8.47443 5.4347 8.49618 5.53673 8.53844C5.63876 8.58071 5.73147 8.64265 5.80957 8.72075L8.08817 10.9993L12.1903 6.89804C12.2684 6.81994 12.3611 6.758 12.4632 6.71573C12.5652 6.67347 12.6745 6.65172 12.785 6.65172C12.8954 6.65172 13.0048 6.67347 13.1068 6.71573C13.2089 6.758 13.3016 6.81994 13.3797 6.89804C13.4578 6.97613 13.5197 7.06884 13.562 7.17088C13.6042 7.27291 13.626 7.38227 13.626 7.49271C13.626 7.60315 13.6042 7.71251 13.562 7.81454C13.5197 7.91658 13.4578 8.00929 13.3797 8.08738ZM15.4766 1.68224H14.1055V0.841121C14.1055 0.618042 14.0169 0.4041 13.8592 0.246359C13.7015 0.0886179 13.4875 0 13.2644 0C13.0413 0 12.8274 0.0886179 12.6697 0.246359C12.5119 0.4041 12.4233 0.618042 12.4233 0.841121V1.68224H5.57658V0.841121C5.57658 0.618042 5.48796 0.4041 5.33022 0.246359C5.17248 0.0886179 4.95854 0 4.73546 0C4.51238 0 4.29843 0.0886179 4.14069 0.246359C3.98295 0.4041 3.89434 0.618042 3.89434 0.841121V1.68224H2.52331C2.07715 1.68224 1.64926 1.85948 1.33378 2.17496C1.0183 2.49044 0.841064 2.91833 0.841064 3.36449V16.3178C0.841064 16.7639 1.0183 17.1918 1.33378 17.5073C1.64926 17.8228 2.07715 18 2.52331 18H15.4766C15.9227 18 16.3506 17.8228 16.6661 17.5073C16.9816 17.1918 17.1588 16.7639 17.1588 16.3178V3.36449C17.1588 2.91833 16.9816 2.49044 16.6661 2.17496C16.3506 1.85948 15.9227 1.68224 15.4766 1.68224Z"
+      fill="var(--gray-300)"
+    />
+  </svg>
+);
+
+export const NoticeIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+    <g opacity="0.4">
+      <path
+        d="M18.112 15.8509C18.0728 15.9323 18.0115 16.0009 17.935 16.049C17.8586 16.097 17.7702 16.1226 17.6799 16.1227H2.31727C2.22685 16.1227 2.13826 16.0972 2.06169 16.0492C1.98511 16.0011 1.92368 15.9323 1.88445 15.8509C1.84522 15.7694 1.8298 15.6785 1.83995 15.5887C1.85011 15.4988 1.88543 15.4137 1.94185 15.343C3.031 13.9005 3.66607 12.1664 3.76616 10.3617V6.99632C3.82941 5.3847 4.51411 3.86014 5.67672 2.74227C6.83933 1.62439 8.38956 1 10.0024 1C11.6153 1 13.1655 1.62439 14.3281 2.74227C15.4907 3.86014 16.1754 5.3847 16.2387 6.99632V10.3617C16.3388 12.1664 16.9738 13.9005 18.063 15.343C18.1181 15.4145 18.1519 15.5001 18.1605 15.5899C18.1692 15.6798 18.1524 15.7702 18.112 15.8509ZM12.0764 17.3238C12.0343 17.2505 11.9736 17.1896 11.9004 17.1473C11.8272 17.105 11.7442 17.0828 11.6597 17.0828H8.3375C8.25303 17.0828 8.17004 17.1051 8.09693 17.1474C8.02381 17.1897 7.96315 17.2505 7.92107 17.3238C7.879 17.397 7.85699 17.4801 7.85728 17.5645C7.85756 17.649 7.88013 17.7319 7.92271 17.8049C8.13378 18.1684 8.43662 18.4701 8.80092 18.6799C9.16522 18.8896 9.57822 19 9.99858 19C10.4189 19 10.8319 18.8896 11.1962 18.6799C11.5605 18.4701 11.8634 18.1684 12.0745 17.8049C12.1171 17.732 12.1397 17.6491 12.14 17.5646C12.1403 17.4802 12.1184 17.3971 12.0764 17.3238Z"
+        fill="#A0AEC0"
+      />
+    </g>
+  </svg>
+);

components/atoms/AlertCirclePoint.tsx

@@ -0,0 +1,19 @@
+import { Box } from "@chakra-ui/react";
+
+interface AlertCirclePointProps {
+  isActive: boolean;
+}
+
+function AlertCirclePoint({ isActive }: AlertCirclePointProps) {
+  return (
+    <Box
+      w="6px"
+      h="6px"
+      p="1px"
+      borderRadius="50%"
+      bgColor={isActive ? "var(--color-red)" : "var(--color-gray)"}
+    />
+  );
+}
+
+export default AlertCirclePoint;

components/atoms/PlaceSelector.tsx

@@ -2,11 +2,11 @@ import { Select } from "@chakra-ui/react";
 import { ChangeEvent } from "react";
 
 import { DispatchType } from "../../types/hooks/reactTypes";
-import { IParticipation } from "../../types/models/studyTypes/studyDetails";
+import { StudyParticipationProps } from "../../types/models/studyTypes/studyDetails";
 
 interface IPlaceSelector {
   defaultValue: string;
-  options: IParticipation[];
+  options: StudyParticipationProps[];
   setValue: DispatchType<string>;
   isBorder?: boolean;
 }

components/atoms/SectionHeader.tsx

@@ -0,0 +1,27 @@
+import { Box, Button, Flex } from "@chakra-ui/react";
+import { RightShortArrowIcon } from "../Icons/ArrowIcons";
+
+interface SectionHeaderProps {
+  title: string;
+  subTitle: string;
+}
+
+function SectionHeader({ title, subTitle }: SectionHeaderProps) {
+  return (
+    <Box>
+      <Box fontSize="12px" mb={1} color="var(--gray-400)">
+        {subTitle}
+      </Box>
+      <Flex align="center">
+        <Box flex={1} color="var(--gray-800)" fontSize="18px" fontWeight={600}>
+          {title}
+        </Box>
+        <Button variant="unstyled" w="12px" height="12px" color="var(--color-mint)">
+          <RightShortArrowIcon />
+        </Button>
+      </Flex>
+    </Box>
+  );
+}
+
+export default SectionHeader;

components/atoms/buttons/IconButton.tsx

@@ -9,6 +9,5 @@ export default function IconButton({ children, onClick }: IIconButton) {
 }
 
 const Button = styled.button`
-  padding: 16px;
   position: relative;
 `;

components/molecules/ImageUploadInput.tsx

@@ -4,7 +4,7 @@ import { useRef, useState } from "react";
 
 import { DispatchType } from "../../types/hooks/reactTypes";
 import { processFile } from "../../utils/imageUtils";
-import ImageUploadIcon from "../atoms/Icons/ImageUploadIcon";
+import ImageUploadIcon from "../Icons/ImageUploadIcon";
 
 interface IImageUploadInput {
   setImageUrl: DispatchType<Blob>;

components/molecules/OrganizerBar.tsx

@@ -5,7 +5,7 @@ import styled from "styled-components";
 import { IUserSummary } from "../../types/models/userTypes/userInfoTypes";
 import { getDateDiff } from "../../utils/dateTimeUtils";
 import Avatar from "../atoms/Avatar";
-import { AboutIcon } from "../atoms/Icons/AboutIcon";
+import { AboutIcon } from "../Icons/AboutIcon";
 
 interface OrganizerBarProps {
   createdAt: string;

components/molecules/cards/ButtonCard.tsx

@@ -1,6 +1,6 @@
 import { Box, Button, Flex } from "@chakra-ui/react";
 
-import { NoticeIcon } from "../../atoms/Icons/NoticeIcons";
+import { NoticeIcon } from "../../Icons/NoticeIcons";
 
 export interface IButtonCardProps {
   title: string;

components/molecules/cards/PostThumbnailCard.tsx

@@ -6,14 +6,14 @@ import styled from "styled-components";
 import { SingleLineText } from "../../../styles/layout/components";
 import { IImageProps } from "../../../types/components/assetTypes";
 import { ITextAndColorSchemes } from "../../../types/components/propTypes";
-import { IUserSummary } from "../../../types/models/userTypes/userInfoTypes";
+import { UserSimpleInfoProps } from "../../../types/models/userTypes/userInfoTypes";
 import { dayjsToFormat } from "../../../utils/dateTimeUtils";
 import OutlineBadge from "../../atoms/badges/OutlineBadge";
 import Skeleton from "../../atoms/skeleton/Skeleton";
 import AvatarGroupsOverwrap from "../groups/AvatarGroupsOverwrap";
 import PlaceImage from "../PlaceImage";
 export interface IPostThumbnailCard {
-  participants?: IUserSummary[];
+  participants?: UserSimpleInfoProps[];
   title: string;
   subtitle: string;
   image: IImageProps;

components/molecules/navs/IconButtonNav.tsx

@@ -17,7 +17,7 @@ export default function IconButtonNav({ iconList }: IIconButtonNav) {
   return (
     <Flex h="100%" alignItems="center" as="nav">
       {iconList.map((icon, idx) => (
-        <Flex w="20px" h="20px" justify="center" align="center" ml="12px" key={idx}>
+        <Flex w="20px" h="20px" justify="center" align="center" fontSize="18px" ml="12px" key={idx}>
           {icon?.link ? (
             <Link style={{ position: "relative" }} href={icon.link} onClick={icon?.func}>
               {icon.icon}

components/molecules/picker/PlaceSelectorSub.tsx

@@ -6,21 +6,24 @@ import ImageTileGridLayout, {
 } from "../../../components/molecules/layouts/ImageTitleGridLayout";
 import { MAX_USER_PER_PLACE } from "../../../constants/settingValue/study/study";
 import { useToast } from "../../../hooks/custom/CustomToast";
-import { IParticipation, IPlace } from "../../../types/models/studyTypes/studyDetails";
+import {
+  StudyParticipationProps,
+  StudyPlaceProps,
+} from "../../../types/models/studyTypes/studyDetails";
 
 interface IPlaceSelectorSub {
-  places: IParticipation[];
-  selectPlaces: IPlace[];
-  setSelectPlaces: Dispatch<SetStateAction<IPlace[]>>;
+  places: StudyParticipationProps[];
+  selectPlaces: StudyPlaceProps[];
+  setSelectPlaces: Dispatch<SetStateAction<StudyPlaceProps[]>>;
 }
 
 function PlaceSelectorSub({ places, selectPlaces, setSelectPlaces }: IPlaceSelectorSub) {
   const toast = useToast();
   const isTwoPage = places?.length > 8;
 
   const [pagePlaces, setPagePlaces] = useState<{
-    first: IParticipation[];
-    second: IParticipation[];
+    first: StudyParticipationProps[];
+    second: StudyParticipationProps[];
   }>();
   const [isFirst, setIsFirst] = useState(true);
 
@@ -32,8 +35,8 @@ function PlaceSelectorSub({ places, selectPlaces, setSelectPlaces }: IPlaceSelec
     });
   }, [isTwoPage, places]);
 
-  const onClick = (par: IParticipation) => {
-    if (par.attendences.length >= MAX_USER_PER_PLACE) {
+  const onClick = (par: StudyParticipationProps) => {
+    if (par.members.length >= MAX_USER_PER_PLACE) {
       toast("error", "인원이 마감되었습니다.");
       return;
     }

components/organisms/drawer/BottomFlexDrawer.tsx

@@ -117,7 +117,7 @@ const Layout = styled.div<{
 }>`
   height: ${(props) => props.height + iPhoneNotchSize()}px;
   position: fixed;
-  bottom: 0;
+  bottom: 100px;
   width: 100%;
   max-width: var(--max-width);
   border-top-left-radius: 20px;

components/organisms/imageSlider/imageSliderType/ImageSliderBanner.tsx

@@ -1,4 +1,5 @@
 import "swiper/css/autoplay";
+import "swiper/css/pagination";
 
 import { Box } from "@chakra-ui/react";
 import Image from "next/image";
@@ -9,6 +10,7 @@ import SwiperCore from "swiper";
 import { Autoplay, Scrollbar } from "swiper/modules";
 import { Swiper, SwiperSlide } from "swiper/react";
 
+import { Pagination } from "swiper/modules";
 import { useTypeToast } from "../../../../hooks/custom/CustomToast";
 
 SwiperCore.use([Autoplay, Scrollbar]);
@@ -41,8 +43,10 @@ function ImageSliderBanner({ imageArr, isLightBanner }: IImageSliderEventBanner)
   };
 
   return (
-    <Swiper
+    <StyledSwiper
       navigation
+      pagination={true}
+      modules={[Pagination]}
       scrollbar={{ draggable: true, el: ".swiper-scrollbar" }}
       style={{
         width: "100%",
@@ -73,26 +77,29 @@ function ImageSliderBanner({ imageArr, isLightBanner }: IImageSliderEventBanner)
           </Box>
         </SwiperSlide>
       ))}
-      {!isLightBanner && (
-        <Box
-          w="80px"
-          p="2px 4px"
-          color="white"
-          opacity={0.75}
-          pos="absolute"
-          bgColor="var(--gray-800)"
-          zIndex={10}
-          bottom="0"
-          right="0"
-          fontSize="12px"
-          onClick={() => router.push("/banner")}
-        >
-          {pageNum + 1} / {imageArr.length} 전체보기
-        </Box>
-      )}
-    </Swiper>
+    </StyledSwiper>
   );
 }
+
+const StyledSwiper = styled(Swiper)`
+  .swiper-pagination-bullet {
+    background-color: white;
+    width: 4px;
+    height: 4px;
+    opacity: 0.8;
+  }
+
+  .swiper-pagination-bullet-active {
+    background-color: var(--color-mint);
+  }
+  .swiper-pagination-bullet:nth-child(1) {
+    width: 12px; /* 첫 번째 원의 가로 길이 */
+    height: 4px;
+    border-radius: 16px;
+    opacity: 0.6;
+  }
+`;
+
 const Container = styled.div``;
 
 export default ImageSliderBanner;

components/organisms/imageSlider/imageSliderType/ImageSliderMember.tsx

@@ -8,7 +8,7 @@ import { prevPageUrlState } from "../../../../recoils/previousAtoms";
 import { IUser, IUserSummary } from "../../../../types/models/userTypes/userInfoTypes";
 import { dayjsToFormat } from "../../../../utils/dateTimeUtils";
 import Avatar from "../../../atoms/Avatar";
-import HeartCircleIcon from "../../../atoms/Icons/HeartCircleIcon";
+import HeartCircleIcon from "../../../Icons/HeartCircleIcon";
 import { ImageContainer } from "../ImageSlider";
 
 interface IImageSliderMember {