Merge pull request #23 from ii-sol/feature/14-allowance2

feat: 용돈 관리 페이지

src/components/Allowance/RegularAllowanceCard.jsx

@@ -0,0 +1,117 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
+import tw from "twin.macro";
+import { styled } from "styled-components";
+
+const RegularAllowanceCard = ({ period, allowance, startDate, endDate }) => {
+  const navigate = useNavigate();
+
+  const normalizeNumber = (number) => {
+    return parseFloat(number).toLocaleString("en-US");
+  };
+
+  if (!allowance) {
+    const handleRegisterClick = () => {
+      navigate("/allowance/registration");
+    };
+
+    return (
+      <RegisterButton onClick={handleRegisterClick}>
+        <span tw="text-[#346BAC]">정기용돈</span>등록하기
+      </RegisterButton>
+    );
+  }
+
+  return (
+    <Container>
+      <Content>
+        <PeriodTag status={period}>{period}</PeriodTag>
+        <Allowance>{normalizeNumber(allowance)}원</Allowance>
+        <Period>
+          {startDate}~{endDate}
+        </Period>
+      </Content>
+      <ButtonWrapper>
+        <Button>변경하기</Button>
+        <Button>해지하기</Button>
+      </ButtonWrapper>
+    </Container>
+  );
+};
+
+export default RegularAllowanceCard;
+
+const Container = styled.div`
+  ${tw`
+  flex
+  p-5
+  gap-1
+  w-full
+  mb-4
+  `}
+  height: 128px;
+  border-radius: 20px;
+  box-shadow: 0px 0px 15px 0px rgba(151, 178, 221, 0.4);
+`;
+
+const RegisterButton = styled.button`
+  ${tw`
+  flex
+  flex-col
+  justify-center
+  items-center
+  p-5
+  w-full
+  mb-4
+  `}
+  height: 128px;
+  border-radius: 20px;
+  background-color: rgba(151, 178, 221, 0.4);
+  box-shadow: 0px 0px 15px 0px rgba(151, 178, 221, 0.4);
+  font-size: 20px;
+  font-weight: 700;
+`;
+
+const Content = styled.div`
+  ${tw`
+  flex
+  flex-col
+  items-start
+  gap-1
+  `}
+`;
+
+const PeriodTag = styled.div`
+  font-size: 13px;
+  font-weight: 500;
+  padding: 4px 8px;
+  margin: 3px 0px;
+  border-radius: 5px;
+  color: #346bac;
+  background-color: #d5e0f1;
+`;
+
+const Allowance = styled.div`
+  color: #154b9b;
+  font-size: 17px;
+  font-weight: 700;
+`;
+
+const Period = styled.div`
+  font-size: 12px;
+`;
+
+const ButtonWrapper = styled.div`
+  ${tw`flex flex-col h-full justify-center items-end gap-3 ml-auto`}
+`;
+
+const Button = styled.button`
+  background: #f4f9ff;
+  border: 1px solid #e5e5e5;
+  border-radius: 5px;
+  width: 80px;
+  height: 27px;
+  &:hover {
+    background-color: rgba(151, 178, 221, 0.4);
+  }
+`;

src/components/Allowance/RequestCard.jsx → src/components/Allowance/RequestCardChild.jsx

@@ -2,7 +2,7 @@ import React from "react";
 import tw from "twin.macro";
 import { styled } from "styled-components";
 
