Merge pull request #83 from DDD-Community/feat/#58

[feat/#58] 디자인 QA 수정
DDD-Community · Sep 24, 2024 · a1e9b6d · a1e9b6d
2 parents 9268d49 + 6494487
commit a1e9b6d
Show file tree

Hide file tree

Showing 11 changed files with 70 additions and 134 deletions.
diff --git a/src/components/Crew/CrewRanking.tsx b/src/components/Crew/CrewRanking.tsx
@@ -1,41 +1,57 @@
 import Crew1stCrownIcon from "@assets/icons/crew-1st-crown.svg?react"
 
 const RankPillar = ({ rank, name, score, height }: any) => {
-  const rankStyleMap: { gap: string; bgColor: string; fontSize: string }[] = [
+  const rankStyleMap: { gap: number | string; bgColor: string; fontSize: string; fontWeight: string }[] = [
     {
-      gap: "6",
+      gap: 24,
       bgColor: "#8BBAFE",
       fontSize: "32px",
+      fontWeight: "600",
     },
     {
-      gap: "6",
+      gap: 24,
       bgColor: "#DCEBFD",
       fontSize: "22px",
+      fontWeight: "500",
     },
     {
-      gap: "4",
+      gap: 16,
       bgColor: "#DCEBFD",
       fontSize: "22px",
+      fontWeight: "500",
     },
   ]
 
   const style = rankStyleMap[rank - 1]
 
   return (
-    <div className="flex flex-col items-center text-zinc-800" style={{ height }}>
+    <div className="flex flex-col items-center text-zinc-800">
       <div
-        className={`flex w-[180px] flex-grow flex-col items-center justify-end py-6 gap-${style.gap} rounded-[12px]`}
+        className={`flex w-[180px] flex-col items-center rounded-[12px] py-6`}
         style={{
-          minHeight: "100px",
           backgroundColor: style.bgColor,
+          gap: style.gap,
+          height,
         }}
       >
-        <div className="flex flex-col items-center">
-          {rank === 1 && <Crew1stCrownIcon className="mb-2 h-6 w-6" />}
-          <div className={`font-medium text-[${rankStyleMap[rank - 1].fontSize}]`}>{rank}등</div>
+        <div className="flex flex-col items-center gap-2">
+          {rank === 1 && (
+            <div className="">
+              <Crew1stCrownIcon className="h-6 w-6" />
+            </div>
+          )}
+          <div
+            className={`font-medium`}
+            style={{
+              fontSize: style.fontSize,
+              fontWeight: style.fontWeight,
+            }}
+          >
+            {rank}등
+          </div>
         </div>
-        <div className="text-xl font-semibold">{name}</div>
-        <div className="text-[15px] font-normal ">틀어짐 {score}회</div>
+        <div className="text-[20px] font-semibold">{name}</div>
+        <div className="text-[15px] font-normal ">자세 경고 {score}회</div>
       </div>
     </div>
   )
@@ -60,9 +76,9 @@ const CrewRanking = ({ rankings, myRank }: { rankings: any[]; myRank: any }) =>
     <div className="flex h-full gap-12">
       {/* 1, 2, 3등 랭킹 */}
       <div className="flex h-full flex-1 items-end gap-3">
-        <RankPillar rank={1} name={topThree[0].name} score={topThree[0].score} height="100%" />
-        <RankPillar rank={2} name={topThree[1].name} score={topThree[1].score} height="82%" />
-        <RankPillar rank={3} name={topThree[2].name} score={topThree[2].score} height="72%" />
+        <RankPillar rank={1} name={topThree[0].name} score={topThree[0].score} height="220px" />
+        <RankPillar rank={2} name={topThree[1].name} score={topThree[1].score} height="180px" />
+        <RankPillar rank={3} name={topThree[2].name} score={topThree[2].score} height="158px" />
       </div>
 
       {/* 전체 랭킹 목록 */}

diff --git a/src/components/Crew/MyCrew/CrewRanking.tsx b/src/components/Crew/MyCrew/CrewRanking.tsx
diff --git a/src/components/Crew/MyCrew/MyCrewRankingContainer.tsx b/src/components/Crew/MyCrew/MyCrewRankingContainer.tsx
@@ -1,7 +1,7 @@
 import SendInvitationIcon from "@assets/icons/crew-send-invitation.svg?react"
 import CrewUserIcon from "@assets/icons/crew-user-icon.svg?react"
 import { Link } from "react-router-dom"
-import CrewRanking from "./CrewRanking"
+import CrewRanking from "../CrewRanking"
 
 import RoutePath from "@/constants/routes.json"
 import MyCrewHeader from "./MyCrewHeader"
@@ -58,9 +58,7 @@ export default function MyCrewRankingContainer(props: MyCrewRankingContainerProp
         </div>
 
         {/*  랭킹 표시  */}
-        <div className="mt-4 h-[220px]">
-          {ranks.length > 0 && myRank && <CrewRanking rankings={ranks} myRank={myRank} />}
-        </div>
+        <div className="mt-4">{ranks.length > 0 && myRank && <CrewRanking rankings={ranks} myRank={myRank} />}</div>
       </div>
     </div>
   )

diff --git a/src/components/Posture/GuidePopup/GuidePopupModal.tsx b/src/components/Posture/GuidePopup/GuidePopupModal.tsx
@@ -25,8 +25,11 @@ const GuidePopupModal = ({ onClose }: { onClose: () => void }): ReactElement =>
         {step === 1 && (
           <>
             <SnapshotGuide />
-            <button className="w-[354px] rounded-full bg-[#1A75FF] px-4 py-3 text-white" onClick={onClose}>
-              모니터링 시작하기
+            <button
+              className="h-[50px] w-[354px] rounded-full bg-[#1A75FF] px-[39px] py-3 text-white"
+              onClick={onClose}
+            >
+              확인
             </button>
           </>
         )}

diff --git a/src/components/Posture/GuidePopup/ServiceIntroduction.tsx b/src/components/Posture/GuidePopup/ServiceIntroduction.tsx
@@ -5,17 +5,17 @@ export default function ServiceIntroduction() {
         <div className="h-2 w-2 rounded-full bg-[#1A75FF]"></div>
         <div className="h-2 w-2 rounded-full bg-zinc-300"></div>
       </div>
-      <div className="mb-6">
-        <div className="mb-3 text-center text-[30px] font-bold leading-10 text-[#1E2535]">
+      <div className="mb-6 flex flex-col items-center">
+        <div className="mb-3 text-center text-[30px] font-bold leading-10 leading-10 text-[#1E2535]">
           자세공작소는 실시간 모니터링으로 <br />
           바른 자세 유지를 돕는 서비스입니다
         </div>
-        <span className="text-[14px] font-normal text-zinc-500">
+        <span className="text-[14px] font-normal leading-[22px] text-zinc-500">
           더 세밀한 모니터링을 위해, 최초 1회 자세 기준점 설정이 필요합니다.
         </span>
       </div>
       {/* content */}
-      <div className="mb-8 flex gap-4">
+      <div className="mb-8 flex h-[172px] gap-4">
         <div className="flex w-80 flex-col items-center rounded-[17px] bg-[#EFEFF0] px-10 py-6">
           <div className="mb-4 h-[24px] w-[24px] rounded-full bg-[#5A9CFF] text-center text-[15px] font-semibold text-white">
             1

diff --git a/src/components/Posture/GuidePopup/SnapshotGuide.tsx b/src/components/Posture/GuidePopup/SnapshotGuide.tsx
@@ -3,42 +3,46 @@ import CloseCrewPanelIcon from "@assets/images/posture-snapshot-guide.png"
 export default function SnapshotGuide() {
   return (
     <>
-      <div className="mb-6 flex gap-2">
+      <div className="mb-8 flex gap-2">
         <div className="h-2 w-2 rounded-full bg-zinc-300"></div>
         <div className="h-2 w-2 rounded-full bg-[#1A75FF]"></div>
       </div>
       <div className="mb-6">
-        <div className="mb-3 text-center text-[30px] font-bold text-[#1E2535]">바른 자세를 취해주세요</div>
+        <div className="text-center text-[30px] font-bold leading-10 text-[#1E2535]">바른 자세를 취해주세요</div>
       </div>
       {/* content */}
-      <div className="mb-8 flex items-center gap-8">
+      <div className="mb-6 flex items-center gap-8">
         <div className="flex h-[254px] w-[284px] flex-col items-center justify-end rounded-[17px] bg-[#EFEFF0]">
           <img src={CloseCrewPanelIcon} alt="스냅샷 가이드" />
         </div>
         <div className="flex flex-col gap-5">
-          <div className="flex gap-3">
+          <div className="flex items-center gap-3">
             <span className="flex h-6 w-6 justify-center rounded-full bg-[#5A9CFF] text-center font-semibold text-white">
               1
             </span>
-            <span className="font-[20px] font-semibold text-zinc-800">머리와 목을 일직선으로 곧게 펴기</span>
+            <span className="font-[20px] font-semibold leading-[30px] text-zinc-800">
+              머리와 목을 일직선으로 곧게 펴기
+            </span>
           </div>
-          <div className="flex gap-3">
+          <div className="flex items-center gap-3">
             <span className="flex h-6 w-6 justify-center rounded-full bg-[#5A9CFF] text-center font-semibold text-white">
               2
             </span>
-            <span className="font-[20px] font-semibold text-zinc-800">양쪽 어깨 일직선 유지하기</span>
+            <span className="font-[20px] font-semibold leading-[30px] text-zinc-800">양쪽 어깨 일직선 유지하기</span>
           </div>
-          <div className="flex gap-3">
+          <div className="flex items-center gap-3">
             <span className="flex h-6 w-6 justify-center rounded-full bg-[#5A9CFF] text-center font-semibold text-white">
               3
             </span>
-            <span className="font-[20px] font-semibold text-zinc-800">팔은 책상 위에 수평으로 두기</span>
+            <span className="font-[20px] font-semibold leading-[30px] text-zinc-800">팔은 책상 위에 수평으로 두기</span>
           </div>
-          <div className="flex gap-3">
+          <div className="flex items-center gap-3">
             <span className="flex h-6 w-6 justify-center rounded-full bg-[#5A9CFF] text-center font-semibold text-white">
               4
             </span>
-            <span className="font-[20px] font-semibold text-zinc-800">등과 허리는 등받이에 지지하기</span>
+            <span className="font-[20px] font-semibold leading-[30px] text-zinc-800">
+              등과 허리는 등받이에 지지하기
+            </span>
           </div>
         </div>
       </div>

diff --git a/src/layouts/AnalysisLayout.tsx b/src/layouts/AnalysisLayout.tsx
@@ -2,7 +2,7 @@ import { Outlet } from "react-router-dom"
 
 export default function AnalysisLayout() {
   return (
-    <div className="min-h-full bg-[#F9F9FD] px-28 py-12">
+    <div className="min-h-full min-w-[1216px] bg-[#F9F9FD] px-28 py-12">
       <Outlet />
     </div>
   )

diff --git a/src/layouts/BaseLayout.tsx b/src/layouts/BaseLayout.tsx
@@ -8,7 +8,7 @@ const BaseLayout: React.FC = () => {
         <SideNav />
 
         {/* Main Content */}
-        <main id="main-content" className="relative min-w-[652px] flex-1 overflow-y-auto">
+        <main id="main-content" className="relative flex-1 overflow-y-auto">
           <Outlet />
           <div id="modal-root"></div>
         </main>

diff --git a/src/layouts/MonitoringLayout.tsx b/src/layouts/MonitoringLayout.tsx
@@ -2,7 +2,7 @@ import { Outlet } from "react-router-dom"
 
 export default function MonitoringLayout() {
   return (
-    <div className="h-full bg-zinc-900 p-3">
+    <div className="h-full min-w-[652px] bg-zinc-900 p-3 ">
       <Outlet />
     </div>
   )

diff --git a/src/pages/AnalysisDashboard.tsx b/src/pages/AnalysisDashboard.tsx
@@ -99,15 +99,15 @@ const AnalysisDashboard = () => {
       {isError && <div>데이터를 불러오는 것에 실패했습니다</div>}
 
       {!isLoading && !isError && todayAnalysis && (
-        <div className=" mb-8">
+        <div className="mb-8">
           <div className="flex">
             {/* 고정된 전체 틀어짐 횟수 카드 */}
             <div className="relative">
               <div className="mr-[15px] flex h-[266px] w-[230px] flex-col items-center rounded-lg bg-zinc-800 text-white">
-                <p className="mt-8 text-sm text-[#5A9CFF]">전체 자세 경고 횟수</p>
-                <div className="mt-2 flex items-center">
-                  <span className="text-4xl font-bold">{totalCount}</span>
-                  <span className="ml-1 text-sm">회</span>
+                <span className="mt-8 text-[15px] text-[#5A9CFF]">전체 자세 경고 횟수</span>
+                <div className="flex items-center gap-1">
+                  <span className="text-[40px] font-medium">{totalCount}</span>
+                  <span className="text-[15px] font-semibold">회</span>
                 </div>
                 <div className="absolute bottom-[25px] flex h-24 justify-center">
                   <TotalCountChartIcon />
@@ -133,10 +133,10 @@ const AnalysisDashboard = () => {
                     <div className="relative overflow-hidden rounded-lg bg-gray-100">
                       <img src={image} alt={title} className="h-full w-full" />
                       <div className="absolute inset-0 flex flex-col items-center pt-8 text-black">
-                        <p className="text-lg font-semibold">{title}</p>
+                        <span className="text-[15px] font-semibold">{title}</span>
                         <div className="flex items-center gap-1">
-                          <div className="mb-2 pt-2 text-4xl font-bold">{getPoseCount(type)}</div>
-                          <div className="text-lg">회</div>
+                          <div className="text-[40px] font-medium">{getPoseCount(type)}</div>
+                          <div className="text-[15px] font-semibold">회</div>
                         </div>
                       </div>
                     </div>

diff --git a/src/pages/MyCrew.tsx b/src/pages/MyCrew.tsx
@@ -1,4 +1,4 @@
-import CrewRanking from "@/components/Crew/MyCrew/CrewRanking"
+import CrewRanking from "@/components/Crew/CrewRanking"
 import MyCrewHeader from "@/components/Crew/MyCrew/MyCrewHeader"
 import { useModals } from "@/hooks/useModals"
 import useMyGroup from "@/hooks/useMyGroup"
@@ -106,7 +106,7 @@ export default function MyCrew() {
       {/*  랭킹 헤더  */}
       <div className="mt-10">
         <div className="flex items-center justify-between">
-          <span className="text-xl font-semibold text-zinc-700">바른자세 랭킹</span>
+          <span className="text-[20px] font-semibold text-zinc-700">바른자세 랭킹</span>
           <div className="flex gap-2 text-[13px] font-normal text-zinc-400">
             <span>최근 1시간</span>
             <span>|</span>