From 6aa02ca278637809c1ce39639e6405cc030b9a71 Mon Sep 17 00:00:00 2001 From: gkswldnjs78 Date: Wed, 15 May 2024 02:25:38 +0900 Subject: [PATCH] =?UTF-8?q?fix:=20=EB=A9=94=EC=9D=B8=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20=EC=95=88=EB=82=B4=20?= =?UTF-8?q?=EB=AA=A8=EB=8B=AC=20=EA=B5=AC=ED=98=84=20=EB=B0=8F=20=EB=B4=84?= =?UTF-8?q?=EC=B6=95=EC=A0=9C=EC=9A=A9=20css=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/common/components/MapBase.tsx | 25 +-- src/common/components/NavBar.tsx | 35 ++++- src/common/components/ProfileCard.tsx | 41 ++--- src/common/pages/detailprofile.tsx | 19 +-- src/common/type/ProfileDataTypesProps.ts | 1 + src/main/components/CustomSelect.tsx | 157 +++++++++---------- src/main/components/LoginModal.tsx | 125 +++++++++++++++ src/main/components/SendBtn.tsx | 15 +- src/main/components/SendNungilModal.tsx | 2 +- src/main/pages/finishMatch.tsx | 2 - src/main/pages/mainPage.tsx | 93 ++++++----- src/mypage/pages/myPage.tsx | 18 +-- src/nungilList/components/ReceivedNungil.tsx | 42 ++--- 13 files changed, 375 insertions(+), 200 deletions(-) create mode 100644 src/main/components/LoginModal.tsx diff --git a/src/common/components/MapBase.tsx b/src/common/components/MapBase.tsx index 60b98f6..638a5d7 100644 --- a/src/common/components/MapBase.tsx +++ b/src/common/components/MapBase.tsx @@ -40,21 +40,22 @@ const MapBase = ({ matchData, setMap, onMapLoad }: MapContainerProps) => { let center; if (matchData) { - if (matchData.location === '광화문') { - center = new window.kakao.maps.LatLng( - 37.5709578373114, - 126.977928770123, - ); - } else if (matchData.location === '판교') { - center = new window.kakao.maps.LatLng( - 37.39525750009229, - 127.11148651523494, - ); - } + // if (matchData.location === '광화문') { + // center = new window.kakao.maps.LatLng( + // 37.5709578373114, + // 126.977928770123, + // ); + // } else if (matchData.location === '판교') { + // center = new window.kakao.maps.LatLng( + // 37.39525750009229, + // 127.11148651523494, + // ); + // } + center = new window.kakao.maps.LatLng(37.496503, 126.957227); } const mapOption = { - center: center || new window.kakao.maps.LatLng(37.5665, 126.978), + center: center, // || new window.kakao.maps.LatLng(37.5665, 126.978), level: 6, }; diff --git a/src/common/components/NavBar.tsx b/src/common/components/NavBar.tsx index e2219f0..009f56d 100644 --- a/src/common/components/NavBar.tsx +++ b/src/common/components/NavBar.tsx @@ -12,7 +12,15 @@ import { PeopleBtnGRAY, } from '../assets/svgs/index'; -const NavBar = () => { +interface StateType { + selectedBtn: string; +} + +const NavBar = ({ + setIsLoginModalOpen, +}: { + setIsLoginModalOpen: (value: boolean) => void; +}) => { const navigate = useNavigate(); const location = useLocation(); @@ -24,11 +32,20 @@ const NavBar = () => { } }; + const handleNavButtonClick = (path: string, state?: StateType) => { + const accessToken = localStorage.getItem('accessToken'); + if (!accessToken) { + setIsLoginModalOpen(true); + } else { + navigate(path, { state }); + } + }; + return (
- -
@@ -128,7 +131,7 @@ const Profile = { gap: 0.3rem; `, - CompanyName: css` + nickname: css` font-size: 1.4rem; font-weight: 600; color: ${theme.colors.white}; @@ -150,19 +153,19 @@ const Profile = { `, }; -const StDdaySection = styled.div` - display: flex; - flex-direction: row; - gap: 0.7rem; - align-items: center; - width: 100%; - padding-top: 1.5rem; - margin-top: 2rem; - ${({ theme }) => theme.fonts.body3}; -`; +// const StDdaySection = styled.div` +// display: flex; +// flex-direction: row; +// gap: 0.7rem; +// align-items: center; +// width: 100%; +// padding-top: 1.5rem; +// margin-top: 2rem; +// ${({ theme }) => theme.fonts.body3}; +// `; const StDetailBtn = styled.p` - margin-left: 8.5rem; + margin-left: 20.5rem; font-size: 1.1rem; font-weight: 500; color: ${({ theme }) => theme.colors.gray0}; diff --git a/src/common/pages/detailprofile.tsx b/src/common/pages/detailprofile.tsx index 250b754..b833734 100644 --- a/src/common/pages/detailprofile.tsx +++ b/src/common/pages/detailprofile.tsx @@ -28,10 +28,14 @@ const DetailProfile = () => { const genderText = profileData?.sex === 'MALE' ? '남성' : '여성'; - const context = `#${profileData?.companyName.replace(/\s+/g, '_')} 에 재직 중인\n - #${profileData?.age}세 ${genderText}이고 #${profileData?.job.replace(/\s+/g, '_')}\n - 얼굴은 #${profileData?.animalFace} - 키는 #${profileData?.height}cm\n 성격 유형은 #${profileData?.mbti}`; + // const context = `#${profileData?.companyName.replace(/\s+/g, '_')} 에 재직 중인\n + // #${profileData?.age}세 ${genderText}이고 #${profileData?.job.replace(/\s+/g, '_')}\n + // 얼굴은 #${profileData?.animalFace} + // 키는 #${profileData?.height}cm\n 성격 유형은 #${profileData?.mbti}`; + + const context = `#${profileData?.job.replace(/\s+/g, '_')} 에 재학 중인\n + #${profileData?.age}살 ${genderText}이고\n + 얼굴은 #${profileData?.animalFace} 성격 유형은 #${profileData?.mbti}`; let AnimalFace, AnimalFaceImg; @@ -45,10 +49,7 @@ const DetailProfile = () => { nungilId: nungilId, }, }); - setProfileData(res.data); - - console.log(res.data); } catch (error) { console.log(error); } finally { @@ -213,7 +214,7 @@ const DetailProfile = () => { ))} -
+ {/*
이건 알아두세요!
@@ -231,7 +232,7 @@ const DetailProfile = () => { 음주 : {profileData?.alcohol && profileData.alcohol}
- + */} ); diff --git a/src/common/type/ProfileDataTypesProps.ts b/src/common/type/ProfileDataTypesProps.ts index 693056c..be23a66 100644 --- a/src/common/type/ProfileDataTypesProps.ts +++ b/src/common/type/ProfileDataTypesProps.ts @@ -1,6 +1,7 @@ export interface ProfileDataTypesProps { companyName: string; animalFace: string; + sex: string; job: string; description: string; nungilId: number; diff --git a/src/main/components/CustomSelect.tsx b/src/main/components/CustomSelect.tsx index 2112233..52f55fa 100644 --- a/src/main/components/CustomSelect.tsx +++ b/src/main/components/CustomSelect.tsx @@ -1,66 +1,65 @@ -import { useEffect, useState } from 'react'; +// import { useEffect, useState } from 'react'; import { css } from '@emotion/react'; -import instance from '../../common/apis/axiosInstanse'; +// import instance from '../../common/apis/axiosInstanse'; import { theme } from '../../common/styles/theme'; -import { Arrow } from '../assets/svgs/index'; - -const CustomSelect = ({ - onSelectedChange, -}: { - onSelectedChange: (selected: string) => void; -}) => { - const [selected, setSelected] = useState('서울 광화문'); - const selectList = ['서울 광화문', '경기도 판교']; - const [showToggle, setShowToggle] = useState(false); - - const handleChangePlace = async () => { - let place = ''; - - if (selected === '서울 광화문') { - place = 'GWANGHWAMUN'; - } else if (selected === '경기도 판교') { - place = 'PANGYO'; - } - - try { - await instance.patch('/api/member/location', { location: place }); - } catch (error) { - console.log(error); - } - }; - - const handleSelect = (value: string) => { - if (selected === '서울 광화문') { - setSelected(value); - setShowToggle(false); - } else if (selected === '경기도 판교') { - setSelected(value); - setShowToggle(false); - onSelectedChange(selected); - } - }; - - const fetchData = async () => { - await handleChangePlace(); - onSelectedChange(selected); - }; - - useEffect(() => { - fetchData(); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [selected]); +// import { Arrow } from '../assets/svgs/index'; + +const CustomSelect = () => { + // const CustomSelect = ({ + // onSelectedChange, + // }: { + // onSelectedChange: (selected: string) => void; + // }) => { + // const [selected, setSelected] = useState('서울 광화문'); + // const selectList = ['서울 광화문', '경기도 판교']; + // const [showToggle, setShowToggle] = useState(false); + + // const handleChangePlace = async () => { + // // let place = ''; + // // if (selected === '서울 광화문') { + // // place = 'GWANGHWAMUN'; + // // } else if (selected === '경기도 판교') { + // // place = 'PANGYO'; + // // } + // // try { + // // await instance.patch('/api/member/location', { location: place }); + // // } catch (error) { + // // console.log(error); + // // } + // }; + + // const handleSelect = (value: string) => { + // if (selected === '서울 광화문') { + // setSelected(value); + // setShowToggle(false); + // } else if (selected === '경기도 판교') { + // setSelected(value); + // setShowToggle(false); + // onSelectedChange(selected); + // } + // }; + + // const fetchData = async () => { + // await handleChangePlace(); + // onSelectedChange(selected); + // }; + + // useEffect(() => { + // fetchData(); + // // eslint-disable-next-line react-hooks/exhaustive-deps + // }, [selected]); const handleToggle = () => { - setShowToggle((prev) => !prev); + // setShowToggle((prev) => !prev); }; return (
- {selected} - + 숭실대학교 + {/* */}
- {showToggle && ( + {/* {showToggle && (
{selectList.map((item) => (
handleSelect(item)}> @@ -68,7 +67,7 @@ const CustomSelect = ({
))}
- )} + )} */}
); }; @@ -97,28 +96,28 @@ const SelectValue = css` border-bottom: 2px solid ${theme.colors.gray7}; `; -const OptionBox = css` - position: absolute; - left: 20; - width: 9rem; - padding-top: 0.3rem; - padding-bottom: 0.3rem; - padding-left: 0.3rem; - margin-top: 2rem; - background-color: ${theme.colors.white}; - border: 1px solid ${theme.colors.gray2}; - border-radius: 10px; - box-shadow: 0 2px 4px rgb(0 0 0 / 10%); -`; - -const Option = css` - padding: 0.5rem; - ${theme.fonts.subtitle1b} - - color: ${theme.colors.gray6}; - cursor: pointer; - - &:hover { - background-color: ${theme.colors.gray0}; - } -`; +// const OptionBox = css` +// position: absolute; +// left: 20; +// width: 9rem; +// padding-top: 0.3rem; +// padding-bottom: 0.3rem; +// padding-left: 0.3rem; +// margin-top: 2rem; +// background-color: ${theme.colors.white}; +// border: 1px solid ${theme.colors.gray2}; +// border-radius: 10px; +// box-shadow: 0 2px 4px rgb(0 0 0 / 10%); +// `; + +// const Option = css` +// padding: 0.5rem; +// ${theme.fonts.subtitle1b} + +// color: ${theme.colors.gray6}; +// cursor: pointer; + +// &:hover { +// background-color: ${theme.colors.gray0}; +// } +// `; diff --git a/src/main/components/LoginModal.tsx b/src/main/components/LoginModal.tsx new file mode 100644 index 0000000..cde29fd --- /dev/null +++ b/src/main/components/LoginModal.tsx @@ -0,0 +1,125 @@ +import styled from '@emotion/styled'; +import { useNavigate } from 'react-router-dom'; +import { Xicon } from '../assets/svgs'; + +const LoginModal = ({ closeModal }: { closeModal: () => void }) => { + const navigate = useNavigate(); + + const handleClickBtn = () => { + navigate('/login'); + closeModal(); + }; + + const handleOutsideClick = ( + event: React.MouseEvent, + ) => { + if (event.target === event.currentTarget) { + closeModal(); + } + }; + + return ( + + + + + + 잠깐만요! + 지금 눈길에 로그인하면 + 등록된 모든 프로필을 볼 수 있어요 + + + 로그인 하고 상세 프로필 구경하기 + + + + + ); +}; + +export default LoginModal; + +const StModalContainer = styled.div` + display: flex; + align-items: center; + justify-content: center; + width: 100vw; + height: 100vh; + background: rgb(0 0 0 / 50%); +`; + +const StModalWrapper = styled.div` + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + min-width: 34rem; + background: ${({ theme }) => theme.colors.white}; + border-radius: 10px; +`; + +const StXBtn = styled.button` + display: flex; + flex-direction: row; + padding-top: 2rem; + padding-left: 28rem; +`; + +const StModalTitle = styled.span` + display: flex; + padding-top: 0.5rem; + padding-bottom: 0.5rem; + font-size: 1.8rem; + font-style: normal; + font-weight: 700; + line-height: 2.5rem; +`; + +const StModalSubTitle = styled.span` + display: flex; + padding-top: 0.8rem; + font-size: 1.6rem; + font-style: normal; + font-weight: 600; + line-height: 2rem; + color: ${({ theme }) => theme.colors.gray7}; + text-align: center; +`; + +const StFinishBtnBox = styled.div` + display: flex; + flex-direction: column; + margin-bottom: 3rem; +`; + +const StFinishBtn = styled.button` + display: flex; + flex-direction: row; + gap: 1.1rem; + align-items: center; + justify-content: center; + min-width: 29rem; + height: 4.2rem; + margin-top: 1.6rem; + background: rgb(250 114 104 / 20%); + border: 1px solid ${({ theme }) => theme.colors.primary}; + border-radius: 20px; +`; + +const StFinishMent = styled.span` + font-size: 1.6rem; + font-style: normal; + font-weight: 700; + color: ${({ theme }) => theme.colors.primary}; +`; + +// const StCompleteMent = styled.span` +// padding-top: 1.5rem; +// padding-bottom: 3rem; +// font-size: 1.3rem; +// font-style: normal; +// font-weight: 500; +// line-height: normal; +// color: #4dca9a; +// text-align: center; +// `; diff --git a/src/main/components/SendBtn.tsx b/src/main/components/SendBtn.tsx index f8abd4d..51433ca 100644 --- a/src/main/components/SendBtn.tsx +++ b/src/main/components/SendBtn.tsx @@ -1,7 +1,7 @@ import { useState } from 'react'; import { css } from '@emotion/react'; import { theme } from '../../common/styles/theme'; -import CountDown from './CountDown'; +// import CountDown from './CountDown'; import { Lightning } from '../assets/svgs/index'; import SendNungilModal from './SendNungilModal'; @@ -28,10 +28,10 @@ const SendNungilBtn = ({ ) : ( )} {isModalOpen && ( @@ -63,6 +63,7 @@ const Container = css` const SendBtn = css` display: flex; flex-direction: row; + gap: 0.5rem; align-items: center; justify-content: center; width: 100%; @@ -82,9 +83,9 @@ const SendBtn = css` } `; -const countdown = css` - padding: 0.8rem 0.6rem; -`; +// const countdown = css` +// padding: 0.8rem 0.6rem; +// `; const FinishBtn = css` display: flex; diff --git a/src/main/components/SendNungilModal.tsx b/src/main/components/SendNungilModal.tsx index 657fea4..d5514d0 100644 --- a/src/main/components/SendNungilModal.tsx +++ b/src/main/components/SendNungilModal.tsx @@ -204,6 +204,6 @@ const StCompleteMent = styled.span` font-style: normal; font-weight: 700; line-height: normal; - color: #4dca9a; + color: #505050; text-align: center; `; diff --git a/src/main/pages/finishMatch.tsx b/src/main/pages/finishMatch.tsx index d640f86..c948a2d 100644 --- a/src/main/pages/finishMatch.tsx +++ b/src/main/pages/finishMatch.tsx @@ -42,8 +42,6 @@ const FinishMatch = () => { }); setMatchData(res.data); - console.log(res.data); - if (res.data.matchDate) { const date = res.data.matchDate; let month = date.slice(4, 6); diff --git a/src/main/pages/mainPage.tsx b/src/main/pages/mainPage.tsx index cc2f8fb..ccb0952 100644 --- a/src/main/pages/mainPage.tsx +++ b/src/main/pages/mainPage.tsx @@ -2,21 +2,24 @@ import { useState, useEffect } from 'react'; import { css } from '@emotion/react'; +import styled from '@emotion/styled'; import { theme } from '../../common/styles/theme'; import instance from '../../common/apis/axiosInstanse'; import { useNavigate } from 'react-router-dom'; import NavBar from '../../common/components/NavBar'; import ComingSoon from '../components/ComingSoon'; import ProfileCard from '../../common/components/ProfileCard'; -import PickProfileBtn from '../components/PickProfileBtn'; +// import PickProfileBtn from '../components/PickProfileBtn'; import CustomSelect from '../components/CustomSelect'; +import LoginModal from '../components/LoginModal'; import { ProfileDataTypesProps } from '../../common/type/ProfileDataTypesProps'; -import CountDown from '../components/CountDown'; +// import CountDown from '../components/CountDown'; const MainPage = () => { const navigate = useNavigate(); const [profileData, setProfileData] = useState([]); const [selected, setSelected] = useState(''); + const [isLoginModalOpen, setIsLoginModalOpen] = useState(false); const handleGetAllProfile = async () => { try { @@ -37,13 +40,18 @@ const MainPage = () => { handleGetAllProfile(); }, []); - const ClickPickProfile = () => { - handleGetAllProfile(); - setProfileData([]); - }; + // const ClickPickProfile = () => { + // handleGetAllProfile(); + // setProfileData([]); + // }; const ClickProfileBtn = (nungilId: number, nickname: string) => { - navigate(`/detailpage/${nungilId}`, { state: { nungilId, nickname } }); + const accessToken = localStorage.getItem('ACCESS_TOKEN'); + if (accessToken) { + setIsLoginModalOpen(true); + } else { + navigate(`/detailpage/${nungilId}`, { state: { nungilId, nickname } }); + } }; const handleSelectedChange = (newSelected: string) => { @@ -59,17 +67,17 @@ const MainPage = () => { 에서
-

마음에 드는 상대와

-

오늘 커피 한 잔 어떠세요? ☕️

+

우리 학교 친구와

+

빠르게 만나 봄 축제 즐기기 ⚡️️

- + {/* - - 인연 프로필 삭제 - 전에 어서 눈길을 보내보세요! + */} + {/* 인연 프로필 삭제 */} + 📢 보이는 카드들은 전부 앞으로 만날 수 있는 사람들이에요.
@@ -84,12 +92,17 @@ const MainPage = () => { /> )}
-
+ {/*
-
+
*/}
- +
+ {isLoginModalOpen && ( + + setIsLoginModalOpen(false)} /> + + )} ); }; @@ -147,9 +160,9 @@ const Middle = { font-size: 1.3rem; font-style: normal; font-weight: 600; - color: ${theme.colors.gray9}; + color: #7a7a7a; text-align: center; - background-color: ${theme.colors.alpha10_primary}; + background-color: #f6f6f6; border-radius: 10px; `, @@ -169,16 +182,16 @@ const Middle = { `, }; -const countdown = css` - padding: 0.8rem 1.2rem; - margin-right: 0.3rem; - font-size: 1.3rem; - font-style: normal; - font-weight: 700; - color: ${theme.colors.primary}; - background: rgb(250 114 104 / 10%); - border-radius: 20px; -`; +// const countdown = css` +// padding: 0.8rem 1.2rem; +// margin-right: 0.3rem; +// font-size: 1.3rem; +// font-style: normal; +// font-weight: 700; +// color: ${theme.colors.primary}; +// background: rgb(250 114 104 / 10%); +// border-radius: 20px; +// `; const Bottom = { Wrapper: css` @@ -214,14 +227,14 @@ const Bottom = { `, }; -const PickBtn = css` - position: fixed; - bottom: 0; - left: 50%; - z-index: 999; - margin-bottom: 7rem; - transform: translateX(-50%); -`; +// const PickBtn = css` +// position: fixed; +// bottom: 0; +// left: 50%; +// z-index: 999; +// margin-bottom: 7rem; +// transform: translateX(-50%); +// `; const Navigation = css` position: fixed; @@ -230,3 +243,11 @@ const Navigation = css` width: 100%; max-width: 42.5rem; `; + +const StModalContainer = styled.div` + position: fixed; + top: 50%; + left: 50%; + z-index: 999; + transform: translate(-50%, -50%); +`; diff --git a/src/mypage/pages/myPage.tsx b/src/mypage/pages/myPage.tsx index c47ae49..76c3833 100644 --- a/src/mypage/pages/myPage.tsx +++ b/src/mypage/pages/myPage.tsx @@ -3,12 +3,12 @@ import { useNavigate } from 'react-router-dom'; import { theme } from '../../common/styles/theme'; import NavBar from '../../common/components/NavBar'; import instance from '../../common/apis/axiosInstanse'; -import ToggleBtn from '../components/ToggleBtn'; +// import ToggleBtn from '../components/ToggleBtn'; import { useEffect, useState } from 'react'; import { Registertypes } from '../../register/types/registerTypes'; import MyProfileCard from '../components/MyProfileCard'; import { 약관동의리스트 } from '../../common/constants/memberAgreeConstants'; -import AgreeToggleBtn from '../components/AgreeToggleBtn'; +// import AgreeToggleBtn from '../components/AgreeToggleBtn'; const MyPage = () => { const navigate = useNavigate(); @@ -67,14 +67,14 @@ const MyPage = () => { 프로필 수정 -
+ {/*
회사 사람 만나지 않기
마케팅 정보 수신 동의 켜기 -
+
*/}
{약관동의리스트.map((item) => { @@ -89,7 +89,7 @@ const MyPage = () => { ); })} - + */}
@@ -139,9 +139,9 @@ const Top = { display: flex; flex-direction: column; gap: 2.5rem; - padding-top: 3rem; - padding-right: 2.7rem; - padding-left: 2.7rem; + padding: 3rem 0; + margin: 0 2.7rem; + border-bottom: 1px solid #efefef; `, TopStyle: css` diff --git a/src/nungilList/components/ReceivedNungil.tsx b/src/nungilList/components/ReceivedNungil.tsx index 25f487a..cb51439 100644 --- a/src/nungilList/components/ReceivedNungil.tsx +++ b/src/nungilList/components/ReceivedNungil.tsx @@ -35,11 +35,11 @@ const ReceivedNungil = () => { return (
-
+ {/*
내가 받은 눈길 내역은 받은 날부터 7일 만 열람 가능해요 -
+
*/}