fix: [QA|디자인QA] 개선 및 버그 수정

2025-11-28 05:35:10 +00:00
parent 43e5df34fc
commit d135e1ee71
3 changed files with 86 additions and 69 deletions
--- a/layers/templates/FxDownload01/index.vue
+++ b/layers/templates/FxDownload01/index.vue
@@ -137,17 +137,17 @@ const handleMoveFocus = (target: 'pc' | 'mobile') => {
      <WidgetsFixSubTitle :title="tm('Download_Section_Platform_Title')" />

      <div
-        class="relative flex flex-col-reverse items-stretch justify-center sm:flex-row-reverse gap-[20px] w-full md:grid md:grid-cols-12 md:grid-rows-1"
+        class="relative flex flex-col-reverse items-stretch justify-center sm:flex-row-reverse gap-[12px] w-full md:gap-[24px] md:grid md:grid-cols-12 md:grid-rows-1 lg:gap-[20px]"
      >
        <div
          v-if="gameData?.platform_type !== '2'"
-          class="relative flex flex-1 flex-col items-start justify-start h-[270px] py-[20px] rounded-[12px] bg-white sm:h-auto md:flex-none md:pt-[24px] md:pb-0 lg:pt-[32px]"
+          class="relative flex flex-col items-start justify-start w-full h-[270px] py-[20px] rounded-[12px] bg-white sm:w-[calc(50%-6px)] sm:h-auto md:flex-none md:w-auto md:pt-[24px] md:pb-0 lg:pt-[32px]"
          :class="
            gameData?.platform_type === '1' ? 'md:col-span-12' : 'md:col-span-8'
          "
        >
          <div
-            class="relative flex flex-col items-start justify-start w-full max-w-[880px] h-full px-[20px] mx-auto md:h-auto md:px-[28px] lg:px-[40px]"
+            class="relative flex flex-col items-start justify-start gap-[20px] w-full max-w-[880px] h-full px-[20px] mx-auto md:gap-[24px] md:h-auto md:px-[28px] md:pr-[262px] lg:px-[40px]"
          >
            <span
              v-if="!breakpoints.isMobile"
@@ -166,52 +166,56 @@ const handleMoveFocus = (target: 'pc' | 'mobile') => {
              />
            </span>

-            <h4
-              class="relative flex justify-left items-center w-full gap-[4px] text-left text-[#1F1F1F] text-[18px] font-bold leading-[26px] tracking-[-0.54px] md:text-[24px] md:leading-[34px] md:tracking-[-0.72px]"
+            <div
+              class="relative flex flex-col items-start justify-start w-full h-auto min-h-[108px] gap-[8px] md:gap-[12px] lg:min-h-[134px]"
            >
-              <span>{{ tm('Download_Box_PC_Title') }}</span>
+              <h4
+                class="relative flex justify-left items-center w-full gap-[4px] text-left text-[#1F1F1F] text-[18px] font-bold leading-[26px] tracking-[-0.54px] md:text-[24px] md:leading-[34px] md:tracking-[-0.72px]"
+              >
+                <span>{{ tm('Download_Box_PC_Title') }}</span>

-              <AtomsTooltip
-                position="top"
-                :offset="8"
-                background-color="#666666"
-                text-color="#FFFFFF"
-                :arrow="true"
-                :content="tm('Download_Box_PC_Tooltip')"
-              />
-            </h4>
+                <AtomsTooltip
+                  position="top"
+                  :offset="8"
+                  background-color="#666666"
+                  text-color="#FFFFFF"
+                  :arrow="true"
+                  :content="tm('Download_Box_PC_Tooltip')"
+                />
+              </h4>

-            <template
-              v-for="(description, dIndex) in tm(
-                'Download_Box_PC_Description_List'
-              )"
-              :key="dIndex"
-            >
-              <p
-                class="relative flex items-center justify-start w-full mt-[12px] text-left text-[#999999] text-[14px] font-[400] leading-[24px] tracking-[-0.42px] md:text-[15px] md:tracking-[-0.45px]"
-                v-dompurify-html="tm(description as string)"
-              ></p>
-            </template>
+              <template
+                v-for="(description, dIndex) in tm(
+                  'Download_Box_PC_Description_List'
+                )"
+                :key="dIndex"
+              >
+                <p
+                  class="relative flex items-center justify-start w-full text-left text-[#999999] text-[14px] font-[400] leading-[24px] tracking-[-0.42px] md:text-[15px] md:tracking-[-0.45px]"
+                  v-dompurify-html="tm(description as string)"
+                ></p>
+              </template>

