Skip to content

Commit 2df8ae7

Browse files
junghaesung79junghaesung79
committed
refactor: 카테고리 폼 분리
1 parent 9b43d0b commit 2df8ae7

File tree

5 files changed

+156
-89
lines changed

5 files changed

+156
-89
lines changed

‎src/pages/Articles/components/FormCategory/FormCategory.module.scss

+90
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
@use "src/utils/scss/media" as media;
2+
3+
.category {
4+
display: flex;
5+
justify-content: space-between;
6+
flex-wrap: wrap;
7+
8+
&__wrapper {
9+
position: relative;
10+
display: flex;
11+
flex-direction: column;
12+
gap: 13px;
13+
}
14+
15+
&__text {
16+
display: flex;
17+
flex-direction: column;
18+
}
19+
20+
&__buttons {
21+
display: flex;
22+
gap: 10px;
23+
flex-flow: row wrap;
24+
}
25+
26+
&__button {
27+
height: 38px;
28+
padding: 8px 12px;
29+
display: flex;
30+
justify-content: center;
31+
align-items: center;
32+
white-space: nowrap;
33+
border-radius: 20px;
34+
background-color: #fff;
35+
border: 1px solid #175c8e;
36+
color: #175c8e;
37+
font-family: Pretendard, sans-serif;
38+
font-size: 14px;
39+
font-weight: 500;
40+
41+
&--selected {
42+
background-color: #175c8e;
43+
color: #fff;
44+
}
45+
}
46+
}
47+
48+
.title {
49+
font-family: Pretendard, sans-serif;
50+
font-size: 20px;
51+
font-weight: 500;
52+
line-height: 1.2;
53+
54+
@include media.media-breakpoint(mobile) {
55+
font-size: 14px;
56+
line-height: 1.6;
57+
}
58+
59+
&__description {
60+
color: #727272;
61+
font-family: Pretendard, sans-serif;
62+
font-size: 14px;
63+
line-height: 1.6;
64+
65+
@include media.media-breakpoint(mobile) {
66+
margin-bottom: 12px;
67+
font-size: 12px;
68+
line-height: 1.6;
69+
}
70+
}
71+
}
72+
73+
.warning {
74+
position: absolute;
75+
left: 0;
76+
bottom: -32px;
77+
display: flex;
78+
align-items: center;
79+
gap: 6px;
80+
color: #f7941e;
81+
font-family: Pretendard, sans-serif;
82+
font-size: 14px;
83+
font-weight: 400;
84+
line-height: 1.6;
85+
86+
@include media.media-breakpoint(mobile) {
87+
left: initial;
88+
right: 0;
89+
}
90+
}

‎src/pages/Articles/components/FormCategory/index.tsx

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import { cn } from '@bcsdlab/utils';
2+
import WarnIcon from 'assets/svg/Articles/warn.svg';
3+
import { FindUserCategory, useArticlesLogger } from 'pages/Articles/hooks/useArticlesLogger';
4+
import styles from './FormCategory.module.scss';
5+
6+
const CATEGORIES: FindUserCategory[] = ['카드', '신분증', '지갑', '전자제품', '그 외'];
7+
8+
interface FormCategoryProps {
9+
category: FindUserCategory | '';
10+
setCategory: (category: FindUserCategory) => void;
11+
isCategorySelected: boolean;
12+
}
13+
14+
export default function FormCategory({
15+
category, setCategory, isCategorySelected,
16+
}: FormCategoryProps) {
17+
const { logFindUserCategory } = useArticlesLogger();
18+
19+
const handleCategoryClick = (item: FindUserCategory) => {
20+
logFindUserCategory(item);
21+
setCategory(item);
22+
};
23+
24+
return (
25+
<div className={styles.category}>
26+
<div className={styles.category__text}>
27+
<span className={styles.title}>품목</span>
28+
<span className={styles.title__description}>품목을 선택해주세요.</span>
29+
</div>
30+
<div className={styles.category__wrapper}>
31+
<div className={styles.category__buttons}>
32+
{CATEGORIES.map((item) => (
33+
<button
34+
key={item}
35+
type="button"
36+
className={cn({
37+
[styles.category__button]: true,
38+
[styles['category__button--selected']]: category === item,
39+
})}
40+
onClick={() => handleCategoryClick(item as FindUserCategory)}
41+
>
42+
{item}
43+
</button>
44+
))}
45+
</div>
46+
{!isCategorySelected && (
47+
<span className={styles.warning}>
48+
<WarnIcon />
49+
품목이 선택되지 않았습니다.
50+
</span>
51+
)}
52+
</div>
53+
</div>
54+
);
55+
}

‎src/pages/Articles/components/LostItemForm/LostItemForm.module.scss

-45
Original file line numberDiff line numberDiff line change
@@ -169,51 +169,6 @@
169169
}
170170
}
171171

