Skip to content

Commit be69509

Browse files
hsyo830hsyo830
authored
Merge pull request #86 from albaform-team/refactor/store
Refactor/store
2 parents 1d53ef2 + 6cd2ac9 commit be69509

11 files changed

Lines changed: 211 additions & 25 deletions

File tree

‎public/thejulgeOGTAG.png‎

208 KB
Loading

‎src/lottie/Loading Dots.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{"v":"5.7.11","fr":60,"ip":0,"op":81,"w":1920,"h":1080,"nm":"Comp 4","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Shape Layer 4","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":25,"s":[25]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":39,"s":[100]},{"t":55,"s":[25]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":25,"s":[1142,540,0],"to":[0,-6.667,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":39,"s":[1142,500,0],"to":[0,0,0],"ti":[0,-6.667,0]},{"t":55,"s":[1142,540,0]}],"ix":2,"l":2},"a":{"a":0,"k":[-284,92,0],"ix":1,"l":2},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":25,"s":[50,50,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":39,"s":[75,75,100]},{"t":55,"s":[50,50,100]}],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[120,120],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"fl","c":{"a":0,"k":[0.21568627451,0.21568627451,0.21568627451,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-284,92],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":360,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"Shape Layer 3","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":17,"s":[25]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":31,"s":[100]},{"t":47,"s":[25]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":17,"s":[1022,540,0],"to":[0,-6.667,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":31,"s":[1022,500,0],"to":[0,0,0],"ti":[0,-6.667,0]},{"t":47,"s":[1022,540,0]}],"ix":2,"l":2},"a":{"a":0,"k":[-284,92,0],"ix":1,"l":2},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":17,"s":[50,50,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":31,"s":[75,75,100]},{"t":47,"s":[50,50,100]}],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[120,120],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"fl","c":{"a":0,"k":[0.21568627451,0.21568627451,0.21568627451,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-284,92],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":360,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"Shape Layer 2","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":9,"s":[25]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":23,"s":[100]},{"t":39,"s":[25]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":9,"s":[902,540,0],"to":[0,-6.667,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":23,"s":[902,500,0],"to":[0,0,0],"ti":[0,0,0]},{"t":39,"s":[902,540,0]}],"ix":2,"l":2},"a":{"a":0,"k":[-284,92,0],"ix":1,"l":2},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":9,"s":[50,50,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":23,"s":[75,75,100]},{"t":39,"s":[50,50,100]}],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[120,120],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"fl","c":{"a":0,"k":[0.21568627451,0.21568627451,0.21568627451,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-284,92],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":360,"st":0,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"Shape Layer 1","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":0,"s":[25]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":14,"s":[100]},{"t":30,"s":[25]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":0,"s":[782,540,0],"to":[0,-6.667,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":14,"s":[782,500,0],"to":[0,0,0],"ti":[0,-6.667,0]},{"t":30,"s":[782,540,0]}],"ix":2,"l":2},"a":{"a":0,"k":[-284,92,0],"ix":1,"l":2},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":0,"s":[50,50,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":14,"s":[75,75,100]},{"t":30,"s":[50,50,100]}],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[120,120],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"fl","c":{"a":0,"k":[0.21568627451,0.21568627451,0.21568627451,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-284,92],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":360,"st":0,"bm":0}],"markers":[]}

‎src/pages/_app.page.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,24 @@ const App = ({ Component, pageProps }: AppPropsWithLayout) => {
2626
<title>
2727
더줄게 | 세상의 모든 알바! 일자리 & 아르바이트 구인 구직 사이트
2828
</title>
29+
<meta
30+
property="og:title"
31+
content="더줄게 | 세상의 모든 알바! 일자리 & 아르바이트 구인 구직 사이트"
32+
/>
33+
<meta
34+
property="og:description"
35+
content="구인구직을 더 쉽고 빠르게! 세상의 모든 일자리를 연결하는 더줄게!"
36+
/>
37+
<meta
38+
property="og:image"
39+
content="https://albaform-rust.vercel.app/thejulgeOGTAG.png"
40+
/>
41+
<meta
42+
property="og:url"
43+
content="https://albaform-rust.vercel.app/store"
44+
/>
45+
<meta property="og:type" content="website" />
46+
<meta name="twitter:card" content="summary_large_image" />
2947
</Head>
3048
<GlobalStyle />
3149
<Component {...pageProps} />

‎src/pages/store/_components/DetailFilter/Drawer.tsx‎

Lines changed: 35 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { useState } from 'react';
1+
import { useEffect, useRef, useState } from 'react';
22

33
import CloseIcon from '@/assets/svg/close.svg';
44
import * as S from '@/pages/store/_components/DetailFilter/Drawer.style';
@@ -29,6 +29,9 @@ const RightDrawer = ({
2929
setFilterCount,
3030
}: RightDrawerProps) => {
3131
const [open, setOpen] = useState(false);
32+
const payCounter = useRef(false);
33+
const dateCounter = useRef(false);
34+
const today = new Date().toISOString().split('T')[0];
3235

3336
const toggleDrawer =
3437
(isOpen: boolean) => (event: React.KeyboardEvent | React.MouseEvent) => {
@@ -48,8 +51,38 @@ const RightDrawer = ({
4851
setStartDate(null);
4952
setMinPay(0);
5053
setFilterCount(0);
54+
dateCounter.current = false;
55+
payCounter.current = false;
5156
};
5257

58+
const filterCounter = () => {
59+
if (typeof minPay === 'number' && minPay > 0 && !payCounter.current) {
60+
setFilterCount(prev => prev + 1);
61+
payCounter.current = true;
62+
}
63+
64+
if (
65+
startDate !== null &&
66+
startDate !== '' &&
67+
startDate !== today &&
68+
!dateCounter.current
69+
) {
70+
setFilterCount(prev => prev + 1);
71+
dateCounter.current = true;
72+
}
73+
};
74+
75+
useEffect(() => {
76+
if (minPay === 0 && payCounter.current) {
77+
setFilterCount(prev => prev - 1);
78+
payCounter.current = false;
79+
}
80+
if (today === startDate && dateCounter.current) {
81+
setFilterCount(prev => prev - 1);
82+
dateCounter.current = false;
83+
}
84+
}, [minPay, startDate]);
85+
5386
const clickApply = () => {
5487
onApply();
5588
toggleDrawer(false)({ type: 'click' } as React.MouseEvent);
@@ -89,6 +122,7 @@ const RightDrawer = ({
89122
<S.ApplyButton
90123
onClick={() => {
91124
clickApply();
125+
filterCounter();
92126
}}
93127
>
94128
적용하기

‎src/pages/store/_components/DetailFilter/OptionSection.tsx‎

Lines changed: 16 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -67,24 +67,28 @@ const OptionSection = ({
6767
return;
6868
}
6969

70-
const selectedDate = new Date(`${value}T00:00:00+09:00`);
71-
70+
const selectedDate = new Date(`${value}T00:00:00`);
71+
selectedDate.setHours(selectedDate.getHours() + 9);
7272
const rfc3339 = selectedDate.toISOString();
73-
setStartDate(rfc3339);
74-
setFilterCount(prev => prev + 1);
7573

76-
console.log(rfc3339);
74+
setStartDate(rfc3339);
7775
};
7876

7977
const handleDelete = (areaToDelete: string) => {
8078
setSelectedAreas(prev => prev.filter(area => area !== areaToDelete));
8179
setFilterCount(prev => prev - 1);
8280
};
8381

82+
const formatToCurrency = (value: string) => {
83+
const numberValue = value.replace(/[^0-9]/g, '');
84+
return numberValue.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
85+
};
86+
8487
const handleMinPayChange = (e: React.ChangeEvent<HTMLInputElement>) => {
85-
const value = Number(e.target.value);
86-
setMinPay(value);
87-
setFilterCount(prev => prev + 1);
88+
const originValue = e.target.value;
89+
const onlyNumbers = originValue.replace(/[^0-9]/g, '');
90+
91+
setMinPay(onlyNumbers ? Number(onlyNumbers) : 0);
8892
};
8993

9094
return (
@@ -146,8 +150,11 @@ const OptionSection = ({
146150
<S.PayInputBox
147151
disableUnderline
148152
placeholder="입력"
149-
value={minPay}
153+
value={minPay !== null ? formatToCurrency(minPay.toString()) : ''}
150154
onChange={handleMinPayChange}
155+
inputProps={{
156+
inputMode: 'numeric',
157+
}}
151158
></S.PayInputBox>
152159
<S.DetailOptionTitle>이상부터</S.DetailOptionTitle>
153160
</S.PayInput>

‎src/pages/store/_components/DetailFilter/Popover.tsx‎

Lines changed: 34 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import Popover from '@mui/material/Popover';
2-
import { useState } from 'react';
2+
import { useEffect, useRef, useState } from 'react';
33

44
import CloseIcon from '@/assets/svg/close.svg';
55
import * as S from '@/pages/store/_components/DetailFilter/Popover.style';
@@ -30,6 +30,9 @@ const BasicPopover = ({
3030
setFilterCount,
3131
}: BasicPopoverProps) => {
3232
const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
33+
const payCounter = useRef(false);
34+
const dateCounter = useRef(false);
35+
const today = new Date().toISOString().split('T')[0];
3336

3437
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
3538
setAnchorEl(event.currentTarget);
@@ -44,9 +47,37 @@ const BasicPopover = ({
4447
setStartDate(null);
4548
setMinPay(0);
4649
setFilterCount(0);
50+
dateCounter.current = false;
51+
payCounter.current = false;
4752
};
4853

49-
console.log(filterCount);
54+
const filterCounter = () => {
55+
if (typeof minPay === 'number' && minPay > 0 && !payCounter.current) {
56+
setFilterCount(prev => prev + 1);
57+
payCounter.current = true;
58+
}
59+
60+
if (
61+
startDate !== null &&
62+
startDate !== '' &&
63+
startDate !== today &&
64+
!dateCounter.current
65+
) {
66+
setFilterCount(prev => prev + 1);
67+
dateCounter.current = true;
68+
}
69+
};
70+
71+
useEffect(() => {
72+
if (minPay === 0 && payCounter.current) {
73+
setFilterCount(prev => prev - 1);
74+
payCounter.current = false;
75+
}
76+
if (today === startDate && dateCounter.current) {
77+
setFilterCount(prev => prev - 1);
78+
dateCounter.current = false;
79+
}
80+
}, [minPay, startDate]);
5081

5182
const open = Boolean(anchorEl);
5283
const id = open ? 'simple-popover' : undefined;
@@ -104,6 +135,7 @@ const BasicPopover = ({
104135
onClick={() => {
105136
onApply();
106137
handleClose();
138+
filterCounter();
107139
}}
108140
>
109141
적용하기

‎src/pages/store/_components/ListCard/SkeletonListCard.tsx‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import styled from '@emotion/styled';
2+
3+
import * as S from '@/pages/store/_components/ListCard/ListCard.styles';
4+
5+
const SkeletonBlock = styled.div`
6+
width: 100%;
7+
height: 100%;
8+
background-color: #e5e7eb;
9+
border-radius: 8px;
10+
animation: pulse 1.5s ease-in-out infinite;
11+
12+
@keyframes pulse {
13+
0% {
14+
opacity: 1;
15+
}
16+
17+
50% {
18+
opacity: 0.4;
19+
}
20+
21+
100% {
22+
opacity: 1;
23+
}
24+
}
25+
`;
26+
27+
type SkeletonListCardProps = {
28+
count?: number;
29+
};
30+
31+
const SkeletonListCard = ({ count = 6 }: SkeletonListCardProps) => {
32+
const skeletonCards = [];
33+
34+
for (let i = 0; i < count; i++) {
35+
skeletonCards.push(
36+
<S.CardContainer key={i}>
37+
<S.CardContent>
38+
<S.JobImage>
39+
<SkeletonBlock />
40+
</S.JobImage>
41+
42+
<S.JobSummary>
43+
<S.JobMetaSection>
44+
<SkeletonBlock />
45+
</S.JobMetaSection>
46+
<S.JobMetaSection>
47+
<SkeletonBlock />
48+
</S.JobMetaSection>
49+
</S.JobSummary>
50+
51+
<S.PaySection>
52+
<SkeletonBlock />
53+
</S.PaySection>
54+
</S.CardContent>
55+
</S.CardContainer>
56+
);
57+
}
58+
59+
return <>{skeletonCards}</>;
60+
};
61+
62+
export default SkeletonListCard;

‎src/pages/store/_components/Pagination.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
1+
import { PaginationItem } from '@mui/material';
12
import Pagination from '@mui/material/Pagination';
23

4+
import { colors } from '@/styles/colors';
5+
36
type Props = {
47
page: number;
58
onChange: (page: number) => void;
@@ -14,6 +17,24 @@ const PaginationRounded = ({ page, onChange, totalCount, limit }: Props) => {
1417
count={Math.ceil(totalCount / limit)}
1518
onChange={(_, value) => onChange(value)}
1619
shape="rounded"
20+
siblingCount={3}
21+
boundaryCount={0}
22+
renderItem={item => {
23+
if (item.type === 'start-ellipsis' || item.type === 'end-ellipsis') {
24+
return null;
25+
}
26+
27+
return <PaginationItem {...item} />;
28+
}}
29+
sx={{
30+
'& .MuiPaginationItem-root.Mui-selected': {
31+
backgroundColor: `${colors.red[30]}`,
32+
color: '#fff',
33+
},
34+
'& .MuiPaginationItem-root.Mui-selected:hover': {
35+
backgroundColor: '#f7795c',
36+
},
37+
}}
1738
/>
1839
);
1940
};

‎src/pages/store/_hooks/useNotice.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,11 @@ export const useNotice = ({
2525
trigger,
2626
}: UseNoticeProps) => {
2727
const [notice, setNotice] = useState<NoticeListResponse | null>(null);
28+
const [loading, setLoading] = useState(true);
2829

2930
useEffect(() => {
31+
setLoading(true);
32+
3033
const fetchNotice = async () => {
3134
const sortMap: Record<string, 'time' | 'pay' | 'hour' | 'shop'> = {
3235
마감임박순: 'time',
@@ -45,6 +48,7 @@ export const useNotice = ({
4548
hourlyPayGte: hourlyPayGte,
4649
});
4750
setNotice(data);
51+
setLoading(false);
4852
};
4953
fetchNotice();
5054
}, [
@@ -58,5 +62,5 @@ export const useNotice = ({
5862
trigger,
5963
]);
6064

61-
return { notice };
65+
return { notice, loading };
6266
};

‎src/pages/store/index.page.style.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ export const JobSuggestTitle = styled.div`
4040
export const JobSuggestList = styled.div`
4141
display: flex;
4242
gap: 4px;
43-
align-items: center;
43+
align-items: flex-start;
4444
justify-content: flex-start;
4545
padding: 0 12px;
4646
padding: 12px 12px 24px;

0 commit comments

Comments
 (0)