Feat/#499 등록 ui 개선 및 등록 페이지 리팩터링

frontend/src/features/killingParts/components/RegisterPart.tsx

@@ -0,0 +1,130 @@
+import { useNavigate } from 'react-router-dom';
+import styled from 'styled-components';
+import { useAuthContext } from '@/features/auth/components/AuthProvider';
+import useCollectingPartContext from '@/features/killingParts/hooks/useCollectingPartContext';
+import { usePostKillingPart } from '@/features/killingParts/remotes/usePostKillingPart';
+import useVideoPlayerContext from '@/features/youtube/hooks/useVideoPlayerContext';
+import useModal from '@/shared/components/Modal/hooks/useModal';
+import Modal from '@/shared/components/Modal/Modal';
+import Spacing from '@/shared/components/Spacing';
+import { toPlayingTimeText } from '@/shared/utils/convertTime';
+
+const RegisterPart = () => {
+  const { isOpen, openModal, closeModal } = useModal();
+  const { user } = useAuthContext();
+  const { interval, partStartTime, songId } = useCollectingPartContext();
+  const video = useVideoPlayerContext();
+  const { createKillingPart } = usePostKillingPart();
+  const navigate = useNavigate();
+
+  // 현재 useMutation 훅이 response 객체를 리턴하지 않고 내부적으로 처리합니다.
+  // 때문에 컴포넌트 단에서 createKillingPart 성공 여부에 따라 등록 완료 만료를 처리를 할 수 없어요!
+  // 현재 비로그인 시에 등록을 누르면 두 개의 모달이 뜹니다.정
+  const submitKillingPart = async () => {
+    await createKillingPart(songId, { startSecond: partStartTime, length: interval });
+    navigate(-1);
+  };
+
+  const openRegisterModal = () => {
+    video.pause();
+    openModal();
+  };
+
+  const voteTimeText = toPlayingTimeText(partStartTime, partStartTime + interval);
+
+  return (
+    <>
+      <RegisterButton onClick={openRegisterModal}>등록</RegisterButton>
+      <Modal isOpen={isOpen} closeModal={closeModal}>
+        <ModalTitle>
+          <TitleColumn>{user?.nickname}님의 파트 저장</TitleColumn>
+        </ModalTitle>
+        <ModalContent>
+          <Message>
+            <Part>{voteTimeText}</Part>
+          </Message>
+          <Spacing direction="vertical" size={6} />
+          <Message>나만의 파트로 등록하시겠습니까?</Message>
+        </ModalContent>
+        <ButtonContainer>
+          <Cancel type="button" onClick={closeModal}>
+            취소
+          </Cancel>
+          <Confirm type="button" onClick={submitKillingPart}>
+            등록
+          </Confirm>
+        </ButtonContainer>
+      </Modal>
+    </>
+  );
+};
+
+export default RegisterPart;
+
+const RegisterButton = styled.button`
+  width: 100%;
+  margin-top: auto;
+  padding: 8px 11px;
+
+  font-weight: 700;
+  color: ${({ theme: { color } }) => color.white};
+  letter-spacing: 6px;
+
+  background-color: ${({ theme: { color } }) => color.primary};
+  border-radius: 6px;
+
+  @media (min-width: ${({ theme }) => theme.breakPoints.md}) {
+    padding: 11px 15px;
+
+    font-size: 18px;
+  }
+`;
+
+const ModalTitle = styled.h3``;
+
+const TitleColumn = styled.div`
+  text-align: center;
+`;
+
+const ModalContent = styled.div`
+  padding: 16px 0;
+
+  font-size: 16px;
+  color: #b5b3bc;
+  text-align: center;
+  white-space: pre-line;
+`;
+
+const Message = styled.div``;
+
+const Button = styled.button`
+  height: 36px;
+  color: ${({ theme: { color } }) => color.white};
+  border-radius: 10px;
+`;
+
+const Cancel = styled(Button)`
+  flex: 1;
+  background-color: ${({ theme: { color } }) => color.secondary};
+`;
+
+const Confirm = styled(Button)`
+  flex: 1;
+  background-color: ${({ theme: { color } }) => color.primary};
+`;
+
+const ButtonContainer = styled.div`
+  display: flex;
+  gap: 16px;
+  width: 100%;
+`;
+
+const Part = styled.span`
+  padding: 6px 11px;
+
+  color: white;
+  letter-spacing: 1px;
+
+  background-color: ${({ theme: { color } }) => color.disabled};
+  border-radius: 10px;
+`;

