Merge branch 'develop' of https://github.com/TEAM-BEAT/BEAT-Client in…

…to feat/#438/kakaomap

; Conflicts:
;	src/pages/register/Register.tsx

package.json

@@ -49,6 +49,7 @@
     "puppeteer-core": "^22.15.0",
     "react": "^18.3.1",
     "react-beautiful-dnd": "^13.1.1",
+    "react-calendar": "^5.1.0",
     "react-components": "^0.5.1",
     "react-csv": "^2.2.2",
     "react-dom": "^18.3.1",
@@ -57,6 +58,7 @@
     "react-kakao-maps-sdk": "^1.1.27",
     "react-lottie-player": "^2.0.0",
     "react-router-dom": "^6.24.0",
+    "react-time-picker": "^7.0.0",
     "shelljs": "^0.8.5",
     "styled-components": "^6.1.11",
     "styled-reset": "^4.5.2",

src/App.css

@@ -1,5 +1,5 @@
 #root {
-  --vh: 100%;
+  --dvh: 100%;
   max-width: 1280px;
   margin: 0 auto;
   padding: 2rem;

src/App.tsx

@@ -25,8 +25,8 @@ function App() {
   const queryClient = new QueryClient();
 
   function setScreenSize() {
-    const vh = window.innerHeight * 0.01;
-    document.documentElement.style.setProperty("--vh", `${vh}px`);
+    const dvh = window.innerHeight * 0.01;
+    document.documentElement.style.setProperty("--dvh", `${dvh}px`);
   }
 
   useEffect(() => {

src/components/commons/bottomSheet/BottomSheet.styled.ts

@@ -22,9 +22,10 @@ export const BottomSheetWrapper = styled.section<{ $isOpen: boolean }>`
   animation: ${({ $isOpen }) => ($isOpen ? bottomSheetUp : bottomSheetDown)} 250ms ease-in-out;
 `;
 
-export const BottomSheetLayout = styled.section`
+export const BottomSheetLayout = styled.section<{ $paddingTop?: string }>`
   width: 37.5rem;
-  padding: 3.6rem 2.4rem 2.8rem;
+  padding: ${({ $paddingTop }) =>
+    $paddingTop ? `${$paddingTop} 2.4rem 2.8rem` : "3.6rem 2.4rem 2.8rem"};
 
   background-color: ${({ theme }) => theme.colors.gray_800};
   border-radius: 2rem 2rem 0 0;

src/components/commons/bottomSheet/BottomSheet.tsx

@@ -6,12 +6,13 @@ export interface BottomSheetPropType {
   isOpen: boolean;
   children?: ReactNode;
   title?: string;
+  paddingTop?: string;
 }
 
-const BottomSheet = ({ isOpen, title, children }: BottomSheetPropType) => {
+const BottomSheet = ({ isOpen, title, paddingTop, children }: BottomSheetPropType) => {
   return (
     <S.BottomSheetWrapper $isOpen={isOpen} onClick={(e) => e.stopPropagation()}>
-      <S.BottomSheetLayout>
+      <S.BottomSheetLayout $paddingTop={paddingTop}>
         <S.Title>{title}</S.Title>
         {children}
       </S.BottomSheetLayout>

src/components/commons/datePicker/DatePicker.tsx

@@ -0,0 +1,30 @@
+import Calendar from "react-calendar";
+import "react-calendar/dist/Calendar.css";
+import "./calendar.css";
+interface DatePickerProps {
+  date: Date | undefined;
+  onChangeDate: (date: Date) => void;
+}
+
+const DatePicker = ({ date, onChangeDate }: DatePickerProps) => {
+  const isPastDate = (date) => {
+    const today = new Date();
+    today.setHours(0, 0, 0, 0);
+
+    return date < today;
+  };
+
+  return (
+    <Calendar
+      value={date}
+      onChange={onChangeDate}
+      calendarType="gregory"
+      locale="ko-KR"
+      className="custom-calendar"
+      formatDay={(_, date) => date.getDate().toString()}
+      tileClassName={({ date }) => (isPastDate(date) ? "past-date" : "")}
+    />
+  );
+};
+
+export default DatePicker;

src/components/commons/datePicker/calendar.css

@@ -0,0 +1,120 @@
+.custom-calendar {
+  background-color: #2a2a2a;
+  border: none;
+}
+
+/* navigation 관련 */
+.custom-calendar .react-calendar__navigation {
+  height: 24px;
+  margin-bottom: 14px;
+
+  .react-calendar__navigation__label__labelText.react-calendar__navigation__label__labelText--from {
+    color: #fff;
+    font-weight: 500;
+    font-size: 14px;
+    font-family: Pretendard, sans-serif;
+    line-height: 20px;
+  }
+
+  /* label 클릭 할 수 없도록 */
+  .react-calendar__navigation__label {
+    pointer-events: none;
+  }
+}
+
+.custom-calendar .react-calendar__navigation__prev-button,
+.custom-calendar .react-calendar__navigation__next-button {
+  padding-bottom: 2px;
+
+  color: #fff;
+
+  transform: scale(1.1);
+}
+
+.custom-calendar .react-calendar__navigation__prev2-button,
+.custom-calendar .react-calendar__navigation__next2-button {
+  visibility: hidden;
+}
+
+.custom-calendar .react-calendar__navigation__prev-button:hover,
+.custom-calendar .react-calendar__navigation__next-button:hover,
+.custom-calendar .react-calendar__navigation__prev-button:focus,
+.custom-calendar .react-calendar__navigation__next-button:focus {
+  color: #fff;
+
+  background-color: #2a2a2a !important;
+}
+
+/* month-view 관련 */
+.custom-calendar .react-calendar__month-view__weekdays {
+  display: grid !important;
+  grid-template-columns: repeat(7, 32px);
+  justify-content: center;
+  margin-bottom: 8px;
+
+  color: #939393;
+  column-gap: 10.5px;
+
+  /* text */
+  abbr {
+    font-weight: 500;
+    font-size: 12px;
+    text-decoration: none;
+  }
+}
+
+.custom-calendar .react-calendar__month-view__days {
+  display: grid !important;
+  grid-template-columns: repeat(7, 32px);
+  gap: 4px 10.5px;
+}
+
+.custom-calendar .react-calendar__tile {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 32px;
+
+  color: #fff;
+  font-size: 14px;
+
+  background: #444;
+  background-color: transparent;
+  border-radius: 4px;
+
+  :hover {
+    background-color: transparent;
+  }
+}
+
+.custom-calendar .react-calendar__tile--now:hover {
+  color: #fff;
+
+  background-color: #3e3e3e;
+}
+
+.custom-calendar .react-calendar__tile--active {
+  abbr {
+    color: black !important;
+
+    background: #fff !important;
+  }
+  background: #fff !important;
+
+  :hover {
+    background-color: transparent !important;
+  }
+}
+
+.custom-calendar .react-calendar__month-view__days__day--neighboringMonth {
+  color: #626262;
+}
+
+/* 지난 날짜 색상 */
+.past-date {
+  color: #939393 !important;
+
+  cursor: not-allowed;
+
+  pointer-events: none;
+}

src/components/commons/hamburger/Hamburger.styled.ts

@@ -4,6 +4,7 @@ import styled, { css, keyframes } from "styled-components";
 interface HamburgerWrapperProps {
   $isOpen: boolean;
   width: number;
+  height: number;
 }
 
 const hamburgerAnimation = keyframes`
@@ -29,7 +30,7 @@ export const HamburgerWrapper = styled.section<HamburgerWrapperProps>`
   flex-direction: column;
   gap: 1.6rem;
   width: 25.6rem;
-  height: calc(var(--vh, 1vh) * 100);
+  height: ${({ height }) => `${height}px`};
 
   background-color: ${({ theme }) => theme.colors.gray_900};
   transform: ${({ $isOpen }) => ($isOpen ? "translateX(0)" : "translateX(100%)")};

src/components/commons/hamburger/Hamburger.tsx

@@ -28,6 +28,7 @@ const Hamburger = () => {
     e.stopPropagation();
   };
 
+  // 좌우 너비 계산
   const [width, setWidth] = useState(window.innerWidth);
 
   useEffect(() => {
@@ -41,6 +42,20 @@ const Hamburger = () => {
     };
   }, []);
 
+  // 높이 계산
+  const [height, setHeight] = useState(window.innerHeight);
+
+  const handleResize = () => {
+    setHeight(window.innerHeight);
+  };
+
+  useEffect(() => {
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
   useEffect(() => {
     if (isOpen) {
       document.body.style.overflow = "hidden";
@@ -102,6 +117,7 @@ const Hamburger = () => {
           ref={outside}
           onClick={(e) => e.stopPropagation()}
           width={width}
+          height={height}
         >
           <S.CloseBtn onClick={closeHamburger}>
             <S.CloseIcon />

src/components/commons/renewTimePicker/RenewTimePicker.styled.ts

@@ -0,0 +1,64 @@
+import styled from "styled-components";
+
+export const Wrapper = styled.div`
+  display: flex;
+  gap: 16px;
+`;
+
+export const TimePickerContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+export const ButtonGroup = styled.div`
+  display: flex;
+  gap: 11px;
+  justify-content: center;
+  margin-bottom: 20px;
+`;
+
+export const StyledButton = styled.button<{ $isActive: boolean }>`
+  padding: 6px 50.5px;
+
+  ${({ theme }) => theme.fonts["body2-normal-medi"]};
+  color: ${({ theme, $isActive }) => ($isActive ? theme.colors.black : theme.colors.gray_400)};
+  font-weight: 500;
+  font-size: 13.2px;
+
+  background-color: ${({ theme, $isActive }) => ($isActive ? "#fff" : theme.colors.gray_700)};
+  border-radius: 100px;
+`;
+
+export const TimeGrid = styled.div`
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  gap: 13.4px;
+`;
+
+export const GridTitle = styled.p`
+  ${({ theme }) => theme.fonts["body2-normal-medi"]};
+  font-weight: 500;
+
+  &:first-child {
+    margin-top: 52px;
+  }
+
+  &:last-child {
+    margin-top: 84px;
+  }
+`;
+
+export const GridButton = styled.button<{ $isActive: boolean }>`
+  width: 32px;
+  height: 32px;
+
+  color: ${({ theme, $isActive }) => ($isActive ? theme.colors.black : theme.colors.gray_400)};
+  text-align: center;
+
+  background-color: ${({ theme, $isActive }) =>
+    $isActive ? theme.colors.white : theme.colors.gray_700};
+  cursor: pointer;
+  border: none;
+  border-radius: 5px;
+`;