@@ -53,50 +53,71 @@ function FeedCard({
5353} ) {
5454 return (
5555 < article className = "relative flex h-55.5 min-w-0 flex-col" >
56- < Link href = { item . href } className = "block min-w-0" >
57- < div className = "border-border-primary relative h-33.5 overflow-hidden rounded-lg border" >
58- { item . imageUrl ? (
59- < Image
60- src = { item . imageUrl }
61- alt = ""
62- fill
63- sizes = "168px"
64- className = "object-cover"
65- unoptimized
66- />
67- ) : (
68- < div className = "bg-bg-primary-darker text-text-disabled flex size-full items-center justify-center" >
69- < Images size = { 28 } />
70- </ div >
71- ) }
72-
73- { item . isPrivate && (
74- < >
75- < div className = "absolute inset-x-0 top-0 h-12 bg-gradient-to-b from-[rgba(26,26,30,0.5)] to-transparent" />
56+ < div className = "relative" >
57+ < Link href = { item . href } className = "block min-w-0" >
58+ < div className = "border-border-primary relative h-33.5 overflow-hidden rounded-lg border" >
59+ { item . imageUrl ? (
7660 < Image
77- src = "/icon-private-lock.svg"
61+ src = { item . imageUrl }
7862 alt = ""
79- width = { 14 }
80- height = { 18 }
81- className = "absolute top-3 left-3"
63+ fill
64+ sizes = "168px"
65+ className = "object-cover"
66+ unoptimized
8267 />
83- </ >
84- ) }
68+ ) : (
69+ < div className = "bg-bg-primary-darker text-text-disabled flex size-full items-center justify-center" >
70+ < Images size = { 28 } />
71+ </ div >
72+ ) }
8573
86- < button
87- type = "button"
88- aria-label = "피드 메뉴"
89- onClick = { event => {
90- event . preventDefault ( ) ;
91- event . stopPropagation ( ) ;
92- onMenuToggle ( ) ;
93- } }
94- className = "text-text-invert absolute top-2 right-2 z-10 flex h-8 w-8 items-center justify-center rounded-full drop-shadow-[0_1px_2px_rgba(0,0,0,0.55)]"
95- >
96- < MoreVertical size = { 22 } strokeWidth = { 2.4 } />
97- </ button >
98- </ div >
99- </ Link >
74+ { item . isPrivate && (
75+ < >
76+ < div className = "absolute inset-x-0 top-0 h-12 bg-gradient-to-b from-[rgba(26,26,30,0.5)] to-transparent" />
77+ < Image
78+ src = "/icon-private-lock.svg"
79+ alt = ""
80+ width = { 14 }
81+ height = { 18 }
82+ className = "absolute top-3 left-3"
83+ />
84+ </ >
85+ ) }
86+ </ div >
87+ </ Link >
88+
89+ < button
90+ type = "button"
91+ aria-label = "피드 메뉴"
92+ onClick = { event => {
93+ event . preventDefault ( ) ;
94+ event . stopPropagation ( ) ;
95+ onMenuToggle ( ) ;
96+ } }
97+ className = "text-text-invert absolute top-2 right-2 z-10 flex h-8 w-8 items-center justify-center rounded-full drop-shadow-[0_1px_2px_rgba(0,0,0,0.55)]"
98+ >
99+ < MoreVertical size = { 22 } strokeWidth = { 2.4 } />
100+ </ button >
101+
102+ { menuOpen && (
103+ < div className = "shadow-spread-low absolute top-10 right-2 z-20 w-22 overflow-hidden rounded-lg bg-white" >
104+ < button
105+ type = "button"
106+ onClick = { onEdit }
107+ className = "text-body-2 text-text-primary hover:bg-object-primary-light hover:text-text-primary-brand focus-visible:bg-object-primary-light focus-visible:text-text-primary-brand active:bg-object-primary-light h-10 w-full cursor-pointer px-4 text-left font-medium transition-colors outline-none"
108+ >
109+ 수정
110+ </ button >
111+ < button
112+ type = "button"
113+ onClick = { onDelete }
114+ className = "text-body-2 text-text-primary hover:bg-error-light hover:text-error-default focus-visible:bg-error-light focus-visible:text-error-default active:bg-error-light h-10 w-full cursor-pointer px-4 text-left font-medium transition-colors outline-none"
115+ >
116+ 삭제
117+ </ button >
118+ </ div >
119+ ) }
120+ </ div >
100121
101122 < Link href = { item . href } className = "block min-w-0" >
102123 < div className = "flex w-full flex-col items-start gap-1 pt-2 pr-3.5 pb-3 pl-1" >
@@ -110,24 +131,6 @@ function FeedCard({
110131 </ div >
111132 </ Link >
112133
113- { menuOpen && (
114- < div className = "shadow-spread-low absolute top-10 right-3 z-20 w-22 overflow-hidden rounded-lg bg-white" >
115- < button
116- type = "button"
117- onClick = { onEdit }
118- className = "text-body-2 text-text-primary hover:bg-object-primary-light hover:text-text-primary-brand focus-visible:bg-object-primary-light focus-visible:text-text-primary-brand active:bg-object-primary-light h-10 w-full cursor-pointer px-4 text-left font-medium transition-colors outline-none"
119- >
120- 수정
121- </ button >
122- < button
123- type = "button"
124- onClick = { onDelete }
125- className = "text-body-2 text-text-primary hover:bg-error-light hover:text-error-default focus-visible:bg-error-light focus-visible:text-error-default active:bg-error-light h-10 w-full cursor-pointer px-4 text-left font-medium transition-colors outline-none"
126- >
127- 삭제
128- </ button >
129- </ div >
130- ) }
131134 </ article >
132135 ) ;
133136}
0 commit comments