172-
.category {
173-
display: flex;
174-
justify-content: space-between;
175-
flex-wrap: wrap;
176-
177-
&__wrapper {
178-
position: relative;
179-
display: flex;
180-
flex-direction: column;
181-
gap: 13px;
182-
}
183-
184-
&__text {
185-
display: flex;
186-
flex-direction: column;
187-
}
188-
189-
&__buttons {
190-
display: flex;
191-
gap: 10px;
192-
flex-flow: row wrap;
193-
}
194-
195-
&__button {
196-
height: 38px;
197-
padding: 8px 12px;
198-
display: flex;
199-
justify-content: center;
200-
align-items: center;
201-
white-space: nowrap;
202-
border-radius: 20px;
203-
background-color: #fff;
204-
border: 1px solid #175c8e;
205-
color: #175c8e;
206-
font-family: Pretendard, sans-serif;
207-
font-size: 14px;
208-
font-weight: 500;
209-
210-
&--selected {
211-
background-color: #175c8e;
212-
color: #fff;
213-
}
214-
}
215-
}
216-
217172
.date {
218173
position: relative;
219174
display: flex;

‎src/pages/Articles/components/LostItemForm/index.tsx

+7-41
Original file line numberDiff line numberDiff line change
@@ -7,19 +7,17 @@ import { LostItem, LostItemHandler } from 'pages/Articles/hooks/useLostItemForm'
77
import useBooleanState from 'utils/hooks/state/useBooleanState';
88
import { useEscapeKeyDown } from 'utils/hooks/ui/useEscapeKeyDown';
99
import { useOutsideClick } from 'utils/hooks/ui/useOutsideClick';
10-
import { FindUserCategory, useArticlesLogger } from 'pages/Articles/hooks/useArticlesLogger';
1110
import FormImage from 'pages/Articles/components/FormImage';
1211
import FormContent from 'pages/Articles/components/FormContent';
1312
import FormFoundPlace from 'pages/Articles/components/FormFoundPlace';
13+
import FormCategory from 'pages/Articles/components/FormCategory';
1414
import styles from './LostItemForm.module.scss';
1515

1616
const MAX_LOST_ITEM_TYPE = {
1717
found: '습득물',
1818
lost: '분실물',
1919
};
2020

21-
const CATEGORIES: FindUserCategory[] = ['카드', '신분증', '지갑', '전자제품', '그 외'];
22-
2321
const getyyyyMMdd = (date: Date) => {
2422
const yyyy = date.getFullYear();
2523
const MM = String(date.getMonth() + 1).padStart(2, '0');
@@ -59,12 +57,6 @@ export default function LostItemForm({
5957
} = lostItemHandler;
6058

6159
const [calendarOpen,, closeCalendar, toggleCalendar] = useBooleanState(false);
62-
const { logFindUserCategory } = useArticlesLogger();
63-
64-
const handleCategoryClick = (item: FindUserCategory) => {
65-
logFindUserCategory(item);
66-
setCategory(item);
67-
};
6860

6961
const handleDateSelect = (date: Date) => {
7062
setFoundDate(date);
@@ -94,38 +86,12 @@ export default function LostItemForm({
9486
</div>
9587
<div className={styles.template}>
9688
<div className={`${styles.template__left} ${styles.left}`}>
97-
<div className={styles.category}>
98-
<div className={styles.category__text}>
99-
<span className={styles.title}>품목</span>
100-
<span className={styles.title__description}>품목을 선택해주세요.</span>
101-
</div>
102-
<div className={styles.category__wrapper}>
103-
<div className={styles.category__buttons}>
104-
{CATEGORIES.map((item) => (
105-
<button
106-
key={item}
107-
type="button"
108-
className={cn({
109-
[styles.category__button]: true,
110-
[styles['category__button--selected']]: category === item,
111-
})}
112-
onClick={() => handleCategoryClick(item as FindUserCategory)}
113-
>
114-
{item}
115-
</button>
116-
))}
117-
</div>
118-
{!isCategorySelected && (
119-
<span className={styles.warning}>
120-
<WarnIcon />
121-
품목이 선택되지 않았습니다.
122-
</span>
123-
)}
124-
</div>
125-
</div>
126-
<div
127-
className={styles.date}
128-
>
89+
<FormCategory
90+
category={category}
91+
setCategory={setCategory}
92+
isCategorySelected={isCategorySelected}
93+
/>
94+
<div className={styles.date}>
12995
<span className={styles.title}>습득 일자</span>
13096
<div className={styles.date__wrapper} ref={containerRef}>
13197
<div className={styles.date__wrapper}>

‎src/pages/Articles/hooks/useLostItemForm.ts

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import { useState } from 'react';
2+
import { FindUserCategory } from './useArticlesLogger';
23

34
export interface LostItem {
4-
category: string;
5+
category: FindUserCategory | '';
56
foundDate: Date;
67
foundPlace: string;
78
content: string;
@@ -13,7 +14,7 @@ export interface LostItem {
1314
}
1415

1516
export interface LostItemHandler {
16-
setCategory: (category: string) => void;
17+
setCategory: (category: FindUserCategory) => void;
1718
setFoundDate: (date: Date) => void;
1819
setFoundPlace: (foundPlace: string) => void;
1920
setContent: (content: string) => void;
@@ -40,7 +41,7 @@ export const useLostItemForm = () => {
4041
const [lostItems, setLostItems] = useState<Array<LostItem>>([{ ...initialForm }]);
4142

4243
const lostItemHandler = (key: number) => ({
43-
setCategory: (category: string) => {
44+
setCategory: (category: FindUserCategory) => {
4445
setLostItems((prev) => {
4546
const newLostItems = [...prev];
4647
newLostItems[key].category = category;

0 commit comments

Comments
 (0)