Skip to content

Commit 9defe69

Browse files
ozen0718ozen0718
authored
Merge pull request #186 from part3-4team-Taskify/minji
[Refactor, Style] DropdownMenu: 재 클릭 시 닫힘 / Column: 여백, 반응형 조정 / Card: 긴 제목 생략 모바일에도 적용
2 parents f6da134 + 7913466 commit 9defe69

File tree

14 files changed

+100
-69
lines changed

14 files changed

+100
-69
lines changed

‎src/components/button/CardButton.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -73,14 +73,14 @@ const CardButton: React.FC<CardButtonProps> = ({
7373
)}
7474
>
7575
{/* 왼쪽: 색상 도트 + 제목 + 왕관 */}
76-
<div className="flex items-center font-semibold gap-[10px] overflow-hidden">
76+
<div className="flex items-center overflow-hidden font-semibold gap-[10px]">
7777
{/* 색상 원 */}
7878
<svg width="8" height="8" viewBox="0 0 8 8" fill={color}>
7979
<circle cx="4" cy="4" r="4" />
8080
</svg>
8181

8282
{/* 제목 */}
83-
<span className="text-black3 text-[14px] sm:text-[16px] truncate max-w-[90px] sm:max-w-[100px] md:max-w-[120px] lg:max-w-[160px]">
83+
<span className="text-black3 text-[14px] sm:text-[16px] truncate max-w-[120px]">
8484
{title}
8585
</span>
8686

