feat: 브라우저 새 탭으로 이동하는 기능 추가

브라우저의 아이콘을 클릭하면 해당 url을 새 탭으로 이동하는 기능을 추가했습니다. 해당 프로젝트가 템플릿 프로젝트라면 토스트를 띄웠습니다.
connect-foundation · Dec 22, 2019 · a42f305 · a42f305
1 parent 34db13d
commit a42f305
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 28 deletions.
diff --git a/cocode/src/components/Project/BrowserV2/index.js b/cocode/src/components/Project/BrowserV2/index.js
@@ -8,6 +8,7 @@ import React, {
 import { useParams } from 'react-router-dom';
 import * as Styled from './style';
 
+import open from './open.svg';
 import search from './search.svg';
 import addToast from 'components/Common/Toast';
 
@@ -30,6 +31,7 @@ import { KEY_CODE_ENTER } from 'constants/keyCode';
 const MIN_WAIT_TIME = 1500;
 const UPDATE_PROJECT = 'updateProject';
 const PROTOCOLS = ['http://', 'https://'];
+const NEW_COCONUT = `${COCONUT_SERVER}/new`;
 
 function BrowserV2({ ...props }) {
 	const { projectId } = useParams();
@@ -137,6 +139,13 @@ function BrowserV2({ ...props }) {
 		iframeReference.current.contentWindow.postMessage(data, '*');
 	}, [project]);
 
+	const handleClickOpenTab = () => {
+		const coconutUrl = addressReference.current.value;
+		if (NEW_COCONUT === coconutUrl)
+			return addToast.error(NOTIFICATION.NEED_TO_SAVE);
+		window.open(coconutUrl, '_blank');
+	};
+
 	useEffect(handleChangeCurrentURL, [projectId]);
 	useEffect(handleUpdateDependency, [dependencyInstalling]);
 	useEffect(handleUpdateFile, [files]);
@@ -154,6 +163,12 @@ function BrowserV2({ ...props }) {
 					defaultValue={addressInputURL}
 					onKeyUp={handleAddressInputKeyDown}
 				/>
+				<Styled.OpenIcon
+					src={open}
+					alt="Open New Tab"
+					title="Open New Tab"
+					onClick={handleClickOpenTab}
+				/>
 			</Styled.AddressContainer>
 			<Styled.BrowserV2
 				ref={iframeReference}

diff --git a/cocode/src/components/Project/BrowserV2/style.js b/cocode/src/components/Project/BrowserV2/style.js
@@ -15,31 +15,6 @@ const BrowserV2 = styled.iframe`
 	}
 `;
 
-const LoadingOverlay = styled.section`
-	& {
-		position: fixed;
-		top: 12vh;
-		left: 0;
-		z-index: 100;
-
-		height: 100vh;
-		width: 100vw;
-
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-		align-items: center;
-
-		background-color: ${BROWSER_THEME.loadingOverlayBGColor};
-
-		p {
-			margin-top: 2rem;
-			font-size: 3rem;
-			font-weight: lighter;
-		}
-	}
-`;
-
 const AddressContainer = styled.div`
 	& {
 		display: flex;
@@ -70,11 +45,20 @@ const SearchIcon = styled.img`
 	}
 `;
 
+const OpenIcon = styled.img`
+	& {
+		height: 100%;
+		padding: 0.4rem 0;
+		background: ${BROWSER_THEME.addressInputBGColor};
+		cursor: pointer;
+	}
+`;
+
 export {
 	Frame,
 	BrowserV2,
-	LoadingOverlay,
 	AddressContainer,
 	AddressInput,
-	SearchIcon
+	SearchIcon,
+	OpenIcon
 };
diff --git a/cocode/src/constants/notificationMessage.js b/cocode/src/constants/notificationMessage.js
@@ -22,6 +22,7 @@ const SUCCESS_FORK = 'Forked Coconut, Success!';
 const CONFLICT_FORK = 'Already forked! Enjoy Coconut!';
 
 const SHUT_DOWN_LIVE_SHARE = 'The live share has been shut down';
+const NEED_TO_SAVE = 'Please change your code and save';
 
 export {
 	FAIL_INSTALL_DEPENDENCY,
@@ -42,5 +43,6 @@ export {
 	LOADING_LIVE,
 	SUCCESS_FORK,
 	CONFLICT_FORK,
-	SHUT_DOWN_LIVE_SHARE
+	SHUT_DOWN_LIVE_SHARE,
+	NEED_TO_SAVE
 };