Skip to content

Feat/matchinglist api #61

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dasosann merged 5 commits into from
Apr 30, 2026
Merged

Feat/matchinglist api #61

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
23b5d9a
feat: 나이 옵션 추가
dasosann Apr 30, 2026
bf3ee74
feat: 나이옵션 추가
dasosann Apr 30, 2026
c6b8127
feat: 나이 옵션
dasosann Apr 30, 2026
1673ac7
feat: 코드리뷰 반영
dasosann Apr 30, 2026
5657106
feaT: 코드리뷰
dasosann Apr 30, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
227 changes: 227 additions & 0 deletions app/matching/_components/AgeRangeDrawer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,227 @@
"use client";

import React, { useState } from "react";
import { Minus, Plus } from "lucide-react";
import {
Drawer,
DrawerClose,
DrawerContent,
DrawerHeader,
DrawerTitle,
DrawerTrigger,
} from "@/components/ui/drawer";
import { cn } from "@/lib/utils";
import Button from "@/components/ui/Button";

interface AgeRangeDrawerProps {
trigger: React.ReactNode;
minAge: number;
maxAge: number;
onConfirm: (minAge: number, maxAge: number) => void;
}

const MIN_AGE = 20;
const MAX_AGE = 29;
const ALL_AGES = Array.from(
{ length: MAX_AGE - MIN_AGE + 1 },
(_, i) => MIN_AGE + i,
);

