Skip to content

[Design/#394] 타임라인/워크스페이스/설정/알림 tablet/Desktop/mobile 반응형 #395

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
jjjsun merged 6 commits into from
Aug 5, 2026
Merged

[Design/#394] 타임라인/워크스페이스/설정/알림 tablet/Desktop/mobile 반응형 #395

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c1c7995
style: 타임라인 관련 반응형 구현
jjjsun Aug 5, 2026
489a104
style: 워크스페이스 관련 반응형 구현
jjjsun Aug 5, 2026
1c0b5a4
style: 설정/알림/로그아웃/회원탈퇴 관련 반응형 구현
jjjsun Aug 5, 2026
4811ed5
style: 타임라인 관련 모바일 반응형 적용
jjjsun Aug 5, 2026
6a7163d
style: 모바일 반응형 자연스럽게 수정
jjjsun Aug 5, 2026
9b869a4
style: 코드래빗 수정사항 반영
jjjsun Aug 5, 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
24 changes: 12 additions & 12 deletions src/components/setting/NotificationSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ export default function NotificationSection({
const isDiscordPending = pendingOrgAction === "discord";
const isAnyOrgPending = pendingOrgAction != null;
return (
<Card className="p-8 tablet:p-10">
<Card className="p-8">
<header className="mb-7 flex items-center gap-4">
<BellIcon />
<h2 className="font-heading4 text-text-title">알림 설정</h2>
Expand Down Expand Up @@ -159,7 +159,7 @@ export default function NotificationSection({
</div>
</div>

<div className="flex items-center gap-4 py-5">
<div className="flex items-center gap-4 py-5 tablet:flex-col tablet:items-stretch">
<div className="flex min-w-0 flex-1 items-center gap-4">
<SlackIcon className={rowIconClass} />
<div className="min-w-0">
Expand All @@ -172,7 +172,7 @@ export default function NotificationSection({
</div>
</div>
{slackConnected ? (
<div className="flex shrink-0 items-center gap-3">
<div className="flex shrink-0 items-center gap-3 tablet:justify-between">
{slackEnabled && !channelDisabled && (
<Badge variant="infoBlue">켜짐</Badge>
)}
Expand All @@ -194,7 +194,7 @@ export default function NotificationSection({
</Button>
</div>
) : (
<>
<div className="flex shrink-0 items-center gap-3 tablet:w-full tablet:flex-col tablet:items-stretch">
<Input
aria-label="슬랙 Webhook URL"
placeholder="https://hooks.slack.com/..."
Expand All @@ -203,15 +203,15 @@ export default function NotificationSection({
error={!!slackWebhookError}
helperText={slackWebhookError}
disabled={channelDisabled || isAnyOrgPending}
wrapperClassName="w-1/4 shrink-0"
wrapperClassName="w-1/4 shrink-0 tablet:w-full"
containerClassName="h-10 rounded-lg"
inputClassName="px-3 font-body2"
/>
<Button
variant="outline"
size="small"
type="button"
className="shrink-0"
className="shrink-0 tablet:w-full"
disabled={
channelDisabled ||
isAnyOrgPending ||
Expand All @@ -222,7 +222,7 @@ export default function NotificationSection({
>
연동
</Button>
</>
</div>
)}
</div>

Expand All @@ -239,7 +239,7 @@ export default function NotificationSection({
</div>
</div>
{discordConnected ? (
<div className="flex shrink-0 items-center gap-3">
<div className="flex shrink-0 items-center gap-3 tablet:justify-between">
{discordEnabled && !channelDisabled && (
<Badge variant="infoBlue">켜짐</Badge>
)}
Expand All @@ -261,7 +261,7 @@ export default function NotificationSection({
</Button>
</div>
) : (
<>
<div className="flex shrink-0 items-center gap-3 tablet:w-full tablet:flex-col tablet:items-stretch">
<Input
aria-label="디스코드 Webhook URL"
placeholder="https://discord.com/api/webhooks/..."
Expand All @@ -270,15 +270,15 @@ export default function NotificationSection({
error={!!discordWebhookError}
helperText={discordWebhookError}
disabled={channelDisabled || isAnyOrgPending}
wrapperClassName="w-1/4 shrink-0"
wrapperClassName="w-1/4 shrink-0 tablet:w-full"
containerClassName="h-10 rounded-lg"
inputClassName="px-3 font-body2"
/>
<Button
variant="outline"
size="small"
type="button"
className="shrink-0"
className="shrink-0 tablet:w-full"
disabled={
channelDisabled ||
isAnyOrgPending ||
Expand All @@ -289,7 +289,7 @@ export default function NotificationSection({
>
연동
</Button>
</>
</div>
)}
</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions src/components/setting/PasswordSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export default function PasswordSection({
const [showConfirm, setShowConfirm] = useState(false);

return (
<Card className="p-8 tablet:p-10">
<Card className="p-8">
<header className="mb-7 flex items-start justify-between gap-4">
<div>
<div className="flex gap-4 items-center">
Expand All @@ -51,7 +51,7 @@ export default function PasswordSection({
</p>
</div>
</header>
<div className="grid grid-cols-1 tablet:grid-cols-1 gap-x-8 gap-y-6 tablet:max-w-4xl">
<div className="grid grid-cols-1 gap-x-8 gap-y-6 tablet:max-w-4xl">
<div className="tablet:col-span-1">
<Input
type={showCurrent ? "text" : "password"}
Expand Down
8 changes: 4 additions & 4 deletions src/components/setting/ProfileSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,16 +32,16 @@ export default function ProfileSection({
resetImage,
}: TProfileSectionProps) {
return (
<Card className="p-8 tablet:p-10">
<Card className="p-8">
<header className="mb-7 flex items-start justify-between gap-4">
<div className="flex gap-4 items-center">
<UserProfileCircleIcon />
<h2 className="font-heading4 text-text-title">프로필</h2>
</div>
</header>
<div className="flex tablet:flex-row gap-10">
<div className="flex flex-col items-center basis-1/4 shrink-0">
<div className="mb-4 w-full select-none text-text-title">
<div className="flex flex-row gap-10 tablet:flex-col tablet:gap-8">
<div className="flex flex-col items-center basis-1/4 shrink-0 tablet:w-full">
<div className="mb-4 w-full select-none text-text-title tablet:text-center">
프로필 이미지
</div>
<input
Expand Down
2 changes: 1 addition & 1 deletion src/components/setting/ProfileSectionSkeleton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ export default function ProfileSectionSkeleton() {
<Skeleton className="w-24 h-7" />
</div>

<div className="flex tablet:flex-row gap-10">
<div className="flex flex-row tablet:flex-col gap-10 tablet:gap-8">
<div className="flex flex-col items-center basis-1/4 shrink-0">
<Skeleton className="w-24 h-5 mb-4" />
<SkeletonCircle className="w-60 h-60" />
Expand Down
17 changes: 9 additions & 8 deletions src/components/setting/WithdrawConfirmModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,25 +35,26 @@ export default function WithdrawConfirmModal({
hideCloseButton={isLoading}
disableOverlayClick={isLoading}
>
<div className="px-2 text-center">
<div className="px-2 text-center tablet:px-0">
<div className="mb-6 flex justify-center">
<WarnIcon className="h-15 w-15 text-info-red" aria-hidden="true" />
</div>

<h3 className="mb-3 font-heading2 text-text-title">
<h3 className="mb-3 font-heading2 text-text-title break-keep text-pretty">
정말로 회원탈퇴하시겠습니까?
</h3>

<p className="mb-7 font-body1 text-text-auth-sub">
탈퇴 요청 시 계정은 바로 비활성화되며, <br /> 30일 후 서버에서 완전히
삭제됩니다. <br />이 작업은 되돌리기 어려우니 신중히 결정해 주세요
<p className="mb-7 font-body1 text-text-auth-sub break-keep text-pretty">
탈퇴 요청 시 계정은 바로 비활성화되며, 30일 후 서버에서 완전히
삭제됩니다.
<br />이 작업은 되돌리기 어려우니 신중히 결정해 주세요.
</p>
<div className="flex gap-4">
<div className="flex flex-col gap-3">
<Button
type="button"
variant="outline"
size="big"
className="flex-1"
fullWidth
onClick={handleClose}
disabled={isLoading}
>
Expand All @@ -63,7 +64,7 @@ export default function WithdrawConfirmModal({
type="button"
variant="danger"
size="big"
className="flex-1"
fullWidth
onClick={handleConfirm}
disabled={isLoading}
aria-label={isLoading ? "탈퇴 진행 중" : "회원 탈퇴 확인"}
Expand Down
2 changes: 1 addition & 1 deletion src/components/sidebar/LogoutConfirmModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export default function LogoutConfirmModal({
hideCloseButton={isLoading}
disableOverlayClick={isLoading}
>
<div className="px-2 pt-4 pb-0 text-center">
<div className="px-2 pt-4 pb-0 text-center tablet:px-0">
<div className="mb-5 flex justify-center">
<div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-info-red/8 ring-1 ring-info-red/15">
<LogoutIcon className="h-8 w-8 text-info-red" aria-hidden />
Expand Down
4 changes: 2 additions & 2 deletions src/components/timeline/TimelineBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,9 +118,9 @@ export default function TimelineBar({
<span className="truncate font-caption text-text-muted">
{bar.subtitle}
</span>
<span className="flex items-center gap-1 font-caption text-text-body">
<span className="flex min-w-0 items-center gap-1 font-caption text-text-body">
<span className={twMerge("h-1.5 w-1.5 rounded-full", status.dot)} />
{status.label}
<span className="truncate">{status.label}</span>
</span>
</div>
<div
Expand Down
6 changes: 3 additions & 3 deletions src/components/timeline/TimelineCreateModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -149,7 +149,7 @@ export default function TimelineCreateModal({
title={isEditMode ? "타임라인 수정" : "타임라인 생성"}
disableOverlayClick={isPending}
>
<div className="flex w-full flex-col items-start px-4 pr-8 tablet:pr-10">
<div className="flex w-full flex-col items-start px-4 pr-8 tablet:pr-0 tablet:px-0">
<h2 className="mb-2 font-heading3 text-text-title">
{isEditMode ? "타임라인 수정" : "타임라인 생성"}
</h2>
Expand All @@ -161,7 +161,7 @@ export default function TimelineCreateModal({

<form
onSubmit={handleSubmit(onSubmit)}
className="flex w-full flex-col gap-10"
className="flex w-full flex-col gap-10 tablet:gap-8"
noValidate
>
<div className="w-full space-y-7">
Expand All @@ -174,7 +174,7 @@ export default function TimelineCreateModal({
{...register("name")}
/>

<div className="grid grid-cols-1 gap-7 tablet:grid-cols-2">
<div className="grid grid-cols-2 gap-7 tablet:grid-mobile-1">
<div
role="presentation"
className={!isPending ? "cursor-pointer" : undefined}
Expand Down
2 changes: 1 addition & 1 deletion src/components/timeline/TimelineGrid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ export default function TimelineGrid({
)}
>
<div
className="relative min-h-0 flex-1"
className="relative min-h-full flex-1 bg-surface-200"
style={{ minHeight: `max(${bodyHeight}px, 100%)` }}
>
{columns.map((column, i) => (
Expand Down
9 changes: 5 additions & 4 deletions src/components/timeline/TimelinePerformancePanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,8 @@ type TAiSummaryUiState = "idle" | "loading" | "done";
const SECTION_SHELL_CLASS =
"rounded-3xl border border-surface-300/70 bg-surface-100";

const SECTION_INNER_CLASS = "flex flex-col gap-5 px-6 py-6";
const SECTION_INNER_CLASS =
"flex flex-col gap-5 px-6 py-6 tablet:px-5 tablet:gap-6 tablet:pb-8";

const SOFT_CARD_CLASS = "rounded-2xl bg-surface-100 shadow-Soft";

Expand Down Expand Up @@ -209,7 +210,7 @@ export default function TimelinePerformancePanel({
hideHeader
className={twMerge("max-w-2xl", className)}
>
<div className="flex flex-col gap-7 px-7 pb-10 pt-6">
<div className="flex flex-col gap-7 px-7 pb-10 pt-6 tablet:px-5 tablet:gap-6 tablet:pb-8">
{/* 헤더 */}
<header className="flex flex-col gap-5">
<div className="flex items-center justify-between">
Expand Down Expand Up @@ -310,13 +311,13 @@ export default function TimelinePerformancePanel({
</section>

{/* KPI — 선택한 지표 수만큼 가로 균등 분할 */}
<section className="flex w-full gap-2">
<section className="flex w-full gap-2 tablet:flex-wrap">
{data.metrics.map((metric) => (
<div
key={metric.metric}
className={twMerge(
SOFT_CARD_CLASS,
"flex min-w-0 flex-1 flex-col gap-1 px-4 py-3.5",
"flex min-w-0 flex-1 flex-col gap-1 px-4 py-3.5 tablet:min-w-[calc(50%-0.25rem)]",
)}
>
<span className="ml-1 flex flex-col">
Expand Down
7 changes: 5 additions & 2 deletions src/components/timeline/TimelinePeriodSelector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export function TimelineViewUnitSegment({
aria-pressed={isSelected}
onClick={() => onViewUnitChange(option.value)}
className={twMerge(
"rounded-md px-3 py-1.5 font-caption transition-ui-smooth",
"rounded-md px-3 py-1.5 font-caption transition-ui-smooth tablet:flex-1",
isSelected
? "bg-surface-100 text-text-title shadow-Soft"
: "text-text-muted hover:text-text-body",
Expand Down Expand Up @@ -86,7 +86,10 @@ export function TimelinePeriodNav({
<ChevronLeftIcon className="h-3.5 w-3.5" />
</button>

<span aria-live="polite" className="min-w-40 truncate text-center">
<span
aria-live="polite"
className="min-w-40 truncate text-center tablet:min-w-0 tablet:flex-1"
>
{periodLabel}
</span>

Expand Down
2 changes: 1 addition & 1 deletion src/components/timeline/TimelineStatusLegend.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export default function TimelineStatusLegend({
return (
<div
className={twMerge(
"flex min-w-0 w-full items-center gap-4 rounded-2xl bg-surface-200 px-5 py-3",
"flex min-w-0 w-full items-center gap-4 rounded-2xl bg-surface-200 px-5 py-3 tablet:px-4 tablet:py-2.5 tablet:gap-3",
className,
)}
>
Expand Down
6 changes: 3 additions & 3 deletions src/components/timeline/skeleton/TimelineSkeleton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,11 @@ export default function TimelineSkeleton() {
style={{ height: TIMELINE_PAGE_HEIGHT }}
>
<div className="flex min-h-0 flex-col flex-1 rounded-2xl border border-surface-400/70 bg-surface-100">
<div className="flex flex-col gap-4 shrink-0 border-b border-surface-400/80 px-5 py-5">
<Skeleton className="h-6 w-48" />
<div className="flex flex-col gap-4 shrink-0 border-b border-surface-400/80 px-5 py-5 tablet:px-4 tablet:py-4 tablet:gap-3">
<Skeleton className="h-6 w-48 tablet:w-full" />
<Skeleton className="h-10 w-full" />
</div>
<div className="flex flex-1 flex-col gap-3 p-5">
<div className="flex flex-1 flex-col gap-3 p-5 tablet:p-4">
<Skeleton className="h-14 w-full" />
<Skeleton className="h-24 w-full" />
<Skeleton className="h-24 w-full" />
Expand Down
16 changes: 8 additions & 8 deletions src/components/workspace/InviteMemberModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,22 +99,22 @@ export default function InviteMemberModal({
title="팀원 초대하기"
className="w-full max-w-190 overflow-hidden"
>
<div className="flex flex-col h-full max-h-[80vh] text-center px-2 py-6">
<div className="flex justify-between items-center px-8 py-6 pb-3 shrink-0">
<div className="flex flex-col h-full max-h-[80vh] text-center px-2 py-6 tablet:px-0 tablet:py-4">
<div className="flex justify-between items-center px-8 py-6 pb-3 shrink-0 tablet:px-5 tablet:flex-col tablet:items-stretch tablet:gap-3">
<p className="font-heading4 text-text-title">팀원 초대하기</p>
<button
type="button"
aria-label="팀원 초대 링크 복사 버튼"
onClick={handleCopyLink}
className="flex items-center gap-2 rounded-lg px-2 py-1 text-primary-500 transition-opacity hover:opacity-80"
className="flex items-center gap-2 rounded-lg px-2 py-1 text-primary-500 transition-opacity hover:opacity-80 tablet:self-end"
>
<CopyIcon />
<span className="font-body1">링크 복사</span>
</button>
</div>
<div className="px-8 py-4 shrink-0">
<div className="flex items-center gap-7">
<div className="flex-1">
<div className="px-8 py-4 shrink-0 tablet:px-5">
<div className="flex items-center gap-7 tablet:flex-col tablet:items-stretch tablet:gap-3">
<div className="flex-1 tablet:w-full">
<Input
value={form.email}
placeholder="이메일을 입력해서 팀원을 초대하세요"
Expand All @@ -129,13 +129,13 @@ export default function InviteMemberModal({
size="big"
onClick={handleInvite}
disabled={isInviteDisabled}
className="min-w-22"
className="min-w-22 tablet:w-full"
>
{inviteMutation.isPending ? "초대 중..." : "초대"}
</Button>
</div>
</div>
<div className="min-h-0 flex-1 overflow-y-auto px-8 py-4">
<div className="min-h-0 flex-1 overflow-y-auto px-8 py-4 tablet:px-5">
<ul>
{inviteItems.map((item) => {
if (item.inviteStatus === "PENDING") {
Expand Down
4 changes: 2 additions & 2 deletions src/components/workspace/MemberItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ export default function MemberItem({
!isReceiveUpdating &&
!!onReceiveToggle;
return (
<li className="flex items-center justify-between py-5 gap-4 tablet:items-start">
<li className="flex items-center justify-between py-5 gap-4 tablet:items-stretch">
<div className="flex items-center gap-4 w-full min-w-0">
<div className="flex bg-text-placeholder/30 h-12 w-12 items-center justify-center shrink-0 rounded-3xl overflow-hidden">
{member.profileImageUrl ? (
Expand Down Expand Up @@ -75,7 +75,7 @@ export default function MemberItem({
</div>
</div>
</div>
<div className="flex items-center gap-4">
<div className="flex items-center gap-4 shrink-0 tablet:justify-end">
<button
type="button"
disabled={!canToggleReceive}
Expand Down
Loading
Loading