Skip to content

Feature(client): dashboard popup에 추가 popup 연결 #105

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
constantly-dev merged 4 commits into from
Jul 17, 2025
Merged

Feature(client): dashboard popup에 추가 popup 연결 #105

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c8d6ec9
feat: client dashboard modalpop에 추가 popup 연결
constantly-dev Jul 17, 2025
e3d980b
feat: popup overlay z-index 임시 수정
constantly-dev Jul 17, 2025
4e2139d
feat: popup overlay 적용
constantly-dev Jul 17, 2025
b2598fe
feat: url title & location truncate 처리
constantly-dev Jul 17, 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
4 changes: 2 additions & 2 deletions apps/client/src/pages/dashboard/dashboard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import { POP_UP_AREA_Z_INDEX } from '@/constants';
import ModalPop from '@/shared/components/ui/modalPop/ModalPop';
import { Header } from '@shared/components';
import {
BannerSection,
BookmarkSection,
DailyReminderSection,
} from '@pages/dashboard/components';
import { useDashboard } from '@pages/dashboard/hooks/useDashboard';
import type { Category } from '@pages/dashboard/types/api';
import { Header } from '@shared/components';
import { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';

Expand Down Expand Up @@ -103,7 +103,7 @@ const Dashboard = () => {
<div className="bg-background flex min-h-screen flex-col items-center">
{isPopUpOpen && (
<div
className={`absolute z-${POP_UP_AREA_Z_INDEX} flex h-[100dvh] w-full items-center justify-center bg-[#0000005b]`}
className={`absolute z-${POP_UP_AREA_Z_INDEX} z-100 flex h-[100dvh] w-full items-center justify-center bg-[#0000005b]`}
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot Jul 17, 2025

Choose a reason for hiding this comment

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

⚠️ Potential issue

중복 z-index 클래스 문제를 해결해야 합니다.

동일한 요소에 두 개의 z-index 클래스가 적용되고 있습니다. CSS 우선순위에 따라 z-100이 적용되지만, 이는 혼란을 야기할 수 있습니다.

다음 diff를 적용하여 중복을 제거하세요:

-          className={`absolute z-${POP_UP_AREA_Z_INDEX} z-100 flex h-[100dvh] w-full items-center justify-center bg-[#0000005b]`}
+          className={`absolute z-100 flex h-[100dvh] w-full items-center justify-center bg-[#0000005b]`}

또는 상수 값을 사용하려면:

-          className={`absolute z-${POP_UP_AREA_Z_INDEX} z-100 flex h-[100dvh] w-full items-center justify-center bg-[#0000005b]`}
+          className={`absolute z-${POP_UP_AREA_Z_INDEX} flex h-[100dvh] w-full items-center justify-center bg-[#0000005b]`}
📝 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={`absolute z-${POP_UP_AREA_Z_INDEX} z-100 flex h-[100dvh] w-full items-center justify-center bg-[#0000005b]`}
className={`absolute z-100 flex h-[100dvh] w-full items-center justify-center bg-[#0000005b]`}
🤖 Prompt for AI Agents 
In apps/client/src/pages/dashboard/dashboard.tsx at line 106, there are two
conflicting z-index classes applied to the same element: a dynamic class using
POP_UP_AREA_Z_INDEX and a fixed class z-100. Remove one of these to avoid
confusion and ensure consistent styling. Preferably, keep the dynamic class with
POP_UP_AREA_Z_INDEX and remove the hardcoded z-100, or replace both with a
single constant-based z-index class.

onClick={() => setIsPopUpOpen(false)}
>
<div onClick={(e) => e.stopPropagation()}>
Expand Down
2 changes: 1 addition & 1 deletion apps/client/src/shared/components/ui/layout/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import logo from '@assets/brand/logo.svg';

const Header = () => {
return (
<header className="bg-background z-9999 fixed left-1/2 top-0 flex h-[7.4rem] w-[1440px] -translate-x-1/2 items-center px-[6rem] pb-[1.7rem] pt-[2.5rem]">
<header className="bg-background fixed left-1/2 top-0 z-50 flex h-[7.4rem] w-[1440px] -translate-x-1/2 items-center px-[6rem] pb-[1.7rem] pt-[2.5rem]">
<img src={logo} className="h-[3.2rem] w-[12.4rem]" alt="로고" />
</header>
);
Expand Down
62 changes: 59 additions & 3 deletions apps/client/src/shared/components/ui/modalPop/ModalPop.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
import { useState } from 'react';
import { POP_TEXTAREA_MAX_LENGTH } from '@constants/index';
import {
CategoryDropDown,
CommonBtn,
InfoBox,
TextArea,
TextFieldPopup,
TimePicker,
ToggleButton,
} from '@pinback/design-system/ui';
import { POP_TEXTAREA_MAX_LENGTH } from '@constants/index';
import { useState } from 'react';
interface ModalPopProps {
onClose: () => void;
}
Expand All @@ -18,6 +19,12 @@ const ModalPop = ({ onClose }: ModalPopProps) => {
time: '',
timeError: '',
});
const [categoryPopupMode, setCategoryPopupMode] = useState<
'edit' | 'add' | ''
>('');
const [selectedCategory, setSelectedCategory] = useState('');
const [categories, setCategories] = useState(['기획', '취미', '요리']);
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot Jul 17, 2025

Choose a reason for hiding this comment

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

⚠️ Potential issue

기본 카테고리 "안 읽은 정보" 누락 문제.

기존 학습에서 "안 읽은 정보" 카테고리가 첫 번째 기본 카테고리로 포함되어야 한다고 했는데, 현재 코드에서는 누락되어 있습니다.

다음 diff를 적용하여 기본 카테고리를 포함하세요:

-  const [categories, setCategories] = useState(['기획', '취미', '요리']);
+  const [categories, setCategories] = useState(['안 읽은 정보', '기획', '취미', '요리']);
📝 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
const [categories, setCategories] = useState(['기획', '취미', '요리']);
const [categories, setCategories] = useState(['안 읽은 정보', '기획', '취미', '요리']);
🤖 Prompt for AI Agents 
In apps/client/src/shared/components/ui/modalPop/ModalPop.tsx at line 26, the
default categories state is missing the "안 읽은 정보" category as the first item.
Update the useState initialization to include "안 읽은 정보" as the first element in
the categories array, followed by the existing categories "기획", "취미", and "요리".


const handleFieldChange = (
field: 'date' | 'time',
value: string,
Expand All @@ -30,8 +37,39 @@ const ModalPop = ({ onClose }: ModalPopProps) => {
}));
};

const handleCategoryChange = (value: string) => {
if (value === 'edit') {
setCategoryPopupMode('edit');
} else if (value === 'create') {
setCategoryPopupMode('add');
} else {
setSelectedCategory(value);
setCategoryPopupMode('');
}
};

const handlePopupClose = () => {
setCategoryPopupMode('');
};

const handlePopupConfirm = (newCategory?: string) => {
if (!newCategory) {
return;
}
if (categoryPopupMode === 'add') {
setCategories((prev) => [...prev, newCategory]);
setSelectedCategory(newCategory);
} else if (categoryPopupMode === 'edit') {
setCategories((prev) =>
prev.map((cat) => (cat === selectedCategory ? newCategory : cat))
);
setSelectedCategory(newCategory);
}
handlePopupClose();
};

return (
<div className="flex h-[64.2rem] w-[38.7rem] flex-col items-center justify-between rounded-[1rem] bg-white px-[3rem] py-[3rem]">
<div className="relative flex h-[64.2rem] w-[38.7rem] flex-col items-center justify-between rounded-[1rem] bg-white px-[3rem] py-[3rem]">
<div className="flex flex-col gap-[1.6rem]">
{/* TODO : 하드코딩 데이터 구간 */}
<InfoBox
Expand All @@ -44,6 +82,7 @@ const ModalPop = ({ onClose }: ModalPopProps) => {
<CategoryDropDown
size="large"
categories={['기획', '취미', '요리']}
onSelect={handleCategoryChange}
/>
</section>
<section>
Expand Down Expand Up @@ -95,6 +134,23 @@ const ModalPop = ({ onClose }: ModalPopProps) => {
/>
</div>
{/* TODO : 하드코딩 데이터 구간 */}

{categoryPopupMode && (
<TextFieldPopup
mode={categoryPopupMode}
value={categoryPopupMode === 'edit' ? selectedCategory : ''}
existingCategories={categories}
onCancel={handlePopupClose}
onConfirm={handlePopupConfirm}
onDelete={() => {
setCategories((prev) =>
prev.filter((cat) => cat !== selectedCategory)
);
setSelectedCategory('');
handlePopupClose();
}}
/>
)}
</div>
);
};
Expand Down
6 changes: 3 additions & 3 deletions apps/extension/src/components/modalPop/ModalPop.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
import { useState } from 'react';
import { POP_TEXTAREA_MAX_LENGTH } from '@constants/index';
import {
CategoryDropDown,
CommonBtn,
InfoBox,
TextArea,
TextFieldPopup,
TimePicker,
ToggleButton,
} from '@pinback/design-system/ui';
import { useState } from 'react';
import ModalHeader from './ModalHeader';
import { POP_TEXTAREA_MAX_LENGTH } from '@constants/index';
import { TextFieldPopup } from '@pinback/design-system/ui';

interface ModalPopProps {
urlInfo: string;
Expand Down
6 changes: 4 additions & 2 deletions packages/design-system/src/components/InfoBox/InfoBox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,13 @@ const InfoBox = ({ size = 'large', title, location, icon }: InfoBoxProps) => {
src={icon}
/>
<div className="flex flex-col">
<div className={`${isLarge ? 'sub5-sb' : 'caption2-sb'} text-black`}>
<div
className={`${isLarge ? 'sub5-sb' : 'caption2-sb'} truncate text-black`}
>
{location}
</div>
<div
className={`${isLarge ? 'caption1-m' : 'caption2-m'} text-gray-400`}
className={`${isLarge ? 'caption1-m' : 'caption2-m'} truncate text-gray-400`}
>
{title}
</div>
Expand Down
7 changes: 3 additions & 4 deletions packages/design-system/src/components/textfieldPopup/TextfieldPopup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { useRef, useState } from 'react';
import { Icon } from '@pinback/design-system/icons';
import { CommonBtn } from '@pinback/design-system/ui';
import { Input } from '@pinback/design-system/ui';
import { CommonBtn, Input } from '@pinback/design-system/ui';
import { useRef, useState } from 'react';

type Mode = 'add' | 'edit' | 'delete';

Expand Down Expand Up @@ -159,7 +158,7 @@ const TextfieldPopup = ({
};

return (
<div className="fixed inset-0 z-50 flex items-center justify-center">
<div className="absolute inset-0 z-50 flex items-center justify-center rounded-[10px] bg-[#00000063]">
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot Jul 17, 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

positioning 변경사항을 확인해주세요.

fixed에서 absolute로 변경된 것이 중요한 변화입니다. 이 컴포넌트를 사용하는 부모 컨테이너들이 적절한 position: relative 스타일을 가지고 있는지 확인이 필요합니다.

추가된 배경 오버레이(bg-[#00000063])와 둥근 모서리(rounded-[10px])는 좋은 시각적 개선사항입니다.

다음 스크립트로 이 컴포넌트를 사용하는 부모 컨테이너들의 스타일링을 확인해주세요:

🏁 Script executed:

#!/bin/bash
# Description: 부모 컨테이너들이 적절한 positioning을 가지고 있는지 확인

# TextfieldPopup을 사용하는 파일들 검색
echo "=== TextfieldPopup을 사용하는 파일들 ==="
rg -l "TextfieldPopup|TextFieldPopup" --type tsx --type ts

# ModalPop 컴포넌트들에서 TextfieldPopup 사용 컨텍스트 확인
echo "=== ModalPop에서 TextfieldPopup 사용 컨텍스트 ==="
rg -A 10 -B 5 "TextfieldPopup|TextFieldPopup" apps/client/src/shared/components/ui/modalPop/ModalPop.tsx apps/extension/src/components/modalPop/ModalPop.tsx

Length of output: 5668

다음 스크립트로 ModalPop 컴포넌트의 최상위 컨테이너(className에 relative 혹은 positioning 관련 클래스가 붙었는지)를 확인해 주세요:

🏁 Script executed:

#!/bin/bash
echo "=== apps/client/src/shared/components/ui/modalPop/ModalPop.tsx – 최상위 컨테이너 className ==="
rg "className=" -n apps/client/src/shared/components/ui/modalPop/ModalPop.tsx | head -n 20

echo
echo "=== apps/extension/src/components/modalPop/ModalPop.tsx – 최상위 컨테이너 className ==="
rg "className=" -n apps/extension/src/components/modalPop/ModalPop.tsx | head -n 20

Length of output: 1988

TextFieldPopup의 절대 위치 지정 이슈: extension ModalPop에 relative 누락

client 쪽 ModalPop 최상위 컨테이너에는 이미 relative가 설정돼 있어 TextFieldPopup(absolute)가 정상 동작합니다.
하지만 extension 쪽 ModalPop 최상위 컨테이너는 relative가 없어 overlay가 의도치 않게 위치할 수 있습니다.

수정이 필요한 위치:

  • apps/extension/src/components/modalPop/ModalPop.tsx (약 96번째 줄)

제안하는 변경(diff 예시):

-    <div className="flex h-[54.7rem] w-[32rem] flex-col items-center justify-between rounded-[1rem] bg-white px-[2rem] py-[2rem]">
+    <div className="relative flex h-[54.7rem] w-[32rem] flex-col items-center justify-between rounded-[1rem] bg-white px-[2rem] py-[2rem]">

배경 오버레이(bg-[#00000063])와 둥근 모서리(rounded-[10px])는 시각적으로 적절하니 그대로 유지하세요.

📝 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
<div className="absolute inset-0 z-50 flex items-center justify-center rounded-[10px] bg-[#00000063]">
<div className="relative flex h-[54.7rem] w-[32rem] flex-col items-center justify-between rounded-[1rem] bg-white px-[2rem] py-[2rem]">
🤖 Prompt for AI Agents 
In packages/design-system/src/components/textfieldPopup/TextfieldPopup.tsx at
line 161, the TextFieldPopup uses absolute positioning which depends on its
parent having relative positioning. The extension's ModalPop component lacks
this relative positioning, causing overlay misplacement. To fix this, add the
CSS class 'relative' to the top-level container element in
apps/extension/src/components/modalPop/ModalPop.tsx around line 96, ensuring the
overlay positions correctly while keeping the existing background overlay and
rounded corners unchanged.

<div className="flex w-[26rem] flex-col rounded-xl bg-white p-[2rem] shadow-[6px_11px_20px_0_rgba(0,0,0,0.08)]">
{renderContent()}
</div>
Expand Down