Merge pull request #187 from part3-4team-Taskify/minji

ozen0718 · web-flow · commit bbc969c7d398 · 2025-04-09T15:54:40.000+09:00
[Refactor, Style] mypage, edit: 뒤로가기 버튼 분리, 여백 통일 / landing: 반응형 디자인 일부 수정
diff --git a/src/components/button/BackButton.tsx b/src/components/button/BackButton.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+import Image from "next/image";
+
+const BackButton = () => {
+  return (
+    <div className="flex gap-[8px]">
+      <Image
+        onClick={() => history.back()}
+        src="/svgs/arrow-backward-black.svg"
+        alt="돌아가기"
+        width={20}
+        height={20}
+        className="cursor-pointer"
+      />
+      <button
+        onClick={() => history.back()}
+        className="flex justify-start text-black3 text-[14px] sm:text-[16px] font-medium cursor-pointer"
+      >
+        돌아가기
+      </button>
+    </div>
+  );
+};
+
+export default BackButton;
diff --git a/src/components/card/ChangePassword.tsx b/src/components/card/ChangePassword.tsx
@@ -49,7 +49,7 @@ export default function ChangePassword() {
 
   return (
     <div
-      className="flex flex-col w-[284px] sm:w-[548px] md:w-[672px] min:h-[454px] sm:min-h-[466px]
+      className="flex flex-col w-[284px] sm:w-[544px] lg:w-[620px] min:h-[454px] sm:min-h-[466px]
      bg-white rounded-[16px] p-[24px]"
     >
       <h2 className="text-black3 text-[18px] sm:text-[24px] font-bold mb-4">
diff --git a/src/components/card/Profile.tsx b/src/components/card/Profile.tsx
@@ -76,7 +76,7 @@ export default function ProfileCard() {
   }, []);
 
   return (
-    <div className="flex flex-col w-[284px] sm:w-[548px] md:w-[672px] h-[496px] sm:h-[366px] bg-white rounded-[16px] p-[24px]">
+    <div className="flex flex-col w-[284px] sm:w-[544px] lg:w-[620px] h-[496px] sm:h-[366px] bg-white rounded-[16px] p-[24px]">
       {/* 프로필 제목 */}
       <h2 className="text-black3 text-[18px] sm:text-[24px] font-bold mb-4">
         프로필
@@ -109,7 +109,7 @@ export default function ProfileCard() {
         </div>
 
         {/* 입력 폼 */}
-        <div className="flex flex-col sm:ml-[-15px] sm:mt-0 mt-5 w-[252px] sm:w-[276px] md:w-[400px] gap-4">
+        <div className="flex flex-col sm:ml-[-15px] sm:mt-0 mt-5 w-[252px] sm:w-[272px] lg:w-[348px] gap-4">
           <Input
             type="email"
             name="email"
@@ -129,7 +129,7 @@ export default function ProfileCard() {
             className="text-black4"
           />
           <button
-            className="cursor-pointer w-[252px] sm:w-[276px] md:w-[400px] h-[54px] bg-[var(--primary)] text-white rounded-[8px] text-lg font-medium mt-3"
+            className="cursor-pointer w-[252px] sm:w-[272px] lg:w-[348px] h-[54px] bg-[var(--primary)] text-white rounded-[8px] text-lg font-medium mt-3"
             onClick={handleSave}
           >
             저장
diff --git a/src/components/landing/LandingMain.tsx b/src/components/landing/LandingMain.tsx
@@ -9,7 +9,7 @@ export default function LandingMain() {
       <Section1 />
 
       {/* Section2와 Section3 영역 */}
-      <div className="mt-[184px] mb-[160px] w-full max-w-[1200px] flex flex-col items-center">
+      <div className="md:mt-[180px] mt-[80px] md:mb-[160px] mb-[80px] w-full max-w-[1200px] flex flex-col items-center">
         {/* Section2: 우선순위 & 해야 할 일 등록 */}
         <Section2 />
 
diff --git a/src/components/landing/Section1.tsx b/src/components/landing/Section1.tsx
@@ -32,11 +32,11 @@ export default function Section1() {
       </div>
 
       {/* 메인 타이틀 */}
-      <div className="mt-[48px] sm:mt-[26px]">
-        <span className="text-[56px] font-bold leading-[72px] tracking-[-2px] sm:text-[40px] sm:leading-[48px]">
+      <div className="mt-[26px] sm:mt-[60px] text-center">
+        <span className="text-[40px] sm:text-[56px] md:text-[76px] font-bold leading-[48px] sm:leading-[72px] tracking-[-2px]">
           새로운 일정 관리{" "}
         </span>
-        <span className="text-[70px] font-bold leading-[70px] tracking-[-1px] text-[var(--primary)] sm:text-[42px] sm:leading-[51px]">
+        <span className="text-[42px] sm:text-[70px] md:text-[90px] font-bold leading-[51px] sm:leading-[70px] tracking-[-1px] text-[var(--primary)]">
           Taskify
         </span>
       </div>
diff --git a/src/components/landing/Section2.tsx b/src/components/landing/Section2.tsx
@@ -2,12 +2,12 @@ import Image from "next/image";
 
 export default function Section2() {
   return (
-    <section className="flex flex-col items-center w-full px-4 gap-[80px]">
+    <section className="flex flex-col items-center w-full px-4 sm:gap-[80px] gap-[60px]">
       {/* 카드 1 */}
-      <div className="w-full max-w-[1200px] h-[600px] bg-[var(--color-black3)] rounded-lg relative flex flex-col md:flex-row gap-[40px] overflow-hidden">
+      <div className="w-full max-w-[1200px] h-[600px] bg-[var(--color-black2)] rounded-lg relative flex flex-col md:flex-row gap-[40px] overflow-hidden">
         {/* 텍스트 왼쪽 */}
         <div className="w-full md:w-1/2 flex flex-col justify-center px-[40px] text-center md:text-left z-10">
-          <p className="text-[16px] md:text-[22px] text-[var(--color-gray3)] mb-[40px] md:mb-[100px]">
+          <p className="text-[16px] md:text-[22px] text-[var(--color-gray2)] mb-[40px] md:mb-[100px] md:mt-0 mt-[50px]">
             Point 1
           </p>
           <div className="text-[32px] md:text-[48px] font-bold leading-[44px] md:leading-[64px] text-[var(--color-white)]">
@@ -29,10 +29,10 @@ export default function Section2() {
       </div>
 
       {/* 카드 2 */}
-      <div className="w-full max-w-[1200px] h-[600px] bg-[var(--color-black3)] rounded-lg relative flex flex-col md:flex-row-reverse gap-[40px] overflow-hidden">
+      <div className="w-full max-w-[1200px] h-[600px] bg-[var(--color-black2)] rounded-lg relative flex flex-col md:flex-row-reverse gap-[40px] overflow-hidden">
         {/* 텍스트 */}
         <div className="w-full md:w-1/2 flex flex-col justify-center px-[40px] text-center md:text-left z-10">
-          <p className="text-[14px] md:text-[16px] text-[var(--color-gray3)] mb-[40px] md:mb-[100px]">
+          <p className="text-[14px] md:text-[16px] text-[var(--color-gray2)] mb-[40px] md:mb-[100px] md:mt-0 mt-[50px]">
             Point 2
           </p>
           <div className="text-[32px] md:text-[48px] font-bold leading-[44px] md:leading-[64px] text-[var(--color-white)]">
diff --git a/src/components/landing/Section3.tsx b/src/components/landing/Section3.tsx
@@ -29,7 +29,7 @@ export default function Section3({
       {/* 상단 이미지 영역 */}
       <div
         className={clsx(
-          "bg-[var(--color-black3)] flex justify-center items-center min-h-[180px]",
+          "bg-[var(--color-black4)] flex justify-center items-center min-h-[180px]",
           paddingClasses
         )}
       >
diff --git a/src/components/modal/ChangeBebridge.tsx b/src/components/modal/ChangeBebridge.tsx
@@ -71,14 +71,14 @@ const ChangeBebridge = () => {
 
   return (
     <div className="lg:w-[620px] lg:h-[344px] sm:w-[544px] sm:h-[344px] w-[284px] h-[312px] bg-white sm:rounded-[16px] rounded-[8px] p-[24px] flex flex-col">
-      <h2 className="text-sm sm:text-[24px] font-bold">
+      <h2 className="text-black3 text-[20px] sm:text-[24px] font-bold">
         {dashboardDetail.title}
       </h2>
       <Input
         type="text"
         onChange={setTitle}
         label="대시보드 이름"
-        labelClassName="text-[16px] sm:text-[18px] text-black3 mt-6"
+        labelClassName="text-black3 text-[16px] sm:text-[18px] font-medium mt-6"
         placeholder="뉴프로젝트"
         className="max-w-[620px] mb-1"
       />
diff --git a/src/components/table/InviteRecords.tsx b/src/components/table/InviteRecords.tsx
@@ -103,7 +103,7 @@ const InviteRecords = ({ dashboardId }: { dashboardId: string }) => {
     <div className="lg:w-[620px] w-[284px] sm:w-[544px] min:h-[337px] sm:h-[430px] relative p-6 rounded-lg bg-white">
       <div className="flex justify-between items-start sm:items-center">
         {/* 제목 */}
-        <p className="md:text-[24px] text-[20px] text-xl font-bold">
+        <p className="text-black3 text-[20px] sm:text-[24px] font-bold">
           초대 내역
         </p>
 
diff --git a/src/components/table/invited/InvitedDashBoard.tsx b/src/components/table/invited/InvitedDashBoard.tsx
@@ -104,7 +104,7 @@ function InvitedList({
       )}
 
       {/* 리스트 */}
-      <div className="scroll-area h-[150vw] max-h-[570px] sm:max-h-[320px] lg:max-h-[400px] overflow-y-auto overflow-x-hidden">
+      <div className="scroll-area h-[150vw] max-h-[570px] sm:max-h-[320px] lg:max-h-[280px] overflow-y-auto overflow-x-hidden">
         {filteredData.length > 0 ? (
           filteredData.map((invite, index) => (
             <div
@@ -274,7 +274,7 @@ export default function InvitedDashBoard() {
       {invitationArray.length === 0 ? (
         <EmptyInvitations />
       ) : (
-        <div className="relative bg-white rounded-lg shadow-md w-[260px] sm:w-[504px] lg:w-[1022px] h-[770px] sm:h-[592px] lg:h-[620px] max-w-none">
+        <div className="relative bg-white rounded-lg shadow-md w-[260px] sm:w-[504px] lg:w-[1022px] h-[770px] sm:h-[592px] lg:h-[500px] max-w-none">
           <div className="flex flex-col p-6 w-full h-[104px]">
             <div className="flex flex-col w-full sm:w-[448px] lg:w-[966px] gap-[24px]">
               <p className="text-black3 text-[16px] sm:text-[20px] font-bold">
diff --git a/src/components/table/member/MemberList.tsx b/src/components/table/member/MemberList.tsx
@@ -64,7 +64,9 @@ const MemberList: React.FC<HeaderBebridgeProps> = ({ dashboardId }) => {
   return (
     <div className="lg:w-[620px] lg:h-[404px] w-[284px] min:h-[337px] sm:w-[544px] sm:h-[404px] relative p-6 rounded-lg bg-white">
       <div className="flex justify-between items-center">
-        <p className="text-xl sm:text-2xl font-bold">구성원</p>
+        <p className="text-black3 text-[20px] sm:text-[24px] font-bold">
+          구성원
+        </p>
         <Pagination
           currentPage={currentPage}
           totalPages={totalPages}
diff --git a/src/pages/dashboard/[dashboardId]/edit.tsx b/src/pages/dashboard/[dashboardId]/edit.tsx
@@ -6,7 +6,7 @@ import HeaderDashboardEdit from "@/components/gnb/HeaderDashboard";
 import MemberList from "@/components/table/member/MemberList";
 import SideMenu from "@/components/sideMenu/SideMenu";
 import InviteRecords from "@/components/table/InviteRecords";
-import Image from "next/image";
+import BackButton from "@/components/button/BackButton";
 import { getDashboards } from "@/api/dashboards";
 import DeleteDashboardModal from "@/components/modal/DeleteDashboardModal";
 import { DashboardType } from "@/types/task";
@@ -23,11 +23,6 @@ export default function EditDashboard() {
     ? dashboardId[0]
     : dashboardId;
 
-  /* 돌아가기 버튼 */
-  const goToDashboard = () => {
-    router.back();
-  };
-
   /* 대시보드 삭제 모달 */
   const openModal = () => {
     setIsModalOpen(true);
@@ -69,45 +64,26 @@ export default function EditDashboard() {
         <HeaderDashboardEdit variant="edit" dashboardId={dashboardId} />
 
         <div
-          className="overflow-auto flex-1 px-6 pt-[10px] pb-10"
+          className="overflow-auto flex-1 px-6 pt-6 pb-10"
           style={{ backgroundColor: "#F5F2FC" }}
         >
-          <div className="mt-6">
-            <button
-              onClick={goToDashboard}
-              className="cursor-pointer flex items-center gap-2"
-            >
-              <Image
-                src="/svgs/arrow-backward-black.svg"
-                alt="돌아가기"
-                width={20}
-                height={20}
-              />
-              돌아가기
-            </button>
-          </div>
+          <BackButton />
 
-          <div className="my-5">
+          {/* 백버튼 아래 전체 아이템 컨테이너 */}
+          <div className="flex flex-col items-center lg:items-start mt-6 gap-6">
             <ChangeBebridge />
-          </div>
-
-          {/* MemberList는 아래쪽에 배치 */}
-          <div className="">
+            {/* MemberList는 아래쪽에 배치 */}
             <MemberList dashboardId={dashboardId} />
-          </div>
-
-          <div className="my-5">
             <InviteRecords dashboardId={dashboardIdString || ""} />{" "}
             {/* undefined일 경우 빈 문자열로 전달*/}
-          </div>
-          <div className="flex mt-6 sm:mt-0">
-            <button
-              onClick={openModal}
-              className="text-base sm:text-lg cursor-pointer w-[284px] h-[52px] sm:w-[320px] sm:h-[62px] text-black3 rounded-[8px] border-[1px] border-[var(--color-gray3)] hover:scale-105 transition-transform duration-200"
-            >
-              대시보드 삭제하기
-            </button>
-
+            <div className="flex mt-6 sm:mt-0">
+              <button
+                onClick={openModal}
+                className="text-base sm:text-lg cursor-pointer w-[284px] h-[52px] sm:w-[320px] sm:h-[62px] text-black3 rounded-[8px] border-[1px] border-[var(--color-gray3)] hover:scale-105 transition-transform duration-200"
+              >
+                대시보드 삭제하기
+              </button>
+            </div>
             {isModalOpen && (
               <DeleteDashboardModal
                 isOpen={isModalOpen}
diff --git a/src/pages/dashboard/[dashboardId]/index.tsx b/src/pages/dashboard/[dashboardId]/index.tsx
@@ -113,7 +113,7 @@ export default function Dashboard() {
 
         <main
           className="flex flex-1 flex-col min-h-0 lg:flex-row overflow-y-auto
-        bg-white pl-6 py-6"
+        bg-white px-6 py-6"
         >
           {/* 칼럼 가로 스크롤 영역 */}
           <div
diff --git a/src/pages/mydashboard.tsx b/src/pages/mydashboard.tsx
@@ -130,7 +130,7 @@ export default function MyDashboardPage() {
   }
 
   return (
-    <div className="flex h-screen overflow-hidden">
+    <div className="flex h-screen overflow-hidden bg-[var(--color-violet5)]">
       <SideMenu
         teamId={TEAM_ID}
         dashboardList={dashboardList}
@@ -144,7 +144,7 @@ export default function MyDashboardPage() {
           onToggleEditMode={() => setIsEditMode((prev) => !prev)}
         />
 
-        <main className="flex-col overflow-auto px-[25px] py-5 sm:py-10 bg-[#F5F2FC]">
+        <main className="flex-col overflow-auto px-6 py-5 sm:py-10 bg-[#F5F2FC]">
           {/* 검색 입력창 */}
           <section className="w-full overflow-hidden transition-all">
             <div className="min-w-0 w-full max-w-[260px] md:max-w-[247px] lg:max-w-[332px] mb-3">
diff --git a/src/pages/mypage.tsx b/src/pages/mypage.tsx
@@ -1,11 +1,11 @@
 import React, { useState, useEffect } from "react";
 import { useRouter } from "next/router";
 import { useAuthGuard } from "@/hooks/useAuthGuard";
-import Image from "next/image";
 import HeaderMyPage from "@/components/gnb/HeaderDashboard";
 import SideMenu from "@/components/sideMenu/SideMenu";
 import ProfileCard from "@/components/card/Profile";
 import ChangePassword from "@/components/card/ChangePassword";
+import BackButton from "@/components/button/BackButton";
 import { Dashboard, getDashboards } from "@/api/dashboards";
 import { TEAM_ID } from "@/constants/team";
 import LoadingSpinner from "@/components/common/LoadingSpinner";
@@ -43,32 +43,12 @@ export default function MyPage() {
       />
       <div className="flex flex-col flex-1 overflow-hidden bg-[#F5F2FC]">
         <HeaderMyPage variant="mypage" />
-        <div className="flex flex-col justify-start overflow-auto w-full px-6 mt-6">
-          {/*돌아가기 버튼*/}
-          <div className="flex gap-[8px]">
-            <Image
-              onClick={() => router.back()}
-              src="/svgs/arrow-backward-black.svg"
-              alt="돌아가기"
-              width={20}
-              height={20}
-              className="cursor-pointer"
-            />
-            <button
-              onClick={() => router.back()}
-              className="flex justify-start text-black3 cursor-pointer"
-            >
-              돌아가기
-            </button>
-          </div>
-
-          <div className="flex flex-col items-center lg:items-start gap-6">
-            <div className="mt-8">
-              <ProfileCard />
-            </div>
-            <div className="mb-20">
-              <ChangePassword />
-            </div>
+        <div className="flex flex-col justify-start overflow-auto w-full px-6 mt-6 pb-10">
+          <BackButton />
+          {/* 백버튼 아래 전체 아이템 컨테이너 */}
+          <div className="flex flex-col items-center lg:items-start mt-6 gap-6">
+            <ProfileCard />
+            <ChangePassword />
           </div>
         </div>
       </div>

Original file line number	Diff line number	Diff line change
`@@ -49,7 +49,7 @@ export default function ChangePassword() {`
`49`	`49`
`50`	`50`	`return (`
`51`	`51`	`<div`
`52`		`- className="flex flex-col w-[284px] sm:w-[548px] md:w-[672px] min:h-[454px] sm:min-h-[466px]`
	`52`	`+ className="flex flex-col w-[284px] sm:w-[544px] lg:w-[620px] min:h-[454px] sm:min-h-[466px]`
`53`	`53`	`bg-white rounded-[16px] p-[24px]"`
`54`	`54`	`>`
`55`	`55`	`<h2 className="text-black3 text-[18px] sm:text-[24px] font-bold mb-4">`
Original file line number	Diff line number	Diff line change
`@@ -29,7 +29,7 @@ export default function Section3({`
`29`	`29`	`{/* 상단 이미지 영역 */}`
`30`	`30`	`<div`
`31`	`31`	`className={clsx(`
`32`		`- "bg-[var(--color-black3)] flex justify-center items-center min-h-[180px]",`
	`32`	`+ "bg-[var(--color-black4)] flex justify-center items-center min-h-[180px]",`
`33`	`33`	`paddingClasses`
`34`	`34`	`)}`
`35`	`35`	`>`