From 12ee2ed095bec369d488dd49616265ddada64c9a Mon Sep 17 00:00:00 2001 From: esthel Date: Fri, 10 Nov 2023 20:47:13 +0900 Subject: [PATCH 1/7] =?UTF-8?q?feat:=20useState=20=EB=B6=84=EB=A6=AC?= =?UTF-8?q?=EB=A1=9C=20=EC=BA=94=EB=B2=84=EC=8A=A4=20=EB=A0=8C=EB=8D=94?= =?UTF-8?q?=EB=A7=81=20=EB=B0=A9=EC=A7=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: 5nxtnxtnxt <5nxtnxtnxt@gmail.com> --- front/src/App.tsx | 32 ++++---------- front/src/components/Button/Button.tsx | 12 +++++- .../IntroButtonBox/IntroButtonBox.tsx | 42 +++++++++++++++++++ front/src/components/IntroButtonBox/index.tsx | 1 + front/src/components/LoginBox/LoginBox.tsx | 19 +++++++++ front/src/components/LoginBox/index.tsx | 1 + front/src/components/index.tsx | 2 + front/src/utils/theme.tsx | 6 +-- 8 files changed, 86 insertions(+), 29 deletions(-) create mode 100644 front/src/components/IntroButtonBox/IntroButtonBox.tsx create mode 100644 front/src/components/IntroButtonBox/index.tsx create mode 100644 front/src/components/LoginBox/LoginBox.tsx create mode 100644 front/src/components/LoginBox/index.tsx diff --git a/front/src/App.tsx b/front/src/App.tsx index 84aea06..b3fe531 100644 --- a/front/src/App.tsx +++ b/front/src/App.tsx @@ -1,12 +1,12 @@ import { Canvas } from '@react-three/fiber'; -import * as THREE from 'three'; -import Tree from './Tree'; -import Cylinder from './Cylinder'; -import Glass from './Glass'; +// import * as THREE from 'three'; +// import Tree from './Tree'; +// import Cylinder from './Cylinder'; +// import Glass from './Glass'; import { OrbitControls } from '@react-three/drei'; import SnowGlobe from './SnowGlobe'; // import CustomCamera from './CustomCamera'; -import { Button } from './components'; +import { IntroButtonBox } from './components'; import GlobalStyles from './GlobalStyles'; import styled from 'styled-components'; import theme from './utils/theme'; @@ -16,22 +16,10 @@ const CanvasBox = styled.div` width: 100vw; height: 100vh; @media (min-width: ${theme.size['--desktop-min-width']}) { - width: ${theme.size['--dexktop-width']}; + width: ${theme.size['--desktop-width']}; } `; -const ButtonBox = styled.div` - position: fixed; - width: 100%; - bottom: 0px; - display: flex; - flex-direction: column; - gap: 4px; - padding: 16px; - align-items: center; - margin: auto; -`; - const App = () => { return ( <> @@ -55,13 +43,7 @@ const App = () => { - - ; +}; + +const LoginBox = () => { + return ( +
+ + + +
+ ); +}; + +export default LoginBox; diff --git a/front/src/components/LoginBox/index.tsx b/front/src/components/LoginBox/index.tsx new file mode 100644 index 0000000..5d79d12 --- /dev/null +++ b/front/src/components/LoginBox/index.tsx @@ -0,0 +1 @@ +export { default as LoginBox } from './LoginBox'; diff --git a/front/src/components/index.tsx b/front/src/components/index.tsx index fe9c53c..65d199d 100644 --- a/front/src/components/index.tsx +++ b/front/src/components/index.tsx @@ -1 +1,3 @@ export { Button } from './Button'; +export { IntroButtonBox } from './IntroButtonBox'; +export { LoginBox } from './LoginBox'; diff --git a/front/src/utils/theme.tsx b/front/src/utils/theme.tsx index 1d3a6f7..05a4373 100644 --- a/front/src/utils/theme.tsx +++ b/front/src/utils/theme.tsx @@ -19,14 +19,14 @@ const font = { const size = { '--desktop-min-width': '1024px', - '--dexktop-width': '800px', + '--desktop-width': '800px', maxWidth: '900px' }; const theme = { colors, - size, - font + font, + size }; export default theme; From 9a019cd14af9d1566b53b52f4a1001b627c75002 Mon Sep 17 00:00:00 2001 From: esthel Date: Sat, 11 Nov 2023 12:59:34 +0900 Subject: [PATCH 2/7] =?UTF-8?q?feat:=20login=20UI=20=EB=B0=8F=20=EC=86=8C?= =?UTF-8?q?=EA=B0=9C=ED=8E=98=EC=9D=B4=EC=A7=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- front/index.html | 2 +- front/public/socialLogin/google.svg | 12 +++ front/public/socialLogin/kakao.svg | 11 +++ front/public/socialLogin/naver.svg | 11 +++ front/src/App.tsx | 11 +++ front/src/GlobalStyles.tsx | 7 ++ .../IntroButtonBox/IntroButtonBox.tsx | 36 ++++--- front/src/components/Introduce/Introduce.tsx | 74 ++++++++++++++ front/src/components/Introduce/index.tsx | 1 + front/src/components/LoginBox/LoginBox.tsx | 97 +++++++++++++++++-- front/src/components/index.tsx | 1 + front/src/utils/theme.tsx | 6 +- 12 files changed, 243 insertions(+), 26 deletions(-) create mode 100644 front/public/socialLogin/google.svg create mode 100644 front/public/socialLogin/kakao.svg create mode 100644 front/public/socialLogin/naver.svg create mode 100644 front/src/components/Introduce/Introduce.tsx create mode 100644 front/src/components/Introduce/index.tsx diff --git a/front/index.html b/front/index.html index e4b78ea..e0d1c84 100644 --- a/front/index.html +++ b/front/index.html @@ -1,4 +1,4 @@ - + diff --git a/front/public/socialLogin/google.svg b/front/public/socialLogin/google.svg new file mode 100644 index 0000000..11eeb40 --- /dev/null +++ b/front/public/socialLogin/google.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/front/public/socialLogin/kakao.svg b/front/public/socialLogin/kakao.svg new file mode 100644 index 0000000..fa4c5ac --- /dev/null +++ b/front/public/socialLogin/kakao.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/front/public/socialLogin/naver.svg b/front/public/socialLogin/naver.svg new file mode 100644 index 0000000..e6d3d93 --- /dev/null +++ b/front/public/socialLogin/naver.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/front/src/App.tsx b/front/src/App.tsx index b3fe531..7960ebe 100644 --- a/front/src/App.tsx +++ b/front/src/App.tsx @@ -11,6 +11,16 @@ import GlobalStyles from './GlobalStyles'; import styled from 'styled-components'; import theme from './utils/theme'; +const Title = styled.div` + color: ${theme.colors['--primary-yellow']}; + font: ${theme.font['--normal-title-font']}; + position: absolute; + top: 15%; + left: 50%; + transform: translate(-50%, 0); + white-space: nowrap; +`; + const CanvasBox = styled.div` margin: auto; width: 100vw; @@ -43,6 +53,7 @@ const App = () => { + 스노우볼 속 내 마음 ); diff --git a/front/src/GlobalStyles.tsx b/front/src/GlobalStyles.tsx index 91943f1..754c070 100644 --- a/front/src/GlobalStyles.tsx +++ b/front/src/GlobalStyles.tsx @@ -19,6 +19,13 @@ const GlobalStyles = createGlobalStyle` font-weight: 700; } + @font-face { + font-family: 'Pretendard-Regular'; + src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff'); + font-weight: 400; + font-style: normal; + } + * { box-sizing: border-box; font-family: 'YClover-Bold'; diff --git a/front/src/components/IntroButtonBox/IntroButtonBox.tsx b/front/src/components/IntroButtonBox/IntroButtonBox.tsx index ea3a789..7f6161b 100644 --- a/front/src/components/IntroButtonBox/IntroButtonBox.tsx +++ b/front/src/components/IntroButtonBox/IntroButtonBox.tsx @@ -2,6 +2,8 @@ import { useState } from 'react'; import styled from 'styled-components'; import theme from '../../utils/theme'; import { Button } from '../Button'; +import { Introduce } from '../Introduce'; +import { LoginBox } from '../LoginBox'; const ButtonBox = styled.div` position: fixed; @@ -10,7 +12,7 @@ const ButtonBox = styled.div` display: flex; flex-direction: column; gap: 4px; - padding: 16px; + padding: 36px; align-items: center; margin: auto; `; @@ -21,20 +23,26 @@ const IntroButtonBox = () => { return ( <> - - ; +const StyledBody = styled.div` + position: fixed; + top: 0; + width: 100vw; + height: 100vh; + background-color: rgba(217, 217, 217, 0.2); +`; + +const StyledLoginBox = styled.div` + background-color: ${theme.colors['--primary-black']}; + position: fixed; + bottom: 0; + left: 50%; + transform: translate(-50%, 0); + display: flex; + flex-direction: column; + justify-content: space-between; + width: 100%; + height: 35%; + padding: 5%; + padding-bottom: 10%; + border-top-left-radius: 20px; + border-top-right-radius: 20px; + + @media (min-width: ${theme.size['--desktop-min-width']}) { + width: ${theme.size['--desktop-width']}; + } +`; + +const StyledLogin = styled.button` + position: relative; + height: 20%; + margin: 1% 0; + border-radius: 12px; +`; + +const StyledLogo = styled.img` + width: 100%; +`; + +const validLogin = ( + event: React.MouseEvent, + props: SocialLogin +) => { + event.stopPropagation(); + console.log(props.social); +}; + +const LoginUI = (props: SocialLogin) => { + return ( + validLogin(event, props)}> + {props.social === '카카오' ? ( + + ) : props.social === '네이버' ? ( + + ) : ( + + )} + + ); }; -const LoginBox = () => { +const LoginBox = (props: LoginProps) => { + const [isFocus, setIsFocus] = useState(true); + return ( -
- - - -
+ { + setIsFocus(false); + props.view[1](!props.view[0]); + }} + > + {isFocus ? ( + + + + + + ) : null} + ); }; diff --git a/front/src/components/index.tsx b/front/src/components/index.tsx index 65d199d..59f5a82 100644 --- a/front/src/components/index.tsx +++ b/front/src/components/index.tsx @@ -1,3 +1,4 @@ export { Button } from './Button'; export { IntroButtonBox } from './IntroButtonBox'; +export { Introduce } from './Introduce'; export { LoginBox } from './LoginBox'; diff --git a/front/src/utils/theme.tsx b/front/src/utils/theme.tsx index 05a4373..10dc14c 100644 --- a/front/src/utils/theme.tsx +++ b/front/src/utils/theme.tsx @@ -1,6 +1,8 @@ const colors = { '--primary-red-primary': '#8A0F0A', '--primary-green-primary': '#25330F', + '--primary-yellow': '#E7AD56', + '--primary-black': '#171921', '--red-p-primary': '#AD280F', '--primary-redp-variant': '#F89F9B', '--black-primary': '#252420', @@ -14,7 +16,9 @@ const colors = { }; //rem이 특정 폰트 기준으로 계산 되는걸로 아는데 const font = { - '--normal-button-font': `normal normal 700 18px/150% 'YUniverse-B'` + '--normal-title-font': 'normal normal 400 32px/normal "YUniverse-B"', + '--normal-introduce-font': 'normal normal 400 18px/150% "YUniverse-B"', + '--normal-button-font': 'normal normal 700 18px/150% "YUniverse-B"' }; const size = { From a663c18a641f39792d27c919c8f7a016f490a2d6 Mon Sep 17 00:00:00 2001 From: esthel Date: Sat, 11 Nov 2023 21:38:35 +0900 Subject: [PATCH 3/7] =?UTF-8?q?feat:=20=EC=86=8C=EA=B0=9C=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20fadeout=20=EC=95=A0=EB=8B=88=EB=A9=94?= =?UTF-8?q?=EC=9D=B4=EC=85=98=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: ChanWoo Kim --- front/src/components/Introduce/Introduce.tsx | 37 ++++++++++++++++---- 1 file changed, 31 insertions(+), 6 deletions(-) diff --git a/front/src/components/Introduce/Introduce.tsx b/front/src/components/Introduce/Introduce.tsx index 53d57bb..46a9c68 100644 --- a/front/src/components/Introduce/Introduce.tsx +++ b/front/src/components/Introduce/Introduce.tsx @@ -1,3 +1,4 @@ +import { useRef } from 'react'; import theme from '../../utils/theme'; import styled from 'styled-components'; @@ -34,6 +35,15 @@ const StyledIntroduce = styled.div` opacity: 1; } } + + @keyframes fadeout { + from { + opacity: 1; + } + to { + opacity: 0; + } + } `; const StyledText = styled.div` @@ -56,15 +66,30 @@ const StyledClosed = styled.button` line-height: normal; `; +const closeIntroduce = ( + props: IntroduceProps, + closeRef: React.RefObject +) => { + const onAnimationEnd = () => { + if (closeRef.current) { + props.view[1](!props.view[0]); + closeRef.current.removeEventListener('animationend', onAnimationEnd); + } + }; + + if (closeRef.current) { + closeRef.current.addEventListener('animationend', onAnimationEnd); + closeRef.current.style.setProperty('animation', 'fadeout 0.5s forwards'); + } +}; + const Introduce = (props: IntroduceProps) => { + const closeRef = useRef(null); + return ( - + 소개글을 입력해주세요. - { - props.view[1](!props.view[0]); - }} - > + closeIntroduce(props, closeRef)}> 닫기 From f7151a237ab8bff423ab80cf75b22b7e78ea8c51 Mon Sep 17 00:00:00 2001 From: esthel Date: Sat, 11 Nov 2023 23:38:18 +0900 Subject: [PATCH 4/7] =?UTF-8?q?feat:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20UI=20?= =?UTF-8?q?without=20animation?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- front/public/socialLogin/google.svg | 11 +++---- front/public/socialLogin/kakao.svg | 10 +++--- front/public/socialLogin/naver.svg | 10 +++--- front/src/components/LoginBox/LoginBox.tsx | 37 ++++++++++++++++++---- front/src/utils/theme.tsx | 1 + 5 files changed, 43 insertions(+), 26 deletions(-) diff --git a/front/public/socialLogin/google.svg b/front/public/socialLogin/google.svg index 11eeb40..aaa6e71 100644 --- a/front/public/socialLogin/google.svg +++ b/front/public/socialLogin/google.svg @@ -1,12 +1,9 @@ - - - - - + + - + - + diff --git a/front/public/socialLogin/kakao.svg b/front/public/socialLogin/kakao.svg index fa4c5ac..4eb68c6 100644 --- a/front/public/socialLogin/kakao.svg +++ b/front/public/socialLogin/kakao.svg @@ -1,11 +1,9 @@ - - - - + + - + - + diff --git a/front/public/socialLogin/naver.svg b/front/public/socialLogin/naver.svg index e6d3d93..70e5b5b 100644 --- a/front/public/socialLogin/naver.svg +++ b/front/public/socialLogin/naver.svg @@ -1,11 +1,9 @@ - - - - + + - + - + diff --git a/front/src/components/LoginBox/LoginBox.tsx b/front/src/components/LoginBox/LoginBox.tsx index 46574af..876311b 100644 --- a/front/src/components/LoginBox/LoginBox.tsx +++ b/front/src/components/LoginBox/LoginBox.tsx @@ -26,11 +26,11 @@ const StyledLoginBox = styled.div` transform: translate(-50%, 0); display: flex; flex-direction: column; - justify-content: space-between; + justify-content: space-around; width: 100%; height: 35%; - padding: 5%; - padding-bottom: 10%; + padding: 2%; + padding-bottom: 3%; border-top-left-radius: 20px; border-top-right-radius: 20px; @@ -39,15 +39,34 @@ const StyledLoginBox = styled.div` } `; -const StyledLogin = styled.button` - position: relative; +const StyledLogin = styled.button` height: 20%; margin: 1% 0; border-radius: 12px; + font: ${theme.font['--normal-login-font']}; + display: flex; + align-items: center; + justify-content: center; + position: relative; + background-color: ${props => + props.social === '카카오' + ? '#FEE500' + : props.social === '네이버' + ? '#00C73C' + : 'white'}; `; const StyledLogo = styled.img` - width: 100%; + position: absolute; + left: 0; + height: 100%; + width: auto; + margin-left: 2%; +`; + +const StyledSocial = styled.span` + font-weight: 700; + margin-left: 5%; `; const validLogin = ( @@ -60,7 +79,10 @@ const validLogin = ( const LoginUI = (props: SocialLogin) => { return ( - validLogin(event, props)}> + validLogin(event, props)} + > {props.social === '카카오' ? ( ) : props.social === '네이버' ? ( @@ -68,6 +90,7 @@ const LoginUI = (props: SocialLogin) => { ) : ( )} + {props.social}로 시작하기 ); }; diff --git a/front/src/utils/theme.tsx b/front/src/utils/theme.tsx index 10dc14c..8f631ba 100644 --- a/front/src/utils/theme.tsx +++ b/front/src/utils/theme.tsx @@ -18,6 +18,7 @@ const colors = { const font = { '--normal-title-font': 'normal normal 400 32px/normal "YUniverse-B"', '--normal-introduce-font': 'normal normal 400 18px/150% "YUniverse-B"', + '--normal-login-font': 'normal normal 400 16px/100% "Pretendard-Regular"', '--normal-button-font': 'normal normal 700 18px/150% "YUniverse-B"' }; From 7c7d518dabafd4008a308f2286ba481969eab119 Mon Sep 17 00:00:00 2001 From: esthel Date: Sun, 12 Nov 2023 00:06:50 +0900 Subject: [PATCH 5/7] feat: login UI animation --- front/src/components/LoginBox/LoginBox.tsx | 64 ++++++++++++++++++---- 1 file changed, 52 insertions(+), 12 deletions(-) diff --git a/front/src/components/LoginBox/LoginBox.tsx b/front/src/components/LoginBox/LoginBox.tsx index 876311b..bd9f9f0 100644 --- a/front/src/components/LoginBox/LoginBox.tsx +++ b/front/src/components/LoginBox/LoginBox.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useState, useRef } from 'react'; import theme from '../../utils/theme'; import styled from 'styled-components'; @@ -20,23 +20,45 @@ const StyledBody = styled.div` const StyledLoginBox = styled.div` background-color: ${theme.colors['--primary-black']}; - position: fixed; + position: absolute; bottom: 0; left: 50%; - transform: translate(-50%, 0); display: flex; flex-direction: column; justify-content: space-around; width: 100%; height: 35%; - padding: 2%; - padding-bottom: 3%; + padding: 2% 5%; + padding-bottom: 5%; border-top-left-radius: 20px; border-top-right-radius: 20px; + animation: fadeInUp 0.5s forwards; @media (min-width: ${theme.size['--desktop-min-width']}) { width: ${theme.size['--desktop-width']}; } + + @keyframes fadeInUp { + from { + opacity: 0; + transform: translate3d(-50%, 100%, 0); + } + to { + opacity: 1; + transform: translate(-50%, 0); + } + } + + @keyframes fadeOutDown { + from { + opacity: 1; + transform: translate(-50%, 0); + } + to { + opacity: 0; + transform: translate3d(-50%, 100%, 0); + } + } `; const StyledLogin = styled.button` @@ -69,6 +91,28 @@ const StyledSocial = styled.span` margin-left: 5%; `; +const closeLogin = ( + props: LoginProps, + closeRef: React.RefObject, + setIsFocus: React.Dispatch> +) => { + const onAnimationEnd = () => { + if (closeRef.current) { + setIsFocus(false); + props.view[1](!props.view[0]); + closeRef.current.removeEventListener('animationend', onAnimationEnd); + } + }; + + if (closeRef.current) { + closeRef.current.addEventListener('animationend', onAnimationEnd); + closeRef.current.style.setProperty( + 'animation', + 'fadeOutDown 0.5s forwards' + ); + } +}; + const validLogin = ( event: React.MouseEvent, props: SocialLogin @@ -97,16 +141,12 @@ const LoginUI = (props: SocialLogin) => { const LoginBox = (props: LoginProps) => { const [isFocus, setIsFocus] = useState(true); + const closeRef = useRef(null); return ( - { - setIsFocus(false); - props.view[1](!props.view[0]); - }} - > + closeLogin(props, closeRef, setIsFocus)}> {isFocus ? ( - + From 641afcbd88333c8d55863dd69bf8893725008651 Mon Sep 17 00:00:00 2001 From: esthel Date: Sun, 12 Nov 2023 00:24:40 +0900 Subject: [PATCH 6/7] =?UTF-8?q?fix:=20#21=20issue=20=EB=93=B1=EB=A1=9D?= =?UTF-8?q?=E3=85=8E=E3=85=8E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- front/src/components/LoginBox/LoginBox.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/front/src/components/LoginBox/LoginBox.tsx b/front/src/components/LoginBox/LoginBox.tsx index bd9f9f0..c4e769f 100644 --- a/front/src/components/LoginBox/LoginBox.tsx +++ b/front/src/components/LoginBox/LoginBox.tsx @@ -62,10 +62,10 @@ const StyledLoginBox = styled.div` `; const StyledLogin = styled.button` + font: ${theme.font['--normal-login-font']}; height: 20%; margin: 1% 0; border-radius: 12px; - font: ${theme.font['--normal-login-font']}; display: flex; align-items: center; justify-content: center; From b0e41380cc5fe29a3d939b3c62f5c2b9f23944a9 Mon Sep 17 00:00:00 2001 From: esthel Date: Sun, 12 Nov 2023 01:22:58 +0900 Subject: [PATCH 7/7] =?UTF-8?q?fix:=20dist=ED=8F=B4=EB=8D=94=20.gitignore?= =?UTF-8?q?=EC=97=90=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitignore | 1 + 1 file changed, 1 insertion(+) diff --git a/.gitignore b/.gitignore index 6da10d7..1d0ec2f 100644 --- a/.gitignore +++ b/.gitignore @@ -10,6 +10,7 @@ # production /build +*/dist # misc .DS_Store