From 0b15d31f3e6cdde414d4b5214272592941901acd Mon Sep 17 00:00:00 2001
From: j2an777 <ha991104@gmail.com>
Date: Wed, 10 Jul 2024 18:47:09 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EC=95=88=EB=82=B4=EB=AC=B8=EA=B5=AC=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../gallery/components/galleryTemplate/threed/index.tsx  | 5 +++++
 .../gallery/components/galleryTemplate/threed/styles.ts  | 6 ++++++
 src/pages/post/components/stepThree/index.tsx            | 2 +-
 src/pages/post/components/stepThree/styles.ts            | 9 +++++++++
 4 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/src/pages/gallery/components/galleryTemplate/threed/index.tsx b/src/pages/gallery/components/galleryTemplate/threed/index.tsx
index af8f5f2..8b7555e 100644
--- a/src/pages/gallery/components/galleryTemplate/threed/index.tsx
+++ b/src/pages/gallery/components/galleryTemplate/threed/index.tsx
@@ -71,6 +71,11 @@ const GalleryThreed = ({ galleryData }: GalleryDataProps) => {
       </Canvas>
       <S.BtnBlock>
         <S.Btn className='previous' onClick={() => onHandleChange('previous')}><Icon value='leftArrow' size={50} color='white'/></S.Btn>
+        <p>
+          클릭 : 해당 작품으로 이동
+          <br/>
+          더블 클릭 : 해당 작품에 대한 설명창
+        </p>
         <S.Btn className='next' onClick={() => onHandleChange('next')}><Icon value='rightArrow' size={50} color='white'/></S.Btn>
       </S.BtnBlock>
       <GalleryDetailPortal />
diff --git a/src/pages/gallery/components/galleryTemplate/threed/styles.ts b/src/pages/gallery/components/galleryTemplate/threed/styles.ts
index 41902f6..097d9bc 100644
--- a/src/pages/gallery/components/galleryTemplate/threed/styles.ts
+++ b/src/pages/gallery/components/galleryTemplate/threed/styles.ts
@@ -1,3 +1,4 @@
+import { colors } from "@/styles/colorPalette";
 import styled from "@emotion/styled";
 
 export const Container = styled.div`
@@ -19,6 +20,11 @@ export const BtnBlock = styled.div`
     padding : 0 300px;
     transform: translateX(-50%);
 
+    p {
+        text-align: center;
+        color: ${colors.gray100};
+    }
+
     @media (max-width : 1024px) {
         width : 90vw;
         padding : 0 50px;
diff --git a/src/pages/post/components/stepThree/index.tsx b/src/pages/post/components/stepThree/index.tsx
index 3431fda..acafd36 100644
--- a/src/pages/post/components/stepThree/index.tsx
+++ b/src/pages/post/components/stepThree/index.tsx
@@ -67,7 +67,7 @@ const StepTree = () => {
     <S.Container>
       <S.Step>
         <Icon value="step_three" $active={false} />
-        <Text>템플릿을 선택하세요.</Text>
+        <Text className='explain'>템플릿을 선택하세요.<br/><span>모바일 환경에서는 공통으로 모바일 템플릿이 적용됩니다.</span></Text>
       </S.Step>
       <S.TemplateBox>
         <S.TemplateBlock>
diff --git a/src/pages/post/components/stepThree/styles.ts b/src/pages/post/components/stepThree/styles.ts
index 04c0173..fbc397a 100644
--- a/src/pages/post/components/stepThree/styles.ts
+++ b/src/pages/post/components/stepThree/styles.ts
@@ -5,6 +5,7 @@ import { Text } from '@/components';
 import { containerQuery } from '@/styles/breakpoints';
 import { Breakpoints } from '../../styles';
 import { LayoutMap } from '@/styles/layout';
+import { typographyMap } from '@/styles/typography';
 
 export const Container = styled.div`
   position: relative;
@@ -36,6 +37,14 @@ export const Step = styled.div`
   top: 60px;
   right: 2px;
 
+  .explain {
+    text-align: center;
+    span {
+      ${typographyMap.t6};
+      color: ${colors.gray400};
+    }
+  }
+
   ${containerQuery({
     containerName: 'post',
     styles: `