export default function AgeRangeDrawer({
Comment thread
dasosann marked this conversation as resolved.
trigger,
minAge: initialMin,
maxAge: initialMax,
onConfirm,
}: AgeRangeDrawerProps) {
const [localMin, setLocalMin] = useState(initialMin);
const [localMax, setLocalMax] = useState(initialMax);

// Drawer가 열릴 때 현재 값으로 리셋
const handleOpenChange = (open: boolean) => {
if (open) {
setLocalMin(initialMin);
setLocalMax(initialMax);
}
};

const handleConfirm = () => {
onConfirm(localMin, localMax);
};

const increaseMin = () => {
if (localMin < localMax) setLocalMin((v) => v + 1);
};
const decreaseMin = () => {
if (localMin > MIN_AGE) setLocalMin((v) => v - 1);
};
const increaseMax = () => {
if (localMax < MAX_AGE) setLocalMax((v) => v + 1);
};
const decreaseMax = () => {
if (localMax > localMin) setLocalMax((v) => v - 1);
};

return (
<Drawer onOpenChange={handleOpenChange}>
<DrawerTrigger asChild>{trigger}</DrawerTrigger>
<DrawerContent className="pb-8 outline-none" showHandle={false}>
<div className="flex flex-col px-6">
<DrawerHeader className="gap-4 px-0 pt-6 pb-0">
<div className="relative flex items-center justify-between">
<div className="w-[40px]" />
<DrawerTitle className="typo-16-700 text-color-text-black flex-1 text-center">
나이 구간 설정
</DrawerTitle>
<DrawerClose asChild>
<button
type="button"
className="typo-16-500 text-color-text-caption3 w-[40px] text-right"
>
닫기
</button>
</DrawerClose>
</div>
<p className="typo-14-500 text-color-text-caption3 text-center">
원하는 나이 범위를 설정하세요.
</p>
</DrawerHeader>

{/* 시각적 나이 구간 표시 */}
<div className="mt-8">
<div className="flex">
{ALL_AGES.map((age, i) => {
const isInRange = age >= localMin && age <= localMax;
const isStart = age === localMin;
const isEnd = age === localMax;
const isFirst = i === 0;
const isLast = i === ALL_AGES.length - 1;

return (
<div
key={age}
className="flex flex-1 flex-col items-center gap-2"
>
{/* 셀 */}
<div
className={cn(
"h-10 w-full border-y border-r transition-all duration-300",
// 첫 번째 셀 왼쪽 둥글게
isFirst && "rounded-l-lg border-l",
// 마지막 셀 오른쪽 둥글게
isLast && "rounded-r-lg",
// 선택 시작점 왼쪽 둥글게
isStart && !isFirst && "rounded-l-lg border-l",
// 선택 끝점 오른쪽 둥글게
isEnd && !isLast && "rounded-r-lg",
)}
style={
isInRange
? {
borderColor: "rgba(255, 77, 97, 0.3)",
background:
"linear-gradient(to bottom, rgba(255, 77, 97, 0.2), rgba(255, 119, 94, 0.1))",
}
: {
borderColor: "#e8e8e8",
backgroundColor: "#f8f8f8",
}
}
/>
{/* 나이 레이블 */}
<span
className={cn(
"text-[11px] font-semibold transition-colors duration-300",
isInRange
? "text-color-main-900"
: "text-color-text-disabled",
)}
>
{age}
</span>
</div>
);
})}
</div>
</div>

{/* +/- 조절 영역 */}
<div className="mt-8 flex items-center justify-center gap-6">
{/* 최소 나이 조절 */}
<div className="flex flex-col items-center gap-2">
<span className="typo-12-500 text-color-text-caption3">
최소 나이
</span>
<div className="flex items-center gap-3">
<button
type="button"
aria-label="최소 나이 감소"
onClick={decreaseMin}
disabled={localMin <= MIN_AGE}
className="flex h-9 w-9 items-center justify-center rounded-full border bg-white transition-all active:scale-95 disabled:opacity-30"
style={{ borderColor: "#e5e5e5" }}
>
<Minus size={16} className="text-color-text-black" />
</button>
Comment on lines +155 to +164

@gemini-code-assist gemini-code-assist Bot Apr 30, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

아이콘으로만 구성된 버튼에는 접근성을 위해 aria-label을 추가하고, 의도치 않은 폼 제출을 방지하기 위해 type="button"을 명시하는 것이 좋습니다. 또한, 테두리 색상과 같은 정밀한 값은 Tailwind 임의 값 대신 인라인 스타일을 사용하세요.

                <button
                  type="button"
                  onClick={decreaseMin}
                  disabled={localMin <= MIN_AGE}
                  aria-label="최소 나이 감소"
                  className="flex h-9 w-9 items-center justify-center rounded-full border bg-white transition-all active:scale-95 disabled:opacity-30" style={{ borderColor: "#e5e5e5" }}
                >
References
  1. 아이콘 전용 버튼의 aria-label 확인 및 웹 표준 준수(type 명시) (link)
  2. Tailwind utility class로 정확히 표현하기 어려운 border, box-shadow 등의 값은 인라인 스타일을 사용합니다.

<span className="typo-24-700 text-color-main-900 w-12 text-center">
{localMin}
</span>
<button
type="button"
aria-label="최소 나이 증가"
onClick={increaseMin}
disabled={localMin >= localMax}
className="flex h-9 w-9 items-center justify-center rounded-full border bg-white transition-all active:scale-95 disabled:opacity-30"
style={{ borderColor: "#e5e5e5" }}
>
<Plus size={16} className="text-color-text-black" />
</button>
</div>
</div>

{/* 구분선 */}
<span className="typo-20-700 text-color-text-disabled mt-5">~</span>

{/* 최대 나이 조절 */}
<div className="flex flex-col items-center gap-2">
<span className="typo-12-500 text-color-text-caption3">
최대 나이
</span>
<div className="flex items-center gap-3">
<button
type="button"
aria-label="최대 나이 감소"
onClick={decreaseMax}
disabled={localMax <= localMin}
className="flex h-9 w-9 items-center justify-center rounded-full border bg-white transition-all active:scale-95 disabled:opacity-30"
style={{ borderColor: "#e5e5e5" }}
>
<Minus size={16} className="text-color-text-black" />
</button>
<span className="typo-24-700 text-color-main-900 w-12 text-center">
{localMax}
</span>
<button
type="button"
aria-label="최대 나이 증가"
onClick={increaseMax}
disabled={localMax >= MAX_AGE}
className="flex h-9 w-9 items-center justify-center rounded-full border bg-white transition-all active:scale-95 disabled:opacity-30"
style={{ borderColor: "#e5e5e5" }}
>
<Plus size={16} className="text-color-text-black" />
</button>
</div>
</div>
</div>

{/* 확인 버튼 */}
<DrawerClose asChild>
<Button onClick={handleConfirm} className="mt-8">
확인
</Button>
</DrawerClose>
</div>
</DrawerContent>
</Drawer>
);
}
138 changes: 138 additions & 0 deletions app/matching/_components/MatchingAgeOption.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,138 @@
"use client";

