[ui] 웹 화면에서 모바일 비율 고정, ui일부 수정

Nal-see · Apr 21, 2024 · 314eef9 · 314eef9
1 parent 2eeb3ae
commit 314eef9
Show file tree

Hide file tree

Showing 13 changed files with 41 additions and 21 deletions.
diff --git a/src/components/NalSeeNavbar.tsx b/src/components/NalSeeNavbar.tsx
@@ -3,7 +3,7 @@ import { NalseeLogo } from './Icon';
 
 const Navbar: React.FC = () => {
   return (
-    <nav className="sticky top-0 z-0 w-screen bg-white">
+    <nav className="sticky top-0 z-0 w-full bg-white">
       <div className="ml-5 flex size-20 items-center justify-center">
         <NalseeLogo />
       </div>

diff --git a/src/features/Chat/ChatRoom.tsx b/src/features/Chat/ChatRoom.tsx
@@ -107,9 +107,9 @@ const ChatRoomPage = () => {
   };
 
   return (
-    <div className="relative flex h-screen flex-1 flex-col overflow-y-scroll">
+    <div className="relative flex h-screen flex-col overflow-y-scroll scrollbar-hide">
       <BackBtnHeader title="메시지" />
-      <div className="flex-1 overflow-y-auto px-3">
+      <div className="flex-1 overflow-y-auto px-3 scrollbar-hide">
         {messages.map((data, index) => (
           <ChatBubble
             key={index}
@@ -157,7 +157,7 @@ const ChatRoomPage = () => {
         />
         <button
           type="submit"
-          className="ml-3 rounded-full bg-accent p-2 text-white active:bg-sky-500"
+          className="ml-3 rounded-full bg-accent p-2 pr-[10px] text-white active:bg-sky-500"
           disabled={isReadOnly}
         >
           <FiSend size={24} />

diff --git a/src/features/Feed/FeedPage.tsx b/src/features/Feed/FeedPage.tsx
@@ -4,7 +4,7 @@ import Navbar from '../../components/NalSeeNavbar';
 const FeedListPage = () => {
   console.log('FeedListPage');
   return (
-    <div className="flex flex-1 flex-col items-center">
+    <div className="flex w-dvw flex-col items-center sm:w-[400px]">
       <Navbar />
       <FeedList />
     </div>

diff --git a/src/features/Feed/components/FeedCard/FeedCard.tsx b/src/features/Feed/components/FeedCard/FeedCard.tsx
@@ -40,14 +40,14 @@ const FeedListCard: React.FC<FeedCardProps> = ({ feed }) => {
       : feed?.content.slice(0, maxContentLength);
 
   return (
-    <div className="mb-3 w-[45dvw]">
+    <div className="mb-3 w-[45dvw] sm:w-[180px]">
       <div onClick={moveToDetailPage} className="cursor-pointer">
         <div className="relative">
           <Carousel className="w-full" setApi={setApi}>
             <CarouselContent>
               {feed.pictureList.map((picture, index) => (
                 <CarouselItem key={index}>
-                  <div className="relative h-[60dvw]">
+                  <div className="relative h-[60dvw] sm:h-[240px]">
                     <img
                       className="absolute left-0 top-0 size-full rounded-md object-cover"
                       src={picture}

diff --git a/src/features/Feed/components/FeedCard/FeedDetailCard.tsx b/src/features/Feed/components/FeedCard/FeedDetailCard.tsx
@@ -133,7 +133,7 @@ const FeedDetailCard: React.FC<FeedCardProps> = ({ feed, onUpdateSuccess }) => {
           <CarouselContent>
             {feed.postResponseDto.pictureList.map((picture, index) => (
               <CarouselItem key={index}>
-                <div className="relative h-[calc(100dvw*4/3)]">
+                <div className="relative h-[calc(100dvw*4/3)] sm:h-[calc(400px/3*4)]">
                   <img
                     className="absolute left-0 top-0 size-full object-cover"
                     src={picture}

diff --git a/src/features/Feed/components/comment/CommentSheet.tsx b/src/features/Feed/components/comment/CommentSheet.tsx
@@ -108,9 +108,9 @@ const CommentSheet: React.FC<CommentSheetProps> = ({
           />
           <button
             type="submit"
-            className="ml-3 rounded-full bg-blue-500 p-2 text-white hover:bg-blue-700"
+            className="ml-3 rounded-full bg-accent p-2 pr-[10px] text-white"
           >
-            <FiSend size={14} />
+            <FiSend size={20} />
           </button>
         </StyledForm>
       </BottomSheet>

diff --git a/src/features/Home/PostGroupListDrawer.tsx b/src/features/Home/PostGroupListDrawer.tsx
@@ -72,8 +72,8 @@ const PostGroupListDrawer = () => {
               {data.data.results.map((post: PostResponseDto) => (
                 <FeedListCard key={post.id} feed={post} />
               ))}
-              <div className="flex w-[45dvw] flex-col gap-3">
-                <div className="border-primary-foreground/50 flex h-[60dvw] flex-row items-end justify-between rounded-md border bg-gradient-to-t from-[#F5F6F7] to-accent-foreground">
+              <div className="flex w-[45dvw] flex-col gap-3 sm:w-[180px]">
+                <div className="border-primary-foreground/50 flex h-[60dvw] flex-row items-end justify-between rounded-md border bg-gradient-to-t from-[#F5F6F7] to-accent-foreground sm:h-[240px]">
                   <div className="ml-3 w-[70px]">
                     <img src={SplashMan} className="drop-shadow-md" />
                   </div>

diff --git a/src/features/Posts/PostCreate.tsx b/src/features/Posts/PostCreate.tsx
@@ -178,11 +178,11 @@ const PostCreatePage = () => {
           <div className="h-[calc(100dvh-158px)] overflow-auto scrollbar-hide">
             {/* STEP 1 : 사진 선택 */}
             {currentStep === 0 && (
-              <div className="flex h-[calc(100dvh-158px)] flex-col items-center gap-3 p-4 min-h-690:justify-center max-h-689:justify-start">
+              <div className="flex h-[calc(100dvh-158px)] flex-col items-center gap-3 p-4 min-h-790:justify-center max-h-789:justify-start">
                 {/* 사진 업로드를 위한 File Input */}
                 <div>
                   <label htmlFor="photos">
-                    <div className="inline-flex h-10 w-[calc(100dvw/3)] items-center justify-center gap-1 whitespace-nowrap rounded-md bg-accent px-4 py-2 text-sm font-medium text-white shadow-sm">
+                    <div className="inline-flex h-10 w-[calc(100dvw/3)] items-center justify-center gap-1 whitespace-nowrap rounded-md bg-accent px-4 py-2 text-sm font-medium text-white shadow-sm sm:w-[calc(400px/3)]">
                       <AddOutline fontSize={14} />
                       <p>사진 선택하기</p>
                     </div>
@@ -206,7 +206,7 @@ const PostCreatePage = () => {
                     />
                   ))}
                   {!croppedImgFiles.length && (
-                    <div className="flex h-[calc(100dvw/9*4)] w-[calc(100dvw/3)] flex-col items-center justify-center gap-1 border border-primary-foreground bg-[#E2E6E9] text-primary-foreground">
+                    <div className="flex h-[calc(100dvw/9*4)] w-[calc(100dvw/3)] flex-col items-center justify-center gap-1 border border-primary-foreground bg-[#E2E6E9] text-primary-foreground sm:h-[calc(400px/9*4)] sm:w-[calc(400px/3)]">
                       <MdAddPhotoAlternate size={30} />
                       <p className="px-2 text-center text-primary-foreground">
                         사진은 총 3장

diff --git a/src/features/Posts/components/PostImagePreview.tsx b/src/features/Posts/components/PostImagePreview.tsx
@@ -23,7 +23,7 @@ const PostImagePreview = ({ file, onRemove }: IPostImagePreviewProps) => {
   }, []);
 
   return (
-    <div className="relative inline-flex h-[calc(100dvw/9*4)] w-[calc(100dvw/3)] border-2 border-black">
+    <div className="relative inline-flex h-[calc(100dvw/9*4)] w-[calc(100dvw/3)] border-2 border-black sm:h-[calc(400px/9*4)] sm:w-[calc(400px/3)]">
       <img src={imgPath} className="object-cover" />
       <button
         onClick={removeImg}

diff --git a/src/features/Profile/MyProfile.tsx b/src/features/Profile/MyProfile.tsx
@@ -121,7 +121,7 @@ const MyProfilePage = () => {
 
   if (isLoading) {
     return (
-      <div className="flex h-[calc(100dvh-80px)] flex-col overflow-y-scroll">
+      <div className="flex h-[calc(100dvh-80px)] flex-col overflow-y-scroll scrollbar-hide">
         <BackBtnHeader title="내 프로필" />
         <ProfileHeaderSkeleton />
         <Skeleton className=" mb-3 ml-8 h-8 w-1/12 rounded-md font-bold text-secondary-foreground" />
@@ -134,7 +134,7 @@ const MyProfilePage = () => {
   }
 
   return (
-    <div className="flex h-[calc(100dvh-80px)] flex-col gap-1 overflow-y-scroll">
+    <div className="flex h-[calc(100dvh-80px)] flex-col gap-1 overflow-y-scroll scrollbar-hide">
       <BackBtnHeader title="내 프로필" />
       {userData && <ProfileHeader userProfileData={userData.results} />}
       <BottomSheet

diff --git a/src/global.css b/src/global.css
@@ -135,3 +135,22 @@ textarea:not([rows]) {
 :target {
   scroll-margin-block: 5ex;
 }
+
+/* react-spring-bottom-sheet */
+:root {
+  --rsbs-backdrop-bg: rgba(0, 0, 0, 0.6);
+  --rsbs-bg: #ffffff;
+  --rsbs-handle-bg: #31313a;
+  --rsbs-max-w: auto;
+  --rsbs-ml: env(safe-area-inset-left);
+  --rsbs-mr: env(safe-area-inset-right);
+  --rsbs-overlay-rounded: 16px;
+}
+
+@media (min-width: 640px) {
+  :root {
+    --rsbs-max-w: 400px;
+    --rsbs-ml: auto;
+    --rsbs-mr: auto;
+  }
+}
diff --git a/src/routes/PrivateRoute.tsx b/src/routes/PrivateRoute.tsx
@@ -20,7 +20,7 @@ const PrivateRoute = () => {
   }, []);
 
   return userData ? (
-    <div className="flex h-dvh flex-col">
+    <div className="flex h-dvh w-dvw flex-col sm:mx-auto sm:w-[400px]">
       <Outlet />
       <Tabbar />
     </div>

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -19,8 +19,9 @@ export const theme = {
   },
   extend: {
     screens: {
-      'min-h-690': { raw: '(min-height: 690px)' },
-      'max-h-689': { raw: '(max-height: 689px)' },
+      sm: '500px',
+      'min-h-790': { raw: '(min-height: 790px)' },
+      'max-h-789': { raw: '(max-height: 789px)' },
     },
     colors: {
       border: 'hsl(var(--border))',