[view] Theme Selector 테마 전역 저장 및 코드 리팩토링

[taboowiths]

Related issue

752

Result

https://github.com/user-attachments/assets/02f269d7-debb-4be9-8a18-c23ef81604eb

Work list

1. Theme Selector 테마 전역 저장

ThemeSelector를 이용해 선택한 테마를 재접속 시 유지할 수 있도록 구현했습니다. 로직은 다음과 같습니다:

1. ThemeSelector 컴포넌트를 통해 테마를 선택하여 변경합니다.
2. vscode api를 통해, vscode에 메시지를 보냅니다. (view/services)

   public setCustomTheme(theme: string) {
   const message: IDEMessage = {
     command: "updateCustomTheme",
     payload: JSON.stringify({ theme }),
   };
   this.sendMessageToIDE(message);
   }

3. vscode가 메시지를 수신, command에 맞는 동작을 수행합니다. 여기서는 setTheme() 함수를 호출하여, vscode의 configuration 중 githru.theme 값을 업데이트 합니다.

   
   // vscode/webview-loader.ts
   if (command === "updateCustomTheme") {
   const colorCode = payload && JSON.parse(payload);
   if (colorCode.theme) {
    setTheme(colorCode.theme);
   }
   }

// vscode/setting-repository.ts export const setTheme = async (newTheme: string) => { const configuration = vscode.workspace.getConfiguration(); configuration.update(SETTING_PROPERTY_NAMES.THEME, newTheme); };

4. 저장된 값은 다음 webview를 로드할 때 `getTheme()`함수를 통해 vscode configuration에 업데이트 한 theme 값을 가져와 `window` 객체에 저장합니다. (`vscode/webview-loader.ts`)
5. ThemeSelector 컴포넌트에서 `window.theme` 값을 가져와 테마를 업데이트 합니다. 

#### 2. 코드 리팩토링
#687 의 피드백을 반영하여 코드를 리팩토링 했습니다. 
type 설정, 변수명 변경, 그리고 selector 영역 외 클릭 시 창이 닫히도록 구현했습니다. 

## Discussion

[joonwonBaek]

👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍 👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍 👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍

[taboowiths]

view랑 vscode까지 다 작업하시느라 고생많으셨습니다. 저장하고 나니 theme 기능이 잘 동작하는 느낌이 더 팍팍나네요 👍👍👍

(사소) 전반적으로 customTheme과 theme이 같이 사용된 것 같은데, 혹시 다른 의미가 있는게 아니라면 하나로 통일시켜도 좋을 것 같습니다.

theme 이라는 용어가 현재 ThemeSelector와 관련된 로직에서만 쓰이는 것으로 판단되니, 간단하게 theme 으로 통일하는 것이 좋을 것 같습니다 .

다음 issue로 올리겠습니다 !!!

• customTheme -> theme으로 용어 통일
• 불필요한 비동기 제거
• 함수 역할에 기반한 함수명으로 변경