fix: 안내문구 추가 적용

Goorm-Lucky7 · Jul 10, 2024 · 0b15d31 · 0b15d31
1 parent 64ea45b
commit 0b15d31
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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
@@ -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: `