fix: 워크스페이스 반응형 레이아웃 개선

src/domains/project/ProjectCard.tsx

@@ -33,6 +33,7 @@ interface ProjectCardProps {
   menuItems?: ActionMenuItem[]
   onClick?: () => void
   className?: string
+  responsiveLayout?: boolean
 }
 
 const AVATAR_SIZE = 28
@@ -52,6 +53,7 @@ const ProjectCard = ({
   menuItems = [],
   onClick,
   className = '',
+  responsiveLayout = false,
 }: ProjectCardProps) => {
   const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
     if (!onClick) return
@@ -109,8 +111,12 @@ const ProjectCard = ({
       </div>
 
       {/* 영상 썸네일(좌) · 태그/진행률/멤버(우) — 가로 분할 */}
-      <div className="flex gap-10">
-        <div className="bg-neutral-2 flex aspect-23/8 w-2/5 shrink-0 items-center justify-center overflow-hidden rounded-lg">
+      <div className={`flex gap-10 ${responsiveLayout ? 'flex-col sm:flex-row sm:gap-10' : ''}`}>
+        <div
+          className={`bg-neutral-2 flex shrink-0 items-center justify-center overflow-hidden rounded-lg ${
+            responsiveLayout ? 'aspect-video w-full sm:aspect-23/8 sm:w-2/5' : 'aspect-23/8 w-2/5'
+          }`}
+        >
           {thumbnailUrl && <img src={thumbnailUrl} alt="" className="h-full w-full object-cover" />}
           <p
             className={thumbnailUrl ? 'hidden' : 'text-caption-lg text-neutral-6 px-4 text-center'}
@@ -120,7 +126,11 @@ const ProjectCard = ({
         </div>
 
         <div className="flex min-w-0 flex-1 flex-col justify-between gap-4">
-          <div className="flex items-center justify-between gap-2">
+          <div
+            className={`flex items-center justify-between gap-2 ${
+              responsiveLayout ? 'flex-col sm:flex-row sm:gap-2' : ''
+            }`}
+          >
             {tags.length > 0 && (
               <div className="flex flex-wrap gap-2">
                 {tags.map((tag, index) => (

src/domains/workspace/MemberListPanel.tsx

@@ -171,7 +171,7 @@ export default function MemberListPanel({
 
       {panelOpen && (
         <div
-          className={`absolute top-full right-0 z-20 mt-2 flex w-[320px] flex-col gap-4 p-4 ${CARD_BASE}`}
+          className={`absolute top-full right-0 z-20 mt-2 flex w-[calc(100vw-32px)] max-w-[320px] flex-col gap-4 p-4 ${CARD_BASE}`}
           role="dialog"
           aria-label="참여 목록"
         >

src/domains/workspace/NoticeListView.tsx

@@ -101,7 +101,7 @@ export default function NoticeListView({
       )}
 
       <Modal isOpen={createOpen} onClose={() => setCreateOpen(false)}>
-        <div className="bg-bg-primary flex w-[420px] flex-col gap-3 rounded-lg p-5">
+        <div className="bg-bg-primary flex w-[calc(100vw-32px)] max-w-[420px] flex-col gap-3 rounded-lg p-5">
           <h3 className="text-body-sm text-neutral-11 font-semibold">공지 작성</h3>
           <Input value={title} onChange={setTitle} placeholder="제목" />
           <TextArea value={content} onChange={setContent} placeholder="내용" rows={5} />

src/domains/workspace/ProjectFileDetailView.tsx

@@ -61,7 +61,7 @@ export default function ProjectFileDetailView({
         </div>
 
         <div
-          className={`bg-neutral-2 flex items-center justify-between gap-3 ${CARD_BASE} px-4 py-3`}
+          className={`bg-neutral-2 flex flex-col gap-3 ${CARD_BASE} px-4 py-3 sm:flex-row sm:items-center sm:justify-between`}
         >
           <div className="flex min-w-0 items-center gap-3">
             <InlineIcon svg={documentIcon} className="text-neutral-5 size-6 shrink-0" />

src/domains/workspace/ProjectFileList.tsx

@@ -156,7 +156,7 @@ export default function ProjectFileList({
     <section className="flex flex-col gap-5">
       <h2 className="text-head-sm text-neutral-11 font-bold">파일</h2>
 
-      <div className="flex items-center gap-3">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
         <div className="relative flex-1">
           <input
             type="text"
@@ -170,7 +170,11 @@ export default function ProjectFileList({
             className="text-neutral-6 pointer-events-none absolute top-1/2 right-4 size-5 -translate-y-1/2"
           />
         </div>
-        <Button variant="secondary" onClick={() => setUploadOpen(true)}>
+        <Button
+          variant="secondary"
+          onClick={() => setUploadOpen(true)}
+          className="w-full sm:w-auto"
+        >
           추가하기
         </Button>
       </div>
@@ -186,7 +190,7 @@ export default function ProjectFileList({
         {files.map((file) => (
           <div
             key={file.id}
-            className={`flex items-center justify-between gap-3 ${CARD_BASE} px-4 py-3`}
+            className={`flex flex-col gap-3 ${CARD_BASE} px-4 py-3 sm:flex-row sm:items-center sm:justify-between`}
           >
             <button
               type="button"
@@ -196,7 +200,7 @@ export default function ProjectFileList({
               <InlineIcon svg={documentIcon} className="text-neutral-5 size-6 shrink-0" />
               <span className="text-body-sm text-neutral-11 min-w-0 truncate">{file.fileName}</span>
             </button>
-            <div className="flex shrink-0 items-center gap-4">
+            <div className="flex flex-wrap items-center gap-x-4 gap-y-2 sm:shrink-0">
               <span className="text-caption-lg text-neutral-6">
                 {formatDateTime(file.createdAt)}
               </span>

src/domains/workspace/ProjectFileUploadModal.tsx

@@ -212,7 +212,7 @@ export default function ProjectFileUploadModal({
           className="border-neutral-3 overflow-hidden rounded-lg border"
           aria-label="업로드 대기 파일"
         >
-          <div className="bg-neutral-2 grid grid-cols-[minmax(0,1fr)_100px_80px] gap-3 px-4 py-3">
+          <div className="bg-neutral-2 grid grid-cols-[minmax(0,1fr)_64px_52px] gap-2 px-4 py-3 sm:grid-cols-[minmax(0,1fr)_100px_80px] sm:gap-3">
             <span className="text-caption-lg text-neutral-8 font-semibold">파일명</span>
             <span className="text-caption-lg text-neutral-8 font-semibold">파일 크기</span>
             <span className="text-caption-lg text-neutral-8 text-right font-semibold">관리</span>
@@ -226,7 +226,7 @@ export default function ProjectFileUploadModal({
               {queuedFiles.map((file) => (
                 <li
                   key={getFileKey(file)}
-                  className="grid grid-cols-[minmax(0,1fr)_100px_80px] items-center gap-3 px-4 py-3"
+                  className="grid grid-cols-[minmax(0,1fr)_64px_52px] items-center gap-2 px-4 py-3 sm:grid-cols-[minmax(0,1fr)_100px_80px] sm:gap-3"
                 >
                   <span className="flex min-w-0 items-center gap-2">
                     <InlineIcon svg={documentIcon} className="text-neutral-6 size-4 shrink-0" />
@@ -249,13 +249,13 @@ export default function ProjectFileUploadModal({
           )}
         </section>
 
-        <div className="mt-1 flex justify-center gap-3">
-          <Button type="submit" variant="primary" className="w-40" disabled={uploading}>
+        <div className="mt-1 flex flex-col justify-center gap-3 sm:flex-row">
+          <Button type="submit" variant="primary" className="w-full sm:w-40" disabled={uploading}>
             {uploading ? '업로드 중…' : '저장'}
           </Button>
           <Button
             variant="secondary"
-            className="w-40"
+            className="w-full sm:w-40"
             disabled={uploading}
             onClick={() => resetAndClose()}
           >

src/domains/workspace/ProjectScheduleTab.tsx

@@ -383,7 +383,7 @@ export function ProjectScheduleTab({ projectId, members }: ProjectScheduleTabPro
       {loading ? (
         <p className="text-body-sm text-neutral-6">불러오는 중…</p>
       ) : (
-        <div style={{ height: 720 }}>
+        <div className="h-[520px] sm:h-[620px] lg:h-[720px]">
           <Calendar
             month={month}
             events={events}
@@ -400,7 +400,7 @@ export function ProjectScheduleTab({ projectId, members }: ProjectScheduleTabPro
           {selectedDateSchedules.length === 0 ? (
             <p className="text-caption-lg text-neutral-6">등록된 일정이 없습니다</p>
           ) : (
-            <div className="grid grid-cols-2 gap-4">
+            <div className="grid gap-4 sm:grid-cols-2">
               {selectedDateSchedules.map((schedule) => (
                 <ScheduleDetailCard
                   key={schedule.id}

src/domains/workspace/VideoDetailHeader.tsx

@@ -48,9 +48,9 @@ export default function VideoDetailHeader({
   const headerLeftContent = useMemo(() => {
     if (!videoDetail) return null
     return (
-      <div className="flex w-full items-center justify-between gap-4">
-        <div className="flex items-center gap-2">
-          <h1 className="text-head-sm text-neutral-11 font-bold">{videoDetail.title}</h1>
+      <div className="flex w-full flex-wrap items-center justify-between gap-3">
+        <div className="flex min-w-0 items-center gap-2">
+          <h1 className="text-head-sm text-neutral-11 truncate font-bold">{videoDetail.title}</h1>
           <button
             type="button"
             onClick={toggleBookmark}
@@ -87,7 +87,7 @@ export default function VideoDetailHeader({
           </div>
         </div>
 
-        <div className="mr-4">
+        <div className="ml-auto sm:mr-4">
           <MemberListPanel
             projectId={projectId}
             members={members}
@@ -116,7 +116,7 @@ export default function VideoDetailHeader({
   const headerRightContent = useMemo(() => {
     if (!videoDetail) return null
     return (
-      <div className="flex items-center gap-4">
+      <div className="flex items-center gap-2 sm:gap-4">
         <ActionMenu
           items={[
             { action: 'edit', onClick: onEdit },

src/domains/workspace/VideoDetailView.tsx

@@ -210,7 +210,7 @@ export function VideoDetailView({
   return (
     <section className="flex flex-col gap-4">
       {headerSlot}
-      <div className="flex items-center gap-4">
+      <div className="flex flex-wrap items-center gap-x-4 gap-y-1">
         <span className="text-caption-lg text-neutral-6">
           생성일 {formatDate(videoDetail.createdAt)}
         </span>
@@ -297,7 +297,7 @@ export function VideoDetailView({
       </div>
 
       <Modal isOpen={pickerOpen} onClose={() => setPickerOpen(false)}>
-        <div className="bg-bg-primary flex w-[420px] flex-col gap-3 rounded-lg p-5">
+        <div className="bg-bg-primary flex w-[calc(100vw-32px)] max-w-[420px] flex-col gap-3 rounded-lg p-5">
           <h3 className="text-body-sm text-neutral-11 font-semibold">
             참고 파일로 연결할 파일 선택
           </h3>

src/pages/ProjectDetailPage.tsx

@@ -373,7 +373,7 @@ export default function ProjectDetailPage({ projectId, videoId = null }: Project
         </p>
       </div>
 
-      <div className="[&_[role=tab][aria-selected=true]]:border-primary w-full [&_[role=tab]]:flex-1 [&_[role=tab]]:px-0 [&_[role=tab]]:text-center [&_[role=tab]]:text-[20px] [&_[role=tab][aria-selected=true]]:border-b-[3px] [&_[role=tablist]]:w-full">
+      <div className="[&_[role=tab][aria-selected=true]]:border-primary w-full overflow-x-auto [&_[role=tab]]:shrink-0 [&_[role=tab]]:px-4 [&_[role=tab]]:text-center [&_[role=tab]]:text-base sm:[&_[role=tab]]:flex-1 sm:[&_[role=tab]]:px-0 sm:[&_[role=tab]]:text-[20px] [&_[role=tab][aria-selected=true]]:border-b-[3px] [&_[role=tablist]]:min-w-max sm:[&_[role=tablist]]:w-full sm:[&_[role=tablist]]:min-w-0">
         <Tabs tabs={DETAIL_TABS} activeTab={tab} onChange={handleTabChange} />
       </div>
 

src/pages/WorkspacePage.tsx

@@ -142,6 +142,7 @@ export default function WorkspacePage() {
                     : [{ action: 'leave', onClick: () => setLeaveTarget(project) }]
                 }
                 onClick={() => navigate(`/workspace/projects/${project.id}`)}
+                responsiveLayout
               />
             ))}
           </div>