FE- #268 Main/Dropdown Modal 관련 부분 수 (#278)

* refactor: 3D 이미지 비율 수정 + footer 안내 문구 삽입 * refactor: [Main Page] - 카드속 텍스트와 아이콘 크기 조금 줄여야 함. * refactor: [DropDown Modal] #268에서 완료 --------- Co-authored-by: Wang HoEun <[email protected]>
yulpumta-clone-team · Mar 10, 2023 · bf2dd77 · bf2dd77
1 parent 8028092
commit bf2dd77
Show file tree

Hide file tree

Showing 7 changed files with 78 additions and 13 deletions.
diff --git 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
@@ -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) {
             </a>
           </li>
         ))}
+        <br />
+        {SERVICE_INFO.map(({ text }) => (
+          <li key={text}>
+            <S.Service_info>{text}</S.Service_info>
+          </li>
+        ))}
       </S.InformationBox>
     </S.Container>
   );

diff --git 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
@@ -49,6 +49,7 @@ export default function LoginNav({ userInfo }) {
           isDropdownOpen={isDropdownOpen}
           shouldCloseDropdown={shouldCloseDropdown}
           closeDropdown={closeDropdown}
+          userInfo={userInfo}
         />
       </S.AssignList>
     </S.BoardList>

diff --git 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 (
     <Dropdown
       isDropdownOpen={isDropdownOpen}
@@ -29,10 +41,21 @@ export default function UserInfoDropdown({ isDropdownOpen, shouldCloseDropdown,
       customStyle={S.UserInfoDropdown}
     >
       <ul>
-        <S.Link onClick={() => onClickLinkLi(ROUTE.MY_POST)}>내 작성글</S.Link>
-        <S.Link onClick={() => onClickLinkLi(ROUTE.MY_LIST)}>내 관심글</S.Link>
-        <S.Link onClick={() => onClickLinkLi(ROUTE.PROFILE)}>프로필 설정</S.Link>
-        <S.Link onClick={onClickLogout}>로그아웃</S.Link>
+        <S.Edit onClick={() => onClickLinkLi(ROUTE.PROFILE)}>
+          <CogEightToothSvg />
+        </S.Edit>
+        <Image src={profileImg} alt="dropdown-profile" customStyle={S.ProfileImg} />
+        <span>{nickname}</span>
+        <br />
+        <Divider />
+        <S.Link onClick={() => onClickLinkLi(ROUTE.MY_LIST)}>좋아요 누른 글 목록</S.Link>
+        <Divider />
+        <S.Link onClick={() => onClickLinkLi(ROUTE.MY_POST)}>내가 작성한 글 목록</S.Link>
+        <Divider />
+        <br />
+        <Button theme="gray" customStyle={S.LogoutButton} onClick={onClickLogout}>
+          로그아웃
+        </Button>
       </ul>
     </Dropdown>
   );

diff --git 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: '[email protected]' },
 ];
+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
@@ -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;