Merge pull request #35 from KingBoRam/feat/myprofile

✨ Feat: fti 테스트 저장하는 api 적용
OZ-Coding-School · Sep 5, 2024 · d2eceeb · d2eceeb
2 parents d796a39 + 55e31f4
commit d2eceeb
Show file tree

Hide file tree

Showing 17 changed files with 193 additions and 494 deletions.
diff --git a/src/components/common/ModalBottom.tsx b/src/components/common/ModalBottom.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import ReactDOM from 'react-dom';
 import { motion, AnimatePresence } from 'framer-motion';
 
@@ -11,6 +11,18 @@ interface ModalBottomProps {
 }
 
 const ModalBottom: React.FC<ModalBottomProps> = ({ isOpen, onClose, title1, title2, children }) => {
+  useEffect(() => {
+    const handleEsc = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        onClose();
+      }
+    };
+    document.addEventListener('keydown', handleEsc);
+    return () => {
+      document.removeEventListener('keydown', handleEsc);
+    };
+  }, [onClose]);
+
   const handleBackgroundClick = (e: React.MouseEvent) => {
     e.preventDefault();
     onClose();
@@ -30,9 +42,10 @@ const ModalBottom: React.FC<ModalBottomProps> = ({ isOpen, onClose, title1, titl
             initial={{ y: '100%' }}
             animate={{ y: 0 }}
             exit={{ y: '100%' }}
-            transition={{ type: 'spring', stiffness: 300, damping: 30 }}>
-            <div className="text-center text-2xl font-semibold">{title1}</div>
-            <div className="text-center text-2xl font-semibold">{title2}</div>
+            transition={{ type: 'spring', stiffness: 300, damping: 30 }}
+            onClick={(e) => e.stopPropagation()}>
+            <div className="text-center text-2xl font-semibold xs:text-xl">{title1}</div>
+            <div className="text-center text-2xl font-semibold xs:text-xl">{title2}</div>
             <div className="max-h-[360px] overflow-y-auto">{children}</div>
           </motion.div>
         </motion.div>

diff --git a/src/components/common/ModalCenter.tsx b/src/components/common/ModalCenter.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import ReactDOM from 'react-dom';
 
 interface ModalCenterProps {
@@ -9,16 +9,28 @@ interface ModalCenterProps {
   children?: React.ReactNode;
 }
 
-// ModalCenter 를 위한 컴포넌트.
+// ModalCenter component
+
+const ModalCenter: React.FC<ModalCenterProps> = ({ isOpen, onClose, title1, title2, children }) => {
+  useEffect(() => {
+    const handleEsc = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        onClose();
+      }
+    };
+    document.addEventListener('keydown', handleEsc);
+    return () => {
+      document.removeEventListener('keydown', handleEsc);
+    };
+  }, [onClose]);
 
-const ModalCenter: React.FC<ModalCenterProps> = ({ isOpen, title1, title2, children }) => {
   if (!isOpen) return null;
 
   return ReactDOM.createPortal(
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
-      <div className="relative mx-3 w-[600px] rounded-lg bg-white p-8 shadow-lg">
-        <div className="text-center text-2xl font-semibold">{title1}</div>
-        <div className="text-center text-2xl font-semibold">{title2}</div>
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50" onClick={onClose}>
+      <div className="relative mx-3 w-[600px] rounded-lg bg-white p-6 shadow-lg" onClick={(e) => e.stopPropagation()}>
+        <div className="xxs:text-[20px] text-center text-2xl font-semibold xs:text-[22px]">{title1}</div>
+        <div className="xxs:text-[20px] text-center text-2xl font-semibold xs:text-[22px]">{title2}</div>
         <div className="mt-4 text-center">{children}</div>
       </div>
     </div>,

diff --git a/src/components/landing/FoodsCarousel.tsx b/src/components/landing/FoodsCarousel.tsx
@@ -44,16 +44,20 @@ const FoodsCarousel: React.FC<FoodsCarouselProps> = ({ spicy }) => {
 
   const listToUse = spicy ? userFoods : FoodsCarouselList;
   const defaultImageUrl = '/images/CuteEgg.svg';
+  const isSingleItem = listToUse.length === 1;
 
   return (
     <div className="h-full w-full py-4">
       <Swiper
         slidesPerView={'auto'}
         pagination={{
           clickable: true,
-        }}>
+        }}
+        className={isSingleItem ? 'flex-start flex justify-center' : ''}>
         {listToUse?.map((item) => (
-          <SwiperSlide key={item.food_name} className="flex h-[70%] w-[70%] flex-col items-center justify-center pl-4">
+          <SwiperSlide
+            key={item.food_name}
+            className={`flex h-[70%] w-[70%] flex-col items-center justify-center pl-4 ${isSingleItem ? 'mx-auto' : ''}`}>
             <Link to={`/foods/${item.food_id}`} state={{ name: item.food_name }} className="relative w-full">
               <ImageWithPlaceholder src={`/${item.image_url}` || defaultImageUrl} alt={item.food_name} />
             </Link>

diff --git a/src/components/layout/Nav.tsx b/src/components/layout/Nav.tsx
@@ -53,7 +53,7 @@ const Nav = () => {
     <div className="fixed bottom-0 z-50 flex h-[75px] w-full max-w-[600px] justify-around bg-white xs:h-[65px]">
       <Link to="/" className="flex w-1/4 flex-col items-center justify-center text-center xs:gap-2">
         <img
-          className="mb-2 h-[19px] w-[19px] xs:mb-0 xs:w-[14px]"
+          className="mb-2 h-[20px] w-[20px] xs:mb-0 xs:w-[18px]"
           src={isHomePath ? '/images/Home.svg' : '/images/HomeInactive.svg'}
           alt="홈"
         />
@@ -64,7 +64,7 @@ const Nav = () => {
 
       <Link to="/thunder" className="flex w-1/4 flex-col items-center justify-center text-center xs:gap-2">
         <img
-          className="mb-2 h-[19px] w-[19px] xs:mb-0 xs:w-[14px]"
+          className="mb-2 h-[20px] w-[20px] xs:mb-0 xs:w-[18px]"
           src={isThunderPath ? '/images/SocialDiningActive.svg' : '/images/SocialDining.svg'}
           alt="소셜 다이닝"
         />
@@ -76,7 +76,7 @@ const Nav = () => {
 
       <Link to="/board" className="flex w-1/4 flex-col items-center justify-center text-center xs:gap-2">
         <img
-          className="mb-2 h-[19px] w-[19px] xs:mb-0 xs:w-[14px]"
+          className="mb-2 h-[20px] w-[20px] xs:mb-0 xs:w-[18px]"
           src={isBoardPath ? '/images/DeliciousInFinder.svg' : '/images/DeliciousFinder.svg'}
           alt="맛있는 발견"
         />
@@ -87,7 +87,7 @@ const Nav = () => {
 
       <Link to="/myprofile" className="flex w-1/4 flex-col items-center justify-center text-center xs:gap-2">
         <img
-          className="mb-2 h-[19px] w-[19px] xs:mb-0 xs:w-[14px]"
+          className="mb-2 h-[20px] w-[20px] xs:mb-0 xs:w-[18px]"
           src={isMyProfilePath ? '/images/ProfileActive.svg' : '/images/ProfileInactive.svg'}
           alt="프로필"
         />

diff --git a/src/components/myprofile/UserInfo.tsx b/src/components/myprofile/UserInfo.tsx
@@ -1,28 +1,55 @@
-import React from 'react';
-import { Link, useLocation } from 'react-router-dom';
+import React, { useState } from 'react';
+import { Link, useLocation, useNavigate } from 'react-router-dom';
+import { authInstance } from '../../api/util/instance';
+import ModalCenter from '../common/ModalCenter';
 
 interface User {
-  fti_type_name: string | null;
-  introduce: string | null;
   nickname: string;
-  profile_image_url: string | null;
+  introduce: string | null;
+  fti_type_name: string | null;
   spicy_preference: number | null;
+  profile_image_url: string | null;
 }
 
 interface UserInfoProps {
   user?: User;
+  refetchUserProfile: () => void;
 }
 
-const UserInfo: React.FC<UserInfoProps> = ({ user }) => {
+const UserInfo: React.FC<UserInfoProps> = ({ user, refetchUserProfile }) => {
   const location = useLocation();
+  const navigate = useNavigate();
   const isProfilePage = location.pathname.includes('/profile/');
 
+  const [isModalCenterOpen, setIsModalCenterOpen] = useState(false);
+  const openModalCenter = () => setIsModalCenterOpen(true);
+  const closeModalCenter = () => setIsModalCenterOpen(false);
+
   const handleImageError = (event: React.SyntheticEvent<HTMLImageElement, Event>) => {
     event.currentTarget.src = '/images/anonymous_avatars.svg';
   };
 
+  const handleConfirmFti = () => {
+    const FtiResults = localStorage.getItem('FtiResults');
+    if (FtiResults) {
+      openModalCenter();
+    } else {
+      navigate('/FTI');
+    }
+  };
+
+  const handleSaveResults = () => {
+    const FtiResults = { fti_style: [localStorage.getItem('FtiResults')] };
+    if (FtiResults) {
+      authInstance.post('/api/ftitests/result/', FtiResults).then(() => {
+        refetchUserProfile();
+        closeModalCenter();
+      });
+    }
+  };
+
   return (
-    <div className="flex h-[35%] flex-col items-center justify-evenly p-[1rem]">
+    <div className="m-[1rem] flex h-[300px] flex-col items-center justify-evenly xs:m-2 xs:h-[200px]">
       <div className="relative flex w-[30%] items-center justify-center pt-[30%] xs:w-[35%] xs:pt-[35%]">
         <Link to={user ? `/profile/${user.nickname}` : '#'}>
           <img
@@ -33,7 +60,6 @@ const UserInfo: React.FC<UserInfoProps> = ({ user }) => {
           />
         </Link>
       </div>
-
       {!user ? (
         <Link to="/signin" className="flex h-[8rem] flex-col items-center justify-center">
           <p className="text-[22px] font-bold xs:text-[18px]">로그인이 필요합니다</p>
@@ -46,12 +72,27 @@ const UserInfo: React.FC<UserInfoProps> = ({ user }) => {
             (user.fti_type_name ? (
               <p className="text-[16px] text-[#AD5E33] xs:text-[12px]">{user.fti_type_name}</p>
             ) : (
-              <Link to="/FTI" className="text-[16px] text-[#AD5E33] xs:text-[12px]">
+              <div onClick={handleConfirmFti} className="cursor-pointer text-[16px] text-[#AD5E33] xs:text-[12px]">
                 테스트를 통해 FTI타입을 확인해보세요
-              </Link>
+              </div>
             ))}
         </div>
       )}
+      <ModalCenter isOpen={isModalCenterOpen} title1="저장된 FTI 검사 결과가 있습니다." onClose={closeModalCenter}>
+        <p className="text-[#666666] xs:text-[14px]">이전 테스트 결과를 프로필에 저장하시겠어요?</p>
+        <div className="mt-8 flex w-full gap-3">
+          <button
+            onClick={closeModalCenter}
+            className="w-full rounded-xl border-2 border-orange-400 px-1 py-2 font-semibold text-orange-500 hover:bg-orange-50">
+            FTI 테스트로 이동
+          </button>
+          <button
+            onClick={handleSaveResults}
+            className="w-full rounded-xl border-2 border-orange-500 bg-orange-500 px-1 py-2 font-semibold text-white hover:border-orange-600 hover:bg-orange-600">
+            결과 저장
+          </button>
+        </div>
+      </ModalCenter>
     </div>
   );
 };

diff --git a/src/components/myprofile/UserLink.tsx b/src/components/myprofile/UserLink.tsx
@@ -1,5 +1,5 @@
 import { IoIosArrowForward } from 'react-icons/io';
-import { Link } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 import { motion } from 'framer-motion';
 import ModalCenter from '../common/ModalCenter';
 import { useState } from 'react';
@@ -14,6 +14,7 @@ const UserLink: React.FC<UserLinkProps> = ({ text, src, isUserLoggedIn }) => {
   const [isModalCenterOpen, setIsModalCenterOpen] = useState(false);
   const openModalCenter = () => setIsModalCenterOpen(true);
   const closeModalCenter = () => setIsModalCenterOpen(false);
+  const navigate = useNavigate();
 
   const handleNavigate = (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
     if (!isUserLoggedIn) {
@@ -28,7 +29,7 @@ const UserLink: React.FC<UserLinkProps> = ({ text, src, isUserLoggedIn }) => {
         <Link
           to={isUserLoggedIn ? src : '#'}
           onClick={handleNavigate}
-          className="flex w-full cursor-pointer items-center justify-between p-[12px] text-[20px] hover:rounded-lg hover:font-bold hover:text-primary xs:py-[0.7rem] xs:text-[14px]">
+          className="flex w-full cursor-pointer items-center justify-between p-[12px] px-4 text-[20px] hover:rounded-lg hover:font-bold hover:text-primary xs:py-[0.7rem] xs:text-[14px]">
           {text}
           <IoIosArrowForward className="text-[20px] xs:text-[16px]" />
         </Link>
@@ -38,17 +39,20 @@ const UserLink: React.FC<UserLinkProps> = ({ text, src, isUserLoggedIn }) => {
         title1="로그인이 필요한 서비스 입니다."
         title2=""
         onClose={closeModalCenter}>
-        <div className="mt-8 flex w-full space-x-4">
+        <p className="text-[#666666] xs:text-[14px]">로그인 페이지로 이동하시겠어요?</p>
+        <div className="mt-8 flex w-full gap-2">
           <button
             onClick={closeModalCenter}
-            className="w-full flex-1 rounded-xl border-2 border-orange-400 px-1 py-2 font-semibold text-orange-500 hover:bg-orange-50">
+            className="w-full rounded-xl border-2 border-orange-400 px-1 py-2 font-semibold text-orange-500 hover:bg-orange-50">
             취소
           </button>
-          <Link to="/signin" className="flex-1">
-            <button className="w-full rounded-xl bg-orange-500 px-2 py-3 font-semibold text-white hover:bg-orange-600">
-              로그인
-            </button>
-          </Link>
+          <button
+            onClick={() => {
+              navigate('/signin');
+            }}
+            className="w-full rounded-xl border-2 border-orange-500 bg-orange-500 px-1 py-2 font-semibold text-white hover:border-orange-600 hover:bg-orange-600">
+            로그인
+          </button>
         </div>
       </ModalCenter>
     </>