[#222] Style: 업로드 페이지 반응형 레이아웃 수정 (#230)

zzalmyu · Mar 22, 2024 · 05684b0 · 05684b0
1 parent 57f969e
commit 05684b0
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 11 deletions.
diff --git a/src/components/UploadZzal/ImageUpload.tsx b/src/components/UploadZzal/ImageUpload.tsx
@@ -73,7 +73,7 @@ const ImageUpload = ({ changeFile, file }: Props) => {
       className={cn(
         !file && "cursor-pointer",
         dragging ? "border-primary text-primary" : "border-text-secondary text-text-secondary",
-        "relative flex min-h-320pxr w-400pxr flex-col items-center justify-center gap-50pxr overflow-clip rounded-8pxr border-4 border-dashed text-2xl font-bold transition-colors hover:text-primary sm:min-h-400pxr",
+        "relative flex min-h-300pxr w-300pxr flex-col items-center justify-center gap-50pxr overflow-clip rounded-8pxr border-4 border-dashed text-2xl font-bold transition-colors hover:text-primary sm:min-h-400pxr sm:w-380pxr",
       )}
       onClick={handleChooseFile}
       onDrop={handleFileDrop}

diff --git a/src/routes/__root.tsx b/src/routes/__root.tsx
@@ -122,9 +122,9 @@ interface RouterContext {
 
 const RootComponent = () => {
   return (
-    <div className="relative h-screen w-screen overflow-hidden">
+    <div className="relative h-[100dvh] w-[100dvw] overflow-hidden sm:h-screen">
       <Header />
-      <div className="h-[calc(100vh-4.25rem)] sm:pb-0">
+      <div className="h-[calc(100%-4.25rem)] sm:pb-0">
         <Outlet />
       </div>
       <NavigationFooter />

diff --git a/src/routes/_authentication/upload-zzal/index.tsx b/src/routes/_authentication/upload-zzal/index.tsx
@@ -103,10 +103,10 @@ const UploadZzal = () => {
         <meta name="description" content="새로운 짤을 짤뮤니티에 업로드해보세요!" />
       </Helmet>
       <div className="flex flex-col justify-center gap-20pxr overflow-auto px-10pxr pb-60pxr pt-30pxr sm:px-100pxr sm:pb-0">
-        <div className="mb-10 text-2xl font-extrabold text-text-primary">짤 업로드</div>
+        <div className="text-xl font-extrabold text-text-primary">짤 업로드</div>
         <div className="m-auto flex w-full flex-col flex-wrap sm:mt-30pxr sm:flex-row">
-          <div className="mx-auto pb-50pxr">
-            <div className="mb-4 text-sm font-bold">
+          <div className="mx-auto mb-8">
+            <div className="mb-2 font-bold">
               업로드할 파일
               <Asterisk
                 aria-label="필수 입력 항목 표시"
@@ -117,9 +117,9 @@ const UploadZzal = () => {
             </div>
             <ImageUpload changeFile={changeFile} file={file} />
           </div>
-          <div className="mx-auto mt-10 flex min-w-440pxr flex-col sm:mt-0 sm:w-640pxr sm:px-24pxr">
+          <div className="mx-auto mt-4 flex w-full flex-col sm:mt-0 sm:w-640pxr sm:min-w-440pxr sm:px-24pxr">
             <div>
-              <div className="mb-4 text-sm font-bold">
+              <div className="mb-2 font-bold">
                 짤 제목
                 <Asterisk
                   aria-label="필수 입력 항목 표시"
@@ -128,18 +128,18 @@ const UploadZzal = () => {
                   size={16}
                 />
               </div>
-              <div className="mb-10 flex max-w-650pxr flex-wrap rounded-full border border-gray-300 py-1 pl-4 pr-2 shadow-xl">
+              <div className="mb-4 flex h-50pxr max-w-650pxr flex-wrap rounded-full border border-gray-300 py-1 pl-4 pr-2 shadow-md sm:h-60pxr sm:min-w-440pxr">
                 <input
                   id="imageTitleInput"
                   name="imageTitle"
                   onChange={handleChangeImageTitle}
                   value={imageTitle}
-                  className="z-20 min-h-12 flex-1 rounded-xl border-none bg-transparent outline-none"
+                  className="z-20 h-50pxr flex-1 rounded-xl border-none bg-transparent outline-none"
                 />
               </div>
             </div>
             <div>
-              <div className="mb-4 text-sm font-bold">
+              <div className="mb-2 font-bold">
                 태그 검색 및 추가
                 <Asterisk
                   aria-label="필수 입력 항목 표시"