Skip to content
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.

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

Fix/naver btn #50

Merged
merged 10 commits into from
Nov 3, 2024
Prev Previous commit
Next Next commit
빌드 오류 수정
choihooo committed Oct 31, 2024
commit b108bd39554458dd2e35fd2efa78943edb071def
30 changes: 25 additions & 5 deletions fe/src/app/event-maps/[id]/components/BottomDrawer.tsx
Original file line number Diff line number Diff line change
@@ -137,18 +137,38 @@ export default function BottomDrawer({
};

// 드로워 내부에서 이미지가 아닌 다른 요소 클릭 시 선택 해제
const handleDrawerClick = (event: React.MouseEvent<HTMLDivElement>) => {
const target = event.target as HTMLElement;
if (!target.closest("button")) {
setSelectedButton(null);
setCustomMarkers(allPings); // 선택 해제 시 전체 마커 표시
const handleDrawerClick = (
event:
| React.MouseEvent<HTMLDivElement>
| React.KeyboardEvent<HTMLDivElement>
) => {
if (event.type === "keydown") {
const keyboardEvent = event as React.KeyboardEvent<HTMLDivElement>;
if (keyboardEvent.key === "Enter" || keyboardEvent.key === " ") {
setSelectedButton(null);
setCustomMarkers(allPings);
}
} else if (event.type === "click") {
const mouseEvent = event as React.MouseEvent<HTMLDivElement>;
const target = mouseEvent.target as HTMLElement;
if (!target.closest("button")) {
setSelectedButton(null);
setCustomMarkers(allPings);
}
}
};

return (
<div
role="button"
tabIndex={0}
className="bottom-drawer w-full h-[218px] bg-grayscale-90 z-10 rounded-t-xlarge"
onClick={handleDrawerClick}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") {
handleDrawerClick(e);
}
}}
>
<div className="absolute mr-[16px] right-0 -top-[120px] flex flex-col">
<button
29 changes: 19 additions & 10 deletions fe/src/app/event-maps/[id]/load-mappin/components/NameField.tsx
Original file line number Diff line number Diff line change
@@ -41,6 +41,23 @@ export default function NameField({
setLocalErrorType(null);
};

const getInputBorderClass = () => {
if (errorType === "exists" && !localErrorType) {
return "border-2 border-danger-base focus:ring-danger-base";
}
return "focus:ring-grayscale-80";
};

// 조건에 따라 표시할 메시지 설정
let message = null;
if (errorType === "exists" && !localErrorType) {
message = <div className="text-danger-base">이미 존재하는 이름이에요</div>;
} else if (localErrorType === "invalid") {
message = (
<div className="text-success-base">공백, 특수문자, 숫자 불가</div>
);
}

return (
<div className="relative mb-[20px]">
<label
@@ -56,11 +73,7 @@ export default function NameField({
value={value}
onChange={handleChange}
placeholder="이름"
className={`w-full p-3 bg-gray-50 rounded-md focus:outline-none focus:ring-2 ${
errorType === "exists" && !localErrorType
? "border-2 border-danger-base focus:ring-danger-base"
: "focus:ring-grayscale-80"
}`}
className={`w-full p-3 bg-gray-50 rounded-md focus:outline-none focus:ring-2 ${getInputBorderClass()}`}
style={{
border:
errorType === "exists" && !localErrorType
@@ -79,11 +92,7 @@ export default function NameField({
)}
</div>
<div className="flex justify-between text-sm mt-1">
{errorType === "exists" && !localErrorType ? (
<div className="text-danger-base">이미 존재하는 이름이에요</div>
) : localErrorType === "invalid" ? (
<div className="text-success-base">공백, 특수문자, 숫자 불가</div>
) : null}
{message}
<div className="ml-auto text-gray-500">{value.length}/6</div>
</div>
</div>