Merge branch 'master' into feature-jisung

eunji-0623 · Jul 22, 2024 · 38d92fd · 38d92fd
2 parents 4a803b5 + d656566
commit 38d92fd
Show file tree

Hide file tree

Showing 24 changed files with 218 additions and 65 deletions.
diff --git a/components/ActivityDetails/ActivityDetails.tsx b/components/ActivityDetails/ActivityDetails.tsx
@@ -205,9 +205,12 @@ export default function ActivityDetails({ id }: ActivityDetailsProps) {
               <p className="text-nomad-black dark:text-var-gray2 font-bold text-xl">
                 체험 설명
               </p>
-              <p className="text-nomad-black dark:text-var-gray2">
+              <textarea
+                className="py-[16px] px-[20px] h-[200px] resize-none dark:bg-var-dark1 dark:text-var-gray2 "
+                disabled
+              >
                 {activityData?.description}
-              </p>
+              </textarea>
             </div>
             <div className="border-t-2 border-var-gray3 dark:border-var-dark4 border-solid my-10 m:my-6" />
             {activityData && <Map address={activityData.address} />}

diff --git a/components/ActivityDetails/ActivityDetails.types.ts b/components/ActivityDetails/ActivityDetails.types.ts
@@ -1,3 +1,5 @@
+import { getActivityInfoResponse } from '@/pages/api/activities/apiactivities.types';
+
 export interface ActivityDetailsProps {
   id: number;
 }
diff --git a/components/ActivityDetails/Reservation/Reservation.tsx b/components/ActivityDetails/Reservation/Reservation.tsx
@@ -38,7 +38,10 @@ export default function Reservation({ activity }: ReservationProps) {
             format(new Date(schedule.date), 'yyyy-MM-dd') ===
             format(date, 'yyyy-MM-dd')
         )
-        .map((schedule) => `${schedule.startTime} ~ ${schedule.endTime}`);
+        .map(
+          (schedule) =>
+            `${schedule.startTime} ~ ${schedule.endTime === '00:00' ? '24:00' : schedule.endTime}`
+        );
     },
     [schedules]
   );

