From cbd2e4b6bcdbea1ff1e2be6e11e5bf680181acac Mon Sep 17 00:00:00 2001
From: totocalcio <totohyper@yahoo.co.jp>
Date: Sun, 19 May 2024 13:41:36 +0900
Subject: [PATCH 1/9] add LocalSwitch component

---
 .../components/common/LocaleSwitch.stories.ts |  17 ++
 .../ui/components/common/LocaleSwitch.vue     | 146 ++++++++++++++++++
 2 files changed, 163 insertions(+)
 create mode 100644 packages/ui/components/common/LocaleSwitch.stories.ts
 create mode 100644 packages/ui/components/common/LocaleSwitch.vue

diff --git a/packages/ui/components/common/LocaleSwitch.stories.ts b/packages/ui/components/common/LocaleSwitch.stories.ts
new file mode 100644
index 00000000..0fd0de8d
--- /dev/null
+++ b/packages/ui/components/common/LocaleSwitch.stories.ts
@@ -0,0 +1,17 @@
+import { StoryFn } from '@storybook/vue3'
+import LocaleSwitch from './LocaleSwitch.vue'
+
+export default {
+  title: 'common/LocaleSwitch',
+  component: LocaleSwitch,
+}
+
+const Template: StoryFn<unknown> = () => ({
+  components: { LocaleSwitch },
+  setup() {
+    return {  }
+  },
+  template: '<LocaleSwitch />',
+})
+
+export const Default = Template.bind({})
diff --git a/packages/ui/components/common/LocaleSwitch.vue b/packages/ui/components/common/LocaleSwitch.vue
new file mode 100644
index 00000000..2ffd54b6
--- /dev/null
+++ b/packages/ui/components/common/LocaleSwitch.vue
@@ -0,0 +1,146 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+
+const LANGUAGES = {
+  JAPANESE: 'ja',
+  ENGLISH: 'en',
+} as const
+
+const isChecked = ref(false)
+
+const getPath = () => (window.location.pathname ? `/${LANGUAGES.ENGLISH}` : '/')
+
+const toggleStatus = () => {
+  window.location.href = getPath()
+}
+onMounted(() => {
+  isChecked.value = window.location.pathname !== '/'
+})
+</script>
+
+<template>
+  <button
+    type="button"
+    role="switch"
+    class="locale-switch-button"
+    aria-label="translate english"
+    :aria-checked="isChecked"
+    @click="toggleStatus"
+  >
+    <span
+      class="locale-switch-button-switch"
+      :class="{ 'locale-switch-button-switch-checked': !isChecked }"
+      aria-hidden="true"
+    >
+      <span
+        v-if="isChecked"
+        class="locale-switch-button-language locale-switch-button-language-ja"
+        :class="{ 'locale-switch-button-language-checked': !isChecked }"
+      >
+        <span>{{ LANGUAGES.JAPANESE }}</span>
+      </span>
+      <span
+        class="locale-switch-button-circle"
+        :class="{ 'locale-switch-button-circle-ja': !isChecked }"
+      >
+        {{ isChecked ? LANGUAGES.ENGLISH : LANGUAGES.JAPANESE }}
+      </span>
+      <span
+        v-if="!isChecked"
+        class="locale-switch-button-language"
+        :class="{ 'locale-switch-button-language-checked': isChecked }"
+      >
+        <span>{{ LANGUAGES.ENGLISH }}</span>
+      </span>
+    </span>
+  </button>
+</template>
+
+<style scoped>
+& {
+  --box-shadow: 0 1px 4px color-mix(in srgb, var(--color-vue-blue), transparent calc(100% - 14%));
+}
+
+.locale-switch-button {
+  border: 0;
+  user-select: none;
+  line-height: 1.2;
+  width: 5.125rem;
+  height: 2.5rem;
+  display: grid;
+  place-content: center;
+  color: var(--color-white);
+  background-color: transparent;
+  position: relative;
+}
+
+.locale-switch-button-switch {
+  display: flex;
+  align-items: center;
+  /* box-shadow: var(--box-shadow); */
+  box-shadow: 0 1px 4px color-mix(in srgb, var(--color-vue-blue), transparent calc(100% - 14%));
+  background-color: #d2d6db;
+  border-radius: 0.9375rem;
+  height: 1.8125rem;
+  width: 3.5625rem;
+  font-size: 1.125rem;
+  font-weight: bold;
+  padding-left: 0.5rem;
+  box-sizing: border-box;
+}
+
+.locale-switch-button-switch-checked {
+  justify-content: flex-end;
+  padding-left: 0;
+  padding-right: 0.5rem;
+}
+
+.locale-switch-button-language {
+  font-size: 0.875rem;
+  font-weight: bold;
+}
+
+/* din-2014 の `j` のグリフがずれているため調整 */
+.locale-switch-button-language-ja,
+.locale-switch-button-circle-ja {
+  box-sizing: border-box;
+  padding-left: 0.125rem;
+}
+
+.locale-switch-button-circle {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  padding-top: 0.25rem;
+  box-sizing: border-box;
+  border-radius: 50%;
+  top: calc(50% - 1rem);
+  right: 50%;
+  height: 2rem;
+  width: 2rem;
+  background: #34495e;
+  /* box-shadow: var(--box-shadow); */
+  box-shadow: 0 1px 4px color-mix(in srgb, var(--color-vue-blue), transparent calc(100% - 14%));
+}
+
+.locale-switch-button[aria-checked='true'] .locale-switch-button-circle {
+  right: 0;
+  left: 50%;
+}
+
+.locale-switch-button:hover {
+  cursor: pointer;
+}
+
+/* .locale-switch-button:focus,
+.locale-switch-button:hover {
+  border-width: 2px;
+  outline: none;
+  background-color: transparent;
+  cursor: pointer;
+}
+
+.locale-switch-button:focus-visible {
+  border: 2px solid var(--color-vue-blue);
+} */
+</style>

