merge/#57: develop 브랜치 merge

.github/workflows/deploy.yml

@@ -2,7 +2,7 @@ name: SolSolHigh-FE Deploy
 
 on:
     push:
-        branches: develop
+        branches: feat/#57-main-menus
 
 jobs:
     deploy:
@@ -17,4 +17,4 @@ jobs:
                   password: ${{ secrets.SSH_PASSWORD }}
                   script: |
                       cd ~/solsol-high
-                      ./static.sh develop
+                      ./static.sh feat/#57-main-menus

ssh-web/src/components/molecules/AddPromiseCard/AddPromiseCard.types.tsx

@@ -0,0 +1,3 @@
+export interface AddPromiseCardProps {
+  handleModal: () => void;
+}

ssh-web/src/components/molecules/AddPromiseCard/index.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Typography } from '../../atoms/Typography';
+import { AddPromiseCardProps } from './AddPromiseCard.types';
+
+export const AddPromiseCard = ({ handleModal }: AddPromiseCardProps) => {
+  return (
+    <div className="flex justify-center cursor-pointer">
+      <div
+        className="flex flex-col p-4 bg-primary-100 items-center w-32 h-48 rounded-lg shadow-md opacity-65 hover:opacity-100 hover:bg-primary-200 transition-opacity duration-300"
+        onClick={handleModal}
+      >
+        <div className="w-24 h-24 bg-secondary-300 rounded-lg flex items-center justify-center">
+          <span className="text-lg text-secondary-700">+</span>
+        </div>
+        <div className="text-center">
+          <Typography color="dark" size="sm" classNameStyles="mt-4 text-center">
+            약속 요청하기
+          </Typography>
+        </div>
+      </div>
+    </div>
+  );
+};

ssh-web/src/components/molecules/PromiseItem/PromiseItem.styles.tsx

@@ -0,0 +1,12 @@
+import { tv } from 'tailwind-variants';
+
+export const cardStyle = tv({
+  base: 'flex flex-col p-4 bg-primary-100 items-center rounded-lg shadow-md relative hover:bg-primary-200 transition duration-300',
+  variants: {
+    size: {
+      M: 'w-32 h-48',
+      T: 'w-32 h-48',
+      D: 'w-32 h-48',
+    },
+  },
+});

ssh-web/src/components/molecules/PromiseItem/PromiseItem.types.tsx

@@ -0,0 +1,7 @@
+import { IPromiseLogs } from '../../../interfaces/promiseTicketInterface';
+
+export interface PromiseItemProps {
+  handleModal: (log: IPromiseLogs) => void;
+  isConfirm: boolean;
+  log: IPromiseLogs;
+}

ssh-web/src/components/molecules/PromiseItem/index.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { useRecoilValue } from 'recoil';
+import { EResize } from '../../../themes/themeBase';
+import { Typography } from '../../atoms/Typography';
+import { cardStyle } from './PromiseItem.styles';
+import { PromiseItemProps } from './PromiseItem.types';
+import stemp from './stemp.png';
+import { resizeState } from '../../../atoms/resize';
+import defaultImg from './../../organisms/PromiseDetailModal/promiseImg.png';
+
+export const PromiseItem = ({
+  handleModal,
+  isConfirm,
+  log,
+}: PromiseItemProps) => {
+  const size = useRecoilValue<EResize>(resizeState);
+  return (
+    <div className="flex justify-center cursor-pointer w-full">
+      <div
+        className={cardStyle({ size })}
+        onClick={() => {
+          handleModal(log);
+        }}
+      >
+        <div className="w-24 h-24 rounded-lg bg-cover bg-center relative">
+          {' '}
+          {isConfirm && (
+            <>
+              <div className="absolute bg-black opacity-35 rounded-lg w-24 h-24"></div>
+              <img className="absolute w-24 h-24 opacity-100" src={stemp}></img>
+            </>
+          )}
+          <img
+            src={isConfirm ? log.imageUrl : defaultImg}
+            className="w-full h-full bg-red-600 bg-opacity-50 flex items-center justify-center rounded-lg"
+          />
+        </div>
+        <Typography
+          color="primary"
+          size="sm"
+          weight="semibold"
+          classNameStyles="mt-4 text-center"
+        >
+          {log.description}
+        </Typography>
+      </div>
+    </div>
+  );
+};

ssh-web/src/components/molecules/QuizModal/ModalContent.tsx

