[ QA ] 홈, 타이머 페이지 최종 QA를 진행합니다. #321

KIMGEONHWI · 2025-05-08T18:36:50Z

🔥 Related Issues

close #issue_number

✅ 작업 리스트

🔧 작업 내용

타이머 페이지 할 일 카드 클릭 이벤트 전파 막기

기존 타이머 페이지의 할 일 카드의 경우 "완료" 버튼 클릭시 해당 할 일 카드가 selected되면서 완료 처리되는 문제가 발생하였음. 그래서 클릭 이벤트 전파를 막도록 하여 "완료" 버튼 클릭시 selected되는 문제 해결

타이머 페이지 할 일 카드 완료된 일로 변경 시, 타이머 정지 api 호출

🧐 새로 알게된 점

🤔 궁금한 점

📸 스크린샷 / GIF / Link

타이머 페이지 할 일 카드 완료된 일로 변경 시, 타이머 정지 api 호출

2025-05-09.3.40.41.mov

타이머 페이지 완료된 할 일 카드 타이머 실행 막기, 카테고리 이름과 할 일 이름에 ---선 적용

2025-05-09.3.36.33.mov

…은 완료되지 않은 할 일 카드중 제일 위에있는 할 일 카드가 되도록 수정 (#308)

… 중 첫번 째 할 일 선택 (#308)

10tacion

타이머 페이지는 기존 방식에서 선택된 할일 받아오는 API(GET) & 할일 선택 post API 총 2개를 사용해서 할일을 선택하는 방식으로 바뀌었어요.

(할일 선택 동작에서 해당 API를 활용하고 있는지 한번 검토 부탁드려요)
지금 첨부해주신 영상에서 2번째 영상은 중간에 재생이 안되고있어요. 그리고 첫번째 영상에서는 선택된 할일이 완료로 바뀔 때에도 타이머가 계속 실행되고 있는것 같은데 이 부분 확인 부탁드립니다.

10tacion · 2025-05-09T03:46:58Z

src/pages/TimerPage/Carousel/CarouselFriend.tsx


 			{/* 타이머 표시 영역 */}
-			<div className="absolute top-[8.4rem] flex items-center gap-[0.4rem]">
+			<div className="mb-[0.2rem] mt-[1rem] flex items-center gap-[0.2rem]">


p1: absolute 안주면 시간 흐를 때마다 레이아웃 쉬프트 일어나서 걸어놓았는데, absolute 적용해서 스타일링 하는게 어떨까싶어요.

p1: absolute 안주면 시간 흐를 때마다 레이아웃 쉬프트 일어나서 걸어놓았는데, absolute 적용해서 스타일링 하는게 어떨까싶어요.

넵 변경하겠습니다!

10tacion · 2025-05-09T05:36:36Z

src/pages/TimerPage/MainTimer/TimerDisplay/ButtonTimerPlay/ButtonTimerPlay.tsx

+	const handleClick = (e: MouseEvent) => {
+		if (disabled) {
+			e.preventDefault();
+			return;
+		}
+		onClick();
+	};
+
 	return (
-		<button onClick={onClick} className="group relative">
+		<button
+			onClick={handleClick}
+			className={`group relative ${disabled ? 'cursor-not-allowed' : ''}`}
+			disabled={disabled}
+		>


p3: button에 disabled 속성 적용이 되어있는데, 혹시 handleClick에서 로직을 막아주지 않아도 괜찮을까요??!

p3: button에 disabled 속성 적용이 되어있는데, 혹시 handleClick에서 로직을 막아주지 않아도 괜찮을까요??!

disabled 속성이 클릭 이벤트가 발생하지 않도록 막아주기 때문에 따로 로직을 막아 주지 않아도 괜찮다고 생각합니다. 또한, 영상에는 담기지 않았지만 첨부한 이미지와 같이 클릭이 안된다는 것을 명시적으로 표현해주기 때문에 ux상으로도 더 좋다고 생각해요.

Suggested change

const handleClick = (e: MouseEvent) => {

if (disabled) {

e.preventDefault();

return;

}

onClick();

};

return (

<button onClick={onClick} className="group relative">

<button

onClick={handleClick}

className={`group relative ${disabled ? 'cursor-not-allowed' : ''}`}

disabled={disabled}

>

return (

<button

onClick={onClick}

className={`group relative ${disabled ? 'cursor-not-allowed' : ''}`}

disabled={disabled}

>

이렇게 적용해도 괜찮은지 궁금합니다!

이렇게 적용해도 괜찮은지 궁금합니다!

넵! 반영했습니다

10tacion · 2025-05-09T05:47:09Z

src/shared/components/BoxTodo/BoxTodo.tsx

 	selectedNumber?: number;
 	onClick?: () => void;
-	onToggleComplete?: () => void;
+	onToggleComplete?: (e: MouseEvent<HTMLButtonElement>) => void;


p1: 타입 변경해도 BoxTodo를 사용하는 다른 컴포넌트에게 영향이 없나요?

p1: 타입 변경해도 BoxTodo를 사용하는 다른 컴포넌트에게 영향이 없나요?

없었습니다

KIMGEONHWI · 2025-05-09T07:00:22Z

타이머 페이지는 기존 방식에서 선택된 할일 받아오는 API(GET) & 할일 선택 post API 총 2개를 사용해서 할일을 선택하는 방식으로 바뀌었어요.

(할일 선택 동작에서 해당 API를 활용하고 있는지 한번 검토 부탁드려요)

지금 첨부해주신 영상에서 2번째 영상은 중간에 재생이 안되고있어요. 그리고 첫번째 영상에서는 선택된 할일이 완료로 바뀔 때에도 타이머가 계속 실행되고 있는것 같은데 이 부분 확인 부탁드립니다.

첫번째 영상을 할 일 카드 클릭 이벤트 전파막기 전에 찍어놓은 영상으로 잘못 올렸었네요.
다시 찍어서 올려두었으니 확인부탁드려요!! 해당 작업 브랜치에서 확인하시면 더 정확할 것 같아요.

seueooo

할일 카드 완료 체크 시 타이머가 정상적으로 정지되지만, 완료 체크를 해제한 후 타이머를 재개하고 다시 완료 체크를 누르면 타이머가 정지되지 않는 문제가 발생하고 있습니다.
체크박스 상태 변경 이벤트 처리 시 타이머 상태를 항상 확인하고, 완료 체크 시 무조건 타이머를 정지하도록 수정이 필요할 것 같습니다!

확인이 필요한 플로우:
할일 완료 체크 → 타이머 정지 O
완료 체크 해제 → 타이머 재개 → 다시 완료 체크 → 타이머 정지 X

너무 늦게 확인해 죄송합니다.

Ivoryeee

굿굿 수고 많으셨습니다!!

Ivoryeee · 2025-05-09T08:59:18Z

src/shared/layout/Sidebar/ModalContentsSetting/AccountContent/AccountContent.tsx

 					<p className="text-error-01 subhead-semibold-18">내 계정 삭제</p>
-					<p className="text-gray-04 body-reg-16">본 기기를 포함한 모든 기기에서 로그아웃합니다.</p>
+					<p className="text-gray-04 body-reg-16">
+						계정을 영구적으로 삭제하고 모든 워크스페이스에서 엑세스 권한을 제거합니다.


P3. 여기 액세스 권한으로 수정해 주세요!

Ivoryeee · 2025-05-09T09:12:57Z

src/pages/TimerPage/MainTimer/TimerHeader/TimerHeader.tsx

 		);
 	}

+	const completedStyle = isCompleted ? 'line-through' : '';


P3. 이 부분은 혹시 디자인 측과도 논의된 사항일까요? 완료된 할 일 카드에 Line-through를 적용한 것이 해당 플로우를 표현하는 데는 직관적이지만 ui적으로 조금 아쉬운 느낌이 들어서요...!

P3. 이 부분은 혹시 디자인 측과도 논의된 사항일까요? 완료된 할 일 카드에 Line-through를 적용한 것이 해당 플로우를 표현하는 데는 직관적이지만 ui적으로 조금 아쉬운 느낌이 들어서요...!

해당 부분은 기획과 논의 과정에서 전달에 오해가 있었던 부분입니다. 다 이야기하자면 복잡한데 우선 삭제해 두었습니다!

Ivoryeee · 2025-05-09T09:24:41Z

src/shared/components/BoxTodo/BoxTodo.tsx

 					<button
-						className={`flex max-w-max gap-[0.6rem] rounded-[0.3rem] pr-[0.2rem] ${activeCalendarTask ? 'bg-mint-01' : 'hover:bg-gray-bg-03'} ${clickable || isComplete ? 'pointer-events-none' : ''}`}
+						className={`flex max-w-max gap-[0.6rem] rounded-[0.3rem] pr-[0.2rem] ${
+							activeCalendarTask ? 'bg-mint-01' : disableHoverCalendar ? '' : 'hover:bg-gray-bg-03'


P3. disableHoverCalendar 일 때도 여전히 커서가 표시돼서 아래처럼 cursor-default 추가해 주시면 좋을 것 같아요!

activeCalendarTask ? 'bg-mint-01' : disableHoverCalendar ? 'cursor-default' : 'hover:bg-gray-bg-03'```

반영하겠습니다!

Ivoryeee · 2025-05-09T09:27:50Z

src/shared/components/BoxTodo/BoxTodo.tsx

 	activeCalendarTask?: boolean;
 	undeletable?: boolean;
+	disableHoverCalendar?: boolean;
+	addingTodayTodoStatus?: boolean;


P4. 해당 컴포넌트에서 addingTodayTodoStatus가 사용되지 않는데 추가해 두신 이유가 있을까요??

P4. 해당 컴포넌트에서 addingTodayTodoStatus가 사용되지 않는데 추가해 두신 이유가 있을까요??

삭제했습니다

KIMGEONHWI · 2025-05-09T10:30:32Z

할일 카드 완료 체크 시 타이머가 정상적으로 정지되지만, 완료 체크를 해제한 후 타이머를 재개하고 다시 완료 체크를 누르면 타이머가 정지되지 않는 문제가 발생하고 있습니다. 체크박스 상태 변경 이벤트 처리 시 타이머 상태를 항상 확인하고, 완료 체크 시 무조건 타이머를 정지하도록 수정이 필요할 것 같습니다!

확인이 필요한 플로우: 할일 완료 체크 → 타이머 정지 O 완료 체크 해제 → 타이머 재개 → 다시 완료 체크 → 타이머 정지 X

너무 늦게 확인해 죄송합니다.

감사합니다!! 정지 액션시 타이밍 이슈 해결하여서 반영하겠습니다.

10tacion

+++
타이머 api 요청 정상 작동 확인
추후 코드 리팩토링 (contenxt 계층 분리)
흩어져있는 Panel Modal 통합

* feat: 일렉트론 개발 구조 잡기 및 설정파일 구성 * feat: 최신 develop 사항 반영 * feat: 일렉트론 리다렉트 테스팅 추가 * feat: hashRouter로 변경 및 electron 로그인 인증 관련 로직 추가 * feat: electron blocking 시스템 알림 추가 * feat: 시스템 알림에서 허용서비스 추가 로직 작성 * fix: url 비교 로직 수정 * fix: 모니터링 로직에서 허용서비스 없을 경우 아무 사이트도 접속 불가하도록 로직 수정 * feat: mac os 종료 처리 hide로 대체 * feat: 허용 서비스 추가 시 타이머 재시작 하도록 콜백 추가 * feat: mac os notarize 추가 * feat: 로그아웃 시 authWindow 종료하고 mainWindow가 실행되게 로직 추가 * fix: 온보딩 로직 오류 수정 * feat: hide 했다가 다시 restore 할 때 깜박이는 현상 최적화 * feat: 브라우저의 새탭일 경우 모니터링 제외 * feat: #320 onboarding QA pr 반영 * feat: shared QA 사항 반영 * feat: #319 허용서비스 최종 QA 반영 * feat: 타이머 캐러셀 QA 반영 * feat: #321 타이머 나머지 QA 사항 반영 * feat: #321 홈 QA 사항 반영 * chore: 개발서버 포트 번호 5173으로 해결 * feat: 토큰 재발급 로직 바뀐 형식에 맞추어 수정 * feat: 화면 해상도 조정 및 개발자 도구 여는 상황 방지 * feat: truncate 설정 - 제대로 안되어서 확인 필요함 * feat: 자동으로 줌 되는 현상 방지, 전체 화면에서 x 눌렀을 때 검정 화면 방지 * feat: 타이머에서 선택된 할 일이 없을 경우 처리 로직 추가 * feat: 타이머에서 선택된 할 일이 없을 경우 시스템 알림 로직 추가 * feat: throwOnError를 통해서 에러 객체를 감지하게 설정 * feat: packages.json에서 코어팩 사용으로 명시된 필드 삭제 pnpm 버전 명시

KIMGEONHWI added 16 commits May 7, 2025 04:28

style: 알림패널 "알림" 폰트 수정 (#308)

0af70c1

fix: 설정 컴포넌트 문구 수정 (#308)

04e773e

fix: 설정 컴포넌트 탭 카테고리 폰트 수정 (#308)

090af21

fix: 오늘 할 일 추가 박스 문구 수정 (#308)

eb7efab

fix: 친구삭제 버튼 클릭 영역 넓히기 (#308)

0a33fbe

refactor: 할 일 카드 완료된 일로 변경시, 타이머 정지 (#308)

aab9beb

refactor: 타이머페이지 완료된 할 일 카드인 경우 타이머 실행 막기 (#308)

fa5179c

refactor: 타이머페이지에서 완료된 할 일 카드인 경우 line-through 적용 (#308)

f50457d

fix: 타이머페이지 할 일 카드 duration 버튼 hover 막기 (#308)

0bf10fa

refactor: 할 일 카드를 완료시킬 경우 클릭된 할 일 카드가 완료시킨 할 일 카드가 되는데, 클릭된 할 일 카드는 남…

fa6ff6f

…은 완료되지 않은 할 일 카드중 제일 위에있는 할 일 카드가 되도록 수정 (#308)

fix: 타이머페이지 Boxtodo의 경우 name 클릭해도 name 수정 안되도록 수정 (#308)

b80be0e

style: 타이머페이지 친구리스트 캐러셀 스타일 조정 (#308)

905747d

feat: 허용서비스페이지 알림패널 적용 (#308)

394645c

refactor: Boxtodo 완료 버튼 이벤트 전파 막기 및 선택된 할 일의 상태가 변경되면 타이머 정지 및 남은 할 일…

7e23e4f

… 중 첫번 째 할 일 선택 (#308)

fix: 할 일 추가 중인 상태에서 클릭 막기 (#308)

ad93bd3

fix: 타이머페이지 완료된 할 일 카드 클릭 가능하도록 수정 (#308)

d093c00

KIMGEONHWI requested review from 10tacion, Ivoryeee and seueooo May 8, 2025 18:36

KIMGEONHWI self-assigned this May 8, 2025

KIMGEONHWI added the ♻️ Refactor 코드 리팩토링 label May 8, 2025

KIMGEONHWI added this to Morib-Client May 8, 2025

pull-request-size bot added the size/L label May 8, 2025

KIMGEONHWI added the 🐞 BugFix Something isn't working label May 8, 2025

10tacion requested changes May 9, 2025

View reviewed changes

codereview: 타이머페이지 캐러셀 absolute 적용해서 스타일링 (#308)

1734d1a

seueooo reviewed May 9, 2025

View reviewed changes

Ivoryeee reviewed May 9, 2025

View reviewed changes

codereview: 상아 코리 반영 (#308)

d21eda3

codereview: 선택된 할 일의 상태 변경시 타이머 정지 타이밍 이슈 해결 (#308)

f2d8c67

KIMGEONHWI and others added 2 commits May 9, 2025 21:00

codereview: 대원 코리 반영 (#308)

c8d454c

Merge branch 'develop' into refactor/#308/home-friend-qa

19551d4

10tacion approved these changes May 10, 2025

View reviewed changes

10tacion merged commit e855b11 into develop May 10, 2025
1 check passed

10tacion deleted the refactor/#308/home-friend-qa branch May 10, 2025 05:52

github-project-automation bot moved this to Done in Morib-Client May 10, 2025

10tacion added a commit that referenced this pull request May 10, 2025

feat: #321 타이머 나머지 QA 사항 반영

ee73216

10tacion added a commit that referenced this pull request May 10, 2025

feat: #321 홈 QA 사항 반영

815398a

[ QA ] 홈, 타이머 페이지 최종 QA를 진행합니다. #321

[ QA ] 홈, 타이머 페이지 최종 QA를 진행합니다. #321

Uh oh!

Conversation

KIMGEONHWI commented May 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🔥 Related Issues

✅ 작업 리스트

🔧 작업 내용

타이머 페이지 할 일 카드 클릭 이벤트 전파 막기

타이머 페이지 할 일 카드 완료된 일로 변경 시, 타이머 정지 api 호출

🧐 새로 알게된 점

🤔 궁금한 점

📸 스크린샷 / GIF / Link

Uh oh!

10tacion left a comment

Choose a reason for hiding this comment

타이머 페이지는 기존 방식에서 선택된 할일 받아오는 API(GET) & 할일 선택 post API 총 2개를 사용해서 할일을 선택하는 방식으로 바뀌었어요.

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!

KIMGEONHWI May 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

KIMGEONHWI May 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

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!

KIMGEONHWI commented May 9, 2025

타이머 페이지는 기존 방식에서 선택된 할일 받아오는 API(GET) & 할일 선택 post API 총 2개를 사용해서 할일을 선택하는 방식으로 바뀌었어요.

Uh oh!

seueooo left a comment

Choose a reason for hiding this comment

Uh oh!

Ivoryeee 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!

Ivoryeee May 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

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!

KIMGEONHWI commented May 9, 2025

Uh oh!

10tacion left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

KIMGEONHWI commented May 8, 2025 •

edited

Loading

KIMGEONHWI May 9, 2025 •

edited

Loading

KIMGEONHWI May 9, 2025 •

edited

Loading

Ivoryeee May 9, 2025 •

edited

Loading