fix: UI responsiveness

app.config.ts

@@ -104,11 +104,11 @@ export default defineAppConfig({
       left: "sm:flex-1",
       right: "sm:flex-1",
       panel: {
-        wrapper: "sm:hidden",
+        wrapper: "lg:hidden",
       },
 
       button: {
-        base: "sm:hidden",
+        base: "lg:hidden",
         icon: {
           open: "i-ph-list",
           close: "i-ph-x",

components/AppFooter.vue

@@ -38,10 +38,12 @@ const links = computed(() => [
       </span>
     </template>
     <template #right>
-      <UButtonGroup orientation="horizontal" clsss="my-2">
-        <LangSwitcher />
-        <UColorModeSelect />
-      </UButtonGroup>
+      <ClientOnly>
+        <UButtonGroup orientation="horizontal" clsss="my-2">
+          <LangSwitcher />
+          <UColorModeSelect />
+        </UButtonGroup>
+      </ClientOnly>
     </template>
   </UFooter>
 </template>

content/1.docs/2.training/1.index.md

@@ -15,11 +15,11 @@ BlueScript훈련은 사용자가 직접 훈련의 설정을 변경할 수 있도
 
 [훈련](/train) 페이지를 방문하면 훈련 모듈을 선택할 수 있습니다. 또한 **도움말** 버튼을 클릭하면 각 훈련 모듈에 대한 사용법을 확인할 수 있습니다.
 
-![select-procedure](/select-procedure.png)
+![select-procedure](/select-procedure.png){width="1024" height="576"}
 
 훈련을 하고자 하는 모듈을 선택하면 아래 이미지와 같이 훈련을 설정할 수 있습니다. 훈련 모듈 모두 공통적으로 **시간**과 **문자 종류**에 대한 설정이 있습니다. 이 둘은 훈련의 난이도와 연관이 없습니다. 이 두 설정 외 각 훈련 모듈 마다 추가적인 설정값이 있으며, **위에 있는 설정이 아래 설정보다 난이도에 더욱 큰 영향**을 줍니다.
 
-![setting-example](/setting-example.png)
+![setting-example](/setting-example.png){width="1024" height="576"}
 
 예를 들어, 빠른 시각 인지에서 **문자 길이**를 옆에 있는 화살표로 한 단계 변경 하는 것이 **표시 시간**을 한 단계 변경하는 것 보다 난이도에 더 큰 영향을 줍니다.
 

content/1.docs/2.training/2.rapid-visual-perception.md

@@ -10,9 +10,9 @@ description: 화면에 짧게 표시되는 글자를 빠르게 인식하고 입
 훈련의 각 시도는 다음과 같은 순서로 진행되며, 훈련 시간이 초과될 때까지 반복됩니다.
 
 1. 화면에 짧은 시간 동안 글자들이 표시됩니다.
-   ![rapid-visual-perception-1](/rapid-visual-perception-1.png)
+   ![rapid-visual-perception-1](/rapid-visual-perception-1.png){width="1024" height="576"}
 1. 글자들이 표시 된 후 훈련자는 기억하는 글자들을 입력하고 답안을 확인합니다.
-   ![rapid-visual-perception-2](/rapid-visual-perception-2.png)
+   ![rapid-visual-perception-2](/rapid-visual-perception-2.png){width="1024" height="576"}
 
 ## 훈련 설정
 

content/1.docs/2.training/3.sequential-visual-memory.md

@@ -10,11 +10,11 @@ description: 한 글자씩 보여지는 글자를 기억한 후 입력하는 방
 훈련의 각 시도는 다음과 같은 순서로 진행되며, 훈련 시간이 초과될 때까지 반복됩니다.
 
 1. 화면에 한 글자씩 문자들이 순서대로 표시됩니다.
-   ![sequential-visual-memory-1](/sequential-visual-memory-1.png)
+   ![sequential-visual-memory-1](/sequential-visual-memory-1.png){width="1024" height="576"}
 1. 모든 문자들이 표시 된 이후 지연 시간동안 (0초로 비활성화 가능) 화면에 임의의 패턴이 표시됩니다.
-   ![sequential-visual-memory-2](/sequential-visual-memory-2.png)
+   ![sequential-visual-memory-2](/sequential-visual-memory-2.png){width="1024" height="576"}
 1. 패턴이 사라진 후 훈련자는 기억하는 문자들을 입력하고 답안을 확인합니다.
-   ![sequential-visual-memory-3](/sequential-visual-memory-3.png)
+   ![sequential-visual-memory-3](/sequential-visual-memory-3.png){width="1024" height="576"}
 
 ## 훈련 설정
 

content/1.docs/2.training/4.character-sequencing.md

@@ -10,9 +10,9 @@ description: 주어진 글자를 순서대로 찾아 입력하는 훈련
 훈련의 각 시도는 다음과 같은 순서로 진행되며, 훈련 시간이 초과될 때까지 반복됩니다.
 
 1. 시도가 시작되면 위에 보기가 표시되고 아래에 입력란이 표시됩니다.
-   ![character-sequencing-1](/character-sequencing-1.png)
+   ![character-sequencing-1](/character-sequencing-1.png){width="1024" height="576"}
 2. 오른쪽 화살표 키를 사용하여 아래 정답란에 커서를 오른쪽으로 이동시킬 수 있습니다. 커서가 보기에 있는 문자와 일치하면 스페이스바를 눌러야 합니다. 만일 놓치거나 잘못된 문자 위에서 스페이스바를 누르면 오답으로 처리되고 가장 가까운 정답으로 이동합니다.
-   ![character-sequencing-2](/character-sequencing-2.png)
+   ![character-sequencing-2](/character-sequencing-2.png){width="1024" height="576"}
    예를 들어 위 이미지에서 이미 ㅔ, ㅐ, ㄷ, ㅑ를 찾았기에 다음으로 스페이스바를 눌러야 하는 문자는 ㅜ 입니다. 만일 ㅜ를 놓치거나 다른 문자에 스페이스바를 누르게 된다면 마지막 정답인 ㅑ 바로 다음 문자인 ㅈ으로 커서가 이동합니다.
 3. 커서가 마지막 문자에 도달하면 시도가 종료됩니다.
 

layouts/default.vue

@@ -56,13 +56,18 @@ provide("files", files);
     </template>
 
     <template #panel>
-      <UButtonGroup orientation="horizontal" class="w-full">
-        <UColorModeSelect class="w-full" />
-        <LangSwitcher class="w-full" />
-      </UButtonGroup>
-      <UDivider class="my-3" />
-      <UNavigationLinks :links="links" />
-      <UDivider class="my-3" />
+      <span class="sm:hidden">
+        <ClientOnly>
+          <UButtonGroup orientation="horizontal" class="w-full">
+            <UColorModeSelect class="w-full" />
+            <LangSwitcher class="w-full" />
+          </UButtonGroup>
+        </ClientOnly>
+        <UDivider class="my-3" />
+
+        <UNavigationLinks :links="links" />
+        <UDivider class="my-3" />
+      </span>
       <UNavigationAccordion
         v-if="navigation"
         :links="mapContentNavigation(navigation)"