From 5c992780eeab7db428be69132c2b26249c7d9c6b Mon Sep 17 00:00:00 2001 From: Wang Hoeun <38005874+hoeun0723@users.noreply.github.com> Date: Tue, 14 Mar 2023 22:48:57 +0900 Subject: [PATCH] =?UTF-8?q?[FE]=20Mainpage=20Animation=20=EC=A0=9C?= =?UTF-8?q?=EA=B1=B0=20(#280)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * FE- #268 Main/Dropdown Modal 관련 부분 수 (#278) * refactor: 3D 이미지 비율 수정 + footer 안내 문구 삽입 * refactor: [Main Page] - 카드속 텍스트와 아이콘 크기 조금 줄여야 함. * refactor: [DropDown Modal] #268에서 완료 --------- Co-authored-by: Wang HoEun * refactor: 애니메이션 제거 * refactor: main gradation 추가 --------- Co-authored-by: Wang HoEun --- webapp/src/components/Footer/Footer.style.js | 6 +- webapp/src/components/Footer/index.jsx | 8 +- .../GlobalNavigation.style.js | 27 ++- .../components/GlobalNavigation/LoginNav.jsx | 1 + .../GlobalNavigation/UserInfoDropdown.jsx | 33 ++- webapp/src/constant/main.constant.js | 6 + webapp/src/pages/Main/Main.style.js | 215 ++---------------- webapp/src/pages/Main/index.jsx | 17 +- 8 files changed, 92 insertions(+), 221 deletions(-) diff --git a/webapp/src/components/Footer/Footer.style.js b/webapp/src/components/Footer/Footer.style.js index 677bf91a..0b8bc92f 100644 --- a/webapp/src/components/Footer/Footer.style.js +++ b/webapp/src/components/Footer/Footer.style.js @@ -23,7 +23,7 @@ export const InformationBox = styled.ul` ${({ theme: { fonts } }) => fonts.korean.default}; > span:not(:first-child) { display: inline-flex; - width: 98px; + width: 110px; } > a { &:hover { @@ -38,3 +38,7 @@ export const Name = styled.span` display: inline-flex; width: 64px; `; + +export const Service_info = styled.span` + color: ${({ theme: { colors } }) => colors.greyScale.guide}; +`; diff --git a/webapp/src/components/Footer/index.jsx b/webapp/src/components/Footer/index.jsx index 47970928..34c2d6d2 100644 --- a/webapp/src/components/Footer/index.jsx +++ b/webapp/src/components/Footer/index.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import { CREATOR_INFO } from 'constant/main.constant'; +import { CREATOR_INFO, SERVICE_INFO } from 'constant/main.constant'; import * as S from './Footer.style'; export default function Footer(props) { @@ -16,6 +16,12 @@ export default function Footer(props) { ))} +
+ {SERVICE_INFO.map(({ text }) => ( +
  • + {text} +
    • + ))} ); diff --git a/webapp/src/components/GlobalNavigation/GlobalNavigation.style.js b/webapp/src/components/GlobalNavigation/GlobalNavigation.style.js index cb1ab2e9..fd5bdcdf 100644 --- a/webapp/src/components/GlobalNavigation/GlobalNavigation.style.js +++ b/webapp/src/components/GlobalNavigation/GlobalNavigation.style.js @@ -104,11 +104,20 @@ export const UserName = styled.div` export const UserInfoDropdown = { overlayStyle: css` position: absolute; + display: flex; + align-items: center; top: 64px; right: -10px; `, contentStyle: css` - height: 135px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 200px; + height: 250px; + gap: 20%; + border-color: ${({ theme: { colors } }) => colors.primary.normal}; ${({ theme: { fonts } }) => fonts.korean.emphasis}; `, }; @@ -117,3 +126,19 @@ export const AssignListButton = css` width: 99px; height: 35px; `; + +export const LogoutButton = css` + width: 99px; + cursor: pointer; +`; + +export const ProfileImg = css` + width: 80px; + height: 80px; +`; +export const Edit = styled.div` + display: absolute; + width: 24px; + right: -60px; + cursor: pointer; +`; diff --git a/webapp/src/components/GlobalNavigation/LoginNav.jsx b/webapp/src/components/GlobalNavigation/LoginNav.jsx index d7cc541e..97c598ae 100644 --- a/webapp/src/components/GlobalNavigation/LoginNav.jsx +++ b/webapp/src/components/GlobalNavigation/LoginNav.jsx @@ -49,6 +49,7 @@ export default function LoginNav({ userInfo }) { isDropdownOpen={isDropdownOpen} shouldCloseDropdown={shouldCloseDropdown} closeDropdown={closeDropdown} + userInfo={userInfo} /> diff --git a/webapp/src/components/GlobalNavigation/UserInfoDropdown.jsx b/webapp/src/components/GlobalNavigation/UserInfoDropdown.jsx index 5dfd0d0f..72429eed 100644 --- a/webapp/src/components/GlobalNavigation/UserInfoDropdown.jsx +++ b/webapp/src/components/GlobalNavigation/UserInfoDropdown.jsx @@ -4,14 +4,25 @@ import { useNavigate } from 'react-router-dom'; import Dropdown from 'components/Common/Dropdown'; import { ROUTE } from 'constant/route.constant'; import useAuthService from 'hooks/useAuthService'; +import Button from 'components/Common/Button'; +import Image from 'components/Common/Image'; +import { loggedUserType } from 'types/user.type'; +import Divider from 'components/Common/Divider'; +import CogEightToothSvg from 'assets/icons/CogEightToothSvg'; import * as S from './GlobalNavigation.style'; UserInfoDropdown.propTypes = { isDropdownOpen: PropTypes.bool.isRequired, shouldCloseDropdown: PropTypes.func.isRequired, closeDropdown: PropTypes.func.isRequired, + userInfo: loggedUserType.isRequired, }; -export default function UserInfoDropdown({ isDropdownOpen, shouldCloseDropdown, closeDropdown }) { +export default function UserInfoDropdown({ + isDropdownOpen, + shouldCloseDropdown, + closeDropdown, + userInfo, +}) { const navigate = useNavigate(); const { handleDeleteUserInfo } = useAuthService(); const onClickLogout = async () => { @@ -21,6 +32,7 @@ export default function UserInfoDropdown({ isDropdownOpen, shouldCloseDropdown, navigate(link); closeDropdown(); }; + const { nickname, profileImg } = userInfo; return (
      - onClickLinkLi(ROUTE.MY_POST)}>내 작성글 - onClickLinkLi(ROUTE.MY_LIST)}>내 관심글 - onClickLinkLi(ROUTE.PROFILE)}>프로필 설정 - 로그아웃 + onClickLinkLi(ROUTE.PROFILE)}> + + + dropdown-profile + {nickname} +
      + + onClickLinkLi(ROUTE.MY_LIST)}>좋아요 누른 글 목록 + + onClickLinkLi(ROUTE.MY_POST)}>내가 작성한 글 목록 + +
      +
    ); diff --git a/webapp/src/constant/main.constant.js b/webapp/src/constant/main.constant.js index 289a7ff0..73c60110 100644 --- a/webapp/src/constant/main.constant.js +++ b/webapp/src/constant/main.constant.js @@ -12,6 +12,12 @@ export const CREATOR_INFO = [ { name: '윤효정', field: 'BACKEND', contact: 'https://github.com/hyojeongyun' }, { name: '정영혜', field: 'DESIGNER', contact: 'younghye.hello@gmail.com' }, ]; +export const SERVICE_INFO = [ + { text: '서비스 이용약관' }, + { text: '개인정보 처리방침' }, + { text: '이용자의 권리 및 유의사항' }, + { text: '데이터 서비스 이용약관' }, +]; export const MAIN_SERVICE_LINKS = [ { icon: 'signUp', route: ROUTE.SIGN_UP }, diff --git a/webapp/src/pages/Main/Main.style.js b/webapp/src/pages/Main/Main.style.js index 269ef750..bfc39709 100644 --- a/webapp/src/pages/Main/Main.style.js +++ b/webapp/src/pages/Main/Main.style.js @@ -10,6 +10,7 @@ import MessageIcon from 'assets/images/feedback-message.png'; import SignUpIcon from 'assets/images/signup-link.png'; import BoardIcon from 'assets/images/board-link.png'; import PostIcon from 'assets/images/post-link.png'; +import Gradation from 'assets/images/main-gradient.png'; export const MainContainer = styled.div` width: 100vw; @@ -30,9 +31,16 @@ export const Header = styled.header` export const MainSection = styled.div` width: 100%; height: 100vh; - background-color: black; + background-image: url(${Gradation}); `; +// export const Gradient = styled.img.attrs({ src: `${Gradation}` })` +// position: relative; +// display: flex; +// top: -30px; +// width: 100%; +// `; + export const Section = styled.section` position: relative; width: 100%; @@ -43,61 +51,6 @@ export const Section = styled.section` align-items: center; `; -export const Wave = styled.div` - position: absolute; - left: 0; - width: 100%; - height: 100%; - top: -180%; - background-color: #000; -`; - -export const animateGradation = keyframes` - 0% { - transform: translate(-50%, -75%) rotate(0deg); - } - 100% { - transform: translate(-50%, -75%) rotate(360deg); - } -`; - -export const Curve = styled.div` - position: absolute; - width: 750vh; - height: 725vh; - left: 50%; - background: #9d68fe; - transform: translate(-50%, -75%); - &:nth-child(1) { - animation: ${animateGradation} 10s linear infinite; - border-radius: 44.5%; - background: #e2e7fd; - opacity: 80%; - } - &:nth-child(2) { - animation: ${animateGradation} 14s linear infinite; - border-radius: 45%; - background: #3a0c8e; - opacity: 90%; - } - &:nth-child(3) { - top: -10%; - animation: ${animateGradation} 20s linear infinite; - border-radius: 43%; - background: #53d3f4; - - opacity: 90%; - } - &:nth-child(4) { - top: -13%; - animation: ${animateGradation} 23s linear infinite; - border-radius: 42.5%; - background: #9d68fe; - - opacity: 98%; - } -`; - export const Contents = styled.div` position: relative; display: flex; @@ -116,29 +69,14 @@ export const Logo = styled.img.attrs({ src: `${MainLogo}` })` height: 100px; `; -export const GhostEffects = styled.span` - transition: 1s; - &:nth-child(${(props) => props.index + 1}) { - transition-delay: ${(props) => props.index * 0.1}s; - } -`; - export const MainText = styled.h2` position: relative; - text-transform: uppercase; display: flex; text-align: center; color: ${({ theme: { colors } }) => colors.greyScale.white}; font-weight: 800; ${({ theme: { fonts } }) => fonts.english.main}; white-space: pre; - &:hover { - ${GhostEffects} { - filter: blur(20px); - opacity: 0; - transform: scale(2); - } - } `; export const SubText = styled.div` position: relative; @@ -151,60 +89,8 @@ export const SubText = styled.div` ${({ theme: { fonts } }) => fonts.main.default_noBold}; `; -export const ScrollDown = styled.div` - position: absolute; - bottom: 20px; - left: 50%; - width: 40px; - height: 40px; - transform: translateY(-80px) translateX(-50%) rotate(45deg); -`; - -export const animateScroll = keyframes` - 0% { - top: -5px; - left: -5px; - opacity: 0; - } - 25% { - top: 0; - left: 0; - opacity: 1; - } - 50%, 100% { - top: 5px; - left: 5px; - opacity: 0; - } -`; - -export const Indicator = styled.span` - position: absolute; - top: 0; - left: 0; - display: block; - width: 100%; - height: 100%; - border-bottom: 2px solid white; - border-right: 2px solid white; - animation: ${animateScroll} 1.5s linear infinite; - opacity: 0; - &:nth-child(1) { - transform: translate(-15px, -15px); - animation-delay: -0.4s; - } - &:nth-child(2) { - transform: translate(0, 0); - animation-delay: -0.2s; - } - &:nth-child(3) { - transform: translate(15px, 15px); - animation-delay: 0s; - } -`; - export const PurposeSection = styled.div` - height: 260vh; + height: 220vh; width: 100%; background-color: #262c41; `; @@ -224,7 +110,7 @@ export const Image3D = styled.div` position: relative; display: flex; justify-content: center; - height: 100vh; + height: 130vh; ${({ theme: { fonts } }) => fonts.main.title}; & p { position: absolute; @@ -237,40 +123,6 @@ export const Image3D = styled.div` color: ${({ theme: { colors } }) => colors.primary.normal}; } `; -export const animateTextMoving = keyframes` - 0%, 40%, 100% - { - transform: translateY(0); - } - 20% { - transform: translateY(-50px); - } -`; -export const animatePulse = keyframes` - 0% { - transform:scale(1); - } - 25% { - transform:scale(0.9); - } - 50% { - transform:scale(1); - } - 75% { - transform:scale(0.9); - } - 100% { - transform:scale(1); - } -`; - -export const MoveText = styled.span` - position: relative; - text-transform: uppercase; - display: inline-block; - animation: ${animateTextMoving} 2s ease-in-out infinite; - animation-delay: ${(props) => `${props.delay * 0.1}s`}; -`; export const Benefit = styled.div` position: relative; @@ -278,7 +130,7 @@ export const Benefit = styled.div` justify-content: center; align-items: center; width: 100%; - height: 80vh; + height: 65vh; background-color: #262c41; `; @@ -303,21 +155,6 @@ export const Circle = styled.div` background-color: ${({ theme: { colors } }) => colors.greyScale.white}; ${({ theme: { fonts } }) => fonts.main.emphasis}; - animation: ${animatePulse} 2s linear infinite; - &::before { - content: ''; - position: absolute; - top: -99px; - width: 370px; - height: 270px; - } - &::after { - content: ''; - position: absolute; - left: -99px; - width: 270px; - height: 370px; - } `; export const Subject = styled.div` @@ -373,35 +210,13 @@ export const Card = styled.div` justify-content: space-between; align-items: center; width: 70%; - height: 450px; + height: 580px; background-color: black; - border-radius: 2%; + border-radius: 3%; overflow: hidden; box-sizing: border-box; - &::before { - content: ''; - position: absolute; - left: 0; - bottom: calc(-100% + 4px); - width: 100%; - height: 100%; - background-color: black; - transition: 0.5s ease-in-out; - } - - &:hover::before { - bottom: 0; - } - &:nth-child(1)::before { - background-color: #414141; - } - &:nth-child(2)::before { - background-color: #414141; - } - &:nth-child(3)::before { - background-color: #414141; - } + background-color: #414141; `; export const CardText = styled.div` position: absolute; diff --git a/webapp/src/pages/Main/index.jsx b/webapp/src/pages/Main/index.jsx index 0538dbb9..1ba1f32d 100644 --- a/webapp/src/pages/Main/index.jsx +++ b/webapp/src/pages/Main/index.jsx @@ -16,7 +16,6 @@ import ToastNotificationProvider, { import { deleteMessage } from 'contexts/ToastNotification/action'; import ToastNotification from 'components/ToastNotification'; import { throttle } from 'lodash'; -import SimpleListComponent from 'hoc/SimpleListComponent'; import Footer from 'components/Footer'; import * as S from './Main.style'; @@ -81,17 +80,14 @@ function Main() { - - - {MAIN_TEXT.split('').map((t, i) => ( // eslint-disable-next-line react/no-array-index-key - + {t} - + ))} @@ -101,20 +97,15 @@ function Main() { - - - - -

    {KOR_TITLE_CONECT.split('').map((s, i) => ( - + {s} - + ))} 는 무엇을 위해 만들어졌을까요?