fix: 메인페이지 로그인 안내 모달 구현 및 봄축제용 css 적용

Igloo-Club · May 14, 2024 · 6aa02ca · 6aa02ca
1 parent f970c60
commit 6aa02ca
Show file tree

Hide file tree

Showing 13 changed files with 375 additions and 200 deletions.
diff --git 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
@@ -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 (
     <div css={Container}>
       <button
         type="button"
-        onClick={() => navigate('/main-page')}
+        onClick={() => handleNavButtonClick('/main-page')}
         css={NavButton}
       >
         {handleActiveBtn('/main-page') === 'active' ? (
@@ -37,7 +54,11 @@ const NavBar = () => {
           <HomeBtnGRAY />
         )}
       </button>
-      <button type="button" onClick={() => navigate('/chat')} css={NavButton}>
+      <button
+        type="button"
+        onClick={() => handleNavButtonClick('/chat')}
+        css={NavButton}
+      >
         {handleActiveBtn('/chat') === 'active' ? (
           <ChatBtn000 />
         ) : (
@@ -47,7 +68,7 @@ const NavBar = () => {
       <button
         type="button"
         onClick={() =>
-          navigate('/nungillist', { state: { selectedBtn: 'received' } })
+          handleNavButtonClick('/nungillist', { selectedBtn: 'received' })
         }
         css={NavButton}
       >
@@ -57,7 +78,11 @@ const NavBar = () => {
           <HeartBtnGRAY />
         )}
       </button>
-      <button type="button" onClick={() => navigate('/mypage')} css={NavButton}>
+      <button
+        type="button"
+        onClick={() => handleNavButtonClick('/mypage')}
+        css={NavButton}
+      >
         {handleActiveBtn('/mypage') === 'active' ? (
           <PeopleBtn000 />
         ) : (

diff --git a/src/common/components/ProfileCard.tsx b/src/common/components/ProfileCard.tsx
@@ -2,7 +2,7 @@ import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { theme } from '../styles/theme';
 import AnimalProfile from './AnimalProfile';
-import { Watch } from '../assets/svgs';
+// import { Watch } from '../assets/svgs';
 import { ProfileDataTypesProps } from '../type/ProfileDataTypesProps';
 
 export const shortenWords = (description: string, length = 300) => {
@@ -27,11 +27,11 @@ export const calculateDday = (expiredAt: string) => {
 const ProfileCard = ({
   profileData,
   ClickProfileCard,
-  nungilState,
+  //nungilState,
 }: {
   profileData: ProfileDataTypesProps[] | null;
   ClickProfileCard: (nungilId: number, nickname: string) => void;
-  nungilState: string;
+  // nungilState: string;
 }) => {
   const detailbtn = '상세 프로필 보기 >';
 
@@ -47,22 +47,25 @@ const ProfileCard = ({
             <div css={Profile.Top}>
               <AnimalProfile animalFace={profile.animalFace} />
               <div css={Profile.Detail}>
-                <span css={Profile.CompanyName}>{profile.companyName}</span>
-                <span css={Profile.Job}>{profile.job}</span>
+                <span css={Profile.nickname}>{profile.nickname}</span>
+                <span css={Profile.Job}>
+                  {profile.job}, {profile.sex}
+                </span>
               </div>
             </div>
             <div css={Profile.DescriptionBox}>
               <span>{shortenWords(profile.description)}</span>
             </div>
-            {nungilState === 'received' || nungilState === 'sent' ? (
+            {/* {nungilState === 'received' || nungilState === 'sent' ? (
               <StDdaySection>
                 <Watch />
                 <span>
                   프로필 삭제까지 D-{calculateDday(profile.expiredAt)}
                 </span>
                 <StDetailBtn>{detailbtn}</StDetailBtn>
               </StDdaySection>
-            ) : null}
+            ) : null} */}
+            <StDetailBtn>{detailbtn}</StDetailBtn>
           </StProfileWrapper>
         ))}
     </div>
@@ -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
@@ -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 = () => {
                 ))}
           </div>
         </div>
-        <div css={Middle.Notice}>
+        {/* <div css={Middle.Notice}>
           <div css={Middle.NoticeTitle}>
             <span>이건 알아두세요!</span>
           </div>
@@ -231,7 +232,7 @@ const DetailProfile = () => {
               음주 : {profileData?.alcohol && profileData.alcohol}
             </div>
           </div>
-        </div>
+        </div> */}
       </div>
     </div>
   );

diff --git 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;