Skip to content

Feat: 개발 QA 1차(재림 | 온보딩 기능 및 익스텐션 UI 쪽 수정) #107

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
jllee000 merged 16 commits into from
Sep 14, 2025
Merged

Feat: 개발 QA 1차(재림 | 온보딩 기능 및 익스텐션 UI 쪽 수정) #107

Show file tree
Hide file tree
Changes from 13 commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
7ffce42
feat: 설치와 동시에 로드 도메인 수정
jllee000 Sep 14, 2025
b6d4efd
feat: 설치와 동시에 로드 도메인 수정
jllee000 Sep 14, 2025
10f0037
feat: 온보딩 스텝 텍스트 수정
jllee000 Sep 14, 2025
4c62f4b
feat: 베이스 카드 height 수정
jllee000 Sep 14, 2025
175fda4
feat: 서비스 워커 콘솔 수정
jllee000 Sep 14, 2025
33dcc9c
feat : 사이드바 분기 수정
jllee000 Sep 14, 2025
2346924
feat: 온보딩 클릭박스색상 수정
jllee000 Sep 14, 2025
24bc2ba
feat: 타임피커 오픈 지점 수정
jllee000 Sep 14, 2025
1fcbe01
feat: 알람박스 타임피커 토글
jllee000 Sep 14, 2025
dba84e7
feat: 타임피커 위치 수정
jllee000 Sep 14, 2025
9d6dca5
feat: 온보딩 뒤로 버튼 디자인 수정
jllee000 Sep 14, 2025
79c4275
feat: 온보딩 취소 버튼
jllee000 Sep 14, 2025
877eb54
feat: 익스텐션 헤더 랜딩
jllee000 Sep 14, 2025
f8b33e7
feat: 대시보드 랜딩
jllee000 Sep 14, 2025
969c26d
feat: 주석 제거
jllee000 Sep 14, 2025
a090de2
feat: 주석 제거
jllee000 Sep 14, 2025
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
7 changes: 5 additions & 2 deletions apps/client/src/layout/Layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,14 @@
import { Outlet } from 'react-router-dom';
import { Outlet,useLocation } from 'react-router-dom';
import { Sidebar } from '@shared/components/sidebar/Sidebar';

