Skip to content
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

[Feat] 자잘한 UI 개선사항 반영 #309

Merged
merged 3 commits into from
Nov 28, 2024
+25 −21
Merged

[Feat] 자잘한 UI 개선사항 반영 #309

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
29887d8
design: 제목이 길어도 레이아웃이 일관되도록 수정
simeunseo Nov 27, 2024
7240a84
design: 대시보드에서 티클명이 길 때 ellipsis 처리
simeunseo Nov 27, 2024
252058a
design: 커스텀 스크롤바를 필요한 곳에서만 사용하도록 변경
simeunseo Nov 27, 2024
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: 3 additions & 1 deletion apps/web/src/components/dashboard/apply/TicleInfoCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,9 @@ function TicleInfoCard({
</div>
<div className="flex items-center gap-3">
<h3 className="text-title2 text-main">티클명</h3>
<span className="w-80 text-body1 text-main">{ticleTitle}</span>
<span className="w-80 overflow-hidden text-ellipsis whitespace-pre text-body1 text-main">
{ticleTitle}
</span>
</div>
<div className="flex items-center gap-3">
<h3 className="text-title2 text-main">진행 일시</h3>
Expand Down
4 changes: 3 additions & 1 deletion apps/web/src/components/dashboard/open/TicleInfoCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,9 @@ function TicleInfoCard({ ticleId, ticleTitle, startTime, endTime, status }: Ticl
<div className="flex gap-5">
<div className="flex items-center gap-3">
<h3 className="text-title2 text-main">티클명</h3>
<span className="w-80 text-body1 text-main">{ticleTitle}</span>
<span className="w-80 overflow-hidden text-ellipsis whitespace-pre text-body1 text-main">
{ticleTitle}
</span>
</div>
<div className="flex items-center gap-3">
<h3 className="text-title2 text-main">진행 일시</h3>
Expand Down
14 changes: 8 additions & 6 deletions apps/web/src/components/ticle/list/TicleCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,12 +22,14 @@ const TicleCard = ({
}: TicleCardProps) => {
return (
<article className="flex h-full w-[19rem] cursor-pointer flex-col justify-between gap-14 rounded-lg border border-main bg-white px-6 py-8 shadow-normal transition-transform duration-500 ease-in-out hover:-translate-y-3 hover:border-primary hover:shadow-up">
<div className="flex flex-col gap-4">
<h3 className="text-head3 text-main">{title}</h3>
<div className="flex h-20 flex-wrap gap-2">
{tags.map((tag) => (
<Badge key={tag}>{tag}</Badge>
))}
<div className="flex h-52 flex-col justify-between gap-4">
<div className="flex flex-col gap-4">
<h3 className="text-head3 text-main">{title}</h3>
<div className="flex flex-wrap gap-2">
{tags.map((tag) => (
<Badge key={tag}>{tag}</Badge>
))}
</div>
</div>
<div className="flex flex-col gap-2.5">
<div className="flex gap-1.5">
Expand Down
2 changes: 1 addition & 1 deletion apps/web/src/components/user/UserProfileDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Link, useNavigate } from '@tanstack/react-router';

Check warning on line 1 in apps/web/src/components/user/UserProfileDialog.tsx

View workflow job for this annotation

GitHub Actions / check 

'Link' is defined but never used

import { useUserProfile } from '@/hooks/api/user';

Expand Down Expand Up @@ -34,7 +34,7 @@
<UserInfo {...data} loginType={loginType} />
<div className="flex flex-col gap-2.5">
<h3 className="text-title2 text-main">개설한 티클 목록</h3>
<div className="flex h-28 flex-col gap-2 overflow-y-scroll">
<div className="custom-scrollbar flex h-28 flex-col gap-2 overflow-y-scroll">
{data.ticleInfo.map((info) => (
<button
type="button"
Expand Down
22 changes: 10 additions & 12 deletions apps/web/src/styles/global.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,18 +103,16 @@
border: 3px dashed var(--grey-300);
}

@layer utilities {
*::-webkit-scrollbar {
@apply w-2;
}
.custom-scrollbar::-webkit-scrollbar {
@apply w-2;
}

*::-webkit-scrollbar-track {
background: var(--grey-200);
}
.custom-scrollbar::-webkit-scrollbar-track {
background: var(--grey-200);
}

*::-webkit-scrollbar-thumb {
@apply rounded-full;
background: var(--purple-200);
cursor: pointer;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
@apply rounded-full;
background: var(--purple-200);
cursor: pointer;
}
Loading