diff --git a/components/Button/TopButton.tsx b/components/Button/TopButton.tsx
@@ -0,0 +1,48 @@
+import Image from 'next/image';
+import React, { useState, useEffect } from 'react';
+
+const TopButton = () => {
+  const [showButton, setShowButton] = useState(false);
+
+  const scrollToTop = () => {
+    window.scroll({
+      top: 0,
+      behavior: 'smooth',
+    });
+  };
+  useEffect(() => {
+    const ShowButtonClick = () => {
+      if (window.scrollY > 500) {
+        setShowButton(true);
+      } else {
+        setShowButton(false);
+      }
+    };
+    window.addEventListener('scroll', ShowButtonClick);
+    return () => {
+      window.removeEventListener('scroll', ShowButtonClick);
+    };
+  }, []);
+  return (
+    <>
+      {showButton && (
+        <div className="fixed right-[30px] bottom-[30px] z-30">
+          <button
+            onClick={scrollToTop}
+            type="button"
+            className="flex justify-center items-center w-[40px] h-[40px] rounded-full bg-nomad-black border-[3px] border-solid border-var-gray1 dark:bg-var-dark2 dark:border-var-dark3"
+          >
+            <Image
+              src="/icon/chevron_up_white.png"
+              alt="화살표"
+              width={26}
+              height={26}
+            />
+          </button>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default TopButton;
diff --git a/components/CatergoryBtn/CatergoryBtn.tsx b/components/CatergoryBtn/CatergoryBtn.tsx
@@ -37,10 +37,12 @@ export default function CatergoryBtn({ categoryName }: CategoryBtnProps) {
 
   return (
     <button
-      className={`flex items-center justify-center rounded-[15px] border-[1px] border-solid border-var-green2 dark:border-none w-[127px] h-[53px] t:min-w-[120px] m:min-w-[80px] m:h-[41px] ${backgroundColor}`}
+      className={`flex items-center justify-center rounded-[15px] border-[1px] border-solid border-2 m:border-[1px] border-var-green2 dark:border-none w-[127px] h-[53px] t:min-w-[120px] m:min-w-[80px] m:h-[41px] ${backgroundColor}`}
       onClick={handleClick}
     >
-      <p className={`text-[18px] m:text-[14px] ${textColor}`}>{categoryName}</p>
+      <p className={`text-[18px] p:font-[600] m:text-[14px] ${textColor}`}>
+        {categoryName}
+      </p>
     </button>
   );
 }
diff --git a/components/InputBox/TextArea.tsx b/components/InputBox/TextArea.tsx
@@ -23,7 +23,7 @@ export default function TextArea({
     <div className="flex flex-col gap-[16px] relative">
       {label && <label className="text-[24px] font-bold">{label}</label>}
       <textarea
-        className={`border ${errors[name] ? 'border-var-red2' : ''} py-[16px] px-[20px] rounded-md border-var-gray6 dark:border-var-dark3 w-full h-[346px] resize-none dark:bg-var-dark2 dark:text-var-gray2`}
+        className={`border ${errors[name] ? 'border-var-red2' : ''} py-[16px] px-[20px] rounded-md border-var-gray6 dark:border-var-dark3 w-full h-[346px] resize-none dark:bg-var-dark2 dark:text-var-gray2 custom-scrollbar`}
         type={type}
         placeholder={placeholder}
         {...register(name, { ...validation, readOnly })}

diff --git a/components/Lander/AllActivities.tsx b/components/Lander/AllActivities.tsx
@@ -2,7 +2,7 @@ import Image from 'next/image';
 import StarImg from '@/public/icon/Star.svg';
 import CatergoryBtn from '../CatergoryBtn/CatergoryBtn';
 import PriceFilterBtn from '../PriceFilterBtn/PriceFilterBtn';
-import { useCallback, useEffect } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { AllActivityProps } from './AllActivities.type';
 import { getActivityList } from '@/pages/api/activities/apiactivities';
 import { getActivityListResponse } from '@/pages/api/activities/apiactivities.types';
@@ -67,6 +67,7 @@ export function AllActivity({
 
 function AllActivities() {
   const [MainPageState, setMainPageState] = useRecoilState(mainPageState);
+  const PaginationScrollRef = useRef<HTMLDivElement | null>(null);
 
   const {
     itemsPerPage: items_per_page,
@@ -127,6 +128,7 @@ function AllActivities() {
       ...prevState,
       currentPage: page,
     }));
+    PaginationScrollRef.current?.scrollIntoView({ behavior: 'smooth' });
   };
 
   useEffect(() => {
@@ -153,8 +155,9 @@ function AllActivities() {
     };
   }, [currentPage, items_per_page, selectedSorted, KategorieName]);
 
+  console.log(currentPage);
   return (
-    <div>
+    <div ref={PaginationScrollRef}>
       <div className="flex justify-between">
         <div className="relative t:w-[520px] m:w-[230px]">
           <div className="flex gap-[24px] t:gap-[14px] m:gap-[8px] t:w-[520px] m:w-[230px] overflow-auto scrollbar-hide">

diff --git a/components/Lander/BestActivities.tsx b/components/Lander/BestActivities.tsx
@@ -54,7 +54,7 @@ function BestActivity({
         description={description}
         activityId={id}
       />
-      <div className="font-sans text-[30px] m:text-[18px] font-[700] absolute left-[20px] bottom-[74px] m:bottom-[50px] text-white">
+      <div className="font-sans w-[320px] h-[80px] m:w-[140px] m:h-[40px] text-[30px] m:text-[16px] font-[700] absolute left-[20px] bottom-[84px] m:bottom-[50px] text-white text-ellipsis overflow-hidden leading-normal m:truncate ...">
         {title}
       </div>
       <div className="font-sans text-[20px] m:text-[16px] font-[700] absolute left-[20px] bottom-[39px] m:bottom-[24px] text-white">

diff --git a/components/Lander/Main.tsx b/components/Lander/Main.tsx
@@ -20,9 +20,6 @@ function Main() {
   const { SearchValue } = useRecoilValue(mainSearchValueState);
   const date = new Date();
   const month = date.getMonth() + 1;
-  //const {id, title, bannerImageUrl} = useRecoilValue(BestOfmonth);
-
-  console.log(userData);
 
   const params: getActivityListParams = {
     method: 'offset',

diff --git a/components/Lander/SearchResults.tsx b/components/Lander/SearchResults.tsx
@@ -1,7 +1,7 @@
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { SearchResultsProps } from './SearchResults.type';
 import { mainSearchValueState } from '@/states/mainPageState';
-import { useEffect, useCallback } from 'react';
+import { useEffect, useCallback, useRef } from 'react';
 import {
   getActivityListParams,
   getActivityListResponse,
@@ -15,6 +15,7 @@ import Spinner from '../Spinner/Spinner';
 function SearchResults({ SearchValue }: SearchResultsProps) {
   const [searchresultsState, setSearchResultsState] =
     useRecoilState(mainSearchValueState);
+  const PaginationScrollRef = useRef<HTMLDivElement | null>(null);
 
   const {
     SearchValue: resultsValue,
@@ -87,10 +88,11 @@ function SearchResults({ SearchValue }: SearchResultsProps) {
       ...prevState,
       currentPage: page,
     }));
+    PaginationScrollRef.current?.scrollIntoView({ behavior: 'smooth' });
   };
 
   return (
-    <div className="mt-[40px]">
+    <div className="mt-[40px]" ref={PaginationScrollRef}>
       <div className="font-sans text-[32px] font-[400] mb-[12px]">
         <span className="font-sans text-[32px] font-[700]">
           {`"${resultsValue}"`}
@@ -105,7 +107,7 @@ function SearchResults({ SearchValue }: SearchResultsProps) {
           <Spinner />
         </div>
       ) : (
-        <div className="grid grid-cols-4 t:grid-cols-3 m:grid-cols-2 grid-rows-2 gap-[20px] t:gap-[14px] m:gap-[6px] gap-y-[48px] mb-[40px] overflow-auto scrollbar-hide">
+        <div className="grid grid-cols-4 t:grid-cols-3 m:grid-cols-2 grid-rows-2 gap-[20px] t:gap-[14px] m:gap-[8px] gap-y-[48px] mb-[40px] overflow-auto scrollbar-hide px-[20px] pt-[20px]">
           {SearchResultsData?.activities.map((data) => (
             <AllActivity
               key={data.id}

diff --git a/components/Lander/Test.tsx b/components/Lander/Test.tsx
diff --git a/components/Layout/NavigationBar.tsx b/components/Layout/NavigationBar.tsx
@@ -58,7 +58,7 @@ export default function NavigationBar() {
       <div className="w-[1200px] flex justify-between items-center ">
         <div className="flex items-center">
           <Link href="/">
-            <Image src={darkMode ? darkLogo : Logo} alt="로고 아이콘" />
+            <Image src={darkMode ? darkLogo : Logo} alt="로고 아이콘" className="m:w-[120px]" />
           </Link>
         </div>
         <div className="flex items-center gap-4">
@@ -67,6 +67,7 @@ export default function NavigationBar() {
             name="checkbox"
             className="switch"
             onClick={toggleDarkMode}
+            checked={darkMode}
           ></input>
           {isLoggedIn ? (
             <div className="flex items-center gap-2">

diff --git a/components/MetaData/MetaData.tsx b/components/MetaData/MetaData.tsx
@@ -27,6 +27,7 @@ export function ActivityDetailsPageMeta({
 export function InitialPageMeta({ title }: InitialPageMetaProps) {
   return (
     <Head>
+      <title>{title}</title>
       <meta property="og:title" content={title} />
       <meta
         property="og:description"

diff --git a/components/MyActivity/Card.tsx → components/MyActivity/Card/Card.tsx b/components/MyActivity/Card.tsx → components/MyActivity/Card/Card.tsx
@@ -2,7 +2,7 @@ import Image from 'next/image';
 import { useRouter } from 'next/router';
 import { useState } from 'react';
 import { CardProps, PopoverButtonProps, PopoverProps } from './Card.types';
-import { MeatballButton } from '../Button/Button';
+import { MeatballButton } from '../../Button/Button';
 import { formatCurrency } from '@/utils/formatCurrency';
 import { formatNumberToFixed } from '@/utils/formatNumberToFixed';
 import { usePopup } from '@/hooks/usePopup';
@@ -76,7 +76,7 @@ function Card({
   const formattedPrice = formatCurrency(price);
 
   return (
-    <div className="flex rounded-[24px] h-[204px] shadow-card dark:shadow-none t:w-full m:w-full">
+    <div className="flex rounded-[24px] shadow-card dark:shadow-none t:w-full m:w-full">
       <div className="min-w-[204px] h-[204px] relative t:min-w-[156px] t:h-[156px] m:min-w-[110px] m:h-[128px]">
         <Link
           href={`/activity-details/${activityId}`}
@@ -91,7 +91,7 @@ function Card({
           />
         </Link>
       </div>
-      <div className="w-full rounded-r-[24px] pl-[24px] pt-[24px] pb-[10px] pr-[10px] t:p-[12px] m:p-[9px] bg-white dark:bg-var-dark2 flex flex-col justify-between">
+      <div className="w-full h-[204px] t:h-[156px] m:h-[128px] rounded-r-[24px] pl-[24px] pt-[24px] pb-[10px] pr-[10px] t:p-[12px] m:p-[9px] bg-white dark:bg-var-dark2 flex flex-col justify-between">
         <div className="flex flex-col gap-[6px]">
           <div className="flex gap-[6px] items-center">
             <Image

diff --git a/components/MyActivity/Card.types.ts → components/MyActivity/Card/Card.types.ts b/components/MyActivity/Card.types.ts → components/MyActivity/Card/Card.types.ts
diff --git a/components/MyActivity/Register/RegisterForm.tsx b/components/MyActivity/Register/RegisterForm.tsx
@@ -77,7 +77,8 @@ function RegisterForm({ activityData, isEdit = false }: RegisterFormProps) {
       activityData.schedules.forEach((schedule, index) => {
         tempDate[index] = schedule.date;
         tempStartTime[index] = schedule.startTime;
-        tempEndTime[index] = schedule.endTime;
+        tempEndTime[index] =
+          schedule.endTime === '00:00' ? '24:00' : schedule.endTime;
         tempTimeSlots.push({ id: schedule.id });
       });
       tempTimeSlots.pop();
@@ -95,7 +96,7 @@ function RegisterForm({ activityData, isEdit = false }: RegisterFormProps) {
 
   const formatSchedules = () =>
     Array.from({ length: timeSlotCount }, (_, i) => ({
-      endTime: endTime[i],
+      endTime: endTime[i] === '24:00' ? '00:00' : endTime[i],
       startTime: startTime[i],
       date: formatDate(selectedDate[i]),
     }));

diff --git a/components/MyActivity/Register/TimeDropdown.tsx b/components/MyActivity/Register/TimeDropdown.tsx
@@ -58,12 +58,12 @@ function TimeDropdown({
         />
       </button>
       {isOpen && (
-        <ul className="absolute z-10 animate-slideDown p:w-[140px] w-full h-[200px] rounded-[8px] overflow-y-scroll scrollbar-hide m:w-full">
+        <ul className="absolute z-10 animate-slideDown mt-[4px] p:w-[140px] w-full h-[200px] rounded-[8px] overflow-y-scroll scrollbar-hide m:w-full">
           {times.map((time) => (
             <li
               key={time}
               onClick={() => handleSelectTime(time)}
-              className="h-[56px] text-var-black py-[18px] px-[16px] m:px-[12px] hover:bg-gray-100 cursor-pointer bg-white dark:bg-var-dark2 dark:text-var-gray2 dark:hover:bg-var-gray2 dark:hover:text-var-dark2"
+              className="h-[56px] text-var-black py-[18px] px-[16px] m:px-[12px] hover:bg-gray-100 cursor-pointer bg-white dark:bg-var-dark3 dark:text-var-gray2 dark:hover:bg-var-gray2 dark:hover:text-var-dark3"
             >
               {time}
             </li>

diff --git a/components/MyActivity/Register/validation.ts b/components/MyActivity/Register/validation.ts
@@ -7,6 +7,8 @@ export const validation = {
   },
   price: {
     required: '체험 가격을 입력해 주세요',
+    validate: (value: number) =>
+      value > 0 ? true : '가격은 1원 이상부터 입력 가능합니다',
   },
   address: {
     required: '주소를 입력해 주세요',

diff --git a/components/PriceFilterBtn/PriceFilterBtn.tsx b/components/PriceFilterBtn/PriceFilterBtn.tsx
@@ -31,10 +31,10 @@ export default function PriceFilterBtn() {
   return (
     <div className="relative" ref={dropDownElement}>
       <button
-        className="flex justify-between items-center w-[147px] h-[53px] border-solid border-[1px] rounded-[15px] t:w-[120px] m:w-[90px] m:h-[41px] border-var-green2 px-[20px] m:px-[10px] bg-white dark:bg-var-dark2 dark:border-none"
+        className="flex justify-between items-center w-[147px] h-[53px] border-solid border-[1px] rounded-[15px] t:w-[140px] m:w-[94px] m:h-[41px] border-var-green2 px-[20px] m:px-[10px] bg-white dark:bg-var-dark2 dark:border-none"
         onClick={() => setShowMenuList((prev) => !prev)}
       >
-        <p className="text-[18px] t:text-[16px] m:text-[14px] text-var-green2 dark:text-var-gray2">
+        <p className="text-[18px] t:text-[16px] m:text-[12px] text-var-green2 dark:text-var-gray2">
           {isClient && !showMenuList ? sortedName || '정렬' : sortedName}
         </p>
         <Image

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -13,6 +13,7 @@ import { useEffect, useState } from 'react';
 import { useRouter } from 'next/router';
 import SidenNavigationMobile from '@/components/SideNavigation/SideNavigationMobile';
 import Theme from '@/components/Theme/Theme';
+import TopButton from '@/components/Button/TopButton';
 
 declare global {
   interface Window {
@@ -72,6 +73,7 @@ export default function App({ Component, pageProps }: AppProps) {
           <Modal />
           <SidenNavigationMobile />
           <SilentRefresh />
+          <TopButton />
         </QueryClientProvider>
       )}
     </RecoilRoot>