-            <AtomsButton
-              type="action"
-              button-size="size-small"
-              background-color="transparent"
-              text-color="#1F1F1F"
-              class="relative w-auto h-auto px-0 mt-[12px] text-[16px] font-[500] leading-[24px] tracking-[-0.48px] before:content-[''] before:absolute before:z-[2] before:top-p before:left-0 before:w-full before:h-full before:bg-[#FFFFFF] before:transition-opacity before:duration-300 before:ease-in-out before:opacity-0 hover:before:opacity-20"
-              @click="handleMoveFocus('pc')"
-            >
-              <span>{{ tm('Download_Box_PC_SpecCheck') }}</span>
-              <AtomsIconsLongArrowRightLine
-                :size="20"
-                color="#1F1F1F"
-                class="relative rotate-90"
-              />
-            </AtomsButton>
+              <AtomsButton
+                type="action"
+                button-size="size-small"
+                background-color="transparent"
+                text-color="#1F1F1F"
+                class="relative w-auto h-auto px-0 text-[14px] font-[500] leading-[20px] tracking-[-0.42px] md:text-[16px] md:leading-[24px] md:tracking-[-0.48px] before:content-[''] before:absolute before:z-[2] before:top-p before:left-0 before:w-full before:h-full before:bg-[#FFFFFF] before:transition-opacity before:duration-300 before:ease-in-out before:opacity-0 hover:before:opacity-20"
+                @click="handleMoveFocus('pc')"
+              >
+                <span>{{ tm('Download_Box_PC_SpecCheck') }}</span>
+                <AtomsIconsLongArrowRightLine
+                  :size="20"
+                  color="#1F1F1F"
+                  class="relative rotate-90"
+                />
+              </AtomsButton>
+            </div>

            <div
              v-if="breakpoints.isMobile"
-              class="relative flex items-center justify-center w-full h-auto min-h-[48px] py-[14px] px-[40px] mt-[48px] sm:mt-auto border border-solid border-[rgba(0,0,0,0.1)] rounded-[8px] bg-[#EBEBEB] text-center text-[#999999] text-[14px] font-[500] leading-[20px] tracking-[-0.42px]"
+              class="relative flex items-center justify-center w-full h-auto min-h-[48px] py-[14px] px-[40px] mt-auto border border-solid border-[rgba(0,0,0,0.1)] rounded-[8px] bg-[#EBEBEB] text-center text-[#999999] text-[14px] font-[500] leading-[20px] tracking-[-0.42px]"
            >
              <span>{{ tm('Download_Button_PC_Mobile') }}</span>
            </div>
