ef_front/app/components/CalenderSelector.tsx

import OneMonth from "./svgs/oneMonth";
import Realtime from "./svgs/realtime";
import Arrow from "./svgs/arrow";
import { DateRangeEnum } from "@/app/constants/dateRange";
import { useState,useEffect } from "react";

export default function CalenderSelector( {dateString, is_small, onRangeChange}: {dateString: string, is_ri: boolean, is_small: boolean, onRangeChange?: (start: Date, end: Date) => void} ) {  
  const [isOpen, setIsOpen] = useState(false);
  const [selected, setSelected] = useState<number>(DateRangeEnum.ONE_MONTH);
  const [rangeStart, setRangeStart] = useState<Date>(new Date());
  const [rangeEnd, setRangeEnd] = useState<Date>(new Date());

  useEffect(() => {
    const startDate = new Date(Date.now() - 30 * 24 * 60 * 60 * 1000);
    const endDate = new Date(Date.now());
    setRangeStart(startDate);
    setRangeEnd(endDate);
    onRangeChange?.(startDate, endDate);
  }, []);

  return (
    <>
      <div className="relative inline-block">
        <div className={`
        ${is_small ? 'w-[267px] h-[28px]':'w-[267px] h-[36px]'} 
        ${isOpen ? 'border-[#F94B37] bg-[#FFF3F2] bor' : 'border-border-pale bg-white '} 
         border-1 rounded-lg flex flex-row items-center justify-between gap-2 px-2 cursor-pointer`}
        onClick={() => {
          console.log('click');
          setIsOpen(!isOpen);
        }}
        >
          <div className="flex-shrink-0">
            {selected === DateRangeEnum.ALL ? (
              <Realtime color="#848484" width={is_small ? 16 : 20} height={is_small ? 16 : 20} />
            ) : (
              <OneMonth color="#848484" width={is_small ? 16 : 20} height={is_small ? 16 : 20} />
            )}
          </div>
          <div className={`flex-1 min-w-0 font-semibold ${is_small ? 'text-xs':'text-sm'}`}>
            {selected === DateRangeEnum.ONE_MONTH&& '최근 1개월'}
            {selected === DateRangeEnum.ONE_WEEK&& '최근 1주일'}
            {selected === DateRangeEnum.TWO_MONTHS&& '최근 2개월'}
            {selected === DateRangeEnum.THREE_MONTHS&& '최근 3개월'}
            {selected === DateRangeEnum.SIX_MONTHS&& '최근 6개월'}
            {selected === DateRangeEnum.ONE_YEAR&& '최근 1년'}
            {selected === DateRangeEnum.ALL&& '전체'}
          </div>
          <div className={`pt-[3px] transition-transform ${isOpen ? 'rotate-180' : ''} flex-shrink-0`}>
            <Arrow color="#A4A0A0" width={is_small ? 12 : 18} height={is_small ? 8 : 12} />
          </div>

        </div>
        {isOpen && (
          <div className={`absolute left-0 top-full mt-1 ${is_small ? 'w-[267px]' : 'w-[267px]'} bg-white border-1 border-border-pale rounded-lg shadow-sm p-1 z-50`}>
            <div className="flex flex-col">
              <button
                className={`flex items-center gap-2 px-2 h-[32px] rounded-md hover:bg-[#f6f6f6] text-left ${selected === DateRangeEnum.ALL ? 'bg-[#FFF3F2] font-semibold' : ''}`}
                onClick={() => { 
                  setSelected(DateRangeEnum.ALL); 
                  const end = new Date();
                  const start = new Date(0);
                  setRangeStart(start);
                  setRangeEnd(end);
                  onRangeChange?.(start, end);
                  setIsOpen(false); 
                }}
              >
                <Realtime color={selected === DateRangeEnum.ALL ? '#F94B37' : '#848484'} width={16} height={16} />
                <span className="text-sm">전체</span>
              </button>
                <div className="h-1 "></div>
              <button
                className={`flex items-center gap-2 px-2 h-[32px] rounded-md hover:bg-[#f6f6f6] text-left ${selected === DateRangeEnum.ONE_WEEK? 'bg-[#FFF3F2] font-semibold' : ''}`}
                onClick={() => { 
                  setSelected(DateRangeEnum.ONE_WEEK); 
                  const end = new Date();
                  const start = new Date(end.getTime() - 7*24*60*60*1000);
                  setRangeStart(start);
                  setRangeEnd(end);
                  onRangeChange?.(start, end);
                  setIsOpen(false); 
                }}
              >
                <OneMonth color={selected === DateRangeEnum.ONE_WEEK ? '#F94B37' : '#848484'} width={16} height={16} />
                <span className="text-sm">최근 1주일</span>
              </button>
              <div className="h-1 "></div>
              <button
                className={`flex items-center gap-2 px-2 h-[32px] rounded-md hover:bg-[#f6f6f6] text-left ${selected === DateRangeEnum.ONE_MONTH? 'bg-[#FFF3F2] font-semibold' : ''}`}
                onClick={() => { 
                  setSelected(DateRangeEnum.ONE_MONTH); 
                  const end = new Date();
                  const start = new Date(end.getTime() - 30*24*60*60*1000);
                  setRangeStart(start);
                  setRangeEnd(end);
                  onRangeChange?.(start, end);
                  setIsOpen(false); 
                }}
              >
                <OneMonth color={selected === DateRangeEnum.ONE_MONTH ? '#F94B37' : '#848484'} width={16} height={16} />
                <span className="text-sm">최근 1개월</span>
              </button>
              <div className="h-1 "></div>
              <button
                className={`flex items-center gap-2 px-2 h-[32px] rounded-md hover:bg-[#f6f6f6] text-left ${selected === DateRangeEnum.TWO_MONTHS? 'bg-[#FFF3F2] font-semibold' : ''}`}
                onClick={() => { 
                  setSelected(DateRangeEnum.TWO_MONTHS); 
                  const end = new Date();
                  const start = new Date(end.getTime() - 60*24*60*60*1000);
                  setRangeStart(start);
                  setRangeEnd(end);
                  onRangeChange?.(start, end);
                  setIsOpen(false); 
                }}
              >
                <OneMonth color={selected === DateRangeEnum.TWO_MONTHS ? '#F94B37' : '#848484'} width={16} height={16} />
                <span className="text-sm">최근 2개월</span>
              </button>
              <div className="h-1 "></div>
              <button
                className={`flex items-center gap-2 px-2 h-[32px] rounded-md hover:bg-[#f6f6f6] text-left ${selected === DateRangeEnum.THREE_MONTHS? 'bg-[#FFF3F2] font-semibold' : ''}`}
                onClick={() => { 
                  setSelected(DateRangeEnum.THREE_MONTHS); 
                  const end = new Date();
                  const start = new Date(end.getTime() - 90*24*60*60*1000);
                  setRangeStart(start);
                  setRangeEnd(end);
                  onRangeChange?.(start, end);
                  setIsOpen(false); 
                }}
              >
                <OneMonth color={selected === DateRangeEnum.THREE_MONTHS ? '#F94B37' : '#848484'} width={16} height={16} />
                <span className="text-sm">최근 3개월</span>
              </button>
              <div className="h-1 "></div>
              <button
                className={`flex items-center gap-2 px-2 h-[32px] rounded-md hover:bg-[#f6f6f6] text-left ${selected === DateRangeEnum.SIX_MONTHS? 'bg-[#FFF3F2] font-semibold' : ''}`}
                onClick={() => { 
                  setSelected(DateRangeEnum.SIX_MONTHS); 
                  const end = new Date();
                  const start = new Date(end.getTime() - 182*24*60*60*1000);
                  setRangeStart(start);
                  setRangeEnd(end);
                  onRangeChange?.(start, end);
                  setIsOpen(false); 
                }}
              >
                <OneMonth color={selected === DateRangeEnum.SIX_MONTHS ? '#F94B37' : '#848484'} width={16} height={16} />
                <span className="text-sm">최근 6개월</span>
              </button>
              <div className="h-1 "></div>
              <button
                className={`flex items-center gap-2 px-2 h-[32px] rounded-md hover:bg-[#f6f6f6] text-left ${selected === DateRangeEnum.ONE_YEAR? 'bg-[#FFF3F2] font-semibold' : ''}`}
                onClick={() => { 
                  setSelected(DateRangeEnum.ONE_YEAR); 
                  const end = new Date();
                  const start = new Date(end.getTime() - 365*24*60*60*1000);
                  setRangeStart(start);
                  setRangeEnd(end);
                  onRangeChange?.(start, end);
                  setIsOpen(false); 
                }}
              >
                <OneMonth color={selected === DateRangeEnum.ONE_YEAR ? '#F94B37' : '#848484'} width={16} height={16} />
                <span className="text-sm">최근 1년</span>
              </button>
              
            </div>
          </div>
        )}
      </div>
    </>
  );
}