Merge pull request #26 from esthel7/FE/feature/login

[서민아] 소개페이지, 로그인 UI 및 애니메이션
boostcampwm2023 · Nov 13, 2023 · 1ccc3ed · 1ccc3ed
2 parents 6977224 + b0e4138
commit 1ccc3ed
Show file tree

Hide file tree

Showing 16 changed files with 384 additions and 27 deletions.
diff --git a/.gitignore b/.gitignore
@@ -10,6 +10,7 @@
 
 # production
 /build
+*/dist
 
 # misc
 .DS_Store

diff --git a/front/index.html b/front/index.html
@@ -1,4 +1,4 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />

diff --git a/front/public/socialLogin/google.svg b/front/public/socialLogin/google.svg
diff --git a/front/public/socialLogin/kakao.svg b/front/public/socialLogin/kakao.svg
diff --git a/front/public/socialLogin/naver.svg b/front/public/socialLogin/naver.svg
diff --git a/front/src/App.tsx b/front/src/App.tsx
@@ -1,32 +1,30 @@
 import { Canvas } from '@react-three/fiber';
 import { OrbitControls } from '@react-three/drei';
 import SnowGlobe from './SnowGlobe';
-import { Button } from './components';
+import { IntroButtonBox } from './components';
 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;
   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 (
     <>
@@ -50,13 +48,8 @@ const App = () => {
         </Canvas>
       </CanvasBox>
 
-      <ButtonBox>
-        <Button text={'소개'} color={theme.colors['--primary-red-primary']} />
-        <Button
-          text={'로그인'}
-          color={theme.colors['--primary-green-primary']}
-        />
-      </ButtonBox>
+      <Title>스노우볼 속 내 마음</Title>
+      <IntroButtonBox />
     </>
   );
 };

diff --git 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/[email protected]/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/Button/Button.tsx b/front/src/components/Button/Button.tsx
@@ -8,6 +8,7 @@ interface ButtonColor {
 interface ButtonProps {
   text: string;
   color: string;
+  view: [boolean, React.Dispatch<React.SetStateAction<boolean>>];
 }
 
 const StyledButton = styled.button<ButtonColor>`
@@ -27,7 +28,16 @@ const StyledButton = styled.button<ButtonColor>`
 `;
 
 const Button = (props: ButtonProps) => {
-  return <StyledButton color={props.color}>{props.text}</StyledButton>;
+  return (
+    <StyledButton
+      color={props.color}
+      onClick={() => {
+        props.view[1](!props.view[0]);
+      }}
+    >
+      {props.text}
+    </StyledButton>
+  );
 };
 
 export default Button;
diff --git a/front/src/components/IntroButtonBox/IntroButtonBox.tsx b/front/src/components/IntroButtonBox/IntroButtonBox.tsx
@@ -0,0 +1,50 @@
+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;
+  width: 100%;
+  bottom: 0px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 36px;
+  align-items: center;
+  margin: auto;
+`;
+
+const IntroButtonBox = () => {
+  const [isIntroduce, setIsIntroduce] = useState(false);
+  const [isLogin, setIsLogin] = useState(false);
+
+  return (
+    <>
+      {!isIntroduce && !isLogin ? (
+        <ButtonBox>
+          <Button
+            text={'소개페이지'}
+            color={theme.colors['--primary-red-primary']}
+            view={[isIntroduce, setIsIntroduce]}
+          />
+          <Button
+            text={'로그인'}
+            color={theme.colors['--primary-green-primary']}
+            view={[isLogin, setIsLogin]}
+          />
+        </ButtonBox>
+      ) : null}
+
+      {isIntroduce ? (
+        <Introduce view={[isIntroduce, setIsIntroduce]} />
+      ) : isLogin ? (
+        <LoginBox view={[isLogin, setIsLogin]} />
+      ) : null}
+    </>
+  );
+};
+
+export default IntroButtonBox;
diff --git a/front/src/components/IntroButtonBox/index.tsx b/front/src/components/IntroButtonBox/index.tsx
@@ -0,0 +1 @@
+export { default as IntroButtonBox } from './IntroButtonBox';
diff --git a/front/src/components/Introduce/Introduce.tsx b/front/src/components/Introduce/Introduce.tsx
@@ -0,0 +1,99 @@
+import { useRef } from 'react';
+import theme from '../../utils/theme';
+import styled from 'styled-components';
+
+interface IntroduceProps {
+  view: [boolean, React.Dispatch<React.SetStateAction<boolean>>];
+}
+
+const StyledIntroduce = styled.div`
+  position: absolute;
+  top: 25%;
+  left: 50%;
+  transform: translate(-50%, 0);
+  background-color: ${theme.colors['--primary-yellow']};
+  font: ${theme.font['--normal-button-font']};
+  border-radius: 20px;
+  width: 80%;
+  height: 60%;
+  padding: 10px;
+  text-align: center;
+  color: ${theme.colors['--black-primary']};
+  display: flex;
+  flex-direction: column;
+  animation: fadein 0.7s;
+
+  @media (min-width: ${theme.size.maxWidth}) {
+    width: 600px;
+  }
+
+  @keyframes fadein {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes fadeout {
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+    }
+  }
+`;
+
+const StyledText = styled.div`
+  flex: 9;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  overflow: auto;
+  word-break: keep-all;
+`;
+
+const StyledClosed = styled.button`
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font: ${theme.font['--normal-button-font']};
+  font-size: 14px;
+  line-height: normal;
+`;
+
+const closeIntroduce = (
+  props: IntroduceProps,
+  closeRef: React.RefObject<HTMLDivElement>
+) => {
+  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<HTMLDivElement>(null);
+
+  return (
+    <StyledIntroduce ref={closeRef}>
+      <StyledText>소개글을 입력해주세요.</StyledText>
+      <StyledClosed onClick={() => closeIntroduce(props, closeRef)}>
+        닫기
+      </StyledClosed>
+    </StyledIntroduce>
+  );
+};
+
+export default Introduce;
diff --git a/front/src/components/Introduce/index.tsx b/front/src/components/Introduce/index.tsx
@@ -0,0 +1 @@
+export { default as Introduce } from './Introduce';
-Original file line number
+Diff line change
@@ Expand Up / @@ -10,6 +10,7 @@ @@
     # production
     /build
+    */dist
     # misc
     .DS_Store
@@ Expand Down @@
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { default as IntroButtonBox } from './IntroButtonBox';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { default as Introduce } from './Introduce';