Merge branch 'develop' into feat/#321/redirect-url-fix

README.md

@@ -1,23 +1,42 @@
 # DASH
 
-## 📢 서비스 소개
+## 💃 서비스 소개
 
-### “댄스 클래스와 댄서에 대한 정보를 한눈에 확인하고, 원하는 클래스를 간편하게 신청할 수 있는 서비스.”
+![image](https://github.com/user-attachments/assets/25a0cb52-00f1-4ce9-8564-1070cb191231)
 
-춤을 사랑하는 사람들이 모여 성장할 수 있는 공간을 제공하고, 수강생과 댄서를 연결하는 다리가 되어준다.
 
-<br />
+### 💃 “당신에게 춤을 더 가까이, 세상의 모든 댄서와 클래스를 모은 서비스"
+
+
+> Da/sh’는 서비스의 핵심 키워드인 Dance(춤)와 Share(공유)를 결합한 이름으로,
+> 댄스 클래스와 강사댄서에 대한 정보를 자유롭게 탐색하고 원하는 클래스를 간편하게 신청할 수 있는 플랫폼입니다.
+> 이 서비스는 수강생과 강사를 연결하는 다리 역할을 함과 동시에 세상의 모든 댄서들이 함께 소통하고 성장할 수 있는 공간을 제공합니다.
+
+
+<br/>
+<br/>
+
+### 💃서비스 플로우
+
+![image](https://github.com/user-attachments/assets/2bb85425-a7ca-46c3-b4e7-addb522a2629)
+
+<br/>
+
+#### DASH의 웨비들을 소개합니다!
+
+![Image](https://github.com/user-attachments/assets/c475ac1a-1f4d-4ef8-94ab-fa29307849fe)
+
 
 <br />
 
 ## 🎈 팀원
 
    <div align="center">
      
-| <img src="https://avatars.githubusercontent.com/u/66071954?v=4" width="200" alt="프로필사진"> | <img src="https://avatars.githubusercontent.com/u/94050324?v=4" width="200" alt="프로필사진">  | <img src="https://avatars.githubusercontent.com/u/91944542?v=4" width="200" alt="프로필사진"> |  <img src="https://avatars.githubusercontent.com/u/90364839?v=4" width="200" alt="프로필사진">  |  <img src="https://avatars.githubusercontent.com/u/117571282?s=96&v=4" width="200" alt="프로필사진">  |
+| <img src="https://github.com/user-attachments/assets/f315094a-0de0-4eca-bc4c-7e48cb2a7b6f" width="150" alt="프로필사진"> | <img src="https://github.com/user-attachments/assets/067c37c2-f544-4238-8358-eb5f051fef4a" width="150" alt="프로필사진">  | <img src="https://github.com/user-attachments/assets/a97c1d70-6107-44c3-8de8-d0fa708090ca" width="150" alt="프로필사진"> |  <img src="https://github.com/user-attachments/assets/713158dd-64a7-40c4-b177-ed85896a6cf1" width="150" alt="프로필사진">  |  <img src="https://github.com/user-attachments/assets/372ad506-b2d2-41fc-ae4e-adbb2466f292" width="150" alt="프로필사진">  |
 | :-------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------:
-|                            <div align = "center"><b>김건휘</b></div>                            |                            <div align = "center"><b>김규홍</b></div>                            |                            <div align = "center"><b>박희선</b></div>                            |                             <div align = "center"><b>한수정</b></div>                            |                             <div align = "center"><b>이진혁</b></div>
-|                            [@KIMGEONHWI](https://github.com/KIMGEONHWI)                            |                [@rtttr1](https://github.com/rtttr1)                                 |                       [@heesunee](https://github.com/heesunee)                        |                        [@hansoojeongsj](https://github.com/hansoojeongsj)   |                        [@constantly-dev](https://github.com/constantly-dev)   |
+|                            <div align = "center"><b>이진혁</b></div>                            |                            <div align = "center"><b>김규홍</b></div>                            |                            <div align = "center"><b>박희선</b></div>                            |                             <div align = "center"><b>한수정</b></div>                            |                             <div align = "center"><b>김건휘</b></div>
+|                           [@constantly-dev](https://github.com/constantly-dev)                            |                [@rtttr1](https://github.com/rtttr1)                                 |                       [@heesunee](https://github.com/heesunee)                        |                        [@hansoojeongsj](https://github.com/hansoojeongsj)   |                        [@KIMGEONHWI](https://github.com/KIMGEONHWI)   |
 
 </div>
 
@@ -119,7 +138,9 @@
 
 ## 📢 네이밍 컨벤션
 
-### 1. 기본 (Default)
+ <details> 
+	 
+ ### 1. 기본 (Default)
 
 1. 컴포넌트 / class `PascalCase`
 2. 폴더명 `carmelCase`
@@ -220,8 +241,13 @@
 <br/>
 <br/>
 
+ </details>
+
+
 ## 📢 코딩 (개발) 컨벤션
 
+ <details> 
+
 ### 변수
 
 - var 금지.
@@ -296,6 +322,8 @@ const InfoText = () => {
   ```
 - 불필요한 반복문 지양 : filter, array.include() 등
   - 조건부로 데이터를 확인하거나 뽑아야하는 로직을 사용할 때에는 `Map` 이나 `Object`처럼 `key`값을 이용해서 원소를 찾는 자료형을 이용하는것을 고려해보거나, 배열을 순회하지 않고 index로 바로 접근할 수 있는 방법이 없는지 고려.
+ 
+
 
 ### Style → X
 
@@ -308,3 +336,5 @@ const InfoText = () => {
 - button 태그에 **`type`**은 명시적으로 작성
 - 비교 연산자는 **`===`**와 **`!==`**만을 사용
 - axios 안에서 **`then/catch`** 대신 **`async/await`** 지향
+
+    </details>

index.html

@@ -1,10 +1,15 @@
 <!doctype html>
-<html lang="en">
+<html lang="ko">
   <head>
     <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, user-scalable=no" />
+    <meta property="og:title" content="dash" />
+    <meta property="og:description" content="당신에게 춤을 더 가까이, 꿈꾸던 댄스 클래스를 만나다" />
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://www.da-sh.kr/" />
+    <meta property="og:image" content="public/dash-Thumbnail.png" />
     <title>da-sh.kr</title>
   </head>
   <body>

package.json

@@ -26,6 +26,7 @@
     "react": "^18.3.1",
     "react-calendar": "^5.1.0",
     "react-dom": "^18.3.1",
+    "react-error-boundary": "^5.0.0",
     "react-hot-toast": "^2.5.1",
     "react-router-dom": "^7.1.1",
     "swiper": "^11.2.1",

src/App.tsx

@@ -1,9 +1,12 @@
 import { QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
-import { useEffect } from 'react';
+import { Suspense, useEffect } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
 import { Toaster } from 'react-hot-toast';
 import { RouterProvider } from 'react-router-dom';
+import Error from '@/pages/error';
 import { router } from '@/routes/router.tsx';
+import Loading from './pages/loading';
 import queryClient from './queryClient';
 import './styles/index.css';
 
@@ -31,7 +34,11 @@ const App = () => {
   return (
     <QueryClientProvider client={queryClient}>
       <ReactQueryDevtools initialIsOpen={false} />
-      <RouterProvider router={router} />
+      <ErrorBoundary FallbackComponent={Error}>
+        <Suspense fallback={<Loading />}>
+          <RouterProvider router={router} />
+        </Suspense>
+      </ErrorBoundary>
       <Toaster />
     </QueryClientProvider>
   );

src/apis/auth/quries/index.ts

@@ -15,15 +15,11 @@ export const useLoginMutation = () => {
     onSuccess: ({ data: { accessToken, refreshToken, isOnboarded } }) => {
       instance.defaults.headers.Authorization = `Bearer ${accessToken}`;
       if (!isOnboarded) {
+        clearStorage();
         navigate(ROUTES_CONFIG.onboarding.path, { state: { accessToken, refreshToken } });
         return;
       }
 
-      if (!isOnboarded) {
-        navigate(ROUTES_CONFIG.onboarding.path);
-        return;
-      }
-
       navigate(ROUTES_CONFIG.home.path);
       setStorage(accessToken, refreshToken);
     },

src/assets/gif/index.ts

@@ -2,6 +2,7 @@ import ClearGif from './clear.gif';
 import EmptyGif from './empty.gif';
 import HomeBlack from './home_black.gif';
 import HomeWhite from './home_white.gif';
+import LoadingGif from './loading.gif';
 import LoginGif from './login.gif';
 
-export { ClearGif, EmptyGif, LoginGif, HomeBlack, HomeWhite };
+export { ClearGif, EmptyGif, LoginGif, HomeBlack, HomeWhite, LoadingGif };

src/components/ClassCard/index.css.ts

@@ -14,8 +14,28 @@ export const cardContainerStyle = style({
 export const cardImageStyle = style({
   width: '8.4rem',
   height: '8.4rem',
+  flexShrink: 0,
+
+  objectFit: 'cover',
 
   borderRadius: 3.4,
 
   backgroundColor: vars.colors.gray04,
 });
+
+export const cardContentStyle = style({
+  flex: 1,
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '0.8rem',
+  overflow: 'hidden',
+
+  width: '100%',
+});
+
+export const lessonNameStyle = style({
+  width: '100%',
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+});

src/components/ClassCard/index.tsx

@@ -44,6 +44,8 @@ const ClassCard = ({
           return '모집중';
         case 'completed':
           return '모집완료';
+        case 'ongoing':
+          return '모집완료';
         default:
           return '';
       }
@@ -96,7 +98,7 @@ const ClassCard = ({
 
       <Flex gap="1.2rem" marginBottom="1.6rem">
         <img src={lessonImageUrl} className={styles.cardImageStyle} alt={`${lessonName} 이미지`} />
-        <Flex direction="column" gap="0.8rem">
+        <Flex direction="column" gap="0.8rem" className={styles.cardContentStyle}>
           <Flex gap="0.3rem">
             <Tag type="genre" size="small">
               {lessonGenre && genreMapping[lessonGenre]}
@@ -105,7 +107,7 @@ const ClassCard = ({
               {lessonLevel && levelMapping[lessonLevel]}
             </Tag>
           </Flex>
-          <Head level="h2" tag="h6">
+          <Head level="h2" tag="h6" className={styles.lessonNameStyle}>
             {lessonName}
           </Head>
           <Flex direction="column" gap="0.4rem">
@@ -126,8 +128,14 @@ const ClassCard = ({
                 장소
               </Text>
               <Text tag="c1" color="gray9">
-                {lessonLocation}&nbsp;
-                {lessonDetailedAddress}
+                {lessonLocation || lessonDetailedAddress ? (
+                  <>
+                    {lessonLocation}&nbsp;
+                    {lessonDetailedAddress}
+                  </>
+                ) : (
+                  '미정'
+                )}
               </Text>
             </Flex>
           </Flex>

src/pages/error/index.tsx

@@ -12,6 +12,7 @@ const Error = () => {
 
   const handleHomeNavigation = () => {
     navigate(ROUTES_CONFIG.home.path);
+    window.location.reload();
   };
 
   return (

src/pages/home/components/BottomSection/index.tsx

@@ -31,28 +31,6 @@ const BottomSection = ({ isInstructor }: { isInstructor: boolean }) => {
     }
   };
 
-  // 리스트 아이템 렌더링
-  const renderListItem = (item: (typeof LIST_DATA)[number]) => {
-    const isDisabled = !!item.isInstructorRequired && !isInstructor;
-    const ArrowIcon = isDisabled ? IcArrowRightSmallGray0432 : IcArrowRightSmallGray0732;
-
-    return (
-      <React.Fragment key={item.id}>
-        <li
-          className={`${styles.listStyle} ${isDisabled ? styles.disabledStyle : ''}`}
-          onClick={() => handleItemClick(item, isDisabled)}>
-          <p>{item.label}</p>
-          <ArrowIcon width={32} height={32} />
-        </li>
-        {item.hasDivider && (
-          <div className={styles.dividerStyle}>
-            <Divider color="gray1" thickness={1} />
-          </div>
-        )}
-      </React.Fragment>
-    );
-  };
-
   return (
     <Flex>
       <ul className={styles.ulStyle}>
@@ -61,18 +39,11 @@ const BottomSection = ({ isInstructor }: { isInstructor: boolean }) => {
             (item.isInstructorRequired && !isInstructor) || (item.label === '강사 등록' && isInstructor);
           const ArrowIcon = isDisabled ? IcArrowRightSmallGray0432 : IcArrowRightSmallGray0732;
 
-          const handleClick = () => {
-            if (isDisabled) return;
-            if (item.label === '로그아웃') {
-              handleLogout();
-            } else if (item.path) {
-              navigate(item.path);
-            }
-          };
-
           return (
             <React.Fragment key={item.id}>
-              <li className={`${styles.listStyle} ${isDisabled ? styles.disabledStyle : ''}`} onClick={handleClick}>
+              <li
+                className={`${styles.listStyle} ${isDisabled ? styles.disabledStyle : ''}`}
+                onClick={() => handleItemClick(item, isDisabled)}>
                 <p>{item.label}</p>
                 <ArrowIcon width={32} height={32} />
               </li>

src/pages/home/components/HomeCarousel/index.tsx

@@ -9,12 +9,14 @@ const ADVERTISEMENTS = [
     imageUrl: KkukgirlImg,
     description: `5주 집중 커리큘럼, 스걸파 출연 댄서의 `,
     description2: '피메일 힙합 기본기 튼튼하게 다지기',
+    id: 25,
   },
-  { imageUrl: ChoreohongImg, description: '코레홍과 함께하는', description2: 'NMIXX-DASH 코레오그래피' },
+  { imageUrl: ChoreohongImg, description: '코레홍과 함께하는', description2: 'NMIXX-DASH 코레오그래피', id: 24 },
   {
     imageUrl: BannerImg,
     description: '알고 싶던 댄서나 관심있는 클래스를 ',
     description2: '한 눈에 모아볼 수 있어요!',
+    id: 0,
   },
 ];
 const HomeCarousel = () => {
@@ -32,7 +34,12 @@ const HomeCarousel = () => {
       {ADVERTISEMENTS.map((data, index) => {
         return (
           <SwiperSlide key={`${index}-${data.description}`}>
-            <SliderItem imageUrl={data.imageUrl} description={data.description} description2={data.description2} />
+            <SliderItem
+              imageUrl={data.imageUrl}
+              description={data.description}
+              description2={data.description2}
+              id={data.id}
+            />
           </SwiperSlide>
         );
       })}

src/pages/home/components/LessonItem/index.css.ts

@@ -10,10 +10,13 @@ export const classImageStyle = style({
 });
 
 export const titleStyle = style({
-  width: '16.4rem',
+  minWidth: '16.4rem',
   maxHeight: '4rem',
 
   whiteSpace: 'normal',
+  overflow: 'hidden',
+  wordBreak: 'break-all',
+
 });
 
 export const teacherImageStyle = style({