From f13d944c36ed33347a14b4030a38dd29c0000646 Mon Sep 17 00:00:00 2001
From: totocalcio <totohyper@yahoo.co.jp>
Date: Sun, 19 May 2024 17:59:35 +0900
Subject: [PATCH 2/9] use useRouter

---
 .../ui/components/common/LocaleSwitch.vue     | 56 +++++++++++--------
 1 file changed, 34 insertions(+), 22 deletions(-)

diff --git a/packages/ui/components/common/LocaleSwitch.vue b/packages/ui/components/common/LocaleSwitch.vue
index 2ffd54b6..7cff5b49 100644
--- a/packages/ui/components/common/LocaleSwitch.vue
+++ b/packages/ui/components/common/LocaleSwitch.vue
@@ -1,25 +1,51 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { onMounted, ref, watch } from 'vue'
+import { useRouter } from 'vue-router'
 
 const LANGUAGES = {
   JAPANESE: 'ja',
   ENGLISH: 'en',
 } as const
 
+const router = useRouter()
+const isLoaded = ref(false)
 const isChecked = ref(false)
 
-const getPath = () => (window.location.pathname ? `/${LANGUAGES.ENGLISH}` : '/')
+const getPath = () => {
+  if (isChecked.value) {
+    return `/${LANGUAGES.ENGLISH}${router.currentRoute.value.path}`
+  }
+  return router.currentRoute.value.path.replace(`/${LANGUAGES.ENGLISH}`, '')
+}
+const setSwitchStatus = () => {
+  isChecked.value = router.currentRoute.value.path.includes(LANGUAGES.ENGLISH)
+}
 
 const toggleStatus = () => {
-  window.location.href = getPath()
+  isChecked.value = !isChecked.value
+  const path = getPath()
+  // トレイリングスラッシュ対策
+  if (path === '') {
+    router.push('/')
+    return
+  }
+  router.push(path)
 }
 onMounted(() => {
-  isChecked.value = window.location.pathname !== '/'
+  setSwitchStatus()
+  isLoaded.value = true
 })
+watch(
+  () => router.currentRoute.value.path,
+  () => {
+    setSwitchStatus()
+  },
+)
 </script>
 
 <template>
   <button
+    v-if="isLoaded"
     type="button"
     role="switch"
     class="locale-switch-button"