@@ -219,7 +223,7 @@ const handleMoveFocus = (target: 'pc' | 'mobile') => {
            <BlocksButtonLauncher
              v-else-if="breakpoints.isMd || breakpoints.isDesktop"
              platform="pc"
-              class="!w-full !max-w-[300px] mt-[32px] lg:mt-[48px]"
+              class="!w-full !max-w-[300px]"
            >
              <span>{{ tm('Download_Button_PC') }}</span>
            </BlocksButtonLauncher>
@@ -248,35 +252,39 @@ const handleMoveFocus = (target: 'pc' | 'mobile') => {

        <div
          v-if="gameData?.platform_type !== '1'"
-          class="relative flex flex-1 flex-col items-start justify-start h-[270px] p-[20px] rounded-[12px] bg-white sm:h-auto md:flex-none md:py-[24px] md:px-[28px] lg:py-[32px] lg:px-[40px]"
+          class="relative flex flex-col items-start justify-start w-full h-[270px] p-[20px] rounded-[12px] bg-white sm:w-[calc(50%-6px)] sm:h-auto md:flex-none md:w-auto md:py-[24px] md:px-[28px] lg:py-[32px] lg:px-[40px]"
          :class="
            gameData?.platform_type === '2' ? 'md:col-span-12' : 'md:col-span-4'
          "
        >
          <div
-            class="relative flex flex-col items-start justify-start w-full h-full max-w-[880px] mx-auto"
+            class="relative flex flex-col items-start justify-start gap-[20px] w-full h-full max-w-[880px] mx-auto md:gap-[24px]"
          >
-            <h4
-              class="relative flex justify-left items-center w-full text-left text-[#1F1F1F] text-[18px] font-bold leading-[26px] tracking-[-0.54px] md:text-[24px] md:leading-[34px] md:tracking-[-0.72px]"
+            <div
+              class="relative flex flex-col items-start justify-start w-full gap-[8px] md:gap-[12px]"
            >
-              <span>{{ tm('Download_Box_MOBILE_Title') }}</span>
-            </h4>
+              <h4
+                class="relative flex justify-left items-center w-full text-left text-[#1F1F1F] text-[18px] font-bold leading-[26px] tracking-[-0.54px] md:text-[24px] md:leading-[34px] md:tracking-[-0.72px]"
+              >
+                <span>{{ tm('Download_Box_MOBILE_Title') }}</span>
+              </h4>

-            <AtomsButton
-              type="action"
-              button-size="size-small"
-              background-color="transparent"
-              text-color="#1F1F1F"
-              class="relative w-auto h-auto px-0 mt-[8px] mb-[48px] text-[16px] font-[500] leading-[24px] tracking-[-0.48px] before:content-[''] before:absolute before:z-[2] before:top-p before:left-0 before:w-full before:h-full before:bg-[#FFFFFF] before:transition-opacity before:duration-300 before:ease-in-out before:opacity-0 hover:before:opacity-20 md:mt-[12px]"
-              @click="handleMoveFocus('mobile')"
-            >
-              <span>{{ tm('Download_Box_MOBILE_SpecCheck') }}</span>
-              <AtomsIconsLongArrowRightLine
-                :size="20"
-                color="#1F1F1F"
-                class="relative rotate-90"
-              />
-            </AtomsButton>
+              <AtomsButton
+                type="action"
+                button-size="size-small"
+                background-color="transparent"
+                text-color="#1F1F1F"
+                class="relative w-auto h-auto px-0 text-[14px] font-[500] leading-[20px] tracking-[-0.42px] md:text-[16px] md:leading-[24px] md:tracking-[-0.48px] before:content-[''] before:absolute before:z-[2] before:top-p before:left-0 before:w-full before:h-full before:bg-[#FFFFFF] before:transition-opacity before:duration-300 before:ease-in-out before:opacity-0 hover:before:opacity-20"
+                @click="handleMoveFocus('mobile')"
+              >
+                <span>{{ tm('Download_Box_MOBILE_SpecCheck') }}</span>
+                <AtomsIconsLongArrowRightLine
+                  :size="20"
+                  color="#1F1F1F"
+                  class="relative rotate-90"
+                />
+              </AtomsButton>
+            </div>

            <div
              class="relative flex flex-col items-start justify-start w-full gap-[8px] mt-auto md:gap-[12px]"
@@ -423,7 +431,7 @@ const handleMoveFocus = (target: 'pc' | 'mobile') => {
                </p>

                <AtomsButton
-                  type="download"
+                  type="link"
                  button-size="size-small"
                  background-color="#383838"
                  text-color="#FFFFFF"