frontend/src/features/killingParts/components/SoundWave.tsx

@@ -0,0 +1,63 @@
+import React, { forwardRef } from 'react';
+import styled from 'styled-components';
+
+interface SoundWaveProps {
+  length: number;
+  progressWidth: number;
+}
+
+const SoundWave = forwardRef<HTMLDivElement, SoundWaveProps>(
+  ({ length, progressWidth }, boxRef) => {
+    const stretchWaveHeight =
+      (activeHeight: string, inactiveHeight: string) => (dom: HTMLDivElement | null) => {
+        if (!dom || !boxRef || typeof boxRef === 'function' || !boxRef.current?.scrollLeft) return;
+
+        const boxPos =
+          boxRef.current?.scrollLeft + boxRef.current?.clientWidth / 2 - progressWidth / 2;
+
+        const containerRightEdge = boxPos + progressWidth;
+        const itemRightEdge = dom.offsetLeft;
+
+        if (itemRightEdge >= boxPos && itemRightEdge <= containerRightEdge) {
+          dom.style.height = activeHeight;
+        } else {
+          dom.style.height = inactiveHeight;
+        }
+      };
+
+    return Array.from({ length }, (_, index) => (
+      <React.Fragment key={index}>
+        <LongBar ref={stretchWaveHeight('25px', '20px')} />
+        <ShortBar ref={stretchWaveHeight('17px', '12px')} />
+      </React.Fragment>
+    ));
+  }
+);
+
+SoundWave.displayName = 'SoundWave';
+export default SoundWave;
+
+const LongBar = styled.div`
+  z-index: 2;
+  left: 50%;
+
+  width: 4px;
+  height: 24px;
+
+  background-color: ${({ theme: { color } }) => color.white};
+  border-radius: 5px;
+
+  transition: height 0.2s ease;
+`;
+
+const ShortBar = styled.div`
+  z-index: 2;
+
+  width: 4px;
+  height: 15px;
+
+  background-color: ${({ theme: { color } }) => color.white};
+  border-radius: 5px;
+
+  transition: height 0.2s ease;
+`;

frontend/src/features/killingParts/components/VideoBadges.tsx