@@ -57,7 +83,7 @@ onMounted(() => {
 </template>
 
 <style scoped>
-& {
+* {
   --box-shadow: 0 1px 4px color-mix(in srgb, var(--color-vue-blue), transparent calc(100% - 14%));
 }
 
@@ -77,8 +103,7 @@ onMounted(() => {
 .locale-switch-button-switch {
   display: flex;
   align-items: center;
-  /* box-shadow: var(--box-shadow); */
-  box-shadow: 0 1px 4px color-mix(in srgb, var(--color-vue-blue), transparent calc(100% - 14%));
+  box-shadow: var(--box-shadow);
   background-color: #d2d6db;
   border-radius: 0.9375rem;
   height: 1.8125rem;
@@ -100,7 +125,7 @@ onMounted(() => {
   font-weight: bold;
 }
 
-/* din-2014 の `j` のグリフがずれているため調整 */
+/* din-2014 の `j` のグリフがずれているため微調整 */
 .locale-switch-button-language-ja,
 .locale-switch-button-circle-ja {
   box-sizing: border-box;
@@ -119,8 +144,7 @@ onMounted(() => {
   height: 2rem;
   width: 2rem;
   background: #34495e;
-  /* box-shadow: var(--box-shadow); */
-  box-shadow: 0 1px 4px color-mix(in srgb, var(--color-vue-blue), transparent calc(100% - 14%));
+  box-shadow: var(--box-shadow);
 }
 
 .locale-switch-button[aria-checked='true'] .locale-switch-button-circle {
@@ -131,16 +155,4 @@ onMounted(() => {
 .locale-switch-button:hover {
   cursor: pointer;
 }
-
-/* .locale-switch-button:focus,
-.locale-switch-button:hover {
-  border-width: 2px;
-  outline: none;
-  background-color: transparent;
-  cursor: pointer;
-}
-
-.locale-switch-button:focus-visible {
-  border: 2px solid var(--color-vue-blue);
-} */
 </style>

From 789e27213833baf4eda4149512cbb2d43c879392 Mon Sep 17 00:00:00 2001
From: totocalcio <totohyper@yahoo.co.jp>
Date: Sun, 19 May 2024 18:49:40 +0900
Subject: [PATCH 3/9] setting vue-router for Storybook

---
 packages/ui/.storybook/preview.js | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/packages/ui/.storybook/preview.js b/packages/ui/.storybook/preview.js
index e360110d..227bc347 100644
--- a/packages/ui/.storybook/preview.js
+++ b/packages/ui/.storybook/preview.js
@@ -1,6 +1,7 @@
 import { setup } from '@storybook/vue3'
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'
 import { createI18n } from 'vue-i18n'
+import { createRouter, createMemoryHistory } from 'vue-router'
 
 import './global.css'
 
@@ -33,14 +34,29 @@ const i18n = createI18n({
       // end dummy
       sponsor: {
         start_date: 'April 8',
-        end_date: '25,',  
+        end_date: '25,',
       },
     },
   },
 })
 
+const routes = [
+  {
+    path: '/',
+    name: 'ja',
+  },
+  {
+    path: '/en',
+    name: 'en',
+  },
+]
+
+// 画面遷移は発生しないが、StorybookではURLを直接使えないため、createMemoryHistoryで生成
+const router = createRouter({ history: createMemoryHistory(), routes })
+
 setup((app) => {
   app.use(i18n)
+  app.use(router)
 })
 
 export const parameters = {

From 070ad8c00012430d6d5ff5c43701d525ea1f8e82 Mon Sep 17 00:00:00 2001
From: totocalcio <totohyper@yahoo.co.jp>
Date: Sun, 19 May 2024 19:06:09 +0900
Subject: [PATCH 4/9] fix locate switch for footer

---
 apps/web/app/components/FooterPageSection.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/web/app/components/FooterPageSection.vue b/apps/web/app/components/FooterPageSection.vue
index a6c6ecf2..bf86e544 100644
--- a/apps/web/app/components/FooterPageSection.vue
+++ b/apps/web/app/components/FooterPageSection.vue
@@ -39,11 +39,11 @@ const snsLinkList: LinkList[] = [
 const internalLinkList: LinkList[] = [
   {
     href: '/privacy',
-    text: t('privacy.title'),
+    text: 'privacy.title',
   },
   {
     href: '/code-of-conduct',
-    text: t('code_of_conduct.title'),
+    text: 'code_of_conduct.title',
   },
 ]
 const vueFesLinkList: LinkList[] = [
@@ -86,14 +86,14 @@ const vueFesLinkList: LinkList[] = [
         <ul class="footer-list">
           <li v-for="(link, index) in internalLinkList" :key="index">
             <VFTextLink :href="`${localePath}${link.href}`" color="white">
-              {{ link.text }}
+              {{ t(link.text) }}
             </VFTextLink>
           </li>
         </ul>
         <ul class="footer-list">
           <li v-for="(link, index) in vueFesLinkList" :key="index">
             <VFTextLink :href="link.href" target="_blank" color="white">
-              {{ link.text }}
+              {{ t(link.text) }}
             </VFTextLink>
           </li>
         </ul>

From 2e7ca26f4baa9793bc9bf15f72cf2e087f17bd38 Mon Sep 17 00:00:00 2001
From: totocalcio <totohyper@yahoo.co.jp>
Date: Sun, 19 May 2024 19:58:37 +0900
Subject: [PATCH 5/9] delete unnecessary style

---
 packages/ui/components/common/LocaleSwitch.vue | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/packages/ui/components/common/LocaleSwitch.vue b/packages/ui/components/common/LocaleSwitch.vue
index 7cff5b49..91e355e6 100644
--- a/packages/ui/components/common/LocaleSwitch.vue
+++ b/packages/ui/components/common/LocaleSwitch.vue
@@ -125,13 +125,6 @@ watch(
   font-weight: bold;
 }
 
-/* din-2014 の `j` のグリフがずれているため微調整 */
-.locale-switch-button-language-ja,
-.locale-switch-button-circle-ja {
-  box-sizing: border-box;
-  padding-left: 0.125rem;
-}
-
 .locale-switch-button-circle {
   position: absolute;
   display: flex;

From 1295e12051bc9b72f3d86fd9e25570188b1dc971 Mon Sep 17 00:00:00 2001
From: totocalcio <totohyper@yahoo.co.jp>
Date: Mon, 20 May 2024 00:26:47 +0900
Subject: [PATCH 6/9] delete space

---
 packages/ui/components/common/LocaleSwitch.stories.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/components/common/LocaleSwitch.stories.ts b/packages/ui/components/common/LocaleSwitch.stories.ts
index 0fd0de8d..a0a680b1 100644
--- a/packages/ui/components/common/LocaleSwitch.stories.ts
+++ b/packages/ui/components/common/LocaleSwitch.stories.ts
@@ -9,7 +9,7 @@ export default {
 const Template: StoryFn<unknown> = () => ({
   components: { LocaleSwitch },
   setup() {
-    return {  }
+    return {}
   },
   template: '<LocaleSwitch />',
 })

From 67060f52591ad8b4459e1def4b075b0ec05fc7b9 Mon Sep 17 00:00:00 2001
From: totocalcio <totohyper@yahoo.co.jp>
Date: Mon, 20 May 2024 00:38:18 +0900
Subject: [PATCH 7/9] delete unnecessary className

---
 packages/ui/components/common/LocaleSwitch.vue | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/packages/ui/components/common/LocaleSwitch.vue b/packages/ui/components/common/LocaleSwitch.vue
index 91e355e6..011b5012 100644
--- a/packages/ui/components/common/LocaleSwitch.vue
+++ b/packages/ui/components/common/LocaleSwitch.vue
@@ -60,15 +60,12 @@ watch(
     >
       <span
         v-if="isChecked"
-        class="locale-switch-button-language locale-switch-button-language-ja"
+        class="locale-switch-button-language"
         :class="{ 'locale-switch-button-language-checked': !isChecked }"
       >
         <span>{{ LANGUAGES.JAPANESE }}</span>
       </span>
-      <span
-        class="locale-switch-button-circle"
-        :class="{ 'locale-switch-button-circle-ja': !isChecked }"
-      >
+      <span class="locale-switch-button-circle">
         {{ isChecked ? LANGUAGES.ENGLISH : LANGUAGES.JAPANESE }}
       </span>
       <span

From f450225cdeba44948b06b04e944e51b368ad0152 Mon Sep 17 00:00:00 2001
From: totocalcio <totohyper@yahoo.co.jp>
Date: Wed, 22 May 2024 00:24:46 +0900
Subject: [PATCH 8/9] fix path matching words

---
 packages/ui/components/common/LocaleSwitch.vue | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/packages/ui/components/common/LocaleSwitch.vue b/packages/ui/components/common/LocaleSwitch.vue
index 011b5012..ba0421f1 100644
--- a/packages/ui/components/common/LocaleSwitch.vue
+++ b/packages/ui/components/common/LocaleSwitch.vue
@@ -18,17 +18,12 @@ const getPath = () => {
   return router.currentRoute.value.path.replace(`/${LANGUAGES.ENGLISH}`, '')
 }
 const setSwitchStatus = () => {
-  isChecked.value = router.currentRoute.value.path.includes(LANGUAGES.ENGLISH)
+  isChecked.value = router.currentRoute.value.path.includes(`/${LANGUAGES.ENGLISH}/`)
 }
 
 const toggleStatus = () => {
   isChecked.value = !isChecked.value
   const path = getPath()
-  // トレイリングスラッシュ対策
-  if (path === '') {
-    router.push('/')
-    return
-  }
   router.push(path)
 }
 onMounted(() => {

From 2a9e4629587224c73d1869ac3151ff005b723f9f Mon Sep 17 00:00:00 2001
From: totocalcio <totohyper@yahoo.co.jp>
Date: Wed, 22 May 2024 00:39:23 +0900
Subject: [PATCH 9/9] fix custom property scope

---
 packages/ui/components/common/LocaleSwitch.vue | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/ui/components/common/LocaleSwitch.vue b/packages/ui/components/common/LocaleSwitch.vue
index ba0421f1..abd509f2 100644
--- a/packages/ui/components/common/LocaleSwitch.vue
+++ b/packages/ui/components/common/LocaleSwitch.vue
@@ -75,11 +75,9 @@ watch(
 </template>
 
 <style scoped>
-* {
+.locale-switch-button {
   --box-shadow: 0 1px 4px color-mix(in srgb, var(--color-vue-blue), transparent calc(100% - 14%));
-}
 
-.locale-switch-button {
   border: 0;
   user-select: none;
   line-height: 1.2;