@@ -18,9 +18,12 @@ export const ModalContent = ({
   const [startY, setStartY] = useState<number | null>(null);
   const [moveY, setMoveY] = useState<number>(0);
   const modalRef = useRef<HTMLDivElement | null>(null);
+  const headerRef = useRef<HTMLDivElement | null>(null);
 
   const handleTouchStart = (e: React.TouchEvent) => {
-    setStartY(e.touches[0].clientY);
+    if (headerRef.current && headerRef.current.contains(e.target as Node)) {
+      setStartY(e.touches[0].clientY);
+    }
   };
 
   const handleTouchMove = (e: React.TouchEvent) => {
@@ -48,6 +51,7 @@ export const ModalContent = ({
       }
       setMoveY(0);
     }
+    setStartY(null);
   };
 
   const backgroundColors = {
@@ -56,9 +60,9 @@ export const ModalContent = ({
   };
 
   const modalStyles = {
-    M: `fixed px-4 pt-8 bottom-0 rounded-t-3xl z-20 w-full mob:h-[81%] ${backgroundColors[color]} transition-transform overflow-auto`,
+    M: `fixed px-4 pt-0 bottom-0 rounded-t-3xl z-20 w-full mob:h-[90%] ${backgroundColors[color]} transition-transform`,
     T: `absolute px-[5%] py-[2%] max-w-[700px] min-w-[430px] z-20 top-12 left-1/2 -translate-x-1/2 w-2/3 h-max min-h-[calc(100vh-24rem)] flex justify-center items-center rounded-xl ${backgroundColors[color]}`,
-    D: `absolute px-[5%] py-[2%] max-w-[700px] min-w-[430px] z-20 top-10 left-1/2 -translate-x-1/2 w-2/3 h-max min-h-[calc(100vh-12rem)] flex justify-center items-center rounded-xl ${backgroundColors[color]}`,
+    D: `absolute px-[5%] py-[2%] max-w-[700px] min-w-[430px] z-20 top-10 left-1/2 -translate-x-1/2 w-2/3 h-max min-h-[calc(100vh-10rem)] flex justify-center items-center rounded-xl ${backgroundColors[color]}`,
   };
 
   return (
@@ -69,10 +73,14 @@ export const ModalContent = ({
       onTouchMove={handleTouchMove}
       onTouchEnd={handleTouchEnd}
     >
-      {size === EResize.M && (
-        <div className="w-12 h-1 bg-gray-400 rounded-full mt-2 mb-4 mx-auto" />
-      )}
-      {size !== EResize.M && <ModalCloseButton onClose={onClose} />}
+      <div ref={headerRef} className="cursor-move">
+        {size === EResize.M && (
+          <div className="w-full h-14 flex flex-col justify-center items-center">
+            <div className="w-24 h-1 bg-gray-400 rounded-full mb-1 mx-auto" />
+          </div>
+        )}
+        {size !== EResize.M && <ModalCloseButton onClose={onClose} />}
+      </div>
       {children}
     </div>
   );

ssh-web/src/components/organisms/AddPromiseModal/AddPromiseModal.types.tsx

@@ -0,0 +1,4 @@
+export interface AddPromiseModalProps {
+  countTicket: number;
+  onUpload: () => void;
+}

ssh-web/src/components/organisms/AddPromiseModal/index.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import { Button } from '../../atoms/Button';
+import { Typography } from '../../atoms/Typography';
+import { AddPromiseModalProps } from './AddPromiseModal.types';
+
+export const AddPromiseModal = ({
+  countTicket,
+  onUpload,
+}: AddPromiseModalProps) => {
+  if (countTicket === 0) {
+    return (
+      <div className="flex flex-col align-middle text-center py-4">
+        <Typography
+          color="dark"
+          size="2xl"
+          weight="bold"
+          classNameStyles="my-4"
+        >
+          보유한 약속권이 없어요!
+        </Typography>
+        <Button fullWidth={true} onClick={onUpload} classNameStyles="my-4">
+          확인
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="w-[100%] h-[100%] flex justify-center">
+      <div className="flex flex-col items-center align-middle w-[100%] max-w-[24rem]">
+        <img
+          src={process.env.PUBLIC_URL + 'assets/images/common/promiseImg.png'}
+          className="rounded-2xl shadow-lg w-[90%] max-w-[24rem]"
+        />
+        <Typography
+          color="dark"
+          size="4xl"
+          weight="bold"
+          classNameStyles="text-center mt-2"
+        >
+          약속
+        </Typography>
+        <textarea className="rounded-lg mt-2 w-[100%] h-[6rem] shadow-lg border-secondary-800 p-2 resize-none"></textarea>
+        <Typography
+          size="2xl"
+          color="dark"
+          weight="semibold"
+          classNameStyles="text-center mt-4"
+        >
+          하기를 부모님과{' '}
+          <Typography
+            size="2xl"
+            color="primary"
+            weight="semibold"
+            classNameStyles="text-center inline"
+          >
+            약속
+          </Typography>
+          해요
+        </Typography>
+        <Button
+          color="primary"
+          size="md"
+          fullWidth={true}
+          classNameStyles="mt-4"
+          onClick={onUpload}
+        >
+          <Typography color="light" weight="bold" size="xl">
+            약속하기
+          </Typography>
+        </Button>
+      </div>
+    </div>
+  );
+};

ssh-web/src/components/organisms/ConfirmPromiseModal/ConfirmPromiseModal.types.tsx

@@ -0,0 +1,6 @@
+import { IPromiseLogs } from '../../../interfaces/promiseTicketInterface';
+
+export interface ConfirmPromiseModalProps {
+  log: IPromiseLogs | null;
+  onUpload: (id: number) => void;
+}