Merge pull request #154 from Goorm-Lucky7/dev

[deploy] 전시 생성, 3D 템플릿에 문구 추가

README.md

@@ -1,28 +1,26 @@
 # 💛 FINAL 프로젝트 feat.D'art
 
-<a href="https://www.dartgallery.site/">![testset](https://github.com/Goorm-Lucky7/Dart_FE/assets/83047601/63fb8b40-9de7-4c01-87b2-8b9b61c74be7)
+<a href="https://www.dartgallery.site/">![Mock Up](https://github.com/Goorm-Lucky7/Dart_FE/assets/110087099/22bbf4a6-da3f-4570-b29b-604a7d6ff1d8)
 </a>
 <br/>
 
 **프로젝트 기간** : 2024.05.22 ~ 2024.07.11
 
-🔗 [D'art 서비스 둘러보기](https://www.dartgallery.site/) (데스크탑/태블릿 환경에서 이용 가능)
+🔗 [D'art 서비스 둘러보기](https://www.dartgallery.site/) (데스크탑/태블릿/모바일 환경에서 이용 가능)
 
 🎬 [시연 영상 보러가기 ](--)
 <br/>
 <br/>
 
 ## ✨ 프로젝트 소개
 
-### 누구나 예술가가 될 수 있다!
-
-- ThinkTank은 개발자를 위한 **알고리즘 문제풀이 기반 소셜 플랫폼**입니다.
-- 각 유저들은 서로 문제 생성 및 풀이를 통해 상호작용이 이루어집니다.
-- 소셜 플랫폼을 기반한 서비스 구조로 친숙하게 서로간 문제를 공유 및 피드백 가능합니다.
-  <br/># 💛 WebIDE 프로젝트 feat.ThinkTank
+### 예술의 X. D'art
 
-<a href="https://d26i62iijbw0u2.cloudfront.net/">![testset](https://github.com/Goorm-Lucky7/Dart_FE/assets/83047601/63fb8b40-9de7-4c01-87b2-8b9b61c74be7)
-</a>
+- D'art는 누구나 참여가능한 **작품 전시 플랫폼**입니다.
+- 디자이너가 아니더라도 누구나 자신이 평소에 공유하고 싶어하는 작업물, 취미 기록 등을 전시 형태로 남기실 수 있습니다.
+- 전시는 여러 사용자들이 관람 뿐 아니라 채팅을 통해 서로 의사소통 가능합니다.
+- 전시 작가는 다양한 템플릿으로 전시를 할 수 있습니다.
+- 오프라인 뿐 아니라 온라인에서도 홍보를 하고싶어 할 경우에 유용한 플랫폼입니다.
 <br/>
 
 **프로젝트 기간** : 2024.05.22 ~ 2024.07.11
@@ -33,15 +31,6 @@
 <br/>
 <br/>
 
-## ✨ 프로젝트 소개
-
-### Think, Share, Develop, **ThinkTank**
-
-- ThinkTank은 개발자를 위한 **알고리즘 문제풀이 기반 소셜 플랫폼**입니다.
-- 각 유저들은 서로 문제 생성 및 풀이를 통해 상호작용이 이루어집니다.
-- 소셜 플랫폼을 기반한 서비스 구조로 친숙하게 서로간 문제를 공유 및 피드백 가능합니다.
-  <br/>
-
 ## ⭐️ 주요 기능
 
 ### 📌 인트로
@@ -133,13 +122,13 @@
 | --------------------------------------------- | ------------------------------------------- | ----------------------------------------- | --- |
 | [강신범](https://github.com/kangsinbeom)      | [김수현](https://github.com/gamjatan9)      | [하승진](https://github.com/j2an777)      |
 | **FrontEnd**                                  | **FrontEnd**                                | **FrontEnd**                              |     |
-| FE 팀장, 문제 생성 및 풀이, 배포              | 로그인, 회원가입, 마이페이지                | 메인페이지, 라우팅, 메뉴, 좋아요          |
+| FE 팀장, 에러처리, 데이터와 토큰 관리, 배포, 메인 페이지, 공통 컴포넌트와 훅 생성              | 폼 관리, 실시간 채팅, 결제 시스템, 전시 생성 페이지                | 전시 페이지, 모달 기능, 저작권 침해 방지 마련, 전시 생성 ux 강화          |
 
 <br/>
 
 ## ✔ 아키텍처
 
-<img width="833" alt="architecture" src="https://github.com/j2an777/ThinkTank_FE/assets/110087099/6623c7cb-e595-45b6-a970-df7e1d5cb0f9">
+<img width="833" alt="architecture" src="https://github.com/Goorm-Lucky7/Dart_FE/assets/110087099/fbe660e0-bb4d-44f8-a9fc-d90a2b8d063d">
 
 <br/>
 
@@ -161,7 +150,7 @@ src
   ㄴ mock (mocking서버 api)
   ᄂ hooks (공통 커스텀 훅)
   ᄂ pages (페이지)
-    ᄂ cllback
+    ᄂ callback
     ᄂ chatModal
     ᄂ contact
     ᄂ editMemberInfo

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 />

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;

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>

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: `