import React, { useEffect, useState } from "react";
import Image from "next/image";
import { Check, Delete } from "lucide-react";
import { cn } from "@/lib/utils";
import AgeRangeDrawer from "./AgeRangeDrawer";

interface MatchingAgeOptionProps {
onAgeRangeSelect: (minAge: number, maxAge: number) => void;
onReset: () => void;
minAge?: number;
maxAge?: number;
}

const DEFAULT_MIN = 20;
const DEFAULT_MAX = 29;

export default function MatchingAgeOption({
onAgeRangeSelect,
onReset,
minAge,
maxAge,
}: MatchingAgeOptionProps) {
const isSelected = minAge !== undefined && maxAge !== undefined;
const [showCheck, setShowCheck] = useState(false);

const handleConfirm = (min: number, max: number) => {
onAgeRangeSelect(min, max);
setShowCheck(true);
};

const handleDelete = (e: React.MouseEvent) => {
e.stopPropagation();
e.preventDefault();
onReset();
};

useEffect(() => {
if (showCheck) {
const timer = setTimeout(() => setShowCheck(false), 2000);
return () => clearTimeout(timer);
}
}, [showCheck]);

const displayText =
isSelected && minAge === maxAge
? `${minAge}살`
: isSelected
? `${minAge}~${maxAge}살`
: "";

// 선택된 상태: Delete 버튼은 Drawer 밖에서 독립적으로 동작
if (isSelected) {
return (
<div className="border-color-gray-100 flex w-full items-center justify-between border-b pb-5">
<AgeRangeDrawer
minAge={minAge ?? DEFAULT_MIN}
maxAge={maxAge ?? DEFAULT_MAX}
onConfirm={handleConfirm}
trigger={
<button className="flex flex-col gap-1 text-left outline-none">
<h2 className="typo-20-700 text-color-text-black">
나이 구간 선택하기
</h2>
<p className="typo-14-500 text-color-text-caption3">
선택됨: {displayText}
</p>
</button>
}
/>
{/* Delete 버튼: Drawer 트리거 밖에 위치 */}
<button
className="bg-pink-gradient border-color-pink-700 relative flex h-9 w-9 shrink-0 items-center justify-center overflow-hidden rounded-[32px] border transition-transform active:scale-95 disabled:opacity-50"
onClick={handleDelete}
disabled={showCheck}
aria-label="나이 설정 삭제"
>
<div
className={cn(
"absolute flex items-center justify-center transition-opacity duration-300",
showCheck ? "opacity-100" : "opacity-0",
)}
>
<Check
className="text-color-pink-700 h-[14px] w-[14px]"
strokeWidth={3}
/>
</div>
<div
className={cn(
"absolute flex items-center justify-center transition-opacity duration-300",
!showCheck ? "opacity-100" : "opacity-0",
)}
>
<Delete
className="text-color-pink-700 h-[20px] w-[20px]"
strokeWidth={2}
/>
</div>
</button>
</div>
);
}

// 미선택 상태: 전체가 Drawer 트리거
return (
<AgeRangeDrawer
minAge={DEFAULT_MIN}
maxAge={DEFAULT_MAX}
onConfirm={handleConfirm}
trigger={
<button className="border-color-gray-100 flex w-full items-center justify-between border-b pb-5 text-left outline-none">
<div className="flex flex-col gap-1">
<h2 className="typo-20-700 text-color-text-black">
나이 구간 선택하기
</h2>
<p className="typo-14-500 text-color-text-caption3">
원하는 나이 범위를 설정해 보세요!
</p>
</div>
<div className="border-color-gray-100 flex h-9 w-[86px] items-center justify-center gap-[5px] rounded-[36px] border bg-white px-2">
<Image
src="/main/elec-bulb.png"
alt="bulb"
width={20}
height={20}
className="shrink-0"
/>
<span className="typo-16-700 text-color-text-black leading-[19px]">
1
</span>
</div>
</button>
}
/>
);
}
Loading
Loading