@@ -0,0 +1,185 @@
+import styled, { css, keyframes } from 'styled-components';
+import playIcon from '@/assets/icon/fill-play.svg';
+import pauseIcon from '@/assets/icon/pause.svg';
+import pinIcon from '@/assets/icon/pin.svg';
+import playStreamIcon from '@/assets/icon/play-stream.svg';
+import removeIcon from '@/assets/icon/remove.svg';
+import useCollectingPartContext from '@/features/killingParts/hooks/useCollectingPartContext';
+import usePin from '@/features/killingParts/hooks/usePin';
+import useVideoPlayerContext from '@/features/youtube/hooks/useVideoPlayerContext';
+import Flex from '@/shared/components/Flex/Flex';
+import { toMinSecText } from '@/shared/utils/convertTime';
+
+const VideoBadges = () => {
+  const { partStartTime, isPlayingEntire, scrollingRef, toggleEntirePlaying } =
+    useCollectingPartContext();
+  const {
+    pinList,
+    isPinListEmpty,
+    activePinIndex,
+    pinContainerRef,
+    pinAnimationRef,
+    addPin,
+    deletePin,
+    playPin,
+  } = usePin();
+  const video = useVideoPlayerContext();
+
+  const partStartTimeText = toMinSecText(partStartTime);
+  const isPaused = video.playerState === YT.PlayerState.PAUSED;
+  const videoPlay = () => {
+    if (isPlayingEntire) {
+      video.play();
+    } else {
+      video.seekTo(partStartTime);
+    }
+  };
+
+  const videoPause = () => {
+    if (scrollingRef.current === null) {
+      video.pause();
+    }
+  };
+
+  return (
+    <>
+      <Flex $gap={14} $justify="flex-end">
+        <StartBadge>
+          <img src={playStreamIcon} style={{ marginRight: '4px' }} alt="" />
+          {partStartTimeText}
+        </StartBadge>
+        <Badge as="button" onClick={addPin} $isActive={!isPinListEmpty}>
+          <img src={pinIcon} alt="나만의 파트 임시 저장" />
+        </Badge>
+        <Badge as="button" type="button" onClick={isPaused ? videoPlay : videoPause}>
+          <img src={isPaused ? playIcon : pauseIcon} alt={'재생 혹은 정지'} />
+        </Badge>
+        <Badge as="button" type="button" $isActive={isPlayingEntire} onClick={toggleEntirePlaying}>
+          전체 듣기
+        </Badge>
+      </Flex>
+      <PinFlex $gap={4} ref={pinContainerRef}>
+        {!isPinListEmpty && (
+          <DeleteBadge as="button" onClick={deletePin}>
+            <img src={removeIcon} alt="나만의 파트 임시 저장 삭제하기" />
+          </DeleteBadge>
+        )}
+        <PinInner $gap={4} ref={pinContainerRef}>
+          {pinList.map((pin, index) => (
+            <PinBadge
+              key={pin.text + pinAnimationRef.current}
+              as="button"
+              onClick={playPin(pin.partStartTime, pin.interval)}
+              $isActive={index === activePinIndex}
+              $isNew={index === 0}
+            >
+              {pin.text}
+            </PinBadge>
+          ))}
+        </PinInner>
+      </PinFlex>
+    </>
+  );
+};
+export default VideoBadges;
+
+const PinFlex = styled(Flex)`
+  width: 100%;
+`;
+
+const PinInner = styled(Flex)`
+  overflow-x: scroll;
+  width: calc(100% - 44px);
+`;
+
+const Badge = styled.span<{ $isActive?: boolean }>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  min-width: 40px;
+  height: 30px;
+  padding: 0 10px;
+
+  font-size: 14px;
+  color: ${({ theme: { color } }) => color.white};
+  text-align: center;
+
+  background-color: ${({ theme: { color }, $isActive }) =>
+    $isActive ? color.magenta700 : color.disabled};
+  border-radius: 40px;
+
+  transition:
+    background-color 0.2s ease-in,
+    box-shadow 0.2s ease;
+
+  &:active {
+    box-shadow: 0 0 0 1px inset white;
+  }
+
+  @media (min-width: ${({ theme }) => theme.breakPoints.md}) {
+    font-size: 16px;
+  }
+`;
+
+const StartBadge = styled(Badge)`
+  margin-right: auto;
+  letter-spacing: 1px;
+`;
+
+const slideFirstItem = keyframes`
+  from {
+    opacity: 0;
+    transform: translateX(-30px);
+
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+`;
+
+const slideRestItems = keyframes`
+  from {
+    transform: translateX(-15px);
+  }
+  to {
+    transform: translateX(0);
+  }
+`;
+
+const PinBadge = styled(Badge)<{ $isActive?: boolean; $isNew?: boolean }>`
+  z-index: ${({ $isActive }) => ($isActive ? 1 : 0)};
+
+  width: 50px;
+  margin-right: 4px;
+
+  font-size: 12px;
+  color: black;
+  white-space: nowrap;
+
+  opacity: ${({ $isActive }) => ($isActive ? 1 : 0.5)};
+  background-color: ${({ theme: { color }, $isActive }) =>
+    $isActive ? color.magenta700 : color.disabledBackground};
+  border: none;
+  border-radius: 4px;
+
+  transition: background-color 0.3s ease-in-out;
+  animation: ${({ $isNew }) =>
+    $isNew
+      ? css`
+          ${slideFirstItem} 0.6s forwards
+        `
+      : css`
+          ${slideRestItems} 0.3s forwards
+        `};
+`;
+
+const DeleteBadge = styled(Badge)`
+  min-width: 30px;
+  height: 30px;
+  margin-right: 10px;
+  padding: 0;
+
+  border-radius: 50%;
+`;