Swim Training Program - Copy this React, Tailwind Component to your project

수영 훈련 프로그램 등록, 편집에 사용할 화면을 사용자 친화적으로 만들어줘 콘텐츠는 한국어로하고, UI는 어두운 계열의 세련된 디자인이어야해 그리고 등록하는 데이터 세트는 다음과 같아 { "trainingTitle": "${subGoalLabel} 기술 향상 프로그램", "goals": { "main": "${mainGoalLabel}", "sub": "${subGoalLabel}" }, "totalTime": "${timeText}", "totalDistance": "${distanceText}", "poolLength": "${poolLengthLabel}", "level": "${levelLabel}", "trainingSummary": "이 프로그램은 ${subGoalLabel} 기술을 크게 향상시키는 데 중점을 둡니다. 준비 운동, 메인 세트, 그리고 쿨 다운으로 구성되어 있으며, 각 요소를 집중적으로 개선합니다. 총 ${timeText} 동안 ${distanceText}를 수영하게 됩니다.", "activities": [ { "step": "준비 운동(Warm up)", "distance": "400m", "time": "15분", "details": [ { "content": "자유형으로 워밍업", "distance": "200m", "sets": 1, "restPerSet": 0, "restPerActivity": 60, "intensity": "낮음", "description": "200m를 한 세트로 자유형을 수영합니다. 편안한 페이스로 시작하여 점진적으로 속도를 높여가세요. 이 운동은 전신을 워밍업하고 심박수를 서서히 올리는 데 도움이 됩니다." }, { "content": "${subGoalLabel} 킥 (킥보드 사용)", "distance": "100m", "sets": 2, "restPerSet": 20, "restPerActivity": 60, "intensity": "중간", "description": "100m를 2세트로 나누어 킥보드를 사용해 ${subGoalLabel} 킥을 연습합니다. 각 세트 사이에 20초 휴식을 취하고, 2세트 완료 후 60초간 휴식합니다." } ] }, { "step": "메인 세트(Main Set)", "distance": "1400m", "time": "65분", "details": [ { "content": "한팔 ${subGoalLabel} 드릴", "distance": "50m", "sets": 4, "restPerSet": 20, "restPerActivity": 60, "intensity": "중간", "description": "50m를 4세트 수영합니다. 한 팔씩 번갈아가며 ${subGoalLabel} 스트로크를 연습하세요. 각 세트 사이에 20초 휴식, 4세트 완료 후 60초 휴식합니다." }, { "content": "${subGoalLabel} 타이밍 드릴", "distance": "50m", "sets": 4, "restPerSet": 20, "restPerActivity": 60, "intensity": "중간", "description": "50m를 4세트 수영하며 팔 동작과 킥의 타이밍을 맞추는 연습을 합니다. 세트 간 20초 휴식, 4세트 완료 후 60초 휴식합니다." }, { "content": "${subGoalLabel} 완영", "distance": "100m", "sets": 2, "restPerSet": 30, "restPerActivity": 90, "intensity": "높음", "description": "100m를 2세트 완전한 ${subGoalLabel}으로 수영합니다. 세트 간 30초 휴식, 2세트 후 90초 휴식합니다." } ] }, { "step": "쿨 다운(Cool Down)", "distance": "200m", "time": "10분", "details": [ { "content": "편안한 자유형", "distance": "100m", "sets": 1, "restPerSet": 0, "restPerActivity": 0, "intensity": "낮음", "description": "100m를 1세트로 편안한 페이스의 자유형을 수영합니다." }, { "content": "배영으로 천천히", "distance": "100m", "sets": 1, "restPerSet": 0, "restPerActivity": 0, "intensity": "낮음", "description": "100m를 1세트로 천천히 배영을 합니다." } ] } ] }