From bf2dd77c2b94c27c65bd9c9000f438d663c0cbd6 Mon Sep 17 00:00:00 2001 From: Wang Hoeun <38005874+hoeun0723@users.noreply.github.com> Date: Fri, 10 Mar 2023 15:13:03 +0900 Subject: [PATCH] =?UTF-8?q?FE-=20#268=20Main/Dropdown=20Modal=20=EA=B4=80?= =?UTF-8?q?=EB=A0=A8=20=EB=B6=80=EB=B6=84=20=EC=88=98=20(#278)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * refactor: 3D 이미지 비율 수정 + footer 안내 문구 삽입 * refactor: [Main Page] - 카드속 텍스트와 아이콘 크기 조금 줄여야 함. * refactor: [DropDown Modal] #268에서 완료 --------- 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 | 10 +++--- 7 files changed, 78 insertions(+), 13 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 ( ); 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..bb0421c5 100644 --- a/webapp/src/pages/Main/Main.style.js +++ b/webapp/src/pages/Main/Main.style.js @@ -204,7 +204,7 @@ export const Indicator = styled.span` `; export const PurposeSection = styled.div` - height: 260vh; + height: 220vh; width: 100%; background-color: #262c41; `; @@ -224,7 +224,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; @@ -278,7 +278,7 @@ export const Benefit = styled.div` justify-content: center; align-items: center; width: 100%; - height: 80vh; + height: 65vh; background-color: #262c41; `; @@ -373,9 +373,9 @@ 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;