motaju/msgapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

imsi commit

Browse Source
This commit is contained in:
mota
2025-11-06 11:18:55 +09:00
parent 2c9898be90
commit 1ec2df27b0
3 changed files with 30 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/components/AppHeader.tsx
View File

@@ -423,7 +423,7 @@ export function AppHeader() {
/> />
</div> </div>
<div <div
className={`fixed left-0 right-0 z-50 bg-white shadow-[0_12px_32px_rgba(0,0,0,0.12)] transition-all duration-200 ${ className={`fixed left-0 right-0 z-50 bg-white/80 backdrop-blur shadow-[0_12px_32px_rgba(0,0,0,0.12)] transition-all duration-200 ${
megaOpen ? "opacity-100" : "pointer-events-none opacity-0" megaOpen ? "opacity-100" : "pointer-events-none opacity-0"
}`} }`}
style={{ top: headerBottom }} style={{ top: headerBottom }}

24
src/app/components/HorizontalCardScroller.tsx
View File

@@ -103,11 +103,7 @@ export default function HorizontalCardScroller({ items }: HorizontalCardScroller
{items.map((card) => ( {items.map((card) => (
<article <article
key={card.id} key={card.id}
className="flex-shrink-0 w-[384px] h-[308px] rounded-[16px] bg-white overflow-hidden" className="flex-shrink-0 w-[384px] h-[308px] rounded-[16px] bg-white overflow-hidden shadow-[0_1px_2px_rgba(0,0,0,0.05),0_0_2px_rgba(0,0,0,0.05)] transition-shadow duration-200 hover:shadow-[0_0_2px_rgba(0,0,0,0.08),0_8px_16px_rgba(0,0,0,0.12)]"
style={{
boxShadow:
"0 1px 2px 0 var(--color-alpha-shadow1, rgba(0, 0, 0, 0.05)), 0 0 2px 0 var(--color-alpha-shadow1, rgba(0, 0, 0, 0.05))",
}}
> >
<div className="grid grid-rows-[192px_116px] h-full"> <div className="grid grid-rows-[192px_116px] h-full">
{/* 상단: 사진 384x192, 상단 라운드 16, 하단 0 */} {/* 상단: 사진 384x192, 상단 라운드 16, 하단 0 */}
@@ -149,20 +145,20 @@ export default function HorizontalCardScroller({ items }: HorizontalCardScroller
</div> </div>
</div> </div>
<div className="pointer-events-none absolute bottom-[20px] left-1/2 -translate-x-1/2 z-20 flex items-center gap-3"> <div className="pointer-events-none absolute bottom-[20px] left-1/2 -translate-x-1/2 z-20 flex items-center gap-6">
<button <button
type="button" type="button"
aria-label="이전" aria-label="이전"
className="pointer-events-auto p-0 m-0 bg-transparent text-orange-500 hover:text-orange-600 focus:outline-none" className="pointer-events-auto p-0 m-0 bg-transparent text-neutral-500 hover:text-neutral-700 focus:outline-none size-[30px] inline-flex items-center justify-center"
onClick={() => scrollByStep(-1)} onClick={() => scrollByStep(-1)}
> >
<svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor" aria-hidden="true"> <svg width="30" height="30" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" className="rotate-180">
<polygon points="10,0 0,6 10,12" /> <path d="M9.5 5.5L15 12l-5.5 6.5" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round" />
</svg> </svg>
</button> </button>
<div ref={trackRef} className="pointer-events-auto relative h-2 w-[30vw] rounded-full bg-orange-200/50"> <div ref={trackRef} className="pointer-events-auto relative h-1 w-[480px] rounded bg-[#EDEDED]">
<div <div
className="absolute top-0 h-2 rounded-full bg-orange-500" className="absolute top-0 h-1 rounded bg-[var(--red-50,#F94B37)]"
style={{ width: `${thumbWidth}px`, left: `${thumbLeft}px` }} style={{ width: `${thumbWidth}px`, left: `${thumbLeft}px` }}
onMouseDown={handleThumbMouseDown} onMouseDown={handleThumbMouseDown}
/> />
@@ -170,11 +166,11 @@ export default function HorizontalCardScroller({ items }: HorizontalCardScroller
<button <button
type="button" type="button"
aria-label="다음" aria-label="다음"
className="pointer-events-auto p-0 m-0 bg-transparent text-orange-500 hover:text-orange-600 focus:outline-none" className="pointer-events-auto p-0 m-0 bg-transparent text-neutral-500 hover:text-neutral-700 focus:outline-none size-[30px] inline-flex items-center justify-center"
onClick={() => scrollByStep(1)} onClick={() => scrollByStep(1)}
> >
<svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor" aria-hidden="true"> <svg width="30" height="30" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<polygon points="0,0 10,6 0,12" /> <path d="M9.5 5.5L15 12l-5.5 6.5" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round" />
</svg> </svg>
</button> </button>
</div> </div>

23
src/app/components/SearchBar.tsx
View File

@@ -14,13 +14,14 @@ export function SearchBar() {
}} }}
role="search" role="search"
aria-label="사이트 검색" aria-label="사이트 검색"
className="relative w-full max-w-[384px]" className="relative w-full max-w-[384px] group"
> >
<button <button
type="submit" type="submit"
aria-label="검색 실행" aria-label="검색 실행"
className="absolute right-2 top-2 w-8 h-8 text-neutral-500 hover:text-neutral-800 cursor-pointer" className="absolute right-2 top-2 w-8 h-8 text-neutral-500 cursor-pointer"
> >
{/* 기본(일반) 상태: outline 아이콘 */}
<svg <svg
width="32" width="32"
height="32" height="32"
@@ -28,7 +29,7 @@ export function SearchBar() {
fill="none" fill="none"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
aria-hidden aria-hidden
className="w-8 h-8" className="w-8 h-8 block group-hover:hidden group-focus-within:hidden"
> >
<path <path
d="M21 21L17.682 17.682M17.682 17.682C18.4963 16.8676 19 15.7426 19 14.5C19 12.0147 16.9853 10 14.5 10C12.0147 10 10 12.0147 10 14.5C10 16.9853 12.0147 19 14.5 19C15.7426 19 16.8676 18.4963 17.682 17.682ZM28 16C28 22.6274 22.6274 28 16 28C9.37258 28 4 22.6274 4 16C4 9.37258 9.37258 4 16 4C22.6274 4 28 9.37258 28 16Z" d="M21 21L17.682 17.682M17.682 17.682C18.4963 16.8676 19 15.7426 19 14.5C19 12.0147 16.9853 10 14.5 10C12.0147 10 10 12.0147 10 14.5C10 16.9853 12.0147 19 14.5 19C15.7426 19 16.8676 18.4963 17.682 17.682ZM28 16C28 22.6274 22.6274 28 16 28C9.37258 28 4 22.6274 4 16C4 9.37258 9.37258 4 16 4C22.6274 4 28 9.37258 28 16Z"
@@ -38,6 +39,20 @@ export function SearchBar() {
strokeLinejoin="round" strokeLinejoin="round"
/> />
</svg> </svg>
{/* Hover/Focus 상태: 제공된 solid 아이콘 */}
<svg
width="32"
height="32"
viewBox="0 0 32 32"
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-hidden
className="w-8 h-8 hidden group-hover:block group-focus-within:block"
>
<path d="M11 14.5C11 12.567 12.567 11 14.5 11C16.433 11 18 12.567 18 14.5C18 15.4668 17.6093 16.3404 16.9749 16.9749C16.3404 17.6093 15.4668 18 14.5 18C12.567 18 11 16.433 11 14.5Z" fill="#707070" />
<path fillRule="evenodd" clipRule="evenodd" d="M16 3C8.8203 3 3 8.8203 3 16C3 23.1797 8.8203 29 16 29C23.1797 29 29 23.1797 29 16C29 8.8203 23.1797 3 16 3ZM14.5 9C11.4624 9 9 11.4624 9 14.5C9 17.5376 11.4624 20 14.5 20C15.6571 20 16.7316 19.6419 17.6174 19.0316L20.2929 21.7071C20.6834 22.0976 21.3166 22.0976 21.7071 21.7071C22.0976 21.3166 22.0976 20.6834 21.7071 20.2929L19.0316 17.6174C19.6419 16.7316 20 15.6571 20 14.5C20 11.4624 17.5376 9 14.5 9Z" fill="#707070" />
</svg>
</button> </button>
<input <input
type="search" type="search"
@@ -50,7 +65,7 @@ export function SearchBar() {
onKeyDown={(e) => { onKeyDown={(e) => {
if (e.key === "Escape") setTerm(""); if (e.key === "Escape") setTerm("");
}} }}
className="w-full h-12 pr-12 pl-2 rounded-2xl border border-neutral-300 bg-white" className="w-full h-12 pr-12 pl-2 rounded-2xl border bg-white border-neutral-300 hover:border-[2px] hover:border-neutral-500 focus:border-2 focus:border-neutral-800 focus:outline-none transition-colors"
/> />
</form> </form>
); );