[PR]: #59 -> develop

[Feat/#59] 계좌 UI 구현

ssh-web/src/components/atoms/ProgressBar/ProgressBar.styles.tsx

@@ -0,0 +1,27 @@
+import { tv } from 'tailwind-variants';
+
+export const barStyles = tv({
+  base: '',
+  variants: {
+    color: {
+      primary: 'bg-primary-500',
+      secondary: 'bg-secondary-800',
+      danger: 'bg-danger-500',
+      warning: 'bg-warning-500',
+      dark: 'bg-black',
+      light: 'bg-white text-dark',
+    },
+    size: {
+      sm: 'h-4 w-64',
+      md: 'h-6 w-96',
+      lg: 'h-8 w-[32rem]',
+    },
+    fullWidth: {
+      true: 'w-full',
+    },
+  },
+  defaultVariants: {
+    variant: 'outlined',
+    size: 'md',
+  },
+});

ssh-web/src/components/atoms/ProgressBar/ProgressBar.types.tsx

@@ -0,0 +1,11 @@
+import { TColor } from '../../../themes/themeBase';
+
+export type TBarSize = 'sm' | 'md' | 'lg';
+
+export interface ProgressBarProps {
+  percent: number;
+  color?: TColor;
+  size?: TBarSize;
+  fullWidth?: boolean;
+  classNameStyles?: string;
+}

ssh-web/src/components/atoms/ProgressBar/index.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ProgressBar } from '.';
+
+const meta = {
+  component: ProgressBar,
+} satisfies Meta<typeof ProgressBar>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    percent: 40,
+    color: 'primary',
+    size: 'md',
+    fullWidth: false,
+  },
+};

ssh-web/src/components/atoms/ProgressBar/index.tsx

@@ -0,0 +1,57 @@
+import React, { useState, useEffect } from 'react';
+import { ProgressBarProps } from './ProgressBar.types';
+import { barStyles } from './ProgressBar.styles';
+
+export const ProgressBar: React.FC<ProgressBarProps> = ({
+  percent,
+  color = 'primary',
+  size = 'md',
+  fullWidth,
+  classNameStyles,
+}: ProgressBarProps) => {
+  const [animatedPercent, setAnimatedPercent] = useState(0);
+
+  useEffect(() => {
+    let start = 0;
+    const duration = 1250;
+    const stepTime = Math.abs(Math.floor(duration / percent));
+
+    const step = () => {
+      start += 1;
+      setAnimatedPercent(Math.min(start, percent));
+      if (start < percent) {
+        timeoutId = setTimeout(step, stepTime);
+      }
+    };
+
+    let timeoutId = setTimeout(step, stepTime);
+
+    return () => clearTimeout(timeoutId);
+  }, [percent]);
+
+  const className = barStyles({
+    size: size,
+    fullWidth,
+  });
+
+  const barColor = barStyles({
+    color: color,
+  });
+
+  return (
+    <div
+      className={`relative ${className} bg-secondary-400 rounded-full overflow-hidden ${classNameStyles}`}
+    >
+      <div
+        className={`absolute h-full rounded-full transition-all duration-1000 ease-out ${barColor}`}
+        style={{ width: `${animatedPercent}% ` }}
+      >
+        {animatedPercent > 3 && (
+          <span className="flex justify-center items-center h-full font-bold text-xs text-white">
+            {animatedPercent}%
+          </span>
+        )}
+      </div>
+    </div>
+  );
+};

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

@@ -1,23 +1,57 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { AvatarWithLabel } from '../AvatarWithLabel';
 import { Button } from '../../atoms/Button';
