feature: 트랙 초대코드 입력 폼, 트랙 생성 폼 추가

frontend/src/apis/user.js

@@ -6,7 +6,6 @@ export const Logout = () => {
     alert('로그아웃');
     sessionStorage.removeItem('userInfo');
     UserService.logout();
-    window.location.replace('/');
 };
 
 // 로그인

frontend/src/components/calendar/calendar.js

@@ -57,8 +57,7 @@ function setCalendarEvent() {
         document.querySelector('.calendar-container').innerHTML = makeCalendar(
             new Date(currentDate.setYear(this.value)),
         );
-        document.querySelector('.year-wrapper').innerHTML =
-            yearOption(currentDate);
+        calendarYear.innerHTML = yearOption(currentDate);
     };
     const prevButton = document
         .querySelector('.prevDay')
@@ -68,7 +67,9 @@ function setCalendarEvent() {
                     new Date(currentDate.setMonth(currentDate.getMonth() - 1)),
                 );
             if (parseInt(calendarMonth.innerText) === 1) {
-                calendarYear.innerText = parseInt(calendarYear.innerText) - 1;
+                calendarYear.innerHTML = yearOption(
+                    currentDate.setYear(currentDate.getFullYear()),
+                );
                 calendarMonth.innerText = 12;
             } else {
                 calendarMonth.innerText = parseInt(calendarMonth.innerText) - 1;
@@ -82,7 +83,9 @@ function setCalendarEvent() {
                     new Date(currentDate.setMonth(currentDate.getMonth() + 1)),
                 );
             if (parseInt(calendarMonth.innerText) === 12) {
-                calendarYear.innerText = parseInt(calendarYear.innerText) + 1;
+                calendarYear.innerHTML = yearOption(
+                    currentDate.setYear(currentDate.getFullYear()),
+                );
                 calendarMonth.innerText = 1;
             } else {
                 calendarMonth.innerText = parseInt(calendarMonth.innerText) + 1;

frontend/src/components/rental/placeCard.js

@@ -1,11 +1,11 @@
 const placeCard = (id, name, img) => {
     return `
-    <a class="place-wrapper" href="rental/${id}">
+    <figure class="place-wrapper">
         <img class="place-image" src=${img}></img>
         <figcaption class="place-name">
             ${name}
         </figcaption>
-    </a>
+    </figure>
     `;
 };
 

frontend/src/components/rental/placeInfo.js

@@ -1,7 +1,7 @@
 export default [
     {
         id: 1,
-        name: '교실',
+        name: '회의실',
         img: '/src/assets/room.svg',
         alt: '교실이미지',
     },

frontend/src/components/track/trackCard.js

@@ -0,0 +1,60 @@
+import { $ } from '../../utils/selector';
+
+const trackCard = (img, tname) => {
+    return `
+    <figure class="track-wrapper">
+        <img class="track-image" src=${img}></img>
+        <figcaption class="track-name">${tname}</figcaption>
+    </figure>`;
+};
+
+function setTrackEvent() {
+    const trackMake = $('#track-make');
+    const trackMakeInput = trackMake.querySelector('.track-input');
+    const trackMakeBtn = trackMake.querySelector('.track-button');
+    const trackJoin = $('#track-join');
+    const trackJoinInput = trackJoin.querySelector('.track-input');
+    const trackJoinBtn = trackJoin.querySelector('.track-button');
+
+    trackMakeInput.addEventListener('input', (e) => {
+        trackMakeBtn.disabled = e.target.value.length <= 0;
+    });
+    trackMake.addEventListener('click', (e) => {
+        const makeBtn = e.target.closest('.track-button');
+        if (makeBtn) {
+            trackMake.insertAdjacentHTML(
+                'beforebegin',
+                trackCard('/src/assets/soundless.svg', trackMakeInput.value),
+            ); //이름이 같은 트랙이 존재하지 않으면 정상 모달 메세지와 함께 트랙 추가 카드 앞에 새로운 트랙 버튼이 생성됨. 그렇지 않으면 오류 모달 메세지 출력.
+            trackMake.classList.toggle('track-rotate');
+            trackMakeInput.value = '';
+            trackMakeBtn.disabled = 'true';
+        } else {
+            if (trackMake.classList.contains('track-rotate')) return;
+            trackMake.classList.toggle('track-rotate');
+            trackMakeInput.focus();
+        }
+    });
+
+    trackJoinInput.addEventListener('input', (e) => {
+        trackJoinBtn.disabled = e.target.value.length <= 0;
+    });
+    trackJoin.addEventListener('click', (e) => {
+        const makeBtn = e.target.closest('.track-button');
+        if (makeBtn) {
+            trackJoin.insertAdjacentHTML(
+                'beforebegin',
+                trackCard('/src/assets/soundless.svg', trackJoinInput.value),
+            ); //초대 코드가 유효할 경우, 정상 모달 메세지와 함께 트랙 추가 카드 앞에 새로운 트랙 버튼이 생성됨. 그렇지 않으면 오류 모달 메세지 출력.
+            trackJoin.classList.toggle('track-rotate');
+            trackJoinInput.value = '';
+            trackJoinBtn.disabled = 'true';
+        } else {
+            if (trackJoin.classList.contains('track-rotate')) return;
+            trackJoin.classList.toggle('track-rotate');
+            trackJoinInput.focus();
+        }
+    });
+}
+
+export { trackCard, setTrackEvent };

frontend/src/components/track/trackInfo.js

@@ -0,0 +1,14 @@
+export default [
+    {
+        id: 1,
+        name: '현대자동차그룹 소프티어 부트캠프 2023',
+        img: '/src/assets/room.svg',
+        alt: '소프티어',
+    },
+    {
+        id: 2,
+        name: '코드스쿼드 마스터즈 코스',
+        img: '/src/assets/chair.svg',
+        alt: '마스터즈',
+    },
+];

frontend/src/main.js

@@ -1,5 +1,6 @@
 import setHomeEvent from './scripts/home.js';
-import setMainEvent from './scripts/main.js';
+import { setMainEvent } from './scripts/main.js';
+import { setTrackEvent } from './components/track/trackCard.js';
 import { setCalendarEvent } from './components/calendar/calendar.js';
 
 const eventdelegator = (root) => {
@@ -12,9 +13,10 @@ const eventdelegator = (root) => {
             setMainEvent();
             break;
         case 'track':
+            setTrackEvent();
             break;
         case 'attend':
-            setCalendarEvent
+            setCalendarEvent();
             break;
     }
 };

frontend/src/pages/trackPage.js

@@ -1,9 +1,11 @@
 import AbstractView from './pageTemplate.js';
 import { pageTitleTamplate } from '../components/pageTitle.js';
+import trackInfo from '../components/track/trackInfo.js';
+import { trackCard } from '../components/track/trackCard.js';
 
 export default class trackPage extends AbstractView {
     async getHtml() {
-        return `
+        return /*html */ `
         <div class="container Start">
             <div class="main-wrapper">
                 <div class="title-wrapper Mini"><h1>DOROTHY</h1></div>
@@ -14,15 +16,33 @@ export default class trackPage extends AbstractView {
                 </div>
                 <section class="big-content-container">
                     <section class="track-container">
-                        <figure class="track-wrapper">
-                            <img class="track-image" src="/src/assets/chair.svg"></img>
-                            <figcaption class="track-name">현대자동차그룹 소프티어 부트캠프 2023</figcaption>
+                        ${trackInfo
+                            .map((track) => {
+                                return trackCard(track.img, track.name);
+                            })
+                            .join('')}
+                        <figure class="track-add" id="track-make">
+                            <div class="track-front">
+                                <i class="fa-solid fa-circle-plus track-add-icon"></i>
+                                <figcaption class="track-name">트랙 추가하기</figcaption>
+                            </div>
+                            <div class="track-back">
+                                <p class="track-body">새로운 트랙의 제목을 입력해주세요</p>
+                                <input class="track-input" id="track-title" type="text" placeholder="새로운 트랙" />
+                                <button class="track-button" disabled="true">생성</button>
+                            </div>
                         </figure>
-                        <figure class="track-wrapper">
-                            <img class="track-image" src="/src/assets/chair.svg"></img>
-                            <figcaption class="track-name">현대자동차그룹 소프티어 부트캠프 2023</figcaption>
+                        <figure class="track-add" id="track-join">
+                            <div class="track-front">
+                                <i class="fa-solid fa-person-circle-plus"></i>
+                                <figcaption class="track-name">트랙 참가하기</figcaption>
+                            </div>
+                            <div class="track-back">
+                                <p class="track-body">참가할 트랙의 코드를 입력해주세요</p>
+                                <input class="track-input" id="track-code" type="text" placeholder="초대 코드" />
+                                <button class="track-button" disabled="true">참가</button>
+                            </div>
                         </figure>
-                        
                     </section>
                 </section>
             </div>

frontend/src/styles/rental.scss

@@ -32,8 +32,6 @@ body {
     display: flex;
     flex-direction: column;
     justify-content: center;
-    text-decoration: none;
-    color: #000;
     transition: 0.5s;
     cursor: pointer;
 }

frontend/src/styles/track.scss

@@ -33,7 +33,7 @@ $breakpoint-mobile: 640px;
     cursor: pointer;
 }
 .track-wrapper:hover {
-    transform: scale(111%);
+    transform: scale(105%);
 }
 .track-image {
     width: 100px;
@@ -44,7 +44,75 @@ $breakpoint-mobile: 640px;
     margin: 20px auto;
     display: block;
     width: 180px;
+    text-align: center;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }
+
+.track-add {
+    background-color: $gray-color;
+    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.5);
+    color: #000;
+    border-radius: 20px;
+    width: 200px;
+    height: 200px;
+    margin: 5px;
+    padding: 5px;
+    display: flex;
+    box-sizing: border-box;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    transition: 0.5s;
+    cursor: pointer;
+}
+.track-add i {
+    font-size: 80px;
+    margin: 10px auto;
+}
+.track-rotate {
+    width: 300px;
+    cursor: default;
+    transform: rotateY(180deg);
+}
+.track-front {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+.track-back {
+    transform: rotateY(180deg);
+    display: none;
+}
+.track-body {
+    font-weight: 600;
+    font-size: 20px;
+}
+.track-input {
+    width: 280px;
+    height: 40px;
+    margin: 10px auto;
+}
+.track-button {
+    width: 100px;
+    height: 36px;
+    margin: 0 auto;
+    border-radius: 18px;
+    background-color: $blue-color;
+    color: #fff;
+    box-shadow: inset 0 -1px 1px rgba(0, 0, 0, 0.5);
+}
+.track-button:disabled {
+    background-color: $gray-color;
+    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 1);
+    cursor: default;
+}
+
+.track-rotate .track-front {
+    display: none;
+}
+.track-rotate .track-back {
+    display: flex;
+    flex-direction: column;
+}