feat: ✨ 구글 드라이버 버튼 숨김 기능

사용자에게 불필요한 기능을 노출하지 않기
YeonSeong-Lee · Nov 26, 2024 · f3da54b · f3da54b
1 parent 84a397f
commit f3da54b
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 5 deletions.
diff --git a/src/components/work-shift/WorkShiftController.js b/src/components/work-shift/WorkShiftController.js
@@ -62,8 +62,11 @@ export class WorkShiftController {
         const existingContainer = this.component.shadowRoot.querySelector('.work-shift');
         if (existingContainer) {
             existingContainer.insertAdjacentHTML('beforeend', googleDriveButton);
-        } else {
-            this.component.shadowRoot.appendChild(googleDriveButton);
+            const driveButton = this.component.shadowRoot.querySelector('#download-from-drive');
+            if (driveButton) {
+                driveButton.style.display = 
+                    localStorage.getItem('SHOW_DRIVE_BUTTON') !== 'false' ? 'block' : 'none';
+            }
         }
     }
 
@@ -139,6 +142,13 @@ export class WorkShiftController {
                 localStorage.setItem('CURRENT_TEAM_FILTER', this.service.config.currentTabName);
                 await this.handleTeamFilterChange();
             }
+            else if (event.target.id === 'drive-button-toggle') {
+                localStorage.setItem('SHOW_DRIVE_BUTTON', event.target.checked);
+                const driveButton = this.component.shadowRoot.querySelector('#download-from-drive');
+                if (driveButton) {
+                    driveButton.style.display = event.target.checked ? 'block' : 'none';
+                }
+            }
         });
 
         // Mark that event listeners have been initialized

diff --git a/src/components/work-shift/WorkShiftView.js b/src/components/work-shift/WorkShiftView.js
@@ -173,6 +173,15 @@ export class WorkShiftView {
                                 <button id="reset-team-config" class="settings-item-action-button">초기화</button>
                                 <button id="save-team-config" class="settings-item-action-button">저장</button>
                             </div>
+                        <br/>
+                        <div class="settings-item">
+                            <span>구글 드라이브 다운로드 보여주기</span>
+                            <label class="switch">
+                                <input type="checkbox" id="drive-button-toggle" 
+                                    ${localStorage.getItem('SHOW_DRIVE_BUTTON') !== 'false' ? 'checked' : ''}>
+                                <span class="slider round"></span>
+                            </label>
+                        </div>
                     </div>
                 </div>
             </div>

diff --git a/src/components/work-shift/styles/work-shift.css b/src/components/work-shift/styles/work-shift.css
@@ -387,13 +387,37 @@ tr td {
     flex: 1;
 }
 
+.switch {
+    position: relative;
+    display: inline-block;
+    width: 60px;
+    height: 34px;
+}
+
+.switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+.slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    transition: .4s;
+}
+
 .slider:before {
     position: absolute;
     content: "";
-    height: 25px;
-    width: 25px;
+    height: 26px;
+    width: 26px;
     left: 4px;
-    top: 5%;
+    top: 1px;
     background-color: white;
     transition: .4s;
 }