Merge pull request #135 from 100-hours-a-week/feature/settlementlist

feat: settlement logic changed.
100-hours-a-week · Oct 4, 2024 · 4ca5afd · 4ca5afd
2 parents b3bf387 + a976c7c
commit 4ca5afd
Show file tree

Hide file tree

Showing 8 changed files with 457 additions and 317 deletions.
diff --git a/travelday-fe/src/components/schedulePage/allocator.jsx b/travelday-fe/src/components/schedulePage/allocator.jsx
@@ -0,0 +1,136 @@
+import React from "react";
+import styled from "styled-components";
+
+const Allocator = ({ people, setIsAllocating }) => {
+    // console.table(people);
+    const [amount, setAmount] = React.useState(0);
+    function handlePeopleAmountChange(e) {
+        e.preventDefault();
+        e.stopPropagation();
+
+    }
+
+    return (
+        <>
+            <PeopleList>
+                {people.map((person, index) => (
+                    <PeopleItem key={index}>
+                        <Person>
+                            <ProfileImage src={`https:img.thetravelday.co.kr/${person.profileImagePath}`} alt={`${person.nickname} profile`} />
+                            {person.nickname}
+                        </Person>
+                        <AmountWrapper>
+                            <PeopleInput
+                                // type="number"
+                                // value={amount}
+                                onChange={handlePeopleAmountChange}
+                            />
+                            <span>원</span>
+                        </AmountWrapper>
+                    </PeopleItem>
+                ))}
+            </PeopleList>
+            <ButtonGroup>
+                <BackButton onClick={() => setIsAllocating(false)}>뒤로</BackButton>
+                <MainButton onClick={() => alert('정산 완료 알림이 전송되었습니다!')}>완료</MainButton>
+            </ButtonGroup>
+        </>
+    );
+};
+
+export default Allocator;
+
+const ProfileImage = styled.img`
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    margin-right: 10px;
+`;
+
+const BackButton = styled.button`
+    padding: 15px;
+    background-color: gray;
+    color: white;
+    font-size: 18px;
+    border: none;
+    border-radius: 8px;
+    margin-top: 10px;
+    width: auto;
+    cursor: pointer;
+    transition: background-color 0.3s;
+
+    &:hover {
+        background-color: #515151;
+    }
+
+    &:disabled {
+        background-color: #f58b9f;
+        cursor: not-allowed;
+    }
+`;
+
+const PeopleList = styled.ul`
+    list-style-type: none;
+    padding: 0;
+    margin-top: 20px;
+`;
+
+const PeopleInput = styled.input`
+    //padding: 12px;
+    max-width: 80px;
+    border: 0 solid black ;
+    font-size: 16px;
+    background-color: transparent;
+    transition: border-color 0.2s;
+    &:focus {
+        outline: none;
+        border-bottom: 1px solid black;
+    }
+`;
+
+const PeopleItem = styled.li`
+    min-width: 240px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10px;
+    font-size: 16px;
+    padding: 12px;
+`;
+
+const Person = styled.div`
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+`
+
+const AmountWrapper = styled.div`
+    //display: flex;
+    //align-items: center;
+    padding:0;
+`;
+
+const MainButton = styled.button`
+    padding: 15px;
+    background-color: #f12e5e;
+    color: white;
+    font-size: 18px;
+    border: none;
+    border-radius: 8px;
+    margin-top: 10px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+    &:hover {
+        background-color: #d3204a;
+    }
+    &:disabled {
+        background-color: #f58b9f;
+        cursor: not-allowed;
+    }
+`;
+
+const ButtonGroup = styled.div`
+  display: flex;
+  gap: 10px;
+`;
diff --git a/travelday-fe/src/components/schedulePage/scheduleDetailList.js b/travelday-fe/src/components/schedulePage/scheduleDetailList.js
@@ -152,7 +152,7 @@ const ScheduleDetailList = ({ travelRoomId, startDate, endDate }) => {
         })
             .then(response => {
                 if (response.data?.data?.length > 0) {
-                    console.table(response.data.data);
+                    // console.table(response.data.data);
                     modifySchedule(response.data.data);
                 }
                 else{
@@ -207,7 +207,8 @@ const ScheduleDetailList = ({ travelRoomId, startDate, endDate }) => {
     async function checkEditable() {
         try {
             const response = await axiosInstance.post(`/api/rooms/${travelRoomId}/plan/check/editable`,{});
-            return response.data?.data?.length > 0;
+            // console.log(response);
+            return response.data?.data;
         } catch (error) {
             console.error('Error checking editable state:', error);
             return false; // Return false or handle the error as needed

diff --git a/travelday-fe/src/components/schedulePage/scheduleTab.jsx b/travelday-fe/src/components/schedulePage/scheduleTab.jsx
@@ -5,7 +5,7 @@ import StickyBox from 'react-sticky-box';
 import styled from "styled-components";
 import ChatPage from "../../pages/chatPage/chatPage";
 import SettlementList from "./settlementList";
-const items = (travelRoomId,startDate,endDate) => [
+const items = (travelRoomId,startDate,endDate,people) => [
     {
         label:"일정 보기",
         key:"일정",
@@ -25,13 +25,12 @@ const items = (travelRoomId,startDate,endDate) => [
     {
         label:"정산 하기",
         key:"정산",
-        children: <SettlementList travelRoomId={travelRoomId}/>
+        children: <SettlementList people={people} travelRoomId={travelRoomId}/>
 
     }
 ]
-console.table(items)
 
-const ScheduleTab = ({travelRoomId,startDate,endDate}) => {
+const ScheduleTab = ({travelRoomId,startDate,endDate,people}) => {
     // const {
     //     token: { colorBgContainer },
     // } = theme.useToken();
@@ -56,7 +55,7 @@ const ScheduleTab = ({travelRoomId,startDate,endDate}) => {
         </StickyBox>
     );
 
-    return <StyledTabs defaultActiveKey="1" renderTabBar={renderTabBar}  items={items(travelRoomId,startDate,endDate)} />;
+    return <StyledTabs defaultActiveKey="1" renderTabBar={renderTabBar}  items={items(travelRoomId,startDate,endDate,people)} />;
 };