Feature/#21 위키 참여 인증 모달 컴포넌트 #39

horororok · 2024-12-16T09:32:39Z

이슈 번호

close #21

변경 사항 요약

위키 퀴즈 모달, 이미지 업로드 모달 제작
현재 임시 비동기 로직으로 api 통신 대체, 페이지 제작시 함께 진행할 예정

테스트 결과

베이스(develop) 브랜치에 포함되기 위한 코드는 모두 정상적으로 작동이 되어야 합니다.

입력값 trim 처리
답변 입력시 경고 메시지 자동 제거
오답 제출 시 입력 필드 초기화
focus 스타일 추가

드래그앤드랍과 클릭 업로드 두 가지 방식 모두 지원
드래그 상태에 대한 시각적인 피드백 제공(색상)
미리보기 기능 구현
이미지 업로드 전/후 상태에 따른 버튼 스타일 변경

클릭 이후 로딩시 버튼 스타일 변경

junghwaYang · 2024-12-16T10:14:32Z

이슈 연결 시 #'21' 이 아닌 #21로 연결해주세요! 본문은 제가 수정했습니다!

junghwaYang

기능 구현은 무척 잘해주셨는데 스타일이 틀어지는 부분과 공통 컴포넌트 부분이 많이 빠져있어요!

기본 Modal.tsx의 경우는 padding: 60px 20px 22px; 규격으로 맞춰주셔야할것같습니다!

그리고 컴포넌트 폴더내에

components/
    Modal/
         Modal.tsx

이렇게 안에 구성하는 식으로 하는게 찾기 더 편할것같습니다!

WikiQuizModal.tsx는 ModalQuiz.tsx 로만 네이밍해도 좋을것같아요
ImageUploadModal.tsx도 ModalImageUpload.tsx 처럼요!
그리고 Quiz와 ImageUpload는 Modal 자체라기보다는 Modal의 content 니까
<Modal>{컨텐츠}</Modal> 을 통으로 컴포넌트로 만들기보다는
<div>{컨텐츠}</div> 로 컨텐츠만 포함된 컴포넌트로 만드는게 좋을것같아요
그래야 유지보수하기도 더 쉬울것같습니다!
테스트 페이지에서는

<Modal>
  <ModalQuiz />
</Modal>

이렇게 컨텐츠만 갈아낄 수 있도록 구성되면 더 좋을것같아요~

junghwaYang · 2024-12-16T10:20:12Z

public/icon/icon-camera.png

svg가 아닌 png로 추출하신 이유가 있을까요??

아래 icon-lock.png도 동일

아이콘, 이미지들은 피그마에서 그대로 export 했습니다.

svg로 추출 가능한것들은 svg로 추출 부탁드립니다!

junghwaYang · 2024-12-16T10:25:30Z

components/Modal.tsx

+  // esc 키로 모달 닫기
+  useEffect(() => {
+    const handleEsc = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        onClose();
+      }
+    };
+    window.addEventListener('keydown', handleEsc);
+    return () => window.removeEventListener('keydown', handleEsc);
+  }, []);


오 생각치못했던 방식인데 추가 기능까지 👍🏻 좋은것같습니다!!

junghwaYang · 2024-12-16T10:27:19Z

components/Modal.tsx

+          className="absolute right-0 top-0 m-2 cursor-pointer"
+          onClick={onClose}
+        >
+          <Image


최적화를 위한 Image 컴포넌트를 사용하셨군요!! 저도 icon image 사용한 부분에서 까먹고 있었는데! 배워갑니당 👍🏻

junghwaYang · 2024-12-16T10:29:49Z

components/WikiQuizModal.tsx

+        <input
+          type="text"
+          placeholder="답변을 입력해 주세요."
+          ref={inputRef}
+          onChange={handleUserAnswer}
+          className={`mt-4 w-full rounded-lg focus:outline-none focus:ring-2 ${warning ? `bg-red-300 focus:ring-red-200` : `bg-gray-100 focus:ring-green-200`} p-2`}
+        />


이 부분에 대해서는 지이님께서 만들어주신 Input 컴포넌트가 있으니 해당 컴포넌트로 변경해주는게 좋을 것 같습니다~

junghwaYang · 2024-12-16T10:30:43Z

components/WikiQuizModal.tsx

+interface WarningTextProps {
+  warning: boolean;
+}
+
+const WarningText = ({ warning }: WarningTextProps) => {
+  if (!warning) return null;
+  return (
+    <p className="text-xs text-red-500">정답이 아닙니다. 다시 입력해 주세요.</p>
+  );
+};


경고문에 대한 텍스트 스타일도 Input 컴포넌트를 사용하시면 쓸 일이 없으니 제거하는게 좋을것같습니다!

junghwaYang · 2024-12-16T10:33:30Z

components/WikiQuizModal.tsx

+        <button
+          type="submit"
+          disabled={!userAnswer.trim() || isCorrect || isSubmitting}
+          className={`mt-4 w-full rounded-custom px-6 py-2 text-background transition-colors ${
+            !userAnswer.trim() || isCorrect || isSubmitting
+              ? 'cursor-not-allowed bg-gray-200'
+              : 'bg-green-200 hover:bg-green-300'
+          }`}
+        >
+          {/* {isSubmitting ? '확인 중...' : '확인'} */}
+          {isSubmitting ? (
+            <div className="flex items-center justify-center">
+              <span className="mr-2">확인 중</span>
+              <svg
+                className="h-5 w-5 animate-spin"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+              >
+                <circle
+                  className="opacity-25"
+                  cx="12"
+                  cy="12"
+                  r="10"
+                  stroke="currentColor"
+                  strokeWidth="4"
+                />
+                <path
+                  className="opacity-75"
+                  fill="currentColor"
+                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                />
+              </svg>
+            </div>
+          ) : (
+            '확인'
+          )}
+        </button>


