Merge pull request #282 from SOPT-all/develop

전체 QA용 3차 배포
SOPT-all · Jan 24, 2025 · 45403ab · 45403ab
2 parents 75fe633 + 5553972
commit 45403ab
Show file tree

Hide file tree

Showing 95 changed files with 507 additions and 380 deletions.
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.png" type="image/png" />
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
     <title>da-sh.kr</title>
   </head>
   <body>

diff --git a/public/svg/ic_check_gray07_24.svg b/public/svg/ic_check_gray07_24.svg
diff --git a/public/svg/ic_check_main03_24.svg b/public/svg/ic_check_main03_24.svg
diff --git a/public/svg/ic_location_60.svg b/public/svg/ic_location_60.svg
diff --git a/src/apis/instructorRegister/axios/index.ts b/src/apis/instructorRegister/axios/index.ts
@@ -3,8 +3,8 @@ import { API_URL } from '@/apis/constants/apiURL';
 
 interface InstructorRegisterInfoTypes {
   imageUrls: string[];
-  instagram: string;
-  youtube: string;
+  instagram: string | null;
+  youtube: string | null;
   educations: string[];
   experiences: string[];
   detail: string;

diff --git a/src/apis/instructorRegister/queries/index.ts b/src/apis/instructorRegister/queries/index.ts
@@ -3,8 +3,8 @@ import { postInstructorRegisterInfo } from '../axios';
 
 interface InstructorRegisterInfoTypes {
   imageUrls: string[];
-  instagram: string;
-  youtube: string;
+  instagram: string | null;
+  youtube: string | null;
   educations: string[];
   experiences: string[];
   detail: string;

diff --git a/src/apis/reservation/axios/index.ts b/src/apis/reservation/axios/index.ts
@@ -1,6 +1,6 @@
-import { instance } from '@/apis/api';
-import { API_URL } from "@/apis/constants/apiURL";
 import { ReservationDetailApiResponse } from '@/pages/reservation/types';
+import { instance } from '@/apis/api';
+import { API_URL } from '@/apis/constants/apiURL';
 
 export const getReservation = async (lessonId: string): Promise<ReservationDetailApiResponse> => {
   const url = `${API_URL.LESSON_RESERVE_PROGRESS}/${lessonId}/reserve-progress`;
@@ -10,8 +10,15 @@ export const getReservation = async (lessonId: string): Promise<ReservationDetai
 
 export const postReservation = async (
   lessonId: string,
+  paymentKey: string,
+  orderId: string,
+  amount: number
 ): Promise<ReservationDetailApiResponse> => {
   const url = `${API_URL.LESSON_RESERVATION}/${lessonId}/reservations`;
-  const { data } = await instance.post(url);
+  const { data } = await instance.post(url, {
+    paymentKey,
+    orderId,
+    amount,
+  });
   return data;
-};
+};
diff --git a/src/apis/reservation/queries/index.ts b/src/apis/reservation/queries/index.ts
@@ -1,8 +1,8 @@
 import { useMutation, useQuery } from '@tanstack/react-query';
+import { AxiosError } from 'axios';
+import { ReservationDetailApiResponse } from '@/pages/reservation/types';
+import { QUERY_KEYS } from '@/apis/constants/queryKey';
 import { getReservation, postReservation } from '@/apis/reservation/axios';
-import { ReservationDetailApiResponse } from "@/pages/reservation/types";
-import { QUERY_KEYS } from "@/apis/constants/queryKey";
-import { AxiosError } from "axios";
 
 export const useGetReservaion = (lessonId: string) => {
   return useQuery<ReservationDetailApiResponse, AxiosError>({
@@ -12,7 +12,11 @@ export const useGetReservaion = (lessonId: string) => {
 };
 
 export const usePostReservation = () => {
-  return useMutation<ReservationDetailApiResponse, AxiosError, { lessonId: string; }>({
-    mutationFn: ({ lessonId }) => postReservation(lessonId),
+  return useMutation<
+    ReservationDetailApiResponse,
+    AxiosError,
+    { lessonId: string; paymentKey: string; orderId: string; amount: number }
+  >({
+    mutationFn: ({ lessonId, paymentKey, orderId, amount }) => postReservation(lessonId, paymentKey, orderId, amount),
   });
 };
diff --git a/src/assets/gif/home_black.gif b/src/assets/gif/home_black.gif
diff --git a/src/assets/gif/home_white.gif b/src/assets/gif/home_white.gif
diff --git a/src/assets/gif/index.ts b/src/assets/gif/index.ts
@@ -1,5 +1,7 @@
 import ClearGif from './clear.gif';
 import EmptyGif from './empty.gif';
+import HomeBlack from './home_black.gif';
+import HomeWhite from './home_white.gif';
 import LoginGif from './login.gif';
 
-export { ClearGif, EmptyGif, LoginGif };
+export { ClearGif, EmptyGif, LoginGif, HomeBlack, HomeWhite };
diff --git a/src/assets/images/image_chorehong.jpeg b/src/assets/images/image_chorehong.jpeg
diff --git a/src/assets/images/image_genre_breaking.png b/src/assets/images/image_genre_breaking.png
diff --git a/src/assets/images/image_genre_choreo.png b/src/assets/images/image_genre_choreo.png
diff --git a/src/assets/images/image_genre_femalehiphop.png b/src/assets/images/image_genre_femalehiphop.png
diff --git a/src/assets/images/image_genre_hiphop.png b/src/assets/images/image_genre_hiphop.png
diff --git a/src/assets/images/image_genre_house.png b/src/assets/images/image_genre_house.png
diff --git a/src/assets/images/image_genre_kpop.png b/src/assets/images/image_genre_kpop.png
diff --git a/src/assets/images/image_genre_krump.png b/src/assets/images/image_genre_krump.png
diff --git a/src/assets/images/image_genre_locking.png b/src/assets/images/image_genre_locking.png
diff --git a/src/assets/images/image_genre_popping.png b/src/assets/images/image_genre_popping.png
diff --git a/src/assets/images/image_genre_soul.png b/src/assets/images/image_genre_soul.png
diff --git a/src/assets/images/image_genre_voguing.png b/src/assets/images/image_genre_voguing.png
diff --git a/src/assets/images/image_genre_waackgin.png b/src/assets/images/image_genre_waackgin.png
diff --git a/src/assets/images/image_kkukgirl.jpg b/src/assets/images/image_kkukgirl.jpg
diff --git a/src/assets/images/img_banner_750.png b/src/assets/images/img_banner_750.png
diff --git a/src/assets/images/img_genre_breaking_84.png b/src/assets/images/img_genre_breaking_84.png
diff --git a/src/assets/images/img_genre_choreo.png b/src/assets/images/img_genre_choreo.png
diff --git a/src/assets/images/img_genre_femalehiphop_84.png b/src/assets/images/img_genre_femalehiphop_84.png
diff --git a/src/assets/images/img_genre_hiphop_84.png b/src/assets/images/img_genre_hiphop_84.png
diff --git a/src/assets/images/img_genre_house.png b/src/assets/images/img_genre_house.png
diff --git a/src/assets/images/img_genre_kpop.png b/src/assets/images/img_genre_kpop.png
diff --git a/src/assets/images/img_genre_krump.png b/src/assets/images/img_genre_krump.png
diff --git a/src/assets/images/img_genre_locking.png b/src/assets/images/img_genre_locking.png
diff --git a/src/assets/images/img_genre_popping.png b/src/assets/images/img_genre_popping.png
diff --git a/src/assets/images/img_genre_soul.png b/src/assets/images/img_genre_soul.png
diff --git a/src/assets/images/img_genre_vogging.png b/src/assets/images/img_genre_vogging.png
diff --git a/src/assets/images/img_waacking.png b/src/assets/images/img_waacking.png
diff --git a/src/assets/images/index.ts b/src/assets/images/index.ts
@@ -1,15 +1,18 @@
-import BreakingImg from './img_genre_breaking_84.png';
-import ChoreoImg from './img_genre_choreo.png';
-import FemaleHiphop from './img_genre_femalehiphop_84.png';
-import HiphopImg from './img_genre_hiphop_84.png';
-import HouseImg from './img_genre_house.png';
-import KpopImg from './img_genre_kpop.png';
-import KrumpImg from './img_genre_krump.png';
-import LockingImg from './img_genre_locking.png';
-import PoppingImg from './img_genre_popping.png';
-import SoulImg from './img_genre_soul.png';
-import VoggingImg from './img_genre_vogging.png';
-import WaackingImg from './img_waacking.png';
+import ChoreohongImg from './image_chorehong.jpeg';
+import BreakingImg from './image_genre_breaking.png';
+import ChoreoImg from './image_genre_choreo.png';
+import FemaleHiphop from './image_genre_femalehiphop.png';
+import HiphopImg from './image_genre_hiphop.png';
+import HouseImg from './image_genre_house.png';
+import KpopImg from './image_genre_kpop.png';
+import KrumpImg from './image_genre_krump.png';
+import LockingImg from './image_genre_locking.png';
+import PoppingImg from './image_genre_popping.png';
+import SoulImg from './image_genre_soul.png';
+import VoggingImg from './image_genre_voguing.png';
+import WaackingImg from './image_genre_waackgin.png';
+import KkukgirlImg from './image_kkukgirl.jpg';
+import BannerImg from './img_banner_750.png';
 
 export {
   ChoreoImg,
@@ -24,4 +27,7 @@ export {
   SoulImg,
   VoggingImg,
   WaackingImg,
+  ChoreohongImg,
+  KkukgirlImg,
+  BannerImg,
 };
diff --git a/src/assets/svg/IcCheckGray0724.tsx b/src/assets/svg/IcCheckGray0724.tsx
@@ -1,3 +1,3 @@
 import type { SVGProps } from "react";
-const SvgIcCheckGray0724 = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10" {...props}><path stroke="#788397" strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.286} d="M1.048 4.429 5.548 9l7.357-8" /></svg>;
+const SvgIcCheckGray0724 = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 25 24" {...props}><path stroke="#788397" strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.286} d="m6.048 11.429 4.5 4.571 7.357-8" /></svg>;
 export default SvgIcCheckGray0724;
diff --git a/src/assets/svg/IcCheckMain0324.tsx b/src/assets/svg/IcCheckMain0324.tsx
@@ -1,3 +1,3 @@
 import type { SVGProps } from "react";
-const SvgIcCheckMain0324 = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10" {...props}><path stroke="#8349FF" strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.286} d="M1.048 4.429 5.548 9l7.357-8" /></svg>;
+const SvgIcCheckMain0324 = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 25 24" {...props}><path stroke="#8349FF" strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.286} d="m6.048 11.429 4.5 4.571 7.357-8" /></svg>;
 export default SvgIcCheckMain0324;
diff --git a/src/components/ClassCard/index.tsx b/src/components/ClassCard/index.tsx
@@ -20,6 +20,7 @@ const ClassCard = ({
   lessonEndDateTime,
   isReservation = true,
   children,
+  onClick,
 }: ClassCardProps) => {
   // 클래스 상태 계산
   const { status, remainingDays } = getClassStatus(lessonStartDateTime, lessonEndDateTime);
@@ -68,7 +69,7 @@ const ClassCard = ({
   };
 
   return (
-    <div className={styles.cardContainerStyle}>
+    <div className={styles.cardContainerStyle} onClick={onClick}>
       <Flex justify="spaceBetween" align="center">
         <Flex align="center" gap="0.3rem" marginBottom="1.2rem">
           <Flex marginRight="0.5rem">{statusIcon()}</Flex>

diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
@@ -3,6 +3,7 @@ import React, { ComponentPropsWithoutRef } from 'react';
 import { useNavigate } from 'react-router-dom';
 import Head from '@/components/Head';
 import { backIconStyle, closeIconStyle, headerRootStyle, titleStyle } from '@/components/Header/index.css';
+import { ROUTES_CONFIG } from '@/routes/routesConfig';
 import { IcBack, IcClose } from '@/assets/svg';
 
 interface HeaderRootProps extends ComponentPropsWithoutRef<'div'> {
@@ -12,6 +13,7 @@ interface HeaderRootProps extends ComponentPropsWithoutRef<'div'> {
 
 interface BackIconProps {
   onFunnelBackClick?: () => void;
+  onHomeBackClick?: () => void;
 }
 
 interface TitleProps {
@@ -30,15 +32,19 @@ const HeaderRoot = ({ children, isColor = false, className }: HeaderRootProps):
   return <div className={clsx(className, headerRootStyle({ isColor }))}>{children}</div>;
 };
 
-const BackIcon = ({ onFunnelBackClick }: BackIconProps): JSX.Element => {
+const BackIcon = ({ onFunnelBackClick, onHomeBackClick }: BackIconProps): JSX.Element => {
   const navigate = useNavigate();
   const handleBackClick = () => {
-    // Funnel 구조에서는 이전 버튼 누를 시 setStep(-1)을 해준다.
     if (onFunnelBackClick) {
       onFunnelBackClick();
       return;
     }
 
+    if (onHomeBackClick) {
+      navigate(ROUTES_CONFIG.home.path);
+      return;
+    }
+
     navigate(-1);
   };
   return (

diff --git a/src/components/LevelButton/index.css.ts b/src/components/LevelButton/index.css.ts
@@ -43,3 +43,7 @@ export const onboardingLevelButtonStyle = style({
   transition: 'background-color 0.3s ease',
   cursor: 'pointer',
 });
+
+export const headCustomStyle = style({
+  whiteSpace: 'nowrap',
+});
diff --git a/src/components/LevelButton/index.tsx b/src/components/LevelButton/index.tsx
@@ -1,5 +1,5 @@
 import Head from '@/components/Head/index';
-import { levelButtonStyle, onboardingLevelButtonStyle } from '@/components/LevelButton/index.css';
+import { headCustomStyle, levelButtonStyle, onboardingLevelButtonStyle } from '@/components/LevelButton/index.css';
 import Text from '@/components/Text';
 
 interface LevelButtonProps {
@@ -19,7 +19,7 @@ const LevelButton = ({ level, isSelected, onClick }: LevelButtonProps) => {
       onClick={onClick}
       type="button">
       {level.icon}
-      <Head tag="h6" level="h6" color={isSelected ? 'white' : 'gray9'}>
+      <Head className={headCustomStyle} tag="h6" level="h6" color={isSelected ? 'white' : 'gray9'}>
         {level.title}
       </Head>
       <Text tag="b8" color={isSelected ? 'gray2' : 'gray9'}>

diff --git a/src/components/Tab/TabList.tsx b/src/components/Tab/TabList.tsx
@@ -1,3 +1,4 @@
+import clsx from 'clsx';
 import { ReactNode } from 'react';
 import { tabListStyle } from '@/components/Tab/index.css';
 
@@ -6,8 +7,8 @@ interface TabListProps {
   className?: string;
 }
 
-const TabList = ({ children }: TabListProps) => {
-  return <div className={tabListStyle}>{children}</div>;
+const TabList = ({ children, className }: TabListProps) => {
+  return <div className={clsx(tabListStyle, className)}>{children}</div>;
 };
 
 export default TabList;
diff --git a/src/components/Tag/index.css.ts b/src/components/Tag/index.css.ts
@@ -18,6 +18,7 @@ export const tagStyle = recipe({
       },
       deadline: {
         backgroundColor: vars.colors.gray10,
+        color: vars.colors.gray01,
       },
       search: {
         color: vars.colors.main04,
@@ -87,7 +88,7 @@ export const tagStyle = recipe({
       },
       sort: {
         borderRadius: '14px',
-        border: `1px solid ${vars.colors.gray07}`,
+        border: `1px solid ${vars.colors.gray04}`,
         padding: '0.5rem 0.8rem 0.5rem 1.2rem',
         ...vars.fonts.b9,
       },

diff --git a/src/components/Toast/index.tsx b/src/components/Toast/index.tsx
@@ -1,15 +1,20 @@
 import toast from 'react-hot-toast';
 import { vars } from '@/styles/theme.css';
 
-export const notify = () =>
-  toast('해당 기능은 추후 업데이트 될 예정이에요', {
+export const notify = () => {
+  toast.dismiss();
+
+  toast('해당 기능은 추후 업데이트 될 예정이에요 ', {
     duration: 1500,
     position: 'bottom-center',
     style: {
       width: '100%',
 
+      marginBottom: '2.4rem',
+
       backgroundColor: vars.colors.gray10,
       color: vars.colors.white,
       ...vars.fonts.b2,
     },
   });
+};
diff --git a/src/pages/class/components/ClassHeader/index.css.ts b/src/pages/class/components/ClassHeader/index.css.ts
@@ -39,3 +39,11 @@ export const classNameHeaderStyle = style({
   left: '50%',
   transform: 'translateX(-50%)',
 });
+
+export const headerTextStyle = style({
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  width:'25rem',
+  textAlign:'center'
+});
diff --git a/src/pages/class/components/ClassHeader/index.tsx b/src/pages/class/components/ClassHeader/index.tsx
@@ -1,5 +1,5 @@
 import { useNavigate } from 'react-router-dom';
-import { backIconStyle, classNameHeaderStyle } from '@/pages/class/components/ClassHeader/index.css';
+import { backIconStyle, classNameHeaderStyle,headerTextStyle } from '@/pages/class/components/ClassHeader/index.css';
 import { containerStyle } from '@/pages/home/components/HomeHeader/index.css';
 import Flex from '@/components/Flex';
 import Head from '@/components/Head';
@@ -21,7 +21,7 @@ const ClassHeader = ({ isVisible, lessonName }: ClassHeaderProps) => {
 
       <Flex align="center" justify="center" className={classNameHeaderStyle}>
         {isVisible && (
-          <Head level="h5" tag="h6">
+          <Head level="h5" tag="h6" className={headerTextStyle}>
             {lessonName}
           </Head>
         )}

diff --git a/src/pages/class/components/ClassInfoWrapper/index.tsx b/src/pages/class/components/ClassInfoWrapper/index.tsx
@@ -10,7 +10,6 @@ import Flex from '@/components/Flex';
 import Head from '@/components/Head';
 import Tag from '@/components/Tag';
 import Text from '@/components/Text';
-import { calculateDday } from '@/utils/dateCalculate';
 import { ROUTES_CONFIG } from '@/routes/routesConfig';
 import { genreMapping } from '@/constants/index';
 import { IcThunderMain0424 } from '@/assets/svg';
@@ -27,15 +26,17 @@ const ClassInfoWrapper = ({ lessonData }: { lessonData: LessonDetailApiResponse
     price,
     maxReservationCount,
     reservationCount,
-    status,
+    remainingDays,
   } = lessonData;
   const translatedGenre = genreMapping[genre] || genre;
 
-  // 각 회차에 대해 D-Day 계산
-  const dDay = status === 'EXPIRED' || status === 'OVER_BOOKED' ? '마감' : calculateDday(lessonRounds[0].startDateTime);
-
-  // 총 가격 계산
-  const totalPrice = lessonRounds.length * price;
+  // D-DAY remaingDays로 통일
+  const dDay =
+  remainingDays > 0
+    ? `D-${remainingDays}`
+    : remainingDays === 0
+    ? 'D-DAY'
+    : '마감';
 
   // 남은 예약 가능 인원 계산
   const remainingSeats = maxReservationCount - reservationCount;
@@ -84,7 +85,7 @@ const ClassInfoWrapper = ({ lessonData }: { lessonData: LessonDetailApiResponse
         </Head>
         <Flex align="center" gap="0.2rem">
           <Head level="h5" tag="h2">
-            {totalPrice.toLocaleString()}
+            {price.toLocaleString()}
           </Head>
           <Head level="h5" tag="h2">
             원

diff --git a/src/pages/class/components/TabWrapper/TabPeriod/index.tsx b/src/pages/class/components/TabWrapper/TabPeriod/index.tsx
@@ -24,14 +24,14 @@ const TabPeriod = ({ lessonData }: { lessonData: LessonDetailApiResponse }) => {
                     {id + 1}회차
                   </Text>
                 </div>
-                <div>
+                <Flex gap="0.4rem" direction="column">
                   <Text tag="b4" color="black">
                     {formatDate(startDateTime)}
                   </Text>
                   <Text tag="b7" color="gray7">
                     {startTime} - {formattedEndTime} ({durationString})
                   </Text>
-                </div>
+                </Flex>
               </Flex>
             </div>
           </Card>

diff --git a/src/pages/dancer/components/DancerInfo/index.tsx b/src/pages/dancer/components/DancerInfo/index.tsx
@@ -22,8 +22,18 @@ const DancerInfo = ({ dancerData }: { dancerData: DancerDetailApiResponse }) =>
 
   const { instagram, youtube, detail, nickname, lessons } = dancerData;
 
-  const instagramHandle = instagram?.split('/').filter(Boolean).pop();
-  const youtubeHandle = youtube?.split('/').filter(Boolean).pop();
+  // 쿼리 파라미터를 제거하고 사용자 이름만 추출하는 함수
+  const extractUsername = (url: string | undefined) => {
+    if (!url) return '';
+
+    // 쿼리 파라미터를 제거
+    const cleanedUrl = url.split('?')[0];
+
+    // 마지막 '/' 이후의 부분이 사용자 이름
+    return cleanedUrl.split('/').filter(Boolean).pop() || '';
+  };
+  const instagramHandle = extractUsername(instagram);
+  const youtubeHandle = extractUsername(youtube);
 
   const navigate = useNavigate();