const Layout = () => {
const location = useLocation();
const isOnboarding = location.pathname.startsWith('/onboarding');

return (
<>
<div className="flex h-screen">
<Sidebar />
{!isOnboarding && <Sidebar />}
<main className="bg-gray-bg flex-1 overflow-y-auto">
<Outlet />
</main>
Expand Down
17 changes: 10 additions & 7 deletions apps/client/src/pages/onBoarding/components/funnel/AlarmBox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ const boxStyle = cva(
{
variants: {
disabled: {
true: 'border-main400 bg-main100 border',
true: 'border-main400 bg-main0 border',
false: 'bg-white border border-transparent hover:border-main300',
},
},
Expand All @@ -34,8 +34,10 @@ const AlarmBox = ({ select, isDisabled, onClick }: AlarmBoxProps) => {
<div
className={boxStyle({ disabled: isDisabled })}
onClick={() => {
if (select === 3 && isDisabled) {
setShowPicker(true);
if (select === 3) {
setShowPicker(true);
} else {
setShowPicker(false);
}
Comment on lines +37 to 41
Copy link
Copy Markdown

@coderabbitai coderabbitai bot Sep 14, 2025

Choose a reason for hiding this comment

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

⚠️ Potential issue

TimePicker 토글 로직 버그: 항상 열림

select === 3인 경우 매 클릭마다 무조건 true로 설정되어 닫히지 않습니다. 토글로 변경하세요.

-        if (select === 3) {
-          setShowPicker(true); 
-        } else {
-          setShowPicker(false);
-        }
+        if (select === 3) {
+          setShowPicker((v) => !v);
+        } else {
+          setShowPicker(false);
+        }
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
if (select === 3) {
setShowPicker(true);
} else {
setShowPicker(false);
}
if (select === 3) {
setShowPicker((v) => !v);
} else {
setShowPicker(false);
}
🤖 Prompt for AI Agents 
In apps/client/src/pages/onBoarding/components/funnel/AlarmBox.tsx around lines
37 to 41, the TimePicker toggle logic incorrectly always sets showPicker to true
when select === 3, preventing it from closing; change the handler so that when
select === 3 you toggle the current state (use a functional update like
setShowPicker(prev => !prev)) and keep setting it to false in the else branch,
ensuring correct open/close behavior.

onClick?.();
}}
Expand All @@ -61,15 +63,16 @@ const AlarmBox = ({ select, isDisabled, onClick }: AlarmBoxProps) => {
<p className="caption2-m text-font-gray-3">{normalizeTime(AlarmsType[2].time)}</p>
)}

{showPicker && (
<TimePicker
{showPicker && ( <TimePicker
onSave={getTimePicker}
onCancel={() => {
AlarmsType[2].time = '';
setShowPicker(false);
}}
onClick={(e) => e.stopPropagation()}
/>
)}
/>)}


</>
)}
</div>
Expand Down
4 changes: 2 additions & 2 deletions apps/client/src/pages/onBoarding/components/funnel/MainCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -188,13 +188,13 @@ const MainCard = () => {
<div className="mb-[4.8rem] mt-[1.2rem] flex w-full justify-between px-[3.2rem]">
{step < 4 && (
<Button
variant="primary"
variant="secondary"
size="medium"
isDisabled={step === 0}
className="w-[4.8rem]"
onClick={prevStep}
>
이전
뒤로
</Button>
)}
<Button
Expand Down
2 changes: 1 addition & 1 deletion apps/client/src/pages/onBoarding/components/funnel/step/AlarmStep.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const AlarmStep = ({ selected, setSelected }: AlarmStepProps) => {
<p className="head2 text-font-black-1">
도토리 찾으러 갈 시간을 정해볼까요?
</p>
<p className="body2-m text-font-gray-3 mb-[4.3rem] mt-[0.8rem] text-center">
<p className="body2-m text-font-gray-3 mb-[3.2rem] mt-[0.8rem] text-center">
매일 지정한 시간에 저장한 북마크를 리마인드해드려요
</p>

Expand Down
2 changes: 1 addition & 1 deletion apps/client/src/pages/onBoarding/components/funnel/step/FinalStep.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ const FinalStep = () => {
<div className="flex h-full flex-col items-center">
<img src={dotori} className="mb-[1.2rem]" alt="dotori" />
<p className="head2 text-font-black-1">
도토리 찾으러 갈 시간을 정해볼까요?
Pinback에 오신 걸 환영해요
</p>
</div>
);
Expand Down
2 changes: 1 addition & 1 deletion apps/client/src/pages/onBoarding/components/funnel/step/MacStep.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ const MacStep = () => {
<div className="flex h-full flex-col items-center">
<img src={dotori} className="mb-[1.2rem]" alt="dotori" />
<p className="head2 text-font-black-1">
도토리 찾으러 갈 시간을 정해볼까요?
치삐를 만나려면 알림 설정이 필요해요
</p>
<p className="body2-m text-font-gray-3 mb-[4.3rem] mt-[0.8rem] text-center">
Mac 사용자는 추가 알림 설정을 진행해 주세요.
Expand Down
2 changes: 1 addition & 1 deletion apps/client/src/pages/onBoarding/components/timePicker/TimePicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ const TimePicker = ({ onSave, onCancel, onClick }: TimePickerProps) => {
return (
<div
onClick={onClick}
className="common-shadow absolute -bottom-[180px] -right-[100px] z-10 flex w-[26rem] flex-col items-center rounded-[1.2rem] bg-white px-[1.6rem]"
className="common-shadow absolute -bottom-[215px] -right-[50px] z-10 flex w-[26rem] flex-col items-center rounded-[1.2rem] bg-white px-[1.6rem]"
>
<WheelPickerWrapper className="flex h-[16.8rem] !items-center py-[0.8rem]">
<WheelPicker
Expand Down
3 changes: 1 addition & 2 deletions apps/client/src/pages/onBoarding/utils/registerServiceWorker.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,7 @@ export const registerServiceWorker = () => {
navigator.serviceWorker
.register('firebase-messaging-sw.js')
.then(function (registration) {
console.log('Service Worker 등록 성공:', registration);
alert(`Service Worker 등록 성공:, ${registration}`);
console.log(`Service Worker 등록 성공:, ${registration}`);
})
.catch(function (error) {
console.log('Service Worker 등록 실패:', error);
Expand Down
2 changes: 1 addition & 1 deletion apps/extension/src/background.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
console.log('백그라운드 기능');

Check warning on line 1 in apps/extension/src/background.ts

View workflow job for this annotation

GitHub Actions / lint 

Unexpected console statement
chrome.runtime.onInstalled.addListener((details) => {
if (details.reason === 'install') {
chrome.identity.getProfileUserInfo(function (info) {
chrome.storage.local.set({ 'userEmail': info.email }, () => {
console.log(info.email);

Check warning on line 6 in apps/extension/src/background.ts

View workflow job for this annotation

GitHub Actions / lint 

Unexpected console statement
});
setTimeout(() => {
chrome.tabs.create({
url: `http://localhost:5173/onboarding?email=${info.email}`,
url: `https://www.pinback.today/onboarding?email=${info.email}`,
});
}, 1000);
});
Expand All @@ -18,6 +18,6 @@
chrome.runtime.onMessage.addListener((message) => {
if (message.type === 'SET_TOKEN') {
chrome.storage.local.set({ 'token': message.token }, () => {
console.log('Token saved!', message.token);

Check warning on line 21 in apps/extension/src/background.ts

View workflow job for this annotation

GitHub Actions / lint 

Unexpected console statement
});
}
Expand Down
2 changes: 1 addition & 1 deletion apps/extension/src/hooks/useSaveBookmarks.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
createdAt: new Date().toISOString(),
};

const result = await new Promise<{ bookmarks?: any[] }>((resolve) => {

Check warning on line 21 in apps/extension/src/hooks/useSaveBookmarks.ts

View workflow job for this annotation

GitHub Actions / lint 

Unexpected any. Specify a different type
chrome.storage.local.get(['bookmarks'], (items) => resolve(items));
});

Expand All @@ -36,12 +36,12 @@
url: params.url,
},
(newBookmark) => {
console.log('크롬 북마크바에 저장 완료: ', newBookmark);

Check warning on line 39 in apps/extension/src/hooks/useSaveBookmarks.ts

View workflow job for this annotation

GitHub Actions / lint 

Unexpected console statement
}
);
window.close();
//window.close();
} catch (error) {
console.error('저장 중 오류:', error);

Check warning on line 44 in apps/extension/src/hooks/useSaveBookmarks.ts

View workflow job for this annotation

GitHub Actions / lint 

Unexpected console statement
}
};

Expand Down
7 changes: 4 additions & 3 deletions apps/extension/src/pages/MainPop.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
const { data : categoryData } = useGetCategoriesExtension();
const remindDataRaw = useGetRemindTime();
const remindData = type === "add" ? remindDataRaw : null;


// 저장 도메인 메타 데이터 갖고 오는 구간!
const { url, title, description, imgUrl: initialImgUrl ,loading} = usePageMeta();
Expand All @@ -39,7 +39,7 @@
useEffect(() => {
if (!loading && !title) {
alert("이 페이지는 저장할 수 없어요 🐿️");
window.close();
//window.close();
}
}, [loading, title]);

Expand Down Expand Up @@ -78,6 +78,7 @@
setIsArticleId(savedData.id ?? 0);

if (savedData.remindAt) {
console.log(savedData.remindAt);

Check warning on line 81 in apps/extension/src/pages/MainPop.tsx

View workflow job for this annotation

GitHub Actions / lint 

Unexpected console statement
const [rawDate, rawTime] = savedData.remindAt.split("T");
setDate(updateDate(rawDate));
setTime(updateTime(rawTime));
Expand Down Expand Up @@ -233,7 +234,7 @@
)}
<div className="flex flex-col justify-between gap-[1.6rem] rounded-[12px] bg-white px-[3.2rem] py-[2.4rem] text-black">
<div className="mr-auto">
<Icon name="main_logo" width={72} height={20} />
<Icon name="main_logo" width={72} height={20} onClick={()=>{window.location.href = 'https://pinback.today';}}/>
Copy link
Copy Markdown

@coderabbitai coderabbitai bot Sep 14, 2025

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion

확장 팝업에서 외부 도메인 이동은 새 탭 오픈으로 처리

popup 창 자체 내 location 이동은 UX가 좋지 않고 실패할 수 있습니다. chrome.tabs.create로 새 탭을 여는 것이 확장 UX 베스트 프랙티스입니다. Storybook 등 비확장 환경 호환을 위해 window.open 폴백도 추가합니다.

-            <Icon name="main_logo" width={72} height={20} onClick={()=>{window.location.href = 'https://pinback.today';}}/>
+            <Icon
+              name="main_logo"
+              width={72}
+              height={20}
+              onClick={() => {
+                // 크롬 확장 환경
+                // @ts-ignore - 전역 chrome 타입 미존재 환경 대비
+                if (typeof chrome !== 'undefined' && chrome?.tabs?.create) {
+                  // @ts-ignore
+                  chrome.tabs.create({ url: 'https://pinback.today' });
+                  return;
+                }
+                // 일반 웹/스토리북 환경
+                window.open('https://pinback.today', '_blank', 'noopener');
+              }}
+            />
🤖 Prompt for AI Agents 
In apps/extension/src/pages/MainPop.tsx around line 237, the Icon onClick
currently navigates the popup's window to an external domain which is poor UX
and may fail; change the handler to open the link in a new tab using
chrome.tabs.create({ url: 'https://pinback.today' }) and fall back to
window.open('https://pinback.today', '_blank') when chrome.tabs is not available
(e.g., Storybook/dev). Keep the rest of the component unchanged and ensure the
click handler handles any asynchronous API call safely (no blocking UI) and does
not call window.location.href.

</div>

<InfoBox
Expand Down
2 changes: 1 addition & 1 deletion packages/design-system/src/components/card/BaseCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ const BaseCard = ({ children, onClick }: BaseCardProps) => {
return (
<div
onClick={onClick}
className="border-gray200 w-[24.8rem] overflow-hidden rounded-[1.2rem] border bg-white"
className="border-gray200 w-[24.8rem] overflow-hidden rounded-[1.2rem] border bg-white h-[12rem]"
Copy link
Copy Markdown

@coderabbitai coderabbitai bot Sep 14, 2025

Choose a reason for hiding this comment

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

💡 Verification agent

🧩 Analysis chain

BaseCard에 고정 높이(h-[12rem]) 도입은 광범위한 레이아웃/내용 잘림 리스크가 큽니다.

BaseCard는 범용 컨테이너라서 기존 소비처에서 내용 높이가 다양한 경우가 많습니다. 현재 overflow-hidden과 결합되면 텍스트/프로그레스 등 긴 콘텐츠가 잘릴 수 있어 브레이킹 체인지가 될 가능성이 높습니다. 기본은 가변 높이를 유지하고, 필요한 화면에서만 고정 높이를 적용하도록 하거나 최소 높이로 완화하는 편이 안전합니다.

권장(보수적) 패치: 잘림 방지를 위해 최소 높이로 전환

-      className="border-gray200 w-[24.8rem] overflow-hidden rounded-[1.2rem] border bg-white h-[12rem]"
+      className="border-gray200 w-[24.8rem] overflow-hidden rounded-[1.2rem] border bg-white min-h-[12rem]"

사용처 점검용 스크립트(어디서 BaseCard가 쓰이는지 빠르게 훑기):

🏁 Script executed:

#!/bin/bash
# BaseCard 사용처 목록(컨텍스트 2줄 포함)
rg -n --type=tsx -C2 '<BaseCard\b'

Length of output: 27

🏁 Script executed:

#!/bin/bash
set -euo pipefail
rg -n -C2 '\bBaseCard\b' || true
rg -n -C2 '<BaseCard\b' || true
if [ -f packages/design-system/src/components/card/BaseCard.tsx ]; then
  sed -n '1,240p' packages/design-system/src/components/card/BaseCard.tsx || true
else
  echo "packages/design-system/src/components/card/BaseCard.tsx not found"
fi

Length of output: 4798

BaseCard: 고정 높이(h-[12rem]) → 최소 높이(min-h-[12rem])로 변경 필요

overflow-hidden와 결합된 고정 높이는 소비처에서 콘텐츠가 잘려 브레이킹을 유발할 수 있습니다. 보수적으로 기본은 가변 높이(최소 높이 유지)로 변경하세요.

권장 패치:

-      className="border-gray200 w-[24.8rem] overflow-hidden rounded-[1.2rem] border bg-white h-[12rem]"
+      className="border-gray200 w-[24.8rem] overflow-hidden rounded-[1.2rem] border bg-white min-h-[12rem]"

참고(점검 필요): MyBookmarkCard 내부에 이미 h-[12rem]이 설정되어 있습니다 — packages/design-system/src/components/card/MyBookmarkCard.tsx (inner div). BaseCard 변경 후 소비처 전반을 검토해 고정 높이가 의도된 곳만 유지하세요.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
className="border-gray200 w-[24.8rem] overflow-hidden rounded-[1.2rem] border bg-white h-[12rem]"
className="border-gray200 w-[24.8rem] overflow-hidden rounded-[1.2rem] border bg-white min-h-[12rem]"
🤖 Prompt for AI Agents 
In packages/design-system/src/components/card/BaseCard.tsx around line 10 the
card uses a fixed height class h-[12rem] which combined with overflow-hidden can
truncate variable content; change that class to min-h-[12rem] to allow the card
to grow while preserving the default minimum height, update the className string
accordingly, and after making this change search and review consumer components
(notably packages/design-system/src/components/card/MyBookmarkCard.tsx which
currently applies h-[12rem] internally) to ensure only intended cards keep a
fixed height and adjust consumers if necessary.

>
{children}
</div>
Expand Down
Loading