Merge pull request #130 from softeerbootcamp4th/feat/#129/Framer-Motion

Feat/#129/FramerMotion
softeerbootcamp4th · Aug 20, 2024 · 3685da8 · 3685da8
2 parents e7a97f2 + a8be7be
commit 3685da8
Show file tree

Hide file tree

Showing 15 changed files with 356 additions and 262 deletions.
diff --git a/service/package.json b/service/package.json
@@ -17,6 +17,7 @@
     "eslint-import-resolver-node": "^0.3.9",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jsx-a11y": "^6.5.1",
+    "framer-motion": "^11.3.28",
     "json-server": "^1.0.0-beta.1",
     "micro-slider": "^1.1.0",
     "postcss": "^8.4.39",

diff --git a/service/src/components/buttons/BlueButton.jsx b/service/src/components/buttons/BlueButton.jsx
@@ -7,7 +7,6 @@ function BlueButton({ value, styles, onClickFunc, disabled = false }) {
     <button
       onClick={onClickFunc}
       className={`${styles} ${disabled ? 'opacity-30' : 'opacity-100 hover-scale-ani'} set-center rounded-full bg-primary-blue text-neutral-white`}
-      disabled={disabled}
     >
       {value}
     </button>

diff --git a/service/src/components/modal/CommentInputModal.jsx b/service/src/components/modal/CommentInputModal.jsx
@@ -3,12 +3,15 @@ import PropTypes from 'prop-types';
 import { postComment } from '@/api/comment/index';
 import ModalFrame from './ModalFrame';
 import BlueButton from '@/components/buttons/BlueButton';
+import { useAnimation } from 'framer-motion';
 
 function CommentInputModal({
   closeCommentModal,
   AlreadyPostComment,
   setResultModalOpen,
 }) {
+  const controls = useAnimation();
+
   const [inputComment, setInputComment] = useState('');
   const handleInputText = e => {
     if (e.target.value.length > 50) {
@@ -29,11 +32,20 @@ function CommentInputModal({
       console.error('댓글 등록 API 통신 실패:', error);
     }
   };
+
+  const handleDisabledClick = () => {
+    controls.start({
+      x: [0, -20, 20, -20, 20, 0],
+      transition: { duration: 0.5, ease: 'easeInOut' },
+    });
+  };
+
   return (
     <ModalFrame
       handleExit={closeCommentModal}
       tag="툴 박스 1개"
       title="일일 한줄 기대평 이벤트"
+      controls={controls}
     >
       <div className="relative flex-col px-3000 set-center">
         <textarea
@@ -47,20 +59,12 @@ function CommentInputModal({
           기대평을 등록한 후에는 다시 수정할 수 없어요!
         </p>
 
-        {inputComment != '' ? (
-          <BlueButton
-            value="확인"
-            onClickFunc={handleComment}
-            styles="px-2000 py-200 text-body-3-semibold"
-          />
-        ) : (
-          <BlueButton
-            value="확인"
-            onClickFunc={handleComment}
-            styles="px-2000 py-200 text-body-3-semibold"
-            disabled={true}
-          />
-        )}
+        <BlueButton
+          value="확인"
+          onClickFunc={inputComment != '' ? handleComment : handleDisabledClick}
+          styles="px-2000 py-200 text-body-3-semibold"
+          disabled={inputComment === ''}
+        />
       </div>
     </ModalFrame>
   );

diff --git a/service/src/components/modal/ModalFrame.jsx b/service/src/components/modal/ModalFrame.jsx
@@ -2,19 +2,23 @@ import React, { useEffect } from 'react';
 import ModalPortal from './ModalPortal';
 import ModalClose from '@/assets/icons/modalClose.svg';
 import PropTypes from 'prop-types';
+import { motion } from 'framer-motion';
 
-function ModalFrame({ children, handleExit, tag, title }) {
-  // 모달창이 띄워졌을때 뒷부분 스크롤 막기 위한 코드
+function ModalFrame({ children, handleExit, tag, title, controls }) {
   useEffect(() => {
     document.body.style.overflow = 'hidden';
     return () => {
       document.body.style.overflow = 'unset';
     };
   }, []);
+
   return (
     <ModalPortal>
       <div className="fixed inset-0 set-center bg-opacity-50 bg-neutral-black z-[10]">
-        <div className="bg-neutral-white p-1500 flex flex-col items-center relative rounded-[20px]">
+        <motion.div
+          animate={controls}
+          className="bg-neutral-white p-1500 flex flex-col items-center relative rounded-[20px]"
+        >
           <button
             onClick={handleExit}
             className="absolute top-[29px] right-[29px]"
@@ -30,7 +34,7 @@ function ModalFrame({ children, handleExit, tag, title }) {
             {title}
           </span>
           {children}
-        </div>
+        </motion.div>
       </div>
     </ModalPortal>
   );
@@ -41,6 +45,7 @@ ModalFrame.propTypes = {
   handleExit: PropTypes.func.isRequired,
   tag: PropTypes.string.isRequired,
   title: PropTypes.string.isRequired,
+  controls: PropTypes.object,
 };
 
 export default ModalFrame;
diff --git a/service/src/components/modal/PhoneAuthModal.jsx b/service/src/components/modal/PhoneAuthModal.jsx
@@ -9,6 +9,7 @@ function PhoneAuthModal({
   option,
   setResultModalOpen,
   closeAuthModal,
+  handleDisabledClick,
 }) {
   const { userInfo, setUserInfo } = useContext(AuthContext);
   const [validateCode, setValidateCode] = useState('');
@@ -63,20 +64,12 @@ function PhoneAuthModal({
           </span>
         )}
       </div>
-      {isValid ? (
-        <BlueButton
-          value="인증번호 확인"
-          onClickFunc={handleAuth}
-          styles="px-2000 py-400 text-body-3-semibold"
-        />
-      ) : (
-        <BlueButton
-          value="인증번호 확인"
-          onClickFunc={handleAuth}
-          styles="px-2000 py-400 text-body-3-semibold"
-          disabled={true}
-        />
-      )}
+      <BlueButton
+        value="인증번호 확인"
+        onClickFunc={isValid ? handleAuth : handleDisabledClick}
+        styles="px-2000 py-400 text-body-3-semibold"
+        disabled={!isValid}
+      />
     </>
   );
 }
@@ -86,6 +79,7 @@ PhoneAuthModal.propTypes = {
   setResultModalOpen: PropTypes.func,
   closeAuthModal: PropTypes.func.isRequired,
   option: PropTypes.string,
+  handleDisabledClick: PropTypes.func.isRequired,
 };
 
 export default PhoneAuthModal;
diff --git a/service/src/components/modal/PhoneInputModal.jsx b/service/src/components/modal/PhoneInputModal.jsx
@@ -7,6 +7,7 @@ import phoneNumberFormatting from '@/utils/phoneNumberFormatting';
 import ModalFrame from './ModalFrame';
 import PhoneAuthModal from './PhoneAuthModal';
 import BlueButton from '@/components/buttons/BlueButton';
+import { useAnimation } from 'framer-motion';
 
 function PhoneInputModal({ closePhoneModal, option = '', setResultModalOpen }) {
   const [inputPhone, setInputPhone] = useState('');
@@ -17,6 +18,8 @@ function PhoneInputModal({ closePhoneModal, option = '', setResultModalOpen }) {
   const [tag, setTag] = useState('로그인');
   const [title, setTitle] = useState('핸드폰 번호를 입력해주세요');
 
+  const controls = useAnimation();
+
   const handleInputText = e => {
     setInputPhone(e.target.value);
     setIsValid(isValidPhoneNumber(e.target.value));
@@ -48,60 +51,73 @@ function PhoneInputModal({ closePhoneModal, option = '', setResultModalOpen }) {
     closePhoneModal();
   };
 
+  const handleDisabledClick = () => {
+    controls.start({
+      x: [0, -20, 20, -20, 20, 0],
+      transition: { duration: 0.5, ease: 'easeInOut' },
+    });
+  };
+
   return (
-    <ModalFrame handleExit={closePhoneModal} tag={tag} title={title}>
+    <ModalFrame
+      handleExit={closePhoneModal}
+      tag={tag}
+      title={title}
+      controls={controls}
+    >
       {showAuthModal ? (
         <PhoneAuthModal
           inputPhone={inputPhone}
           setResultModalOpen={setResultModalOpen}
           closeAuthModal={closeAuthModal}
           option={option}
+          handleDisabledClick={handleDisabledClick}
         />
       ) : (
-        <div className="flex flex-col items-center">
-          <div className="relative">
-            <input
-              placeholder="핸드폰 번호 입력 (01XXXXXXXXX)"
-              onClick={firstClickEvent}
-              onChange={handleInputText}
-              className={`w-[640px] h-[80px] px-[30px] pl-[40px] mb-800 text-body-3-regular text-neutral-black placeholder:text-body-3-regular placeholder-neutral-black placeholder-opacity-50 border-solid ${!isValid && firstClick ? 'border-red-500 focus:border-red-500' : 'border-neutral-black focus:border-primary-blue'} border-[4px] rounded-[10px] outline-none`}
-            />
-            {!isValid && firstClick && (
-              <span className="absolute top-[75%] left-[2%] text-red-500 text-detail-3-regular">
-                전화번호 형식이 맞지 않습니다!
+        <>
+          <div className="flex flex-col items-center">
+            <div className="relative">
+              <input
+                placeholder="핸드폰 번호 입력 (01XXXXXXXXX)"
+                onClick={firstClickEvent}
+                onChange={handleInputText}
+                className={`w-[640px] h-[80px] px-[30px] pl-[40px] mb-800 text-body-3-regular text-neutral-black placeholder:text-body-3-regular placeholder-neutral-black placeholder-opacity-50 border-solid ${!isValid && firstClick ? 'border-red-500 focus:border-red-500' : 'border-neutral-black focus:border-primary-blue'} border-[4px] rounded-[10px] outline-none`}
+              />
+              {!isValid && firstClick && (
+                <span className="absolute top-[75%] left-[2%] text-red-500 text-detail-3-regular">
+                  전화번호 형식이 맞지 않습니다!
+                </span>
+              )}
+            </div>
+            <div
+              onClick={handleCheck}
+              className="relative flex items-center justify-center cursor-pointer mb-800"
+            >
+              <div className="border-solid border-neutral-black border-[2px] w-600 h-600 mt-1"></div>
+              <strong className="mt-0.5 ml-200 text-detail-2-semibold">
+                [필수]
+              </strong>
+              <span className="mt-1 ml-200 text-neutral-black text-detail-2-regular hover:underline">
+                개인정보 수집 및 이용 제공 동의
               </span>
-            )}
-          </div>
-          <div
-            onClick={handleCheck}
-            className="relative flex items-center justify-center cursor-pointer mb-800"
-          >
-            <div className="border-solid border-neutral-black border-[2px] w-600 h-600 mt-1"></div>
-            <strong className="mt-0.5 ml-200 text-detail-2-semibold">
-              [필수]
-            </strong>
-            <span className="mt-1 ml-200 text-neutral-black text-detail-2-regular hover:underline">
-              개인정보 수집 및 이용 제공 동의
-            </span>
-            {isCheck && (
-              <img src={Check} alt="check" className="absolute left-0 top-2" />
-            )}
-          </div>
-          {isValid && isCheck ? (
+              {isCheck && (
+                <img
+                  src={Check}
+                  alt="check"
+                  className="absolute left-0 top-2"
+                />
+              )}
+            </div>
             <BlueButton
               value="본인인증하기"
-              onClickFunc={handleAuth}
+              onClickFunc={
+                isValid && isCheck ? handleAuth : handleDisabledClick
+              }
               styles="px-2000 py-400 text-body-3-semibold"
+              disabled={!(isValid && isCheck)}
             />
-          ) : (
-            <BlueButton
-              value="본인인증하기"
-              onClickFunc={handleAuth}
-              styles="px-2000 py-400 text-body-3-semibold"
-              disabled={true}
-            />
-          )}
-        </div>
+          </div>
+        </>
       )}
     </ModalFrame>
   );

diff --git a/service/src/pages/eventIntro/EventIntro.jsx b/service/src/pages/eventIntro/EventIntro.jsx
@@ -2,14 +2,23 @@ import React from 'react';
 import EventIntroMain from '@/pages/eventIntro/EventIntroMain';
 import EventIntroNav from '@/pages/eventIntro/EventIntroNav';
 import EventIntroRewards from '@/pages/eventIntro/EventIntroRewards';
+import { animationVariants } from '@/styles/FramerMotion';
+import { motion } from 'framer-motion';
 
 function EventIntro() {
   return (
     <div>
       <EventIntroMain />
       <div className="bg-gradient-lightblue-white-vertical mt-[1px]">
-        <EventIntroNav />
-        <EventIntroRewards />
+        <motion.div
+          initial="hidden"
+          animate="visible"
+          variants={animationVariants}
+          transition={{ duration: 0.6, ease: 'easeOut', delay: 0.5 }}
+        >
+          <EventIntroNav />
+          <EventIntroRewards />
+        </motion.div>
       </div>
     </div>
   );