+
+
+ {SOCIAL_CATEGORY.map((item, index) => (
+
+ ))}
+
+
+
+
+ {SOCIAL_LIST.map(item => (
+
+ ))}
+
+
+
+
+
+ setSearchPopupOpen(true)} />
+
+
+
+
+
+ {searchPopupOpen && (
+
setSearchPopupOpen(false)}
+ >
+
e.stopPropagation()}
+ >
+
+
+
+ {Array.from({ length: 5 }).map((_, index) => (
+
+
+
+
+
+ ))}
+
+
+
+ )}
+
+
+
+
+
+
+
+ {FILTER_ITEMS.map(({ id, label }) => {
+ const active = activeFilter === id
+ return (
+
+ )
+ })}
+
+
+ {title}
+
+
+
+ 시급 {wageAmount}원
+
+
+
+ {timeRange}
+ {workDays}
+ {distance}
+
+
+
+ {postedAgo}
+ {likeCount != null && likeCount !== '' && (
+ 좋아요 {likeCount}
+ )}
+
+
+ )
+}
diff --git a/src/shared/ui/manager/social/SocialCategory.tsx b/src/shared/ui/manager/social/SocialCategory.tsx
new file mode 100644
index 0000000..28c2a41
--- /dev/null
+++ b/src/shared/ui/manager/social/SocialCategory.tsx
@@ -0,0 +1,19 @@
+interface SocialCategoryProps {
+ label: string
+ active?: boolean
+}
+
+export function SocialCategory({ label, active = false }: SocialCategoryProps) {
+ return (
+