여기도 학수님께서 만들어주신 Button 컴포넌트 이용하시면 될 것 같아요~

junghwaYang · 2024-12-16T10:35:24Z

components/ImageUploadModal.tsx

+          <button
+            className={`w-40 rounded-custom px-6 py-2 text-background ${
+              previewUrl
+                ? 'cursor-pointer bg-green-200'
+                : 'cursor-not-allowed bg-gray-300'
+            }`}
+            disabled={!previewUrl || isUpload}
+            onClick={handleImageUpload}
+          >
+            {isUpload ? (
+              <div className="flex items-center justify-center">
+                <span className="mr-2">확인 중</span>
+                <svg
+                  className="h-5 w-5 animate-spin"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                >
+                  <circle
+                    className="opacity-25"
+                    cx="12"
+                    cy="12"
+                    r="10"
+                    stroke="currentColor"
+                    strokeWidth="4"
+                  />
+                  <path
+                    className="opacity-75"
+                    fill="currentColor"
+                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                  />
+                </svg>
+              </div>
+            ) : (
+              '삽입하기'
+            )}
+          </button>


여기도 기존 Button 컴포넌트 이용해주세요!

haksoo0918

주석도 꼼꼼히 남겨주셔서 코드 보기 좋았습니다. 👍

haksoo0918 · 2024-12-16T11:40:43Z

components/ImageUploadModal.tsx

+                <svg
+                  className="h-5 w-5 animate-spin"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                >
+                  <circle
+                    className="opacity-25"
+                    cx="12"
+                    cy="12"
+                    r="10"
+                    stroke="currentColor"
+                    strokeWidth="4"
+                  />
+                  <path
+                    className="opacity-75"
+                    fill="currentColor"
+                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                  />
+                </svg>


svg 는 파일로 빼거나 혹은 코드로 빼는것은 어떠세요?

haksoo0918 · 2024-12-16T11:49:00Z

components/Modal.tsx

+  // 배경 클릭시 모달 닫기
+  const handleBackGroundClick = (e: React.MouseEvent) => {
+    if (e.target === e.currentTarget) {
+      onClose();
+    }
+  };


배경을 클릭하면 무조건 닫히는것 보다 옵션으로 선택에 따라 조절할 수 있으면 합니다.
이미지 모달이나 입력 모달의 경우 데이터를 입력했는데 의도치 않게 바깥을 클릭했는데 모달이 닫히면 좋지못한 사용자 경험이라 생각됩니다.

배경을 클릭하면 무조건 닫히는것 보다 옵션으로 선택에 따라 조절할 수 있으면 합니다. 이미지 모달이나 입력 모달의 경우 데이터를 입력했는데 의도치 않게 바깥을 클릭했는데 모달이 닫히면 좋지못한 사용자 경험이라 생각됩니다.

오 저도 생각치도 못했던 부분이었는데 좋은 의견인것같아요!! 👍🏻
일반적인 모달의 경우는 bg 클릭해도 닫히게끔하고 input이나 사용자의 입력값이 필요한 모달에서는 bg 클릭해도 안닫히게끔!!
너무 좋은 의견인것같습니다👏🏻

horororok added 5 commits December 16, 2024 18:14

✨이미지업로드모달, 퀴즈모달 미리보기기

1b674d1

✨ 모달 공통 레이아웃 제작

159443b

✨ 이미지 업로드 모달 컴포넌트 추가

cc862d2

✨ 위키 퀴즈 모달 컴포넌트 추가

de99f31

✨ 모달 컴포넌트에 필요한 아이콘 추가가

7e8f22f

horororok added the 📁 컴포넌트 컴포넌트 개발 관련 작업 label Dec 16, 2024

horororok requested review from crazyupinc-design, haksoo0918, junghwaYang and solprime December 16, 2024 09:32

horororok self-assigned this Dec 16, 2024

junghwaYang requested changes Dec 16, 2024

View reviewed changes

junghwaYang mentioned this pull request Dec 16, 2024

Feature/#22 접속 끊김 모달 컴포넌트 #40

Merged

haksoo0918 requested changes Dec 16, 2024

View reviewed changes

horororok closed this pull request by merging all changes into develop in 0de4e0a Dec 18, 2024

horororok deleted the feature/#21_위키-참여-인증-모달-컴포넌트 branch December 18, 2024 04:17

Feature/#21 위키 참여 인증 모달 컴포넌트 #39

Feature/#21 위키 참여 인증 모달 컴포넌트 #39

Uh oh!

Conversation

horororok commented Dec 16, 2024 • edited by junghwaYang Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

이슈 번호

변경 사항 요약

테스트 결과

Uh oh!

junghwaYang commented Dec 16, 2024

Uh oh!

junghwaYang left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

haksoo0918 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

horororok commented Dec 16, 2024 •

edited by junghwaYang

Loading