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.

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

Refactor/qa fixes #81

Merged
merged 6 commits into from
Nov 27, 2024
Merged

Refactor/qa fixes #81

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
fa94ab8
Refactor: 코드 리팩토링 및 구조 개선
karnelll Nov 26, 2024
6987e40
[Fix] Resolve build errors and remove Login component
karnelll Nov 26, 2024
79656fd
[feat]: 로그인 모달 구현 및 관련 기능 추가
karnelll Nov 26, 2024
f60b93d
[Refactor] Apply cleanURL function and input handling improvements
karnelll Nov 27, 2024
0b75a0f
Merge branch 'main' into refactor/qa-fixes
karnelll Nov 27, 2024
33e39ac
Update EditLink.tsx
karnelll Nov 27, 2024
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
78 changes: 46 additions & 32 deletions fe/src/app/event-maps/[id]/[nonMemberId]/load-mappin-edit/components/EditLink.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@ interface InputField {
isTyping: boolean;
}

// 전체 코드에 에러가 발생할 가능성이 있는 부분 수정
export default function LinkFieldEdit({
label,
placeholder,
Expand Down Expand Up @@ -48,14 +47,18 @@ export default function LinkFieldEdit({

const inputRefs = useRef<(HTMLInputElement | null)[]>([]);

// 업데이트된 유효 링크 관리
useEffect(() => {
const validLinks = inputFields
.filter((field) => field.isValid)
.map((field) => field.text);
onChange(validLinks);
}, [inputFields, onChange]);

const cleanURL = (url: string): string => {
const match = url.match(/https?:\/\/[^\s]+/);
return match ? match[0].trim() : "";
};

const validateLink = async (fieldId: string, url: string, type: string) => {
const endpoint =
type === "북마크 공유 링크" ? "/pings/bookmark" : "/pings/store";
Expand Down Expand Up @@ -89,8 +92,7 @@ export default function LinkFieldEdit({
)
);
}
} catch (error) {
console.error("API 요청 실패:", error);
} catch {
setInputFields((prevFields) =>
prevFields.map((fieldItem) =>
fieldItem.id === fieldId
Expand All @@ -105,37 +107,52 @@ export default function LinkFieldEdit({
}
};

const handlePasteFromClipboard = async (fieldId: string) => {
try {
const clipboardText = await navigator.clipboard.readText();
const cleanedValue = cleanURL(clipboardText); // URL 정리
if (cleanedValue) {
setInputFields((prevFields) =>
prevFields.map((fieldItem) =>
fieldItem.id === fieldId
? { ...fieldItem, text: cleanedValue, isValid: false }
: fieldItem
)
);

validateLink(fieldId, cleanedValue, label);
}
} catch (error) {
console.error("클립보드에서 텍스트를 읽는 데 실패했습니다:", error);
}
};

const handleInputChange = (fieldId: string, inputValue: string) => {
const cleanedValue = cleanURL(inputValue); // URL 정리
setInputFields((prevFields) =>
prevFields.map((fieldItem) =>
fieldItem.id === fieldId
? { ...fieldItem, text: inputValue, isValid: false, isTyping: true }
? { ...fieldItem, text: cleanedValue, isValid: false, isTyping: true }
: fieldItem
)
);

if (cleanedValue) {
validateLink(fieldId, cleanedValue, label);
}
};

const handlePaste = (fieldId: string, event: React.ClipboardEvent) => {
const pastedText = event.clipboardData.getData("Text").trim();
const handleFocus = (fieldId: string) => {
setInputFields((prevFields) =>
prevFields.map((fieldItem) =>
fieldItem.id === fieldId ? { ...fieldItem, isTyping: true } : fieldItem
)
);

if (pastedText) {
setInputFields((prevFields) =>
prevFields.map((fieldItem) =>
fieldItem.id === fieldId
? { ...fieldItem, text: pastedText, isValid: false, isTyping: true }
: fieldItem
)
);
validateLink(fieldId, pastedText, label);
}
handlePasteFromClipboard(fieldId);
};

const handleBlur = (fieldId: string) => {
const field = inputFields.find((fieldItem) => fieldItem.id === fieldId);
if (field && field.text) {
validateLink(fieldId, field.text, label);
}

setInputFields((prevFields) =>
prevFields.map((fieldItem) =>
fieldItem.id === fieldId ? { ...fieldItem, isTyping: false } : fieldItem
Expand Down Expand Up @@ -167,15 +184,10 @@ export default function LinkFieldEdit({
};

const getClassNames = (item: InputField): string => {
if (item.error && !item.isTyping) {
if (item.error && !item.isTyping)
return "border-2 border-[#f73a2c] bg-[#F8F8F8]";
}
if (item.isValid) {
return "bg-[#EBF4FD] text-[#3a91ea]";
}
if (item.isTyping) {
return "border-2 border-[#555555] bg-[#F8F8F8]";
}
if (item.isValid) return "bg-[#EBF4FD] text-[#3a91ea]";
if (item.isTyping) return "border-2 border-[#555555] bg-[#F8F8F8]";
return "bg-[#F8F8F8]";
};

Expand Down Expand Up @@ -206,11 +218,13 @@ export default function LinkFieldEdit({
}}
type="text"
value={item.text}
onFocus={() => handleFocus(item.id)}
onChange={(e) => handleInputChange(item.id, e.target.value)}
onPaste={(e) => handlePaste(item.id, e)}
onBlur={() => handleBlur(item.id)}
placeholder={placeholder}
className="flex-1 bg-transparent outline-none placeholder:text-[#8e8e8e] text-sm font-medium font-['Pretendard']"
className={`flex-1 bg-transparent outline-none placeholder:text-[#8e8e8e] text-sm font-medium font-['Pretendard'] ${
item.isValid ? "text-[#3A91EA]" : ""
}`}
/>
{item.text && (
<button
Expand Down
27 changes: 13 additions & 14 deletions fe/src/app/event-maps/[id]/[nonMemberId]/load-mappin-edit/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,11 +22,6 @@ export default function LinkEditPage() {
const router = useRouter();
const { id, nonMemberId } = useParams();

const isValidLink = (link: string) => {
const urlPattern = /^(https?:\/\/[^\s]+)/g;
return urlPattern.test(link.trim());
};

useEffect(() => {
if (!id || !nonMemberId) {
console.error("누락된 라우트 매개변수:", { id, nonMemberId });
Expand All @@ -46,6 +41,8 @@ export default function LinkEditPage() {
);
setUserName(parsedData.name || "");
setUserData(parsedData);
} else {
console.warn("비회원 ID가 일치하지 않습니다.");
}
} else {
setMapLinks(userData.bookmarkUrls.length ? userData.bookmarkUrls : [""]);
Expand All @@ -58,22 +55,23 @@ export default function LinkEditPage() {

// 저장 버튼 활성화 상태 업데이트
useEffect(() => {
const allMapLinksValid = mapLinks.length > 0 && mapLinks.every(isValidLink);
const allStoreLinksValid =
storeLinks.length > 0 && storeLinks.every(isValidLink);

const allMapLinksValid = mapLinks.every((link) => link.trim() !== "");
const allStoreLinksValid = storeLinks.every((link) => link.trim() !== "");
const isComplete = (allMapLinksValid || allStoreLinksValid) && isChecked;
setIsSaveButtonEnabled(isComplete);
}, [mapLinks, storeLinks, isChecked]);

const handleSubmit = async (e?: React.FormEvent) => {
if (e) e.preventDefault();

const filteredMapLinks = mapLinks.filter((link) => link.trim() !== "");
const filteredStoreLinks = storeLinks.filter((link) => link.trim() !== "");

const updatedData = {
nonMemberId: userData.nonMemberId || Number(nonMemberId),
name: userName,
bookmarkUrls: mapLinks,
storeUrls: storeLinks,
bookmarkUrls: filteredMapLinks,
storeUrls: filteredStoreLinks,
};

try {
Expand All @@ -94,7 +92,6 @@ export default function LinkEditPage() {

setUserData(updatedData);
localStorage.setItem("userData", JSON.stringify(updatedData));

router.push(`/event-maps/${id}`);
} catch (error) {
console.error("API 호출 오류:", error);
Expand Down Expand Up @@ -169,8 +166,10 @@ export default function LinkEditPage() {
>
<Button
label="저장"
className={`w-fixl h-[60px] py-[17px] rounded-lg text-base font-medium text-white ${
isSaveButtonEnabled ? "bg-black" : "bg-[#e0e0e0] cursor-not-allowed"
className={`w-fix h-[60px] py-[17px] rounded-lg text-base font-medium text-white ${
isSaveButtonEnabled
? "bg-black"
: "bg-[#e0e0e0] pointer-events-none"
}`}
onClick={handleSubmit}
disabled={!isSaveButtonEnabled}
Expand Down
Loading