Skip to content

design: 연동 과정에서 조금 변한 css 수정하였습니다. 검색 flow, 마이페이지 flow 입니다. #126

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
H-un1 merged 11 commits into from
Feb 4, 2026
Merged

design: 연동 과정에서 조금 변한 css 수정하였습니다. 검색 flow, 마이페이지 flow 입니다. #126

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
ef9326f
design: 조합리스트 스크롤 마진 수정, 조합 기기 전체 보기 그라데이션 수정
Feb 4, 2026
d788230
design: 조합 상세보기에서 이름 표시하도록 수정
Feb 4, 2026
f36a883
design: 기기 검색 페이지 product 기기명이 2줄을 넘어갈 경우 상세보기에서 스크롤 구현
Feb 4, 2026
1312581
design: 기기 전체보기 product 크기 수정
Feb 4, 2026
f5c4cc0
design: 조합 상세보기 버튼 하단 고정
Feb 4, 2026
a2d3a4e
design: 조합 상세보기, 제품 이름 2줄이상 ..표기
Feb 4, 2026
03448ae
design: 간략히보기,기기 전체보기 동작 부드럽게 수정
Feb 4, 2026
475b6f1
Merge branch 'develop' into design/124-search-css
Feb 4, 2026
c122e7f
design: 별 아이콘 -mt-3 으로 1 위로 조정
Feb 4, 2026
3d21114
design: 조합 상세보기, 기기 전체보기가 있을 경우 버튼 위치 수정하여 스크롤 안 뜨게 수정
Feb 4, 2026
7676056
comment: 주석수정
H-un1 Feb 4, 2026
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
21 changes: 14 additions & 7 deletions src/components/Combination/CombinationDeviceCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ type CombinationDeviceCardProps = {
className?: string;
expanded?: boolean;
onExpand?: (expanded: boolean) => void;
index?: number;
};

