Skip to content

Commit 4fe1739

Browse files
dusunaxdusunax
authored
Merge branch 'develop' into feature/fishcount
2 parents e974532 + 4f7fa0a commit 4fe1739

12 files changed

Lines changed: 296 additions & 121 deletions

File tree

‎src/atoms/fishBreadList.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,3 +23,14 @@ export const tapIndexState = atom({
2323
key: 'tapIndexState',
2424
default: 0,
2525
});
26+
27+
export const alertState = atom({
28+
key: 'alertState',
29+
default: false,
30+
});
31+
32+
export const currentIndexState = atom({
33+
key: 'currentIndexState',
34+
default: 0,
35+
});
36+

‎src/components/breadDetail/detail/DetailAlert.jsx‎

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
import styled, { css } from 'styled-components';
2+
import {
3+
modalState,
4+
readingDataList,
5+
idState,
6+
alertState,
7+
dataList,
8+
} from '../../../atoms/fishBreadList';
9+
import { useRecoilValue, useSetRecoilState, useRecoilState } from 'recoil';
10+
import { deleteBread } from '../../../utils/fetchBreadDetail';
11+
12+
function DetailAlert() {
13+
const [breadList, setBreadList] = useRecoilState(dataList);
14+
const [readingData, setReadingData] = useRecoilState(readingDataList);
15+
const readingid = useRecoilValue(idState);
16+
const setIsOpened = useSetRecoilState(modalState);
17+
const setIsAlertOpened = useSetRecoilState(alertState);
18+
19+
const onClickWrapper = () => setIsAlertOpened(false);
20+
const onClickCancel = () => setIsAlertOpened(false);
21+
const onClickDelete = () => {
22+
const filterReadingData = [...readingData].filter((e) => e.id !== readingid);
23+
setReadingData(filterReadingData);
24+
const { token } = JSON.parse(localStorage.getItem('user'));
25+
const filterBread = [...breadList].flat().filter((e) => e.fishId !== readingid);
26+
const filterList = [];
27+
for (let i = 0; i < filterBread.length; i += 9) {
28+
filterList.push(filterBread.slice(i, i + 9));
29+
}
30+
setBreadList(filterList);
31+
deleteBread(readingid, token);
32+
setIsAlertOpened(false);
33+
setIsOpened(false);
34+
};
35+
36+
return (
37+
<Wrapper>
38+
<ModalBackground onClick={onClickWrapper} />
39+
<AlertContainer>
40+
<h5>편지를 삭제할거냥?</h5>
41+
<p>삭제한 편지는 복구할 수 없다냥</p>
42+
<BtnWrapper>
43+
<Button onClick={onClickCancel}>취소</Button>
44+
<Button btnType="delete" onClick={onClickDelete}>
45+
삭제
46+
</Button>
47+
</BtnWrapper>
48+
</AlertContainer>
49+
</Wrapper>
50+
);
51+
}
52+
53+
export default DetailAlert;
54+
55+
const Wrapper = styled.div`
56+
position: absolute;
57+
top: 0;
58+
left: 0;
59+
width: 100%;
60+
height: 100%;
61+
display: flex;
62+
justify-content: center;
63+
align-items: center;
64+
z-index: 3;
65+
`;
66+
67+
const ModalBackground = styled.div`
68+
position: absolute;
69+
top: 0;
70+
left: 0;
71+
width: 100%;
72+
height: 100%;
73+
background-color: rgba(0, 0, 0, 0.5);
74+
`;
75+
76+
const AlertContainer = styled.div`
77+
width: calc(100% - 26px);
78+
max-width: 742px;
79+
height: 220px;
80+
background-color: #fff;
81+
z-index: 4;
82+
border: 2px solid #000000;
83+
border-radius: 10px;
84+
font-family: 'kotra';
85+
display: flex;
86+
flex-direction: column;
87+
justify-content: center;
88+
align-items: center;
89+
90+
h5 {
91+
font-size: 26px;
92+
font-weight: 500;
93+
color: #a54e09;
94+
margin-bottom: 6px;
95+
}
96+
97+
p {
98+
font-size: 20px;
99+
color: #989898;
100+
line-height: 33px;
101+
margin-bottom: 38px;
102+
}
103+
`;
104+
105+
const BtnWrapper = styled.div`
106+
width: calc(100% - 68px);
107+
display: flex;
108+
justify-content: space-between;
109+
gap: 40px;
110+
`;
111+
112+
const Button = styled.div`
113+
display: flex;
114+
justify-content: center;
115+
align-items: center;
116+
width: 100%;
117+
height: 40px;
118+
font-size: 22px;
119+
color: #000;
120+
121+
${({ btnType }) =>
122+
btnType === 'delete' &&
123+
css`
124+
color: #a54e09;
125+
`}
126+
`;