-const RequestCard = ({ status, receiver, allowance, img }) => {
+const RequestCardChild = ({ status, receiver, allowance, img }) => {
   const normalizeNumber = (number) => {
     return parseFloat(number).toLocaleString("en-US");
   };
@@ -19,7 +19,7 @@ const RequestCard = ({ status, receiver, allowance, img }) => {
   );
 };
 
-export default RequestCard;
+export default RequestCardChild;
 
 const Container = styled.button`
   ${tw`

src/components/Allowance/RequestCardParent.jsx

@@ -0,0 +1,73 @@
+import React from "react";
+import tw from "twin.macro";
+import { styled } from "styled-components";
+
+const RequestCardParent = ({ allowance, message }) => {
+  const normalizeNumber = (number) => {
+    return parseFloat(number).toLocaleString("en-US");
+  };
+
+  return (
+    <Container>
+      <Content>
+        <Allowance>{normalizeNumber(allowance)}원</Allowance>
+        <Message>{message}</Message>
+      </Content>
+      <ButtonWrapper>
+        <Button>수락</Button>
+        <Button>거절</Button>
+      </ButtonWrapper>
+    </Container>
+  );
+};
+
+export default RequestCardParent;
+
+const Container = styled.div`
+  ${tw`
+  flex
+  flex-col
+  p-4
+  gap-1
+  relative
+  `}
+  width: 148px;
+  height: 232px;
+  border-radius: 20px;
+  box-shadow: 0px 0px 15px 0px rgba(151, 178, 221, 0.4);
+`;
+
+const Content = styled.div`
+  ${tw`
+  flex
+  flex-col
+  items-start
+  gap-1
+  flex-grow
+  `}
+  font-weight: 700;
+`;
+
+const Allowance = styled.div`
+  color: #154b9b;
+  font-size: 15px;
+`;
+
+const Message = styled.div`
+  font-size: 12px;
+`;
+
+const ButtonWrapper = styled.div`
+  ${tw`flex w-full justify-between`}
+`;
+
+const Button = styled.button`
+  background: #f4f9ff;
+  border: 1px solid #e5e5e5;
+  border-radius: 5px;
+  width: 53px;
+  height: 27px;
+  &:hover {
+    background-color: rgba(151, 178, 221, 0.4);
+  }
+`;

src/pages/Allowance/Child/AllowanceRequest.jsx

@@ -4,7 +4,7 @@ import { styled } from "styled-components";
 
 import Header from "~/components/common/Header";
 import VirticalCreateCard from "~/components/common/VerticalCreateCard";
-import RequestCard from "~/components/Allowance/RequestCard";
+import RequestCardChild from "~/components/Allowance/RequestCardChild";
 import PleaseImg from "~/assets/img/Allowance/please.svg";
 import HeartImg from "~/assets/img/Allowance/heart.svg";
 
@@ -18,9 +18,9 @@ const AllowanceRequest = () => {
       </Menu>
       <CardContainer>
         <VirticalCreateCard text="용돈 조르기" />
-        <RequestCard status="완료" receiver="엄마" allowance="1000" img={PleaseImg} />
-        <RequestCard receiver="엄마" allowance="1000" img={PleaseImg} />
-        <RequestCard receiver="아빠" allowance="5000" img={HeartImg} />
+        <RequestCardChild status="완료" receiver="엄마" allowance="1000" img={PleaseImg} />
+        <RequestCardChild receiver="엄마" allowance="1000" img={PleaseImg} />
+        <RequestCardChild receiver="아빠" allowance="5000" img={HeartImg} />
       </CardContainer>
     </Container>
   );

src/pages/Allowance/Child/AllowanceRequestHistory.jsx

@@ -4,7 +4,7 @@ import { styled } from "styled-components";
 
 import Header from "~/components/common/Header";
 import HistoryFilter from "~/components/common/HistoryFilter";
-import RequestCard from "~/components/Allowance/RequestCard";
+import RequestCardChild from "~/components/Allowance/RequestCardChild";
 
 import PleaseImg from "~/assets/img/Allowance/please.svg";
 import HeartImg from "~/assets/img/Allowance/heart.svg";
@@ -15,9 +15,9 @@ const AllowanceRequestHistory = () => {
       <Header left={"<"} title={"용돈 조르기"} right={""} />
       <HistoryFilter></HistoryFilter>
       <CardContainer>
-        <RequestCard status="완료" receiver="엄마" allowance="1000" img={PleaseImg} />
-        <RequestCard status="취소" receiver="엄마" allowance="1000" img={PleaseImg} />
-        <RequestCard status="취소" receiver="아빠" allowance="5000" img={HeartImg} />
+        <RequestCardChild status="완료" receiver="엄마" allowance="1000" img={PleaseImg} />
+        <RequestCardChild status="취소" receiver="엄마" allowance="1000" img={PleaseImg} />
+        <RequestCardChild status="취소" receiver="아빠" allowance="5000" img={HeartImg} />
       </CardContainer>
     </Container>
   );

src/pages/Allowance/Parent/AllowanceManagement.jsx

@@ -3,6 +3,8 @@ import tw from "twin.macro";
 import { styled } from "styled-components";
 
 import Header from "~/components/common/Header";
+import RequestCardParent from "../../../components/Allowance/RequestCardParent";
+import RegularAllowanceCard from "../../../components/Allowance/RegularAllowanceCard";
 
 const AllowanceManagement = () => {
   return (
@@ -12,8 +14,15 @@ const AllowanceManagement = () => {
         <Phrase>정기용돈</Phrase>
         <History>지난 용돈 &gt;</History>
       </Menu>
-
-      <CardContainer></CardContainer>
+      <RegularAllowanceCard period="1개월" allowance="100000" startDate={"2024.05.12"} endDate={"2024.06.12"} />
+      <Menu>
+        <Phrase>조르기 내역</Phrase>
+      </Menu>
+      <CardContainer>
+        <RequestCardParent allowance={1000} message={"과자 먹고 싶어요"} />
+        <RequestCardParent allowance={3000} message={"준비물 사야 해요"} />
+        <RequestCardParent allowance={1000} message={"과자 먹고 싶어요"} />
+      </CardContainer>
     </Container>
   );
 };