{{ props.title }}
@@ -47,7 +52,7 @@ const handleLinkClick = (title: string) => {
@@ -56,7 +61,7 @@ const handleLinkClick = (title: string) => {
diff --git a/layers/components/blocks/slide/Default.vue b/layers/components/blocks/slide/Default.vue
index b1c5f9e..cdb1102 100644
--- a/layers/components/blocks/slide/Default.vue
+++ b/layers/components/blocks/slide/Default.vue
@@ -7,6 +7,8 @@ interface Props {
type?: ResponsiveOptions['type']
slideItemLength?: number
autoplay?: boolean
+ perPage?: number
+ drag?: boolean
arrows?: boolean
pagination?: boolean
paginationData?: PageDataResourceGroups
@@ -15,6 +17,8 @@ interface Props {
const props = withDefaults(defineProps
(), {
autoplay: false,
+ perPage: 1,
+ drag: true,
arrows: true,
pagination: true,
})
@@ -24,22 +28,25 @@ const emit = defineEmits(['mounted', 'move', 'arrowClick'])
// Splide 화살표 로직을 위한 composable 사용
const { addArrowClickListeners } = useSplideArrow()
-const isMultipleItems = computed(() => (props.slideItemLength ?? 0) > 1)
-const resolvedType = computed(() => {
+const slideType = computed(() => {
if (props.type) return props.type
- return isMultipleItems.value ? 'loop' : 'slide'
+
+ return (props.slideItemLength ?? 0) > 1 ? 'loop' : 'slide'
})
const options = computed((): ResponsiveOptions => {
return {
- type: resolvedType.value,
+ type: slideType.value,
autoWidth: true,
autoHeight: true,
+ perPage: props.perPage,
speed: 500,
updateOnMove: true,
autoplay: props.autoplay,
- arrows: props.arrows && isMultipleItems.value,
- pagination: props.pagination && isMultipleItems.value,
+ drag: props.drag,
+ trimSpace: false,
+ arrows: props.arrows,
+ pagination: props.pagination,
classes: {
arrows: 'splide-arrows',
arrow: 'splide-arrow',
@@ -77,7 +84,7 @@ const handleMove = (
diff --git a/layers/components/blocks/slide/Thumbnail.vue b/layers/components/blocks/slide/Thumbnail.vue
index 3725d79..1b80ebe 100644
--- a/layers/components/blocks/slide/Thumbnail.vue
+++ b/layers/components/blocks/slide/Thumbnail.vue
@@ -154,21 +154,23 @@ onBeforeUnmount(() => {
.thumbnail-splide {
@apply overflow-hidden flex justify-center;
}
+.thumbnail-splide:deep(.splide__track) {
+ @apply md:w-[calc(100%-16px)];
+}
.thumbnail-slide {
- @apply overflow-hidden relative mr-[12px] !border-none rounded-[4px] md:mr-[16px]
+ @apply overflow-hidden relative mr-[12px] !border-none rounded-[4px] bg-[var(--pagination-disabled)] md:mr-[16px] md:bg-transparent
after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full after:border after:rounded-[4px];
- background-color: var(--pagination-disabled);
}
.thumbnail-slide:hover,
.thumbnail-slide.is-active {
- background-color: var(--pagination-active);
+ @apply bg-[var(--pagination-active)] md:bg-transparent;
}
.thumbnail-slide::after {
- border-color: var(--pagination-disabled);
+ @apply border-[var(--pagination-disabled)];
}
.thumbnail-slide:hover::after,
.thumbnail-slide.is-active::after {
- border-color: var(--pagination-active);
+ @apply border-[var(--pagination-active)];
}
/* 기본 버전 스타일 */
@@ -178,7 +180,7 @@ onBeforeUnmount(() => {
@apply h-full;
}
.thumbnail-carousel.thumbnail-default .thumbnail-splide {
- @apply absolute bottom-[32px] left-1/2 -translate-x-1/2 max-w-[100%] md:bottom-[48px] md:max-w-[896px] md:px-[72px];
+ @apply absolute bottom-[32px] left-1/2 -translate-x-1/2 max-w-[100%] md:bottom-[48px] md:max-w-[896px] md:px-[64px];
}
.thumbnail-carousel.thumbnail-default:deep(.arrow-prev) {
@apply left-0;
@@ -199,8 +201,11 @@ onBeforeUnmount(() => {
}
/* 미디어 버전 스타일 */
+.thumbnail-carousel.thumbnail-media {
+ @apply flex flex-col items-center;
+}
.thumbnail-carousel.thumbnail-media .thumbnail-splide {
- @apply w-screen mt-[20px] mx-[-20px] sm:mx-[-40px] md:w-fit md:max-w-[100%] md:mt-[28px] md:mx-auto md:px-[120px];
+ @apply w-screen mt-[20px] mx-[-20px] sm:mx-[-40px] md:w-auto md:max-w-[100%] md:mt-[28px] md:mx-auto md:px-[112px];
}
.thumbnail-carousel.thumbnail-media .thumbnail-splide:deep(.splide__track) {
@apply !px-[20px] sm:!px-[40px] md:!px-[0];
diff --git a/layers/composables/useBreakpoints.ts b/layers/composables/useBreakpoints.ts
index ccbed4e..9c476fc 100644
--- a/layers/composables/useBreakpoints.ts
+++ b/layers/composables/useBreakpoints.ts
@@ -1,8 +1,8 @@
-import { useMediaQuery } from '@vueuse/core'
+import { useBreakpoints } from '@vueuse/core'
import { getDeviceSrc } from '#layers/utils/styleUtil'
import type { PageDataResourceGroupResPath } from '#layers/types/api/pageData'
-const BREAKPOINTS = {
+export const BREAKPOINTS = {
xs: 360,
sm: 768,
md: 1024,
@@ -10,24 +10,16 @@ const BREAKPOINTS = {
} as const
/**
- * useMediaQuery 기반 반응형 브레이크포인트
+ * useBreakpoints 기반 반응형 브레이크포인트
*/
export const useResponsiveBreakpoints = () => {
- const ssrWidth = BREAKPOINTS.xs
- const isXs = useMediaQuery(`(min-width: ${BREAKPOINTS.xs}px)`, { ssrWidth })
- const isSm = useMediaQuery(`(min-width: ${BREAKPOINTS.sm}px)`, { ssrWidth })
- const isMd = useMediaQuery(`(min-width: ${BREAKPOINTS.md}px)`, { ssrWidth })
- const isLg = useMediaQuery(`(min-width: ${BREAKPOINTS.lg}px)`, { ssrWidth })
- const isMobile = useMediaQuery(`(max-width: ${BREAKPOINTS.md - 1}px)`, {
- ssrWidth,
- })
- const isTablet = useMediaQuery(
- `(min-width: ${BREAKPOINTS.sm}px) and (max-width: ${BREAKPOINTS.md - 1}px)`,
- { ssrWidth }
- )
- const isDesktop = useMediaQuery(`(min-width: ${BREAKPOINTS.md}px)`, {
- ssrWidth,
- })
+ const breakpoints = useBreakpoints(BREAKPOINTS)
+ const isXs = breakpoints.smaller('sm') // < 768px
+ const isSm = breakpoints.smaller('md') // < 1024px
+ const isMd = breakpoints.smaller('lg') // < 1440px
+ const isLg = breakpoints.greater('lg') // >= 1440px
+ const isMobile = isXs || isSm
+ const isDesktop = isLg || isMd
return computed(() => ({
isXs: isXs.value,
@@ -35,7 +27,6 @@ export const useResponsiveBreakpoints = () => {
isMd: isMd.value,
isLg: isLg.value,
isMobile: isMobile.value,
- isTablet: isTablet.value,
isDesktop: isDesktop.value,
}))
}
diff --git a/layers/composables/useResourcesData.ts b/layers/composables/useResourcesData.ts
index 0f0c258..b7d9a3a 100644
--- a/layers/composables/useResourcesData.ts
+++ b/layers/composables/useResourcesData.ts
@@ -1,12 +1,21 @@
import type {
- GetResourcesDataParams,
- ResourcesDataResponse,
+ getOperateResourcesDataParams,
+ OperateResourcesDataResponse,
OperateComponents,
+ getCwmsArticleDataParams,
+ CwmsArticleDataResponse,
+ CwmsArticleData,
} from '#layers/types/api/resourcesData'
export const useResourcesData = () => {
- const getResourcesData = async (
- params: GetResourcesDataParams
+ /**
+ *
+ * @param params getOperateResourcesDataParams
+ * @returns OperateComponents | null
+ * @description 운영 리소스 데이터 조회
+ */
+ const getOperateResourcesData = async (
+ params: getOperateResourcesDataParams
): Promise => {
const { pageSeq, pageVer, pageVerTmplSeq, langCode, q, qc } = params
@@ -27,7 +36,59 @@ export const useResourcesData = () => {
const response = (await commonFetch('GET', apiUrl, {
query: queryParams,
loading: true,
- })) as ResourcesDataResponse | null
+ })) as OperateResourcesDataResponse | null
+
+ if (response?.code === 0 && 'value' in response) {
+ return response.value
+ }
+ return null
+ }
+
+ /**
+ *
+ * @param articleGroupCode 게시판 그룹 코드 (예: 128093)
+ * @param options 옵션 객체
+ * @returns 게시판 글 목록 응답
+ */
+ const getCwmsArticleData = async (
+ articleGroupCode: string,
+ articleGroupSeq: number,
+ params: getCwmsArticleDataParams
+ ): Promise => {
+ const {
+ lang,
+ sortTypeCode,
+ interactionTypeCodes,
+ handleCode,
+ contentYn,
+ summaryYn,
+ headlineTitleYn,
+ translationYn,
+ page,
+ size,
+ } = params
+
+ const config = useRuntimeConfig()
+ const stoveApiBaseUrl = config.public.stoveApiUrl
+ const apiUrl = `${stoveApiBaseUrl}/cwms/v3.0/article_group/${articleGroupCode}/${articleGroupSeq}/article/list`
+
+ const queryParams: Record = {
+ lang: lang,
+ sort_type_code: sortTypeCode,
+ interaction_type_code: interactionTypeCodes?.join(','),
+ handle_code: handleCode ? 'Y' : 'N',
+ content_yn: contentYn ? 'Y' : 'N',
+ summary_yn: summaryYn ? 'Y' : 'N',
+ headline_title_yn: headlineTitleYn ? 'Y' : 'N',
+ translation_yn: translationYn ? 'Y' : 'N',
+ page: page,
+ size: size,
+ }
+
+ const response = (await commonFetch('GET', apiUrl, {
+ query: queryParams,
+ loading: true,
+ })) as CwmsArticleDataResponse | null
if (response?.code === 0 && 'value' in response) {
return response.value
@@ -36,6 +97,7 @@ export const useResourcesData = () => {
}
return {
- getResourcesData,
+ getOperateResourcesData,
+ getCwmsArticleData,
}
}
diff --git a/layers/composables/useTemplateRegistry.ts b/layers/composables/useTemplateRegistry.ts
index bbca03e..8f97ba3 100644
--- a/layers/composables/useTemplateRegistry.ts
+++ b/layers/composables/useTemplateRegistry.ts
@@ -7,7 +7,7 @@ import GrGallery03 from '#layers/templates/GrGallery03/index.vue'
import GrDetail01 from '#layers/templates/GrDetail01/index.vue'
import GrDetail02 from '#layers/templates/GrDetail02/index.vue'
import GrDetail03 from '#layers/templates/GrDetail03/index.vue'
-// import GrBoard01 from '#layers/templates/GrBoard01/index.vue'
+import GrBoard01 from '#layers/templates/GrBoard01/index.vue'
import GrContents01 from '#layers/templates/GrContents01/index.vue'
const templateRegistry = {
@@ -17,7 +17,7 @@ const templateRegistry = {
GR_GALLERY_01: { component: GrGallery01 },
GR_GALLERY_02: { component: GrGallery02 },
GR_GALLERY_03: { component: GrGallery03 },
- // GR_BOARD_01: { component: GrBoard01 },
+ GR_BOARD_01: { component: GrBoard01 },
GR_DETAIL_01: { component: GrDetail01 },
GR_DETAIL_02: { component: GrDetail02 },
GR_DETAIL_03: { component: GrDetail03 },
diff --git a/layers/composables/useTokenValidation.ts b/layers/composables/useTokenValidation.ts
index dbd514d..b5c2a93 100644
--- a/layers/composables/useTokenValidation.ts
+++ b/layers/composables/useTokenValidation.ts
@@ -1,6 +1,6 @@
export function useTokenValidation() {
- const runtimeConfig = useRuntimeConfig()
- const apiBaseUrl = `${runtimeConfig.public.stoveApiUrl}`
+ const config = useRuntimeConfig()
+ const apiBaseUrl = `${config.public.stoveApiUrl}`
const isTokenValid = ref(false)
const validateToken = async (token: string) => {
diff --git a/layers/templates/GrBoard01/index.vue b/layers/templates/GrBoard01/index.vue
index b4f5b11..6573aac 100644
--- a/layers/templates/GrBoard01/index.vue
+++ b/layers/templates/GrBoard01/index.vue
@@ -1,12 +1,8 @@
-
+
{
:resources-data="mainTitleData"
class="title-md"
/>
-
-
-
-
-
-
-
-
+ class="mt-[48px] md:mt-[64px]"
+ />
+
diff --git a/layers/templates/GrGallery01/index.vue b/layers/templates/GrGallery01/index.vue
index eb3bafe..5890452 100644
--- a/layers/templates/GrGallery01/index.vue
+++ b/layers/templates/GrGallery01/index.vue
@@ -114,7 +114,6 @@ const onArrowClick = (direction, targetIndex) => {
ref="slideThumbnailRef"
:slide-data="slideData"
variant="media"
- :drag="false"
class="mt-[24px] md:mt-[32px]"
:pagination-data="paginationData"
@move="stopVideo"
diff --git a/layers/templates/GrGallery02/index.vue b/layers/templates/GrGallery02/index.vue
index 7939811..225179d 100644
--- a/layers/templates/GrGallery02/index.vue
+++ b/layers/templates/GrGallery02/index.vue
@@ -99,7 +99,10 @@ const onArrowClick = (direction, targetIndex) => {
diff --git a/layers/templates/GrVisual02/index.vue b/layers/templates/GrVisual02/index.vue
index 0d0abb9..e093e27 100644
--- a/layers/templates/GrVisual02/index.vue
+++ b/layers/templates/GrVisual02/index.vue
@@ -17,7 +17,7 @@ interface Props {
const props = defineProps()
const pageDataStore = usePageDataStore()
-const { getResourcesData } = useResourcesData()
+const { getOperateResourcesData } = useResourcesData()
const { locale } = useI18n()
const { sendLog, useAnalyticsLogDataDirect } = useAnalytics()
@@ -43,7 +43,7 @@ const { data: slideData } = await useAsyncData(
return []
}
- const operateGroupList = await getResourcesData({
+ const operateGroupList = await getOperateResourcesData({
pageSeq: pageData.value.page_seq,
pageVer: pageData.value.page_ver,
pageVerTmplSeq: props.pageVerTmplSeq,
diff --git a/layers/templates/GrVisual03/index.vue b/layers/templates/GrVisual03/index.vue
index 08fc306..4765c93 100644
--- a/layers/templates/GrVisual03/index.vue
+++ b/layers/templates/GrVisual03/index.vue
@@ -6,7 +6,6 @@ import {
getComponentGroup,
hasComponentGroup,
} from '#layers/utils/dataUtil'
-import { getPaginationClass } from '#layers/utils/styleUtil'
import type { PageDataTemplateComponents } from '#layers/types/api/pageData'
interface Props {
diff --git a/layers/types/api/gameData.ts b/layers/types/api/gameData.ts
index 140c940..b45dae1 100644
--- a/layers/types/api/gameData.ts
+++ b/layers/types/api/gameData.ts
@@ -38,6 +38,7 @@ export interface GameDataValue {
favicon_json: GameDataFavicon
meta_tag_json: GameDataMetaTag
sns_json: GameDataSns
+ url_json: Record
footer_json: string // JSON 문자열로 변경
comm_img_json: GameDataCommImg
market_json: Record
diff --git a/layers/types/api/resourcesData.ts b/layers/types/api/resourcesData.ts
index 0201199..ae0589f 100644
--- a/layers/types/api/resourcesData.ts
+++ b/layers/types/api/resourcesData.ts
@@ -2,7 +2,7 @@
* Resources Data API 타입 정의
*/
-// 리스트 운영 그룹 아이템
+// OperateResources
export interface OperateGroupItem {
seq: number
flag_type?: number
@@ -25,15 +25,13 @@ export interface OperateComponents {
[key: string]: OperateGroupList
}
-// Resources Data API 응답
-export interface ResourcesDataResponse {
+export interface OperateResourcesDataResponse {
code: number
message: string
value: OperateComponents
}
-// getResourcesData 함수 파라미터
-export interface GetResourcesDataParams {
+export interface getOperateResourcesDataParams {
pageSeq: string
pageVer: string
pageVerTmplSeq: number
@@ -41,3 +39,83 @@ export interface GetResourcesDataParams {
q?: string
qc?: string
}
+
+// CwmsArticle
+export interface CwmsArticleAdminOptionSummary {
+ notice_cancel_reservation_yn: 'Y' | 'N'
+ publish_reservation_yn: 'Y' | 'N'
+}
+
+export interface CwmsArticleAttachSummary {
+ image_yn: 'Y' | 'N'
+ movie_yn: 'Y' | 'N'
+ poll_yn: 'Y' | 'N'
+ attach_file_yn: 'Y' | 'N'
+ music_yn: 'Y' | 'N'
+ script_yn: 'Y' | 'N'
+}
+
+export interface CwmsArticleSnapshotUserInfo {
+ nickname: string
+ profile_img: string
+}
+export interface CwmsArticleUserInfo {
+ stove_nickname?: string
+ user_game_info?: Record
+ snapshot_user_info?: CwmsArticleSnapshotUserInfo
+}
+
+export interface CwmsArticleItem {
+ board_seq: number
+ channel_key: string
+ channel_seq: number
+ article_id: string
+ headline_info?: {
+ headline_seq: number
+ headline_name: string
+ }
+ fixed_yn?: 'Y' | 'N'
+ title: string
+ subtitle: string
+ content?: string
+ summary?: string
+ media_thumbnail_url: string | null
+ media_count: number
+ user_interaction_score_info: Record
+ create_datetime: number
+ update_datetime: number
+ article_status_code: string
+ user_info: CwmsArticleUserInfo
+ attach_summary_info: CwmsArticleAttachSummary
+ admin_option_summary_info: CwmsArticleAdminOptionSummary
+ view_mode: string
+ source_lang: string | null
+ target_lang?: string | null
+ translation_status: string | null
+}
+
+export interface CwmsArticleData {
+ total: number
+ page: number
+ size: number
+ list: CwmsArticleItem[]
+}
+
+export interface CwmsArticleDataResponse {
+ code: number
+ message: string
+ value: CwmsArticleData
+}
+
+export interface getCwmsArticleDataParams {
+ lang?: string
+ sortTypeCode?: string
+ interactionTypeCodes?: string[]
+ handleCode?: boolean
+ contentYn?: boolean
+ summaryYn?: boolean
+ headlineTitleYn?: boolean
+ translationYn?: boolean
+ page?: number
+ size?: number
+}
diff --git a/layers/utils/stoveUtil.ts b/layers/utils/stoveUtil.ts
index ee6a019..8126e79 100644
--- a/layers/utils/stoveUtil.ts
+++ b/layers/utils/stoveUtil.ts
@@ -9,10 +9,10 @@ import { csrFormatJWT } from '#layers/utils/formatUtil'
* Stove 로그인
*/
export const csrGoStoveLogin = () => {
- const runtimeConfig = useRuntimeConfig()
+ const config = useRuntimeConfig()
const gameDataStore = useGameDataStore()
- const loginUrl = runtimeConfig.public.stoveLoginUrl
+ const loginUrl = config.public.stoveLoginUrl
const stoveGameId = gameDataStore.gameData?.game_id
const stoveGameNo = gameDataStore.gameData?.game_code
const redirectUrl = encodeURIComponent(location.href)
diff --git a/public/images/sample/GR_DETAIL_01/common/bg02.jpg b/public/images/sample/GR_DETAIL_01/common/bg02.jpg
index 4250e0a..b1564b1 100644
Binary files a/public/images/sample/GR_DETAIL_01/common/bg02.jpg and b/public/images/sample/GR_DETAIL_01/common/bg02.jpg differ
diff --git a/public/images/sample/GR_DETAIL_01/common/bg02_m.jpg b/public/images/sample/GR_DETAIL_01/common/bg02_m.jpg
index 6c6e2d8..ed9a9d1 100644
Binary files a/public/images/sample/GR_DETAIL_01/common/bg02_m.jpg and b/public/images/sample/GR_DETAIL_01/common/bg02_m.jpg differ
diff --git a/public/images/sample/GR_GALLERY_01/common/bgVideo01.mp4 b/public/images/sample/GR_DETAIL_03/common/video02.mp4
similarity index 51%
rename from public/images/sample/GR_GALLERY_01/common/bgVideo01.mp4
rename to public/images/sample/GR_DETAIL_03/common/video02.mp4
index 6e984e1..1343b55 100644
Binary files a/public/images/sample/GR_GALLERY_01/common/bgVideo01.mp4 and b/public/images/sample/GR_DETAIL_03/common/video02.mp4 differ
diff --git a/public/images/sample/GR_DETAIL_03/common/video02_m.mp4 b/public/images/sample/GR_DETAIL_03/common/video02_m.mp4
new file mode 100644
index 0000000..9fa48f9
Binary files /dev/null and b/public/images/sample/GR_DETAIL_03/common/video02_m.mp4 differ
diff --git a/public/images/sample/GR_GALLERY_02/common/bgVideo01.mp4 b/public/images/sample/GR_DETAIL_03/common/video03.mp4
similarity index 51%
rename from public/images/sample/GR_GALLERY_02/common/bgVideo01.mp4
rename to public/images/sample/GR_DETAIL_03/common/video03.mp4
index 6e984e1..1343b55 100644
Binary files a/public/images/sample/GR_GALLERY_02/common/bgVideo01.mp4 and b/public/images/sample/GR_DETAIL_03/common/video03.mp4 differ
diff --git a/public/images/sample/GR_DETAIL_03/common/video03_m.mp4 b/public/images/sample/GR_DETAIL_03/common/video03_m.mp4
new file mode 100644
index 0000000..9fa48f9
Binary files /dev/null and b/public/images/sample/GR_DETAIL_03/common/video03_m.mp4 differ
diff --git a/public/images/sample/GR_GALLERY_01/common/bg.jpg b/public/images/sample/GR_GALLERY_01/common/bg.jpg
new file mode 100644
index 0000000..fb82f96
Binary files /dev/null and b/public/images/sample/GR_GALLERY_01/common/bg.jpg differ
diff --git a/public/images/sample/GR_GALLERY_01/common/bg_m.jpg b/public/images/sample/GR_GALLERY_01/common/bg_m.jpg
new file mode 100644
index 0000000..4ceec1d
Binary files /dev/null and b/public/images/sample/GR_GALLERY_01/common/bg_m.jpg differ
diff --git a/public/images/sample/GR_GALLERY_01/ko/img_slide01.png b/public/images/sample/GR_GALLERY_01/ko/img_slide01.png
deleted file mode 100644
index b5242d6..0000000
Binary files a/public/images/sample/GR_GALLERY_01/ko/img_slide01.png and /dev/null differ
diff --git a/public/images/sample/GR_GALLERY_01/ko/img_slide02.png b/public/images/sample/GR_GALLERY_01/ko/img_slide02.png
deleted file mode 100644
index 295e4bb..0000000
Binary files a/public/images/sample/GR_GALLERY_01/ko/img_slide02.png and /dev/null differ
diff --git a/public/images/sample/GR_GALLERY_01/ko/img_slide03.png b/public/images/sample/GR_GALLERY_01/ko/img_slide03.png
deleted file mode 100644
index b40a163..0000000
Binary files a/public/images/sample/GR_GALLERY_01/ko/img_slide03.png and /dev/null differ
diff --git a/public/images/sample/GR_GALLERY_01/zh-tw/img_slide01.png b/public/images/sample/GR_GALLERY_01/zh-tw/img_slide01.png
deleted file mode 100644
index b5242d6..0000000
Binary files a/public/images/sample/GR_GALLERY_01/zh-tw/img_slide01.png and /dev/null differ
diff --git a/public/images/sample/GR_GALLERY_01/zh-tw/img_slide02.png b/public/images/sample/GR_GALLERY_01/zh-tw/img_slide02.png
deleted file mode 100644
index 295e4bb..0000000
Binary files a/public/images/sample/GR_GALLERY_01/zh-tw/img_slide02.png and /dev/null differ
diff --git a/public/images/sample/GR_GALLERY_01/zh-tw/img_slide03.png b/public/images/sample/GR_GALLERY_01/zh-tw/img_slide03.png
deleted file mode 100644
index b40a163..0000000
Binary files a/public/images/sample/GR_GALLERY_01/zh-tw/img_slide03.png and /dev/null differ
diff --git a/public/images/sample/GR_GALLERY_01/common/bg01.jpg b/public/images/sample/GR_GALLERY_02/common/bg.jpg
similarity index 100%
rename from public/images/sample/GR_GALLERY_01/common/bg01.jpg
rename to public/images/sample/GR_GALLERY_02/common/bg.jpg
diff --git a/public/images/sample/GR_GALLERY_02/common/bg01.jpg b/public/images/sample/GR_GALLERY_02/common/bg01.jpg
deleted file mode 100644
index 4250e0a..0000000
Binary files a/public/images/sample/GR_GALLERY_02/common/bg01.jpg and /dev/null differ
diff --git a/public/images/sample/GR_GALLERY_02/common/bg01_m.jpg b/public/images/sample/GR_GALLERY_02/common/bg01_m.jpg
deleted file mode 100644
index 6c6e2d8..0000000
Binary files a/public/images/sample/GR_GALLERY_02/common/bg01_m.jpg and /dev/null differ
diff --git a/public/images/sample/GR_GALLERY_01/common/bg01_m.jpg b/public/images/sample/GR_GALLERY_02/common/bg_m.jpg
similarity index 100%
rename from public/images/sample/GR_GALLERY_01/common/bg01_m.jpg
rename to public/images/sample/GR_GALLERY_02/common/bg_m.jpg
diff --git a/public/images/sample/GR_GALLERY_02/ko/img_slide01_m.jpg b/public/images/sample/GR_GALLERY_02/ko/img_slide01_m.jpg
new file mode 100644
index 0000000..bb4361b
Binary files /dev/null and b/public/images/sample/GR_GALLERY_02/ko/img_slide01_m.jpg differ
diff --git a/public/images/sample/GR_GALLERY_02/ko/img_slide02_m.jpg b/public/images/sample/GR_GALLERY_02/ko/img_slide02_m.jpg
new file mode 100644
index 0000000..bb4361b
Binary files /dev/null and b/public/images/sample/GR_GALLERY_02/ko/img_slide02_m.jpg differ
diff --git a/public/images/sample/GR_GALLERY_02/ko/img_slide03_m .jpg b/public/images/sample/GR_GALLERY_02/ko/img_slide03_m .jpg
new file mode 100644
index 0000000..bb4361b
Binary files /dev/null and b/public/images/sample/GR_GALLERY_02/ko/img_slide03_m .jpg differ
diff --git a/public/images/sample/GR_GALLERY_02/zh-tw/img_slide01_m.jpg b/public/images/sample/GR_GALLERY_02/zh-tw/img_slide01_m.jpg
new file mode 100644
index 0000000..bb4361b
Binary files /dev/null and b/public/images/sample/GR_GALLERY_02/zh-tw/img_slide01_m.jpg differ
diff --git a/public/images/sample/GR_GALLERY_02/zh-tw/img_slide02_m.jpg b/public/images/sample/GR_GALLERY_02/zh-tw/img_slide02_m.jpg
new file mode 100644
index 0000000..bb4361b
Binary files /dev/null and b/public/images/sample/GR_GALLERY_02/zh-tw/img_slide02_m.jpg differ
diff --git a/public/images/sample/GR_GALLERY_02/zh-tw/img_slide03_m .jpg b/public/images/sample/GR_GALLERY_02/zh-tw/img_slide03_m .jpg
new file mode 100644
index 0000000..bb4361b
Binary files /dev/null and b/public/images/sample/GR_GALLERY_02/zh-tw/img_slide03_m .jpg differ
diff --git a/public/images/sample/GR_GALLERY_03/common/bg.jpg b/public/images/sample/GR_GALLERY_03/common/bg.jpg
new file mode 100644
index 0000000..55a463e
Binary files /dev/null and b/public/images/sample/GR_GALLERY_03/common/bg.jpg differ
diff --git a/public/images/sample/GR_GALLERY_03/common/bg01.jpg b/public/images/sample/GR_GALLERY_03/common/bg01.jpg
deleted file mode 100644
index 4250e0a..0000000
Binary files a/public/images/sample/GR_GALLERY_03/common/bg01.jpg and /dev/null differ
diff --git a/public/images/sample/GR_GALLERY_03/common/bg01_m.jpg b/public/images/sample/GR_GALLERY_03/common/bg01_m.jpg
deleted file mode 100644
index 6c6e2d8..0000000
Binary files a/public/images/sample/GR_GALLERY_03/common/bg01_m.jpg and /dev/null differ
diff --git a/public/images/sample/GR_GALLERY_03/common/bgVideo01.mp4 b/public/images/sample/GR_GALLERY_03/common/bgVideo01.mp4
deleted file mode 100644
index 6e984e1..0000000
Binary files a/public/images/sample/GR_GALLERY_03/common/bgVideo01.mp4 and /dev/null differ
diff --git a/public/images/sample/GR_GALLERY_03/common/bg_m.jpg b/public/images/sample/GR_GALLERY_03/common/bg_m.jpg
new file mode 100644
index 0000000..28c069e
Binary files /dev/null and b/public/images/sample/GR_GALLERY_03/common/bg_m.jpg differ
diff --git a/public/images/sample/GR_VISUAL_01/ko/img_card1.jpg b/public/images/sample/GR_VISUAL_01/ko/img_card1.jpg
deleted file mode 100644
index 8415921..0000000
Binary files a/public/images/sample/GR_VISUAL_01/ko/img_card1.jpg and /dev/null differ
diff --git a/public/images/sample/GR_VISUAL_01/ko/title_main_m.png b/public/images/sample/GR_VISUAL_01/ko/title_main_m.png
new file mode 100644
index 0000000..dd80cdf
Binary files /dev/null and b/public/images/sample/GR_VISUAL_01/ko/title_main_m.png differ
diff --git a/public/images/sample/GR_VISUAL_01/ko/sub_title.png b/public/images/sample/GR_VISUAL_01/ko/title_sub.png
similarity index 100%
rename from public/images/sample/GR_VISUAL_01/ko/sub_title.png
rename to public/images/sample/GR_VISUAL_01/ko/title_sub.png
diff --git a/public/images/sample/GR_VISUAL_01/ko/title_sub_m.png b/public/images/sample/GR_VISUAL_01/ko/title_sub_m.png
new file mode 100644
index 0000000..20b4f31
Binary files /dev/null and b/public/images/sample/GR_VISUAL_01/ko/title_sub_m.png differ
diff --git a/public/images/sample/GR_VISUAL_01/zh-tw/title_main_m.png b/public/images/sample/GR_VISUAL_01/zh-tw/title_main_m.png
new file mode 100644
index 0000000..dd80cdf
Binary files /dev/null and b/public/images/sample/GR_VISUAL_01/zh-tw/title_main_m.png differ
diff --git a/public/images/sample/GR_VISUAL_01/zh-tw/sub_title.png b/public/images/sample/GR_VISUAL_01/zh-tw/title_sub.png
similarity index 100%
rename from public/images/sample/GR_VISUAL_01/zh-tw/sub_title.png
rename to public/images/sample/GR_VISUAL_01/zh-tw/title_sub.png
diff --git a/public/images/sample/GR_VISUAL_01/zh-tw/title_sub_m.png b/public/images/sample/GR_VISUAL_01/zh-tw/title_sub_m.png
new file mode 100644
index 0000000..20b4f31
Binary files /dev/null and b/public/images/sample/GR_VISUAL_01/zh-tw/title_sub_m.png differ
diff --git a/public/images/sample/GR_VISUAL_02/common/bg01_m.jpg b/public/images/sample/GR_VISUAL_02/common/bg01_m.jpg
index 182d717..169d11c 100644
Binary files a/public/images/sample/GR_VISUAL_02/common/bg01_m.jpg and b/public/images/sample/GR_VISUAL_02/common/bg01_m.jpg differ
diff --git a/public/images/sample/GR_VISUAL_02/ko/title_main_m.png b/public/images/sample/GR_VISUAL_02/ko/title_main_m.png
new file mode 100644
index 0000000..dd80cdf
Binary files /dev/null and b/public/images/sample/GR_VISUAL_02/ko/title_main_m.png differ
diff --git a/public/images/sample/GR_VISUAL_02/ko/sub_title.png b/public/images/sample/GR_VISUAL_02/ko/title_sub.png
similarity index 100%
rename from public/images/sample/GR_VISUAL_02/ko/sub_title.png
rename to public/images/sample/GR_VISUAL_02/ko/title_sub.png
diff --git a/public/images/sample/GR_VISUAL_02/ko/title_sub_m.png b/public/images/sample/GR_VISUAL_02/ko/title_sub_m.png
new file mode 100644
index 0000000..20b4f31
Binary files /dev/null and b/public/images/sample/GR_VISUAL_02/ko/title_sub_m.png differ
diff --git a/public/images/sample/GR_VISUAL_02/zh-tw/title_main_m.png b/public/images/sample/GR_VISUAL_02/zh-tw/title_main_m.png
new file mode 100644
index 0000000..dd80cdf
Binary files /dev/null and b/public/images/sample/GR_VISUAL_02/zh-tw/title_main_m.png differ
diff --git a/public/images/sample/GR_VISUAL_02/zh-tw/sub_title.png b/public/images/sample/GR_VISUAL_02/zh-tw/title_sub.png
similarity index 100%
rename from public/images/sample/GR_VISUAL_02/zh-tw/sub_title.png
rename to public/images/sample/GR_VISUAL_02/zh-tw/title_sub.png
diff --git a/public/images/sample/GR_VISUAL_02/zh-tw/title_sub_m.png b/public/images/sample/GR_VISUAL_02/zh-tw/title_sub_m.png
new file mode 100644
index 0000000..20b4f31
Binary files /dev/null and b/public/images/sample/GR_VISUAL_02/zh-tw/title_sub_m.png differ
diff --git a/public/images/sample/GR_VISUAL_03/common/bg01_m.jpg b/public/images/sample/GR_VISUAL_03/common/bg01_m.jpg
new file mode 100644
index 0000000..3d8acf5
Binary files /dev/null and b/public/images/sample/GR_VISUAL_03/common/bg01_m.jpg differ
diff --git a/public/images/sample/GR_VISUAL_03/common/bg02_m.jpg b/public/images/sample/GR_VISUAL_03/common/bg02_m.jpg
new file mode 100644
index 0000000..3d8acf5
Binary files /dev/null and b/public/images/sample/GR_VISUAL_03/common/bg02_m.jpg differ
diff --git a/public/images/sample/GR_VISUAL_03/common/bg03_m.jpg b/public/images/sample/GR_VISUAL_03/common/bg03_m.jpg
new file mode 100644
index 0000000..3d8acf5
Binary files /dev/null and b/public/images/sample/GR_VISUAL_03/common/bg03_m.jpg differ