const CombinationDeviceCard = ({
Expand All @@ -24,6 +25,7 @@ const CombinationDeviceCard = ({
className = '',
expanded,
onExpand,
index,
}: CombinationDeviceCardProps) => {
const [internalExpanded, setInternalExpanded] = useState(false);

Expand Down Expand Up @@ -52,18 +54,23 @@ const CombinationDeviceCard = ({
};

const gridColsClass = columns === 4 ? 'grid-cols-4' : 'grid-cols-3';
const deviceCardWidth = columns === 4 ? 'w-244' : 'w-244';
const deviceImageSize = columns === 4 ? 'w-64 h-64' : 'w-64 h-64';
const deviceCardWidth = 'w-244 h-87';
const deviceImageSize = 'w-63 h-63';

return (
<div className={className}>
{/* 조합 정보 */}
<div className="flex flex-col gap-24 pl-20 py-24">
<div className="flex flex-col gap-24 pl-20 py-24 flex-shrink-0">
{/* 조합명 */}
<div className="flex flex-col gap-8">
{/* 조합 번호 */}
{index !== undefined && (
<p className="font-body-3-r text-gray-400">조합 {index + 1}</p>
)}
{/* 조합명 + 별 */}
<div className="flex items-center gap-8">
<p className="font-body-1-sm text-black">{combination.comboName}</p>
{combination.isPinned && <StarIcon className="w-22 h-22 -mt-2" />}
{combination.isPinned && <StarIcon className="w-22 h-22 -mt-3" />}
</div>
</div>
{/* Tags */}
Expand All @@ -86,8 +93,8 @@ const CombinationDeviceCard = ({
className={`bg-white rounded-card shadow-[0_0_4px_rgba(0,0,0,0.1)] p-12 ${deviceCardWidth} flex items-center gap-12`}
>
<div className={`${deviceImageSize} bg-gray-200 flex-shrink-0`} />
<div className="flex flex-col gap-4">
<p className="font-body-3-sm text-black">{device.name}</p>
<div className="flex flex-col gap-4 min-w-0">
<p className="font-body-3-sm text-black truncate">{device.name}</p>
<p className="font-body-4-r text-gray-300">{device.brandName}</p>
<p className="font-body-3-r text-gray-300">{device.deviceType}</p>
</div>
Expand All @@ -98,7 +105,7 @@ const CombinationDeviceCard = ({
{/* 그라데이션 */}
{showGradient && shouldShowGradient && !showAllDevices && (
<div
className={`absolute right-0 bottom-0 ${deviceCardWidth} h-80 rounded-card pointer-events-none`}
className={`absolute right-0 bottom-0 ${deviceCardWidth} h-82 rounded-card pointer-events-none`}
style={{
background: 'linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 70%)',
}}
Expand Down
21 changes: 11 additions & 10 deletions src/pages/devices/DeviceSearchPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -408,7 +408,7 @@ const DeviceSearchPage = () => {

{/* Card */}
<div
className="bg-white rounded-card px-56 py-40"
className="bg-white rounded-card px-56 py-40 overflow-y-auto scrollbar-minimal"
style={{
width: '907px',
height: '670px',
Expand Down Expand Up @@ -522,7 +522,7 @@ const DeviceSearchPage = () => {
onClick={(e) => e.stopPropagation()}
>
{/* Combination List */}
<div className="flex flex-col mx-20 overflow-y-auto max-h-630 scrollbar-minimal">
<div className="flex flex-col ml-20 overflow-y-auto h-full scrollbar-minimal">
{combos.map((combo, index) => (
<button
key={combo.comboId}
Expand All @@ -537,7 +537,7 @@ const DeviceSearchPage = () => {
{/* 조합명 + 대표조합 star */}
<div className="flex items-center gap-8">
<p className="font-body-1-sm text-black">{combo.comboName}</p>
{combo.isPinned && <StarIcon className="w-22 h-22 -mt-2" />}
{combo.isPinned && <StarIcon className="w-22 h-22 -mt-3" />}
</div>
</div>
{/* 기기 수 + 총 가격 */}
Expand Down Expand Up @@ -586,10 +586,10 @@ const DeviceSearchPage = () => {

{/* Card */}
<div
className="bg-white rounded-card shadow-[0_0_10px_rgba(0,0,0,0.25)] mb-50 overflow-y-auto scrollbar-minimal"
className="bg-white rounded-card shadow-[0_0_10px_rgba(0,0,0,0.25)] mb-50 flex flex-col overflow-y-auto scrollbar-minimal"
style={{
width: '907px',
height: '670px',
height:'670px',
}}
onClick={(e) => e.stopPropagation()}
>
Expand All @@ -603,29 +603,30 @@ const DeviceSearchPage = () => {
onExpand={(value) => setShowAllDevices(value)}
showExpandButton={false}
showGradient={true}
className="px-56 pt-40 pb-0"
className="px-56 pt-40 pb-0 flex-shrink-0"
index={combos.findIndex(c => c.comboId === selectedCombinationId)}
/>

{/* 토글 버튼 - CombinationDeviceCard 외부에 배치 */}
{combinationDevices.length > 9 && !showAllDevices && (
<button
onClick={() => setShowAllDevices(true)}
className="mt-16 px-56 pl-68 font-body-2-r text-gray-500 underline cursor-pointer hover:opacity-80"
className="mt-16 px-56 pl-68 font-body-2-r text-gray-500 underline cursor-pointer hover:opacity-80 w-fit"
>
기기 전체보기
</button>
)}
{combinationDevices.length > 9 && showAllDevices && (
<button
onClick={() => setShowAllDevices(false)}
className="mt-16 px-56 pl-68 font-body-2-r text-gray-500 underline cursor-pointer hover:opacity-80"
className="mt-16 px-56 pl-68 font-body-2-r text-gray-500 underline cursor-pointer hover:opacity-80 w-fit"
>
간략히 보기
</button>
)}

{/* 버튼 컨테이너 - 토글 버튼으로부터 72px 간격 유지 */}
<div className="px-40 pb-40 pt-72">
{/* 버튼 컨테이너 - 토글 버튼으로부터 간격 유지하며 하단 고정 */}
<div className="px-40 pb-40 pt-30 mt-auto">
<div className="flex justify-end">
<PrimaryButton
text={isAlreadyInSelectedCombination ? '이미 담은 상품입니다.' : `${selectedCombination.comboName}에 담기`}
Expand Down
12 changes: 6 additions & 6 deletions src/pages/my/MyPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1034,7 +1034,7 @@ const MyPage = () => {
{combination.isPinned ? (
<StarIcon
onClick={(e) => handleTogglePin(e, combination.comboId)}
className={`!w-22 !h-22 -mt-2 cursor-pointer transition-opacity ${
className={`!w-22 !h-22 -mt-3 cursor-pointer transition-opacity ${
hoveredStarComboId === combination.comboId ? 'opacity-80' : ''
}`}
onMouseEnter={() => setHoveredStarComboId(combination.comboId)}
Expand All @@ -1045,14 +1045,14 @@ const MyPage = () => {
{hoveredStarComboId === combination.comboId ? (
<StarHoverIcon
onClick={(e) => handleTogglePin(e, combination.comboId)}
className="!w-22 !h-22 -mt-2 cursor-pointer"
className="!w-22 !h-22 -mt-3 cursor-pointer"
onMouseEnter={() => setHoveredStarComboId(combination.comboId)}
onMouseLeave={() => setHoveredStarComboId(null)}
/>
) : (
<StarXIcon
onClick={(e) => handleTogglePin(e, combination.comboId)}
className="!w-22 !h-22 -mt-2 cursor-pointer"
className="!w-22 !h-22 -mt-3 cursor-pointer"
onMouseEnter={() => setHoveredStarComboId(combination.comboId)}
onMouseLeave={() => setHoveredStarComboId(null)}
/>
Expand Down Expand Up @@ -1127,7 +1127,7 @@ const MyPage = () => {
{combination.isPinned ? (
<StarIcon
onClick={(e) => handleTogglePin(e, combination.comboId)}
className={`!w-22 !h-22 -mt-2 cursor-pointer transition-opacity ${
className={`!w-22 !h-22 -mt-3 cursor-pointer transition-opacity ${
hoveredStarComboId === combination.comboId ? 'opacity-80' : ''
}`}
onMouseEnter={() => setHoveredStarComboId(combination.comboId)}
Expand All @@ -1138,14 +1138,14 @@ const MyPage = () => {
{hoveredStarComboId === combination.comboId ? (
<StarHoverIcon
onClick={(e) => handleTogglePin(e, combination.comboId)}
className="!w-22 !h-22 -mt-2 cursor-pointer"
className="!w-22 !h-22 -mt-3 cursor-pointer"
onMouseEnter={() => setHoveredStarComboId(combination.comboId)}
onMouseLeave={() => setHoveredStarComboId(null)}
/>
) : (
<StarXIcon
onClick={(e) => handleTogglePin(e, combination.comboId)}
className="!w-22 !h-22 -mt-2 cursor-pointer"
className="!w-22 !h-22 -mt-3 cursor-pointer"
onMouseEnter={() => setHoveredStarComboId(combination.comboId)}
onMouseLeave={() => setHoveredStarComboId(null)}
/>
Expand Down