Skip to content

Commit

Permalink
Merge pull request #83 from DDD-Community/feat/#58
Browse files Browse the repository at this point in the history
[feat/#58] 디자인 QA 수정
  • Loading branch information
G-hoon authored Sep 24, 2024
2 parents 9268d49 + 6494487 commit a1e9b6d
Show file tree
Hide file tree
Showing 11 changed files with 70 additions and 134 deletions.
46 changes: 31 additions & 15 deletions src/components/Crew/CrewRanking.tsx
Original file line number Diff line number Diff line change
@@ -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>
)
Expand All @@ -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>

{/* 전체 랭킹 목록 */}
Expand Down
85 changes: 0 additions & 85 deletions src/components/Crew/MyCrew/CrewRanking.tsx

This file was deleted.

6 changes: 2 additions & 4 deletions src/components/Crew/MyCrew/MyCrewRankingContainer.tsx
Original file line number Diff line number Diff line change
@@ -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"
Expand Down Expand Up @@ -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>
)
Expand Down
7 changes: 5 additions & 2 deletions src/components/Posture/GuidePopup/GuidePopupModal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
</>
)}
Expand Down
8 changes: 4 additions & 4 deletions src/components/Posture/GuidePopup/ServiceIntroduction.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
26 changes: 15 additions & 11 deletions src/components/Posture/GuidePopup/SnapshotGuide.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/layouts/AnalysisLayout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
)
Expand Down
2 changes: 1 addition & 1 deletion src/layouts/BaseLayout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/layouts/MonitoringLayout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
)
Expand Down
16 changes: 8 additions & 8 deletions src/pages/AnalysisDashboard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 />
Expand All @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions src/pages/MyCrew.tsx
Original file line number Diff line number Diff line change
@@ -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"
Expand Down Expand Up @@ -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>
Expand Down

0 comments on commit a1e9b6d

Please sign in to comment.