Merge pull request #269 from TripInfoWeb/dev_gathering

Dev gathering

src/app/gathering/[id]/page.tsx

@@ -1,5 +1,5 @@
-import GatheringRecommendationList from "@/components/gathering/GatheringRecommendationList";
 import GatheringViewerContainer from "@/components/gathering/GatheringViewerContainer";
+import GatheringRecommendationList from "@/components/gathering/read/GatheringRecommendationList";
 import { GatheringDetailResponseDto } from "@/types/GatheringDto";
 import { cookies } from "next/headers";
 import { NextResponse } from "next/server";

src/app/gathering/edit/[id]/page.tsx

@@ -1,4 +1,4 @@
-import GatheringEditorContainer from "@/containers/gathering/edit/GatheringEditorContainer";
+import GatheringUpdateContainer from "@/containers/gathering/createUpdate/GatheringUpdateContainer";
 import { GatheringDetailResponseDto } from "@/types/GatheringDto";
 import { NextResponse } from "next/server";
 
@@ -47,10 +47,10 @@ export default async function Page({ params: { id } }: PageProps) {
   try {
     const gatheringData = await fetchGatheringData(postId);
     return (
-    <div       className={
+    <div className={
         "w-full pb-[2rem] pt-[2rem] min-h-[calc(100vh-25rem)]"
       }>
-      <GatheringEditorContainer gatheringData={gatheringData} />
+      <GatheringUpdateContainer gatheringData={gatheringData} />
     </div>
     );
   } catch (error) {

src/app/gathering/page.tsx

@@ -1,6 +1,6 @@
 import Banner from "@/components/common/Banner";
 import TopList from "@/components/common/TopList";
-import GatheringListContainer from "@/containers/gathering/GatheringListContainer";
+import GatheringListContainer from "@/containers/gathering/read/GatheringListContainer";
 import { Metadata } from "next";
 
 type MyProps = {

src/app/gathering/write/page.tsx

@@ -1,4 +1,4 @@
-import GatheringWriteContainer from "@/containers/gathering/write/GatheringWriteContainer";
+import GatheringCreateContainer from "@/containers/gathering/createUpdate/GatheringCreateContainer";
 import { Metadata } from "next";
 
 export const metadata: Metadata = {
@@ -9,7 +9,7 @@ export const metadata: Metadata = {
 export default function page() {
   return (
     <div className={"min-h-[calc(100vh-25rem)] w-full pb-[2rem]"}>
-      <GatheringWriteContainer />
+      <GatheringCreateContainer />
     </div>
   );
 }

src/components/common/GatheringItem.tsx

@@ -1,5 +1,5 @@
-import GatheringBookMarkContainer from "@/containers/gathering/GatheringBookmarkContainer";
-import GatheringLikeContainer from "@/containers/gathering/GatheringLikeContainer";
+import GatheringBookMarkContainer from "@/containers/gathering/read/GatheringBookmarkContainer";
+import GatheringLikeContainer from "@/containers/gathering/read/GatheringLikeContainer";
 import { Gathering } from "@/types/GatheringDto";
 import { convertNumberToShortForm } from "@/utils/convertNumberToShortForm";
 import { format } from "date-fns";

src/components/common/GatheringItemHome.tsx

@@ -1,5 +1,5 @@
-import GatheringBookMarkContainer from "@/containers/gathering/GatheringBookmarkContainer";
-import GatheringLikeContainer from "@/containers/gathering/GatheringLikeContainer";
+import GatheringBookMarkContainer from "@/containers/gathering/read/GatheringBookmarkContainer";
+import GatheringLikeContainer from "@/containers/gathering/read/GatheringLikeContainer";
 import { GatheringRecommend } from "@/types/GatheringDto";
 import { convertNumberToShortForm } from "@/utils/convertNumberToShortForm";
 import { format } from "date-fns";

src/components/gathering/editor/GatheringEditor.tsx → src/components/gathering/createUpdate/editor/GatheringEditor.tsx

@@ -1,18 +1,18 @@
 import Breadcrumbs from "@/components/common/Breadcrumb";
-import GatheringEditorCategoryContainer from "@/containers/gathering/editor/GatheringEditorCategoryContainer";
-import GatheringEditorChattingLinkContainer from "@/containers/gathering/editor/GatheringEditorChattingLinkContainer";
-import GatheringEditorContentContainer from "@/containers/gathering/editor/GatheringEditorContentContainer";
-import GatheringEditorDeadlineContainer from "@/containers/gathering/editor/GatheringEditorDeadlineContainer";
-import GatheringEditorHashTagContainer from "@/containers/gathering/editor/GatheringEditorHashTagContainer";
-import GatheringEditorParticipantsFilterContainer from "@/containers/gathering/editor/GatheringEditorParticipantsFilterContainer";
-import GatheringEditorPeriodContainer from "@/containers/gathering/editor/GatheringEditorPeriodContainer";
-import GatheringEditorPlaceContainer from "@/containers/gathering/editor/GatheringEditorPlaceContainer";
-import GatheringEditorTitleContainer from "@/containers/gathering/editor/GatheringEditorTitleContainer";
+import GatheringEditorCategoryContainer from "@/containers/gathering/createUpdate/editor/GatheringEditorCategoryContainer";
+import GatheringEditorChattingLinkContainer from "@/containers/gathering/createUpdate/editor/GatheringEditorChattingLinkContainer";
+import GatheringEditorContentContainer from "@/containers/gathering/createUpdate/editor/GatheringEditorContentContainer";
+import GatheringEditorDeadlineContainer from "@/containers/gathering/createUpdate/editor/GatheringEditorDeadlineContainer";
+import GatheringEditorHashTagContainer from "@/containers/gathering/createUpdate/editor/GatheringEditorHashTagContainer";
+import GatheringEditorParticipantsFilterContainer from "@/containers/gathering/createUpdate/editor/GatheringEditorParticipantsFilterContainer";
+import GatheringEditorPeriodContainer from "@/containers/gathering/createUpdate/editor/GatheringEditorPeriodContainer";
+import GatheringEditorPlaceContainer from "@/containers/gathering/createUpdate/editor/GatheringEditorPlaceContainer";
+import GatheringEditorTitleContainer from "@/containers/gathering/createUpdate/editor/GatheringEditorTitleContainer";
 import Image from "next/image";
 import "react-date-range/dist/styles.css";
 import "react-date-range/dist/theme/default.css";
 import { useFormContext } from "react-hook-form";
-import GatheringEditorTimeContainer from "./GatheringEditorTimeContainer";
+import GatheringEditorTimeContainer from "../../../../containers/gathering/createUpdate/editor/GatheringEditorTimeContainer";
 
 interface IGatheringEditorEditProps {
   isEdit: true;

src/components/gathering/editor/GatheringEditorCategory.tsx → src/components/gathering/createUpdate/editor/GatheringEditorCategory.tsx

@@ -1,7 +1,7 @@
 import { Modal } from "@/components/common/modal/Modal";
 import { ModalState } from "@/types/ModalState";
 import { useFormContext } from "react-hook-form";
-import GatheringCategoryModal from "../modal/GatheringCategoryModal";
+import GatheringCategoryModal from "./modal/GatheringCategoryModal";
 
 interface ICategory {
   id: number;

src/components/gathering/editor/GatheringEditorDeadline.tsx → src/components/gathering/createUpdate/editor/GatheringEditorDeadline.tsx

@@ -3,7 +3,7 @@ import { ModalState } from "@/types/ModalState";
 import { format } from "date-fns";
 import Image from "next/image";
 import { useFormContext } from "react-hook-form";
-import GatheringDeadlineModal from "../modal/GatheringDeadlineModal";
+import GatheringDeadlineModal from "./modal/GatheringDeadlineModal";
 
 interface IGatheringEditorDeadline {
   modalState: ModalState;

src/components/gathering/editor/GatheringEditorParticipantsFilter.tsx → src/components/gathering/createUpdate/editor/GatheringEditorParticipantsFilter.tsx

@@ -2,7 +2,7 @@ import { Modal } from "@/components/common/modal/Modal";
 import { SETTING_MODAL_SEX } from "@/constants/gathering/GatheringConstant";
 import { ModalState } from "@/types/ModalState";
 import { useFormContext } from "react-hook-form";
-import GatheringParticipantsFilterModal from "../modal/GatheringParticipantsFilterModal";
+import GatheringParticipantsFilterModal from "./modal/GatheringParticipantsFilterModal";
 
 interface IGatheringEditorParticipantsFilter {
   modalState: ModalState;

src/components/gathering/editor/GatheringEditorPeriod.tsx → src/components/gathering/createUpdate/editor/GatheringEditorPeriod.tsx

@@ -3,7 +3,7 @@ import { ModalState } from "@/types/ModalState";
 import { format } from "date-fns";
 import Image from "next/image";
 import { useFormContext } from "react-hook-form";
-import GatheringPeriodModal from "../modal/GatheringPeriodModal";
+import GatheringPeriodModal from "./modal/GatheringPeriodModal";
 
 interface IGatheringEditorPeriod {
   modalState: ModalState

src/components/gathering/editor/GatheringEditorPlace.tsx → src/components/gathering/createUpdate/editor/GatheringEditorPlace.tsx

@@ -1,7 +1,7 @@
 import { Modal } from "@/components/common/modal/Modal";
 import { ModalState } from "@/types/ModalState";
 import { useFormContext } from "react-hook-form";
-import GatheringPlaceModal from "../modal/GatheringPlaceModal";
+import GatheringPlaceModal from "./modal/GatheringPlaceModal";
 
 interface IGatheringEditorPlace {
   modalState: ModalState;

src/components/gathering/editor/GatheringEditorTime.tsx → src/components/gathering/createUpdate/editor/GatheringEditorTime.tsx

@@ -2,7 +2,7 @@ import { Modal } from '@/components/common/modal/Modal';
 import { ModalState } from '@/types/ModalState';
 import { format } from 'date-fns';
 import { useFormContext } from 'react-hook-form';
-import GatheringTimeModal from '../modal/GatheringTimeModal';
+import GatheringTimeModal from './modal/GatheringTimeModal';
 
 interface IGatheringEditorTime {
   modalState: ModalState

src/components/gathering/modal/GatheringParticipantsFilterModal.tsx → src/components/gathering/createUpdate/editor/modal/GatheringParticipantsFilterModal.tsx

@@ -242,9 +242,24 @@ const onClickImproveMaxAge = () => {
                 {
                   backgroundColor: "#0d6efd",
                   height: 30,
+                  left:
+                    startAge >= 56
+                      ? `calc(${((startAge - 20) / 39) * 100}% - 2rem)`
+                      : `calc(${((startAge - 20) / 35) * 87.5}% - ${((((startAge - 20) / 35) * 87.5) / 100) * 2}rem)`,
+                  width:
+                    startAge >= 56
+                      ? endAge >= 56
+                        ? `calc(100% - (${((startAge - 20) / 39) * 100}% - 2rem - (${((59 - endAge) / 39) * 87.5}%))`
+                        : `calc(100% - (${((startAge - 20) / 39) * 100}% - 2rem - (${((59 - endAge) / 39) * 87.5}%))` // 55 1 , 57 0.5,  59 0
+                      : endAge >= 55
+                        ? `calc(100% - (${((startAge - 20) / 35) * 87.5}% - ${((((startAge - 20) / 35) * 87.5) / 100) * 2}rem) - calc(calc(100% - 2rem) / 8 * ${59 - endAge} / 4 )`
+                        : `calc(100% - (${((startAge - 20) / 35) * 87.5}% - ${((((startAge - 20) / 35) * 87.5) / 100) * 2}rem) - calc(calc(100% - 2rem) / 8 * ${55 - endAge + 5} / 5 )`,
                 },
               ]}
-              railStyle={{ backgroundColor: "#ddd", height: 32 }}
+              railStyle={{
+                backgroundColor: "#ddd",
+                height: 32,
+              }}
             />
             <div className="absolute left-0 right-0 top-[4.5rem] flex justify-between px-4">
               {markerPositions.map((age) => (

src/components/gathering/GatheringCardList.tsx → src/components/gathering/read/GatheringCardList.tsx

@@ -1,7 +1,7 @@
 import LottieFile from "@/../public/lottie/list-not-found.json";
 import { Gathering } from "@/types/GatheringDto";
-import GatheringItem from "../common/GatheringItem";
-import LottieComponent from "../common/lottie/LottieComponent";
+import GatheringItem from "../../common/GatheringItem";
+import LottieComponent from "../../common/lottie/LottieComponent";
 interface IGatheringCardList {
     data: Gathering[]
 }

src/components/gathering/GatheringList.tsx → src/components/gathering/read/GatheringList.tsx

@@ -1,11 +1,11 @@
 "use client"
 
-import GatheringCardListContainer from "@/containers/gathering/GatheringCardListContainer";
-import GatheringCategoryListContainer from "@/containers/gathering/GatheringCategoryListContainer";
-import GatheringExcludeCompleteContainer from "@/containers/gathering/GatheringExcludeCompleteContainer";
-import GatheringFilterContainer from "@/containers/gathering/GatheringFilterContainer";
-import GatheringSearchContainer from "@/containers/gathering/GatheringSearchContainer";
-import GatheringSortContainer from "@/containers/gathering/GatheringSortContainer";
+import GatheringCardListContainer from "@/containers/gathering/read/GatheringCardListContainer";
+import GatheringCategoryListContainer from "@/containers/gathering/read/GatheringCategoryListContainer";
+import GatheringExcludeCompleteContainer from "@/containers/gathering/read/GatheringExcludeCompleteContainer";
+import GatheringFilterContainer from "@/containers/gathering/read/GatheringFilterContainer";
+import GatheringSearchContainer from "@/containers/gathering/read/GatheringSearchContainer";
+import GatheringSortContainer from "@/containers/gathering/read/GatheringSortContainer";
 import { GatheringCategoryListType } from "@/types/GatheringCategoryDto";
 import "react-date-range/dist/styles.css";
 import "react-date-range/dist/theme/default.css";

src/components/gathering/GatheringRecommendationList.tsx → src/components/gathering/read/GatheringRecommendationList.tsx

@@ -3,7 +3,7 @@
 import { Gathering, GatheringRecommend } from "@/types/GatheringDto";
 import { fetchWithAuth } from "@/utils/fetchWithAuth";
 import { useState } from "react";
-import GatheringItem from "../common/GatheringItem";
+import GatheringItem from "../../common/GatheringItem";
 
 const GatheringRecommendationList = ({data}: {data: GatheringRecommend[]}) => {
   const [elements, setElements] = useState<Gathering[]>(data);

src/components/gathering/GatheringSearch.tsx → src/components/gathering/read/GatheringSearch.tsx

@@ -1,5 +1,5 @@
 import Image from "next/image";
-import Dropdown from "../common/dropdown/Dropdown";
+import Dropdown from "../../common/dropdown/Dropdown";
 
 interface Props {
   dropDownHandler: (value: string) => void;

src/components/gathering/GatheringViewer.tsx → src/components/gathering/read/detail/GatheringViewer.tsx

@@ -1,17 +1,17 @@
 import { SETTING_MODAL_SEX } from "@/constants/gathering/GatheringConstant";
-import GatheringApplicantListContainer from "@/containers/gathering/GatheringApplicantListContainer";
-import GatheringSupportManagementContainer from "@/containers/gathering/GatheringSupportManagementContainer";
+import GatheringApplicantListContainer from "@/containers/gathering/read/detail/GatheringApplicantListContainer";
+import GatheringSupportManagementContainer from "@/containers/gathering/read/detail/GatheringSupportManagementContainer";
 import { GatheringDetailResponseDto } from "@/types/GatheringDto";
 import { ModalState } from "@/types/ModalState";
 import { convertNumberToShortForm } from "@/utils/convertNumberToShortForm";
 import { format } from "date-fns";
 import { ko } from 'date-fns/locale';
 import Image from "next/image";
-import GatheringLike from "../../containers/gathering/GatheringLikeContainer";
-import Breadcrumbs from "../common/Breadcrumb";
-import GatheringKakaoMap from "./GatheringKakaoMap";
+import GatheringDeleteModalContainer from "../../../../containers/gathering/read/detail/GatheringDeleteModalContainer";
+import GatheringLike from "../../../../containers/gathering/read/GatheringLikeContainer";
+import Breadcrumbs from "../../../common/Breadcrumb";
+import GatheringKakaoMap from "../GatheringKakaoMap";
 import GatheringUpdateDeleteButtonComponent from "./GatheringUpdateDeleteButtonComponent";
-import GatheringDeleteModalContainer from "./modal/GatheringDeleteModalContainer";
 
 interface IGatheringViewer {
   data: GatheringDetailResponseDto;

src/components/gathering/GatheringFilterModal.tsx → src/components/gathering/read/modal/GatheringFilterModal.tsx

@@ -363,25 +363,36 @@ const GatheringFilterModal = ({closeModal}: IGatheringFilterModalProps) => {
                 {
                   backgroundColor: "#0d6efd",
                   height: 30,
+                  left:
+                    startAge >= 56
+                      ? `calc(${((startAge - 20) / 39) * 100}% - 2rem)`
+                      : `calc(${((startAge - 20) / 35) * 87.5}% - ${((((startAge - 20) / 35) * 87.5) / 100) * 2}rem)`,
+                  width:
+                    startAge >= 56
+                      ? endAge >= 56
+                        ? `calc(100% - (${((startAge - 20) / 39) * 100}% - 2rem - (${((59 - endAge) / 39) * 87.5}%))`
+                        : `calc(100% - (${((startAge - 20) / 39) * 100}% - 2rem - (${((59 - endAge) / 39) * 87.5}%))` // 55 1 , 57 0.5,  59 0
+                      : endAge >= 55
+                        ? `calc(100% - (${((startAge - 20) / 35) * 87.5}% - ${((((startAge - 20) / 35) * 87.5) / 100) * 2}rem) - calc(calc(100% - 2rem) / 8 * ${59 - endAge} / 4 )`
+                        : `calc(100% - (${((startAge - 20) / 35) * 87.5}% - ${((((startAge - 20) / 35) * 87.5) / 100) * 2}rem) - calc(calc(100% - 2rem) / 8 * ${55 - endAge + 5} / 5 )`,
                 },
               ]}
               railStyle={{
                 backgroundColor: "#ddd",
                 height: 32,
               }}
             />
-            <div className="absolute left-0 right-0 top-[4.5rem] flex justify-between px-4">
-              {markerPositions.map((age) => (
+            <div className="absolute left-0 right-0 top-[4.5rem] flex w-full justify-between">
+              {markerPositions.map((age, index) => (
                 <button
                   key={age}
                   onClick={() => handleMarkerClick(age)}
                   className={
-                    "left-[-1rem] top-[-1.5rem] flex h-[1.875rem] w-8 cursor-pointer select-none items-center justify-center rounded-full bg-gray2 text-center text-white transition-transform duration-200 hover:bg-main" +
+                    "top-[-1.5rem] flex aspect-square w-[2rem] cursor-pointer select-none items-center justify-center rounded-full bg-gray2 text-center text-white transition-transform duration-200 hover:bg-main" +
                     ` ${age >= startAge && age <= endAge && "bg-main"}`
                   }
                   style={{
                     position: "relative",
-                    transform: `translateX(calc(${((age - 20) / 39) * 100}%))`,
                   }}
                 >
                   <div className="text-md absolute font-medium">{age}</div>