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 = () => {
);
})}
-
window.open('https://forms.gle/kc8d9co81TyUtCgM9', '_blank')
@@ -97,7 +97,7 @@ const MyPage = () => {
css={Middle.MiddleStyle}
>
오류 사항 제보하기
-
+ */}
@@ -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일
만 열람 가능해요
-
+
*/}