-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* feat: 리스트 클릭시 색상 변경 및 취소가능하도록 추가 * refactor: map 분리 * refactor: camera 컴포넌트 분리 * remove: 사용하지 않는 파일 제거 * fix: 타입문제 해결 * feat: 동영상 플레이어 추가 * feat: 비디오 열릴시 다른 요소와의 상호작용 막음 * fix: 확대 상태에서 비디오를 켤시 비디오가 확대상태인 문제 해결 * fix: 핀치 및 드래그시 가장자리 벗어나지 못하도록 사용성 개선 * feat: slop 상태 페이지 생성 * feat: 슬로프 운행 현황 리스트 퍼블리싱 * feat: 전역 폰트 적용 * fix: 디자인 퍼블리싱 수정 * feat: 슬로프 운행 현황 추가 * design: 테이블 상단 마진 추가 * fix: 코드리뷰 반영
- Loading branch information
1 parent
c3c41c5
commit b490f1d
Showing
28 changed files
with
482 additions
and
197 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,5 @@ | ||
| @import url('https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard-dynamic-subset.min.css'); | ||
|
|
||
| @tailwind base; | ||
| @tailwind components; | ||
| @tailwind utilities; | ||
|
|
@@ -91,11 +93,19 @@ | |
| } | ||
| html, | ||
| body { | ||
| @apply font-sans; | ||
| touch-action: none; | ||
| } | ||
| body.video-active * { | ||
| pointer-events: none; | ||
| } | ||
|
|
||
| body.video-active .video-close { | ||
| pointer-events: auto; | ||
| } | ||
| } | ||
|
|
||
| @layer typography { | ||
| @layer base { | ||
| /* Headings */ | ||
| .h1 { | ||
| @apply text-3xl font-bold leading-[1.6rem] tracking-[0.02rem]; | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export { default } from '@/pages/slop-status/ui/slop-status-page'; |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| import React, { useState } from 'react'; | ||
| import { createPortal } from 'react-dom'; | ||
| import { cn } from '@/shared/lib'; | ||
| import CameraButton from '@/shared/ui/cam-button'; | ||
| import { Tooltip } from '@/shared/ui/tooltip'; | ||
| import SlopVideo from './slop-video'; | ||
|
|
||
| interface SlopWebcamProps { | ||
| id: string; | ||
| name: string; | ||
| position: { | ||
| top: string; | ||
| left: string; | ||
| }; | ||
| videoSrc?: string; | ||
| isOpen: boolean; | ||
| renderTarget: React.RefObject<HTMLElement>; | ||
| } | ||
|
|
||
| const SlopCamera = ({ name, position, isOpen, videoSrc, renderTarget }: SlopWebcamProps) => { | ||
| const [isVideoOpen, setIsVideoOpen] = useState(false); | ||
|
|
||
| const toggleVideo = () => { | ||
| setIsVideoOpen((pre) => !pre); | ||
| }; | ||
|
|
||
| return ( | ||
| <> | ||
| <div className={cn('absolute z-10', position.top, position.left)}> | ||
| <div className={cn('relative')}> | ||
| <Tooltip trigger={<CameraButton />} isOpen={isOpen}> | ||
| <p className={cn('body3-medium')} onClick={toggleVideo}> | ||
| {name} | ||
| </p> | ||
| </Tooltip> | ||
| </div> | ||
| </div> | ||
| {renderTarget?.current && | ||
| isVideoOpen && | ||
| videoSrc && | ||
| createPortal(<SlopVideo src={videoSrc} closeVideo={toggleVideo} />, renderTarget.current)} | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default SlopCamera; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| import { animated } from '@react-spring/web'; | ||
| import type { StaticImageData } from 'next/image'; | ||
| import Image from 'next/image'; | ||
| import type { ComponentType } from 'react'; | ||
| import React from 'react'; | ||
| import type { Level } from '@/entities/slop/model/model'; | ||
| import { cn } from '@/shared/lib'; | ||
| import useMapPinch from '../hooks/useMapPinch'; | ||
|
|
||
| interface SlopMapProps { | ||
| containerRef: React.RefObject<HTMLElement>; | ||
| children?: React.ReactNode; | ||
| mapSrc: StaticImageData; | ||
|
|
||
| slops: { | ||
| id: string; | ||
| level: Level; | ||
| Element: ComponentType<{ | ||
| color?: string; | ||
| }>; | ||
| }[]; | ||
| selectedSlop: string | null; | ||
| } | ||
|
|
||
| const SlopMap = ({ containerRef, children, mapSrc, slops, selectedSlop }: SlopMapProps) => { | ||
| const { ref, style } = useMapPinch(containerRef); | ||
|
|
||
| return ( | ||
| <animated.div | ||
| ref={ref} | ||
| style={{ | ||
| touchAction: 'none', | ||
| display: 'inline-block', | ||
| width: '100%', | ||
| height: '100%', | ||
| ...style, | ||
| }} | ||
| > | ||
| <Image src={mapSrc} alt="이미지" width={420} height={750} /> | ||
|
|
||
| {slops.map((slop) => ( | ||
| <div key={slop.id} className={cn('absolute top-0 w-full')}> | ||
| <slop.Element | ||
| color={selectedSlop !== slop.id && selectedSlop !== null ? 'fill-gray-40' : undefined} | ||
| /> | ||
| </div> | ||
| ))} | ||
|
|
||
| {children} | ||
| </animated.div> | ||
| ); | ||
| }; | ||
|
|
||
| export default SlopMap; |
Oops, something went wrong.