refactor: tab 스타일 수정

prgrms-web-devcourse · Nov 28, 2023 · b26782a · b26782a
1 parent 9bb7ba5
commit b26782a
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 4 deletions.
diff --git a/src/pages/CreatedReviewManagePage/components/Tabs/index.tsx b/src/pages/CreatedReviewManagePage/components/Tabs/index.tsx
@@ -9,11 +9,11 @@ interface TabsProps {
 }
 
 const Tabs = ({ activeTab, setActiveTab }: TabsProps) => {
-  const tabBorder = `after:absolute after:bottom-0 after:h-1 after:w-full after:bg-white after-duration-[400ms] after:content-[''] after:transition-transform after:scale-x-[0.25] after:rounded-full ${REVIEW_MANAGE_TAB_MENU_STYLE[activeTab]}`
+  const tabBorder = `after:absolute after:bottom-0 after:h-1 after:w-full after:bg-white after-duration-[400ms] after:content-[''] after:transition-transform after:scale-x-[0.25] after:rounded-full ${REVIEW_MANAGE_TAB_MENU_STYLE[activeTab]} w-full`
 
   return (
     <div
-      className={`relative flex h-11 bg-main-red-300 text-lg text-white md:h-[3.125rem] md:text-2xl ${tabBorder} shadow-md`}
+      className={`relative m-0 flex h-11 max-w-[55rem]  justify-between bg-main-red-300 text-lg text-white md:h-[3.125rem] md:text-2xl ${tabBorder} shadow-md`}
     >
       <button className="grow" onClick={() => setActiveTab('responser')}>
         {REVIEW_MANAGE_TAB_TITLE.responser}

diff --git a/src/pages/CreatedReviewManagePage/index.tsx b/src/pages/CreatedReviewManagePage/index.tsx
@@ -121,10 +121,12 @@ const CreatedReviewManagePage = () => {
     <div className="flex h-auto min-h-screen w-full flex-col bg-main-ivory text-black dark:bg-main-red-100 dark:text-white">
       <div className="sticky top-0">
         <Header />
-        <Tabs activeTab={activeTab} setActiveTab={setActiveTab} />
+        <div className="flex  justify-center bg-main-red-300 text-center text-lg text-white">
+          <Tabs activeTab={activeTab} setActiveTab={setActiveTab} />
+        </div>
       </div>
 
-      <div className="mx-auto flex w-full max-w-[800px] flex-col px-5 py-7 md:p-10">
+      <div className="mx-auto flex w-full max-w-[55rem] flex-col px-5 py-7 md:p-10">
         <h1 className="text-xl md:text-2xl">{getReviewQuestion?.title}</h1>
         <h2 className="mt-3 text-sm md:mt-4 md:text-xl">
           {getReviewQuestion?.description}