Merge branch 'develop' into fix/#304/style

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>

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/components/ClassCard/index.css.ts

@@ -14,8 +14,26 @@ export const cardContainerStyle = style({
 export const cardImageStyle = style({
   width: '8.4rem',
   height: '8.4rem',
+  flexShrink: 0,
 
   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/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/LessonItem/index.css.ts

@@ -15,6 +15,8 @@ export const titleStyle = style({
 
   whiteSpace: 'normal',
   overflow: 'hidden',
+  wordBreak: 'break-all',
+
 });
 
 export const teacherImageStyle = style({

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

@@ -24,7 +24,6 @@ const TopSection = ({ userData, onClose, isInstructor }: TopSectionProps) => {
 
   const isMyLessonsZero = () => {
     if (userData.reservationCount > 0) return handleNavigate(ROUTES_CONFIG.mypageReservation.path);
-
     return;
   };
 
@@ -84,7 +83,7 @@ const TopSection = ({ userData, onClose, isInstructor }: TopSectionProps) => {
         </Flex>
       </Flex>
 
-      <Flex paddingTop="2.4rem" paddingLeft="3.2rem" paddingRight="3.2rem" gap="2.1rem" onClick={notify}>
+      <Flex paddingTop="2.4rem" paddingLeft="3.2rem" paddingRight="3.2rem" gap="2.1rem">
         <Flex align="center" onClick={isMyLessonsZero}>
           <Flex direction="column" align="center" gap="0.5rem">
             <Head
@@ -101,7 +100,7 @@ const TopSection = ({ userData, onClose, isInstructor }: TopSectionProps) => {
 
         <Divider direction="vertical" color="gray2" length={32} thickness={1} />
 
-        <Flex direction="column" align="center" gap="0.5rem" className={styles.disabledStyle}>
+        <Flex direction="column" align="center" gap="0.5rem" className={styles.disabledStyle} onClick={notify}>
           <Head tag="h4" color={getTextColor(userData.favoriteCount)}>
             {userData.favoriteCount}
           </Head>

src/pages/instructorRegister/components/InstructorRegisterFunnel/CareerStep/InputSection/index.tsx

@@ -85,7 +85,7 @@ const InputSection = ({
           {inputItems.map(({ id, value }) => (
             <div key={id} className={inputContainerStyle}>
               <Input
-                // value={value}
+                value={value}
                 placeholder={placeholder}
                 onChange={(e) => {
                   const updatedItems = inputItems.map((item) =>

src/pages/instructorRegister/components/InstructorRegisterFunnel/IntroductionStep/index.tsx

@@ -30,7 +30,7 @@ const IntroductionStep = ({ detail, onInfoChange }: IntroductionStepProps) => {
 
   return (
     <>
-      <Description title="소개글 작성" subTitle="댄서 메인테인 님에 대해 30자 이상 작성해 주세요" />
+      <Description title="소개글 작성" subTitle="댄서님에 대해 30자 이상 작성해 주세요" />
       <textarea
         ref={textAreaRef}
         onInput={handleInput}

src/pages/instructorRegister/components/InstructorRegisterFunnel/PersonalSNSStep/index.tsx

@@ -12,7 +12,7 @@ interface PersonalSNSStepProps {
   onInfoChange: <K extends keyof InstructorRegisterInfoTypes>(key: K, value: InstructorRegisterInfoTypes[K]) => void;
 }
 
-const PersonalSNSStep = ({ onInfoChange }: PersonalSNSStepProps) => {
+const PersonalSNSStep = ({ onInfoChange, instagram, youtube }: PersonalSNSStepProps) => {
   const handleInstagramChange = (value: string) => {
     onInfoChange(INFO_KEY.INSTAGRAM, value);
   };
@@ -31,15 +31,15 @@ const PersonalSNSStep = ({ onInfoChange }: PersonalSNSStepProps) => {
             <IcInstagram20 width={'2rem'} />
             <Text tag="b6">인스타그램</Text>
           </Flex>
-          <Input placeholder="dashdash.kr" onChange={(e) => handleInstagramChange(e.target.value)} />
+          <Input value={instagram} placeholder="dashdash.kr" onChange={(e) => handleInstagramChange(e.target.value)} />
         </Flex>
 
         <Flex direction="column" gap="1.2rem" width="100%">
           <Flex gap="0.8rem" align="center">
             <IcYoutube20 width={'2rem'} />
             <Text tag="b6">유튜브 채널</Text>
           </Flex>
-          <Input placeholder="dashofficial" onChange={(e) => handleYoutubeChange(e.target.value)} />
+          <Input value={youtube} placeholder="dashofficial" onChange={(e) => handleYoutubeChange(e.target.value)} />
         </Flex>
       </Flex>
     </>

src/pages/mypage/constants/myPageList.ts

@@ -13,5 +13,5 @@ export const LIST_DATA = [
   },
   { label: '자주 묻는 질문', id: 5, inActive: true },
   { label: '고객 센터', id: 6, hasDivider: true, inActive: true },
-  { label: '로그아웃', id: 7, inActive: true },
+  { label: '로그아웃', id: 7 },
 ];

src/pages/mypage/mypageReservation/index.tsx

@@ -13,16 +13,6 @@ const MyPageReservation = () => {
   const navigate = useNavigate();
   const { data: reservationData } = useGetReservations();
 
-
-  const handleDetailClick = (reservationId: number | undefined) => {
-    if (reservationId !== undefined) {
-      const path = ROUTES_CONFIG.mypageReservationDetail.path(reservationId.toString());
-      navigate(path);
-    } else {
-      navigate(ROUTES_CONFIG.error.path);
-    }
-  };
-
   const handleNavigateHome = () => {
     navigate('/');
   };
@@ -54,8 +44,7 @@ const MyPageReservation = () => {
                 lessonStartDateTime={reservation.startDateTime}
                 lessonEndDateTime={reservation.endDateTime}
                 isReservation={true}
-                onClick={() => handleClassCardClick(navigate, reservation.reservationId)} 
-              >
+                onClick={() => handleClassCardClick(navigate, reservation.reservationId)}>
                 <BoxButton onClick={handleCancelClick} variant="temp">
                   취소하기
                 </BoxButton>

src/pages/search/components/Calendar/index.css.ts

@@ -8,6 +8,7 @@ globalStyle('.react-calendar', {
   flexDirection: 'column',
   alignItems: 'center',
   marginBottom: '0.9rem',
+  padding: '0 2rem',
 });
 
 globalStyle('.react-calendar__navigation', {

src/pages/search/components/SearchBar/index.tsx

@@ -16,6 +16,12 @@ const SearchBar = forwardRef<HTMLInputElement, SearchBarProps>(
       handleSearchChange(event.target.value);
     };
 
+    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+      if (event.key === 'Enter') {
+        handleSearchIconClick();
+      }
+    };
+
     return (
       <Flex align="center" width="29.9rem" height="4.4rem" position="relative" margin="0 0 0 1.2rem">
         <IcSearchGray className={searchGrayStyle} width={24} onClick={handleSearchIconClick} />
@@ -25,6 +31,7 @@ const SearchBar = forwardRef<HTMLInputElement, SearchBarProps>(
           value={searchValue}
           placeholder="장르나 댄서 네임을 검색해 보세요"
           onChange={handleInputChange}
+          onKeyDown={handleKeyDown}
         />
         <IcXCircleGray className={xCircleGrayStyle} width={24} onClick={() => handleSearchChange('')} />
       </Flex>