src/components/breadDetail/DetailModal.jsx renamed to src/components/breadDetail/detail/DetailModal.jsx

Lines changed: 39 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import styled, { css } from 'styled-components';
2-
import { useRecoilValue, useSetRecoilState } from 'recoil';
3-
import { modalState, readingDataList, idState } from '../../atoms/fishBreadList';
2+
import { useRecoilValue, useSetRecoilState, useRecoilState } from 'recoil';
3+
import { modalState, readingDataList, idState, alertState } from '../../../atoms/fishBreadList';
44
import { useEffect, useState } from 'react';
5+
import DetailAlert from './DetailAlert';
56

67
const typeObj = {
78
밀가루: '1',
@@ -14,10 +15,11 @@ function DetailModal() {
1415
const setIsOpened = useSetRecoilState(modalState);
1516
const readingId = useRecoilValue(idState);
1617
const data = useRecoilValue(readingDataList);
17-
console.log(data)
18+
const [isAlertOpend, setIsAlertOpened] = useRecoilState(alertState);
1819
const [backSrc, setBackSrc] = useState('background1');
1920
const [letterSrc, setLetterSrc] = useState('letter1');
20-
const { type, message, senderNickname } = data.find((e) => e.fishId === readingId);
21+
const { type, message, senderNickname } = data.find((e) => e.id === readingId);
22+
2123
const onClickClose = () => setIsOpened(false);
2224
const onClickWrapper = () => setIsOpened(false);
2325

@@ -37,6 +39,8 @@ function DetailModal() {
3739
setLetterSrc(`letter${dough}`);
3840
};
3941

42+
const onClickDelete = () => setIsAlertOpened(true);
43+
4044
useEffect(() => {
4145
setImageSrc();
4246
});
@@ -51,12 +55,19 @@ function DetailModal() {
5155
<MessageContent>{message}</MessageContent>
5256
<MessageSender>{senderNickname}</MessageSender>
5357
</MessageWrapper>
54-
<ModalCloseButton onClick={onClickClose}>
55-
<ButtonContent>확인 완료</ButtonContent>
56-
<ButtonBack />
57-
</ModalCloseButton>
58+
<ButtonWrapper>
59+
<ModalCloseButton onClick={onClickDelete}>
60+
<ButtonContent type="delete">삭제</ButtonContent>
61+
<ButtonBack type="delete" />
62+
</ModalCloseButton>
63+
<ModalCloseButton onClick={onClickClose}>
64+
<ButtonContent>확인</ButtonContent>
65+
<ButtonBack />
66+
</ModalCloseButton>
67+
</ButtonWrapper>
5868
</ModalContent>
5969
</ModalContainer>
70+
{isAlertOpend && <DetailAlert />}
6071
</ModalWrapper>
6172
);
6273
}
@@ -67,7 +78,7 @@ const ModalWrapper = styled.div`
6778
position: fixed;
6879
top: 0;
6980
left: 0;
70-
width: 100vh;
81+
width: 100%;
7182
height: 100%;
7283
display: flex;
7384
justify-content: center;
@@ -155,14 +166,20 @@ const MessageSender = styled.div`
155166
`;
156167

157168
const ModalCloseButton = styled.div`
158-
width: calc(100% - 28px);
169+
width: 100%;
159170
margin: 30px 0;
160171
height: 60px;
161172
position: relative;
162173
163174
cursor: pointer;
164175
`;
165176

177+
const ButtonWrapper = styled.div`
178+
width: 100%;
179+
display: flex;
180+
gap: 10px;
181+
`;
182+
166183
const ButtonContent = styled.div`
167184
position: relative;
168185
z-index: 1;
@@ -176,6 +193,12 @@ const ButtonContent = styled.div`
176193
color: #fff;
177194
font-size: 20px;
178195
font-weight: 700;
196+
197+
${({ type }) =>
198+
type === 'delete' &&
199+
css`
200+
background-color: #c0c0c0;
201+
`}
179202
`;
180203

181204
const ButtonBack = styled.div`
@@ -186,4 +209,10 @@ const ButtonBack = styled.div`
186209
background-color: #813c05;
187210
border-radius: 10px;
188211
border: 2px solid #000;
212+
213+
${({ type }) =>
214+
type === 'delete' &&
215+
css`
216+
background-color: #989898;
217+
`}
189218
`;

‎src/components/breadDetail/list/DetailList.jsx‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import DetailListItems from './DetailListItems';
44
import DetailListTaps from './DetailListTaps';
55
import DetailListButtons from './DetailListButtons';
66
import { useRecoilState, useSetRecoilState } from 'recoil';
7-
import { dataList, tapIndexState } from '../../../atoms/fishBreadList';
7+
import { dataList, tapIndexState, currentIndexState } from '../../../atoms/fishBreadList';
88
import { getBreadListData } from '../../../utils/fetchBreadDetail';
99
import styled from 'styled-components';
1010

@@ -15,7 +15,7 @@ function DetailList() {
1515
const [lastId, setLastId] = useState(0);
1616
const [prevId, setPrevId] = useState(0);
1717
const [status, setStatus] = useState('All');
18-
const [currentIndex, setCurrentIndex] = useState(0);
18+
const [currentIndex, setCurrentIndex] = useRecoilState(currentIndexState);
1919
const [currentPage, setCurrentPage] = useState(1);
2020
const [callingType, setCallingType] = useState();
2121
const [isRefetch, setIsRefetch] = useState(false);
@@ -38,7 +38,6 @@ function DetailList() {
3838
);
3939
const { content, totalPages, last, first } = data;
4040
if (status === 200) {
41-
console.log(data)
4241
setLastId(content?.at(-1).fishId);
4342
setPrevId(content[0]?.fishId);
4443
const dataSet = [];
@@ -110,11 +109,10 @@ function DetailList() {
110109
<TurnBack onClick={onClickLocation}>돌아가기</TurnBack>
111110
<DetailListTaps onClickTap={onClickTap} />
112111
<DetailLists>
113-
<DetailListItems currentIndex={currentIndex} token={token} />
112+
<DetailListItems token={token} />
114113
</DetailLists>
115114
{pageData && (
116115
<DetailListButtons
117-
currentIndex={currentIndex}
118116
pageData={pageData}
119117
onClickNext={onClickNext}
120118
onClickPrev={onClickPrev}

‎src/components/breadDetail/list/DetailListButtons.jsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1-
import { dataList } from '../../../atoms/fishBreadList';
1+
import { dataList, currentIndexState } from '../../../atoms/fishBreadList';
22
import { useRecoilValue } from 'recoil';
33
import styled, { css } from 'styled-components';
44

5-
function DetailListButtons({ pageData, currentIndex, onClickNext, onClickPrev }) {
5+
function DetailListButtons({ pageData, onClickNext, onClickPrev }) {
6+
const currentIndex = useRecoilValue(currentIndexState)
67
const breadList = useRecoilValue(dataList);
78
const { first, last } = pageData;
89

‎src/components/breadDetail/list/DetailListItems.jsx‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,38 @@
1-
import { dataList, readingDataList, modalState, idState } from '../../../atoms/fishBreadList';
2-
import { useSetRecoilState, useRecoilState } from 'recoil';
1+
import { dataList, readingDataList, modalState, idState, currentIndexState } from '../../../atoms/fishBreadList';
2+
import { useSetRecoilState, useRecoilState, useRecoilValue } from 'recoil';
33
import { useCallback } from 'react';
44
import { getBreadDetailData } from '../../../utils/fetchBreadDetail';
55
import styled from 'styled-components';
66
import DetailListItem from './DetailListItem';
77

8-
function DetailListItems({ currentIndex, token }) {
8+
function DetailListItems({ token }) {
9+
const currentIndex = useRecoilValue(currentIndexState);
910
const [breadList, setBreadList] = useRecoilState(dataList);
1011
const [readingData, setReadingData] = useRecoilState(readingDataList);
1112
const [isOpened, setIsOpened] = useRecoilState(modalState);
1213
const setReadingId = useSetRecoilState(idState);
1314

1415
const getBreadDetail = useCallback(async (fishId) => {
1516
const { data, status } = await getBreadDetailData(fishId, token);
16-
console.log(data)
1717
if (status === 200) {
18+
setIsOpened(true);
1819
setReadingData((state) => [...state, { ...data }]);
20+
} else {
21+
alert('붕어빵을 가져오는데 실패했습니다...');
1922
}
2023
}, []);
2124

2225
const onClickBread = (fishId) => {
2326
if (isOpened) return;
24-
setIsOpened(true);
2527
setReadingId(fishId);
2628
let currentList = [...breadList[currentIndex]].map((e) =>
2729
e.fishId === fishId ? { ...e, status: 'READ' } : e,
2830
);
2931
let totalList = [...breadList];
3032
totalList[currentIndex] = currentList;
3133
setBreadList(totalList);
32-
const hasReadingData = readingData.find((e) => e.fishId === fishId);
33-
hasReadingData ?? getBreadDetail(fishId);
34+
const hasReadingData = readingData.find((e) => e.id === fishId);
35+
hasReadingData ? setIsOpened(true) : getBreadDetail(fishId);
3436
};
3537

3638
return (

‎src/components/member/ButtonContainer.jsx‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,4 @@ function ButtonContainer({ isMyPage, myUid, isLoggedUser }) {
3232
);
3333
}
3434

35-
export default React.memo(ButtonContainer);
36-
37-
// 버튼 박스
38-
const ButtonConatinerWrap = styled.section``;
35+
export default React.memo(ButtonContainer);

0 commit comments

Comments
 (0)