✨ 하위 항목의 달성률을 표시하기 위한 progress-bar 추가

- 하위 항목 completed 비율을 구해서 width 값으로 설정.
padosum · Jan 9, 2023 · babd6d3 · babd6d3
1 parent 1cede5b
commit babd6d3
Show file tree

Hide file tree

Showing 2 changed files with 87 additions and 9 deletions.
diff --git a/src/client/components/achievements/Card.js b/src/client/components/achievements/Card.js
@@ -20,16 +20,34 @@ export default class AchievementsCard {
 
   renderSubAchievements() {
     return this.state.subAchievements
-      .map(({ title, description, completed, completedDate, isFailure }) => {
+      .map(({ title, description, completed, completedDate, completedYear, isFailure }) => {
         const icon = this.renderIcon({ isFailure, completed });
+        const completedDateFormat = completedDate ? completedDate : completedYear ? completedYear : '';
         return `<div class="sub-achievement-title">
           ${icon} ${title}</span>
         </div>
-        <div class="sub-achievement-completed">${completed ? completedDate : ''}</div>
+        <div class="sub-achievement-completed">${completedDateFormat}</div>
         <div class="sub-achievement-description">${description}</div>`;
       })
       .join('');
   }
+
+  renderSubAchievementsReview() {
+    return this.state.subAchievements
+      .filter(item => item.review)
+      .map(({ title, review, completed, completedDate, completedYear, isFailure }) => {
+        const icon = this.renderIcon({ isFailure, completed });
+        const completedDateFormat = completedDate ? completedDate : completedYear ? completedYear : '';
+
+        return `<div class="sub-achievement-title">
+          ${icon} ${title}</span>
+        </div>
+        <div class="sub-achievement-completed">${completedDateFormat}</div>
+        <div class="sub-achievement-description">${review}</div>`;
+      })
+      .join('');
+  }
+
   render() {
     const {
       id,
@@ -39,21 +57,57 @@ export default class AchievementsCard {
       description,
       completed,
       completedDate,
+      completedYear,
       review,
       images,
       isFailure,
       subAchievements,
     } = this.state;
 
     const icon = this.renderIcon({ isFailure, completed });
+    const completedDateFormat = completedDate ? completedDate : completedYear ? completedYear : '';
+    const subAchievementRate = (subAchievements.filter(item => item.completed).length / subAchievements.length) * 100;
+    const hasSubReview = subAchievements.some(item => item.review);
+    const front = `<div class="front">
+                    <dl>
+                      <dt class="achievement-title">${icon} ${title}</dt>
+                      <dd class="achievement-description">${description} 
+                        ${
+                          completedDateFormat &&
+                          `<span class="achievement-completed-date">${completedDateFormat}</span>`
+                        }
+                      </dd>
+                    </dl>
+                    ${
+                      subAchievements.length > 0
+                        ? `<div class="sub-achievements-list">
+                            <div class="progress-bar">
+                              <span class="box-progress" style="width: ${subAchievementRate}%"></span>
+                            </div>${this.renderSubAchievements()}
+                          </div>`
+                        : ''
+                    }
+                  </div>`;
+
+    const back = `<div class="back">
+                    <dl>
+                      <dt class="achievement-title">${title}</dt>
+                      <dd class="achievement-description">${review ? review : ''}
+                       ${
+                         completedDateFormat && `<span class="achievement-completed-date">${completedDateFormat}</span>`
+                       }</dd></dd>
+                      ${
+                        hasSubReview
+                          ? `<div class="sub-achievements-list">${this.renderSubAchievementsReview()}</div>`
+                          : ''
+                      }
+                    </dl>
+                  </div>`;
+
     this.target.innerHTML = `
-    <div class="front">
-      <dl>
-        <dt class="achievement-title">${icon} ${title}</dt>
-        <dd class="achievement-description">${description}</dd>
-      </dl>
-      ${subAchievements.length > 0 ? `<div class="sub-achievements-list">${this.renderSubAchievements()}</div>` : ''}
-    </div>`;
+    ${front}
+    ${review || hasSubReview ? back : ''}
+    `;
 
     this.container.appendChild(this.target);
   }

diff --git a/src/client/styles/global.css b/src/client/styles/global.css
@@ -595,8 +595,18 @@ h2.category-title {
 }
 
 .achievement-description {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   margin-top: 0.5rem;
   margin-left: 1rem;
+  word-break: keep-all;
+}
+
+.achievement-completed-date {
+  flex-basis: 10rem;
+  margin-right: 2rem;
+  text-align: right;
 }
 
 .achievement-title {
@@ -648,6 +658,20 @@ h2.category-title {
   border-top: 1px solid var(--color-gray-2);
 }
 
+.progress-bar {
+  display: flex;
+  grid-column: span 2;
+  height: 4px;
+  overflow: hidden;
+  background-color: var(--color-gray-1);
+}
+
+.box-progress {
+  display: block;
+  height: 4px;
+  background-color: var(--primary-color);
+}
+
 .sub-achievement-description {
   grid-column: span 2;
   padding-left: 1.25rem;