+import { FaArrowAltCircleLeft, FaArrowAltCircleRight } from 'react-icons/fa';
+import { api } from '../../../apis/interceptors';
+import { IChild } from '../../../interfaces/userInterface';
 
 export const ChangeChild = () => {
+  const [childrenList, setChildrenList] = useState<IChild[]>([]);
+  const [selectedChild, setSelectedChild] = useState<number>(0);
+  const [isloading, setIsLoading] = useState<boolean>(false);
+
+  useEffect(() => {
+    setIsLoading(true);
+    api.get(`/api/parents/children`).then((res) => {
+      setChildrenList(res.data);
+      setIsLoading(false);
+    });
+  });
   return (
-    <div className="flex flex-row items-center mb-2 p-2 px-4 bg-primary-100 rounded-lg p">
+    <div className="flex flex-row relative items-center mb-2 p-2 px-4 rounded-lg space-x-3">
+      {selectedChild !== 0 && (
+        <FaArrowAltCircleLeft
+          size={24}
+          onClick={() => {
+            if (childrenList && childrenList.length > selectedChild - 2) {
+              setSelectedChild(selectedChild - 1);
+            }
+          }}
+        />
+      )}
       <AvatarWithLabel
         imageUrl="https://media1.tenor.com/m/o2nJ-w0v7lAAAAAC/teemo.gif"
         altText="캐릭터"
         size="md"
         bgColor="blue"
-        label="차은우"
+        label={childrenList[selectedChild]?.name}
         labelSize="md"
         labelWeight="bold"
         labelColor="dark"
+        classNameStyles="bg-primary-100 p-2 rounded-lg"
       ></AvatarWithLabel>
-      <Button size="sm" classNameStyles="ml-4">
-        변경
-      </Button>
+
+      <FaArrowAltCircleRight
+        className={
+          selectedChild !== childrenList.length - 1 ? 'visible' : 'invisible'
+        }
+        size={24}
+        onClick={() => {
+          if (childrenList && childrenList.length > selectedChild - 1) {
+            setSelectedChild(selectedChild + 1);
+          }
+        }}
+      />
     </div>
   );
 };

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

@@ -67,16 +67,16 @@ export const ModalContent = ({
 
   return (
     <div
-      className={modalStyles[size]}
+      className={modalStyles[size] + ' overflow-auto'}
       ref={modalRef}
       onTouchStart={handleTouchStart}
       onTouchMove={handleTouchMove}
       onTouchEnd={handleTouchEnd}
     >
       <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 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} />}

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

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

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Button } from '../../atoms/Button';
 import { Typography } from '../../atoms/Typography';
 import { AddPromiseModalProps } from './AddPromiseModal.types';
@@ -7,23 +7,7 @@ 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>
-    );
-  }
+  const [promiseContent, setPromiseContent] = useState<string>('');
 
   return (
     <div className="w-[100%] h-[100%] flex justify-center">
@@ -40,7 +24,12 @@ export const AddPromiseModal = ({
         >
           약속
         </Typography>
-        <textarea className="rounded-lg mt-2 w-[100%] h-[6rem] shadow-lg border-secondary-800 p-2 resize-none"></textarea>
+        <textarea
+          className="rounded-lg mt-2 w-[100%] h-[6rem] shadow-lg border-secondary-800 p-2 resize-none"
+          onChange={(e) => {
+            setPromiseContent(e.target.value);
+          }}
+        ></textarea>
         <Typography
           size="2xl"
           color="dark"
@@ -63,7 +52,10 @@ export const AddPromiseModal = ({
           size="md"
           fullWidth={true}
           classNameStyles="mt-4"
-          onClick={onUpload}
+          disabled={promiseContent === ''}
+          onClick={() => {
+            onUpload(promiseContent);
+          }}
         >
           <Typography color="light" weight="bold" size="xl">
             약속하기

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

@@ -70,6 +70,11 @@ export const PromiseDetailModal = ({
             부모님이 약속을 지켜주셨어요!
           </Typography>
         )}
+        {isParent && isConfirm && (
+          <Typography color="secondary" classNameStyles="mb-2">
+            자녀와의 약속을 지켰어요!
+          </Typography>
+        )}
         <Button fullWidth={true} onClick={closeModal}>
           확인
         </Button>