‎src/components/button/ColumnsButton.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
88
const ColumnsButton: React.FC<ButtonProps> = ({
99
fullWidth,
1010
className,
11-
children = "새로운 컬럼 추가하기",
11+
children = "새로운 칼럼 추가하기",
1212
...props
1313
}) => {
1414
return (
@@ -17,10 +17,10 @@ const ColumnsButton: React.FC<ButtonProps> = ({
1717
"flex justify-center items-center gap-[10px] bg-white transition-all",
1818
"rounded-lg px-4 py-3 font-semibold",
1919
"border border-gray-200 hover:border-purple-500",
20-
fullWidth ? "w-full" : "w-[284px] md:w-[544px] lg:w-[354px]",
20+
fullWidth ? "w-full" : "w-[260px] sm:w-[560px] lg:w-[354px]",
2121
"h-[70px] md:h-[70px] lg:h-[70px]",
22-
"mt-[10px] md:mt-[16px] lg:mt-[20px]",
23-
"text-lg md:text-2lg lg:text-2lg",
22+
"mt-[6px] md:mt-[8px]",
23+
"text-black3 text-lg md:text-2lg",
2424
"cursor-pointer",
2525
className
2626
)}

‎src/components/button/TodoButton.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ const TodoButton: React.FC<ButtonProps> = ({
1717
"flex justify-center items-center gap-[10px] bg-white transition-all",
1818
"rounded-lg px-4 py-3 font-semibold",
1919
"border border-gray-200 hover:border-purple-500",
20-
fullWidth ? "w-full" : "w-[284px] md:w-[544px] lg:w-[314px]",
20+
fullWidth ? "w-full" : "w-[225px] sm:w-[525px] lg:w-[314px]",
2121
"h-[32px] md:h-[40px] lg:h-[40px]",
2222
"mt-[10px] md:mt-[16px] lg:mt-[20px]",
2323
"text-lg md:text-2lg lg:text-2lg",

‎src/components/columnCard/Card.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -50,10 +50,9 @@ export default function Card({
5050
{/* 제목 */}
5151
<h3
5252
className={`
53-
text-lg font-semibold mt-2
54-
md:text-sm md:mt-0
55-
lg:text-lg lg:mt-2
56-
truncate
53+
text-black3 text-[14px] font-medium mt-2
54+
md:text-[16px] md:mt-0 lg:mt-2
55+
truncate max-w-[180px] sm:max-w-none
5756
`}
5857
>
5958
{title}

‎src/components/columnCard/CardList.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ export default function CardList({
9494
onClick={() => onCardClick(task)}
9595
/>
9696
))}
97-
{hasMore && <div ref={observerRef} className="h-20 " />}
97+
{hasMore && <div ref={observerRef} className="h-20" />}
9898
</div>
9999
);
100100
}

‎src/components/columnCard/Column.tsx‎

Lines changed: 29 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -100,40 +100,46 @@ export default function Column({
100100
return (
101101
<div
102102
className={`
103-
flex flex-col border-r border-[var(--color-gray4)] bg-[#F5F2FC] rounded-md p-4
104-
h-auto sm:m-h-screen
105-
max-h-[401px] sm:max-h-none w-full lg:w-[360px]
106-
`}
103+
flex flex-col shrink-0 overflow-hidden p-4 mr-4 lg:my-0 mb-4
104+
border border-[var(--color-gray4)] bg-[#F5F2FC] rounded-[12px]
105+
max-h-[401px] lg:max-h-none w-full lg:w-[360px]
106+
`}
107107
>
108108
{/* 칼럼 헤더 */}
109-
<div className="flex items-center justify-between">
110-
<div className="flex items-center gap-2">
111-
<h2 className="text-lg font-bold">
112-
<span className="text-[var(--primary)]">•</span> {columnTitle}
113-
</h2>
114-
<span className="w-5 h-5 text-sm bg-gray-200 text-gray-700 rounded-[4px] flex items-center justify-center ">
115-
{tasks.length}
116-
</span>
109+
<div className="shrink-0">
110+
<div className="flex items-center justify-between">
111+
<div className="flex items-center gap-2">
112+
<Image src="/svgs/ellipse.svg" alt="circle" width={8} height={8} />
113+
<h2 className="text-black3 text-[16px] md:text-[18px] font-bold">
114+
{columnTitle}
115+
</h2>
116+
<span className="w-5 h-5 text-sm bg-gray-200 text-gray-700 rounded-[4px] flex items-center justify-center ">
117+
{tasks.length}
118+
</span>
119+
</div>
120+
<Image
121+
src="/svgs/settings.svg"
122+
alt="setting icon"
123+
width={24}
124+
height={24}
125+
priority
126+
className="cursor-pointer"
127+
onClick={() => setIsColumnModalOpen(true)}
128+
/>
117129
</div>
118-
<Image
119-
src="/svgs/settings.svg"
120-
alt="setting icon"
121-
width={24}
122-
height={24}
123-
priority
124-
className="cursor-pointer"
125-
onClick={() => setIsColumnModalOpen(true)}
126-
/>
127130
</div>
128131

129132
{/* 카드 영역 */}
130-
<div className="flex-1 pb-4 flex flex-col items-center gap-3">
133+
<div className="flex-1 flex flex-col overflow-hidden items-center pb-4 gap-2">
131134
<div onClick={() => setIsTodoModalOpen(true)} className="mb-2">
132135
<TodoButton />
133136
</div>
134137

135138
{/* 무한스크롤 카드 리스트로 대체 */}
136-
<div className="w-full max-h-[800px] overflow-y-auto">
139+
<div
140+
className="flex-1 w-full overflow-y-auto overflow-x-hidden"
141+
style={{ scrollbarGutter: "stable" }}
142+
>
137143
<CardList
138144
columnId={columnId}
139145
teamId={TEAM_ID}

‎src/components/gnb/HeaderDashboard.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -238,6 +238,7 @@ const HeaderDashboard: React.FC<HeaderDashboardProps> = ({
238238
) : (
239239
members && (
240240
<div
241+
onMouseDown={(e) => e.stopPropagation()}
241242
onClick={() => setIsListOpen((prev) => !prev)}
242243
className="flex items-center pl-[15px] md:pl-[25px] lg:pl-[30px] pr-[15px] md:pr-[25px] lg:pr-[30px] cursor-pointer"
243244
>
@@ -262,6 +263,7 @@ const HeaderDashboard: React.FC<HeaderDashboardProps> = ({
262263
<div className="h-[34px] md:h-[38px] w-[1px] bg-[var(--color-gray3)]" />
263264
{/*유저 드롭다운 메뉴*/}
264265
<div
266+
onMouseDown={(e) => e.stopPropagation()}
265267
onClick={() => setIsMenuOpen((prev) => !prev)}
266268
className="flex items-center gap-[12px] pl-[20px] md:pl-[30px] lg:pl-[35px] cursor-pointer overflow-hidden"
267269
>

‎src/components/gnb/MemberListMenu.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ const MemberListMenu: React.FC<MemberListMenuProps> = ({
3131
: "opacity-0 -translate-y-2 pointer-events-none"
3232
)}
3333
>
34-
<ul className="flex flex-col font-16r max-h-[300px] overflow-y-auto">
34+
<ul className="flex flex-col font-16r max-h-[200px] sm:max-h-[270px] overflow-y-auto">
3535
{members.map((member) => (
3636
<li
3737
key={member.id}

‎src/components/input/Input.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ export default function Input(props: InputProps) {
8383
};
8484

8585
return (
86-
<div className={clsx("flex flex-col items-start gap-2", wrapperClassName)}>
86+
<div className={clsx("flex flex-col items-start gap-1", wrapperClassName)}>
8787
{label && (
8888
<label
8989
htmlFor={id}

‎src/components/sideMenu/SideMenu.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ export default function SideMenu({
3434
const [isCollapsed, setIsCollapsed] = useState(false);
3535
const [isModalOpen, setIsModalOpen] = useState(false);
3636

37-
const itemsPerPage = 14;
37+
const itemsPerPage = 15;
3838
const totalPages = Math.ceil(dashboardList.length / itemsPerPage);
3939
const startIndex = (currentPage - 1) * itemsPerPage;
4040
const endIndex = startIndex + itemsPerPage;
@@ -51,7 +51,8 @@ export default function SideMenu({
5151
return (
5252
<aside
5353
className={clsx(
54-
"flex flex-col h-screen overflow-y-auto lg:overflow-y-hidden overflow-x-hidden border-r border-[var(--color-gray3)] px-3 py-5 transition-all duration-200",
54+
"z-20 flex flex-col h-screen overflow-y-auto lg:overflow-y-hidden overflow-x-hidden transition-all duration-200",
55+
"bg-white border-r border-[var(--color-gray3)] px-3 py-5",
5556
isCollapsed
5657
? "w-[67px]"
5758
: "w-[67px] sm:w-[67px] md:w-[160px] lg:w-[300px]"
@@ -131,7 +132,7 @@ export default function SideMenu({
131132
{/* 대시보드 타이틀 + 추가 버튼 */}
132133
{!isCollapsed && (
133134
<div className="mb-4 flex items-center justify-between px-3 md:px-2">
134-
<span className="hidden md:block font-12sb text-[var(--color-black)]">
135+
<span className="hidden md:block font-12sb text-[var(--color-gray1)]">
135136
Dash Boards
136137
</span>
137138
<button
@@ -223,7 +224,7 @@ export default function SideMenu({
223224

224225
{/* 페이지네이션 */}
225226
{!isCollapsed && dashboardList.length > itemsPerPage && (
226-
<div className="flex justify-start items-end mb-9 px-2">
227+
<div className="flex justify-start items-end mb-1 px-2">
227228
<PaginationButton
228229
direction="left"
229230
disabled={currentPage === 1}

0 commit comments

Comments
 (0)