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

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

@@ -0,0 +1,33 @@
+import { styled } from 'styled-components';
+
+const CollectingInformation = () => {
+  return (
+    <Container>
+      <RegisterTitle>나만의 파트 저장하기</RegisterTitle>
+      <Warning>같은 파트에 대한 중복 등록은 한 번의 등록으로 처리됩니다.</Warning>
+    </Container>
+  );
+};
+
+export default CollectingInformation;
+
+const Container = styled.div``;
+
+const RegisterTitle = styled.h2`
+  font-size: 18px;
+  font-weight: 700;
+  color: ${({ theme: { color } }) => color.white};
+
+  @media (min-width: ${({ theme }) => theme.breakPoints.md}) {
+    font-size: 22px;
+  }
+`;
+
+const Warning = styled.div`
+  font-size: 14px;
+  color: ${({ theme: { color } }) => color.subText};
+
+  @media (min-width: ${({ theme }) => theme.breakPoints.md}) {
+    font-size: 18px;
+  }
+`;

frontend/src/features/songs/components/VoteInterface.tsx → frontend/src/features/killingParts/components/RegisterPart.tsx

@@ -1,55 +1,44 @@
-import { styled } from 'styled-components';
+import styled from 'styled-components';
 import { useAuthContext } from '@/features/auth/components/AuthProvider';
-import useVoteInterfaceContext from '@/features/songs/hooks/useVoteInterfaceContext';
-import VideoSlider from '@/features/youtube/components/VideoSlider';
+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 useToastContext from '@/shared/components/Toast/hooks/useToastContext';
 import { toPlayingTimeText } from '@/shared/utils/convertTime';
 import copyClipboard from '@/shared/utils/copyClipBoard';
-import { usePostKillingPart } from '../remotes/usePostKillingPart';
-import KillingPartToggleGroup from './KillingPartToggleGroup';
 
-const VoteInterface = () => {
-  const { showToast } = useToastContext();
-  const { interval, partStartTime, songId, songVideoId } = useVoteInterfaceContext();
-  const { videoPlayer } = useVideoPlayerContext();
-
-  const { createKillingPart } = usePostKillingPart();
+const RegisterPart = () => {
   const { isOpen, openModal, closeModal } = useModal();
-
+  const { showToast } = useToastContext();
   const { user } = useAuthContext();
+  const { interval, partStartTime, songId, songVideoId } = useCollectingPartContext();
+  const video = useVideoPlayerContext();
+  const { createKillingPart } = usePostKillingPart();
 
-  const voteTimeText = toPlayingTimeText(partStartTime, partStartTime + interval);
-
+  // 현재 useMutation 훅이 response 객체를 리턴하지 않고 내부적으로 처리합니다.
+  // 때문에 컴포넌트 단에서 createKillingPart 성공 여부에 따라 등록 완료 만료를 처리를 할 수 없어요!
+  // 현재 비로그인 시에 등록을 누르면 두 개의 모달이 뜹니다.
   const submitKillingPart = async () => {
-    videoPlayer.current?.pauseVideo();
+    video.pause();
     await createKillingPart(songId, { startSecond: partStartTime, length: interval });
     openModal();
   };
 
+  const voteTimeText = toPlayingTimeText(partStartTime, partStartTime + interval);
+
   const copyPartVideoUrl = async () => {
-    await copyClipboard(`https://www.youtube.com/watch?v=${songVideoId}`);
+    await copyClipboard(`https://www.youtube.com/watch?v=${songVideoId}&t=${partStartTime}s`);
     closeModal();
     showToast('클립보드에 영상링크가 복사되었습니다.');
   };
 
   return (
-    <Container>
-      <RegisterTitle>당신의 킬링파트를 등록하세요</RegisterTitle>
-      <Spacing direction="vertical" size={4} />
-      <Warning>같은 파트에 대한 여러 번의 등록은 한 번의 등록으로 처리됩니다.</Warning>
-      <Spacing direction="vertical" size={16} />
-      <KillingPartToggleGroup />
-      <Spacing direction="vertical" size={24} />
-      <VideoSlider />
-      <Spacing direction="vertical" size={16} />
-      <Register type="button" onClick={submitKillingPart}>
+    <>
+      <RegisterButton type="submit" onClick={submitKillingPart}>
         등록
-      </Register>
-
+      </RegisterButton>
       <Modal isOpen={isOpen} closeModal={closeModal}>
         <ModalTitle>
           <TitleColumn>{user?.nickname}님의</TitleColumn>
@@ -68,39 +57,34 @@ const VoteInterface = () => {
           </Share>
         </ButtonContainer>
       </Modal>
-    </Container>
+    </>
   );
 };
 
-export default VoteInterface;
+export default RegisterPart;
 
-const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-`;
+const RegisterButton = styled.button`
+  width: 100%;
+  margin-top: auto;
+  padding: 8px 11px;
 
-const RegisterTitle = styled.p`
-  font-size: 22px;
   font-weight: 700;
   color: ${({ theme: { color } }) => color.white};
+  letter-spacing: 6px;
 
-  @media (max-width: ${({ theme }) => theme.breakPoints.md}) {
-    font-size: 18px;
-  }
-`;
-
-const Register = styled.button`
-  cursor: pointer;
+  background-color: ${({ theme: { color } }) => color.primary};
+  border-radius: 6px;
 
-  width: 100%;
-  height: 36px;
+  @media (min-width: ${({ theme }) => theme.breakPoints.md}) {
+    position: static;
+    left: unset;
+    transform: unset;
 
-  font-weight: 700;
-  color: ${({ theme: { color } }) => color.white};
+    width: 100%;
+    padding: 11px 15px;
 
-  background-color: ${({ theme: { color } }) => color.primary};
-  border: none;
-  border-radius: 10px;
+    font-size: 18px;
+  }
 `;
 
 const ModalTitle = styled.h3``;
@@ -121,13 +105,8 @@ const ModalContent = styled.div`
 const Message = styled.div``;
 
 const Button = styled.button`
-  cursor: pointer;
-
   height: 36px;
-
   color: ${({ theme: { color } }) => color.white};
-
-  border: none;
   border-radius: 10px;
 `;
 
@@ -146,7 +125,3 @@ const ButtonContainer = styled.div`
   gap: 16px;
   width: 100%;
 `;
-
-const Warning = styled.div`
-  color: ${({ theme: { color } }) => color.subText};
-`;

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

@@ -0,0 +1,39 @@
+import React from 'react';
+import styled from 'styled-components';
+
+interface SoundWaveProps {
+  length: number;
+}
+const SoundWave = ({ length }: SoundWaveProps) => {
+  return Array.from({ length }, (_, index) => {
+    return (
+      <React.Fragment key={index}>
+        <LongBar />
+        <ShortBar />
+      </React.Fragment>
+    );
+  });
+};
+
+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;
+`;
+
+const ShortBar = styled.div`
+  z-index: 2;
+
+  width: 4px;
+  height: 15px;
+
+  background-color: ${({ theme: { color } }) => color.white};
+  border-radius: 5px;
+`;

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

@@ -0,0 +1,63 @@
+import styled from 'styled-components';
+import playIcon from '@/assets/icon/fill-play.svg';
+import pauseIcon from '@/assets/icon/pause.svg';
+import useCollectingPartContext from '@/features/killingParts/hooks/useCollectingPartContext';
+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, toggleEntirePlaying } = useCollectingPartContext();
+  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 = () => {
+    video.pause();
+  };
+
+  return (
+    <Flex $gap={14} $justify="flex-end">
+      <Badge>{partStartTimeText}</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>
+  );
+};
+export default VideoBadges;
+
+const Badge = styled.span<{ $isActive?: boolean }>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  height: 30px;
+  min-width: 40px;
+  padding: 0 10px;
+
+  font-size: 13px;
+  color: ${({ theme: { color }, $isActive }) => ($isActive ? color.black : color.white)};
+  text-align: center;
+
+  background-color: ${({ theme: { color }, $isActive }) =>
+    $isActive ? color.magenta200 : color.disabled};
+  border-radius: 40px;
+
+  transition: background-color 0.2s ease-in;
+
+  @media (min-width: ${({ theme }) => theme.breakPoints.md}) {
+    font-size: 14px;
+  }
+`;

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

@@ -0,0 +1,16 @@
+import VideoBadges from '@/features/killingParts/components/VideoBadges';
+import VideoIntervalStepper from '@/features/killingParts/components/VideoIntervalStepper';
+import WaveScrubber from '@/features/killingParts/components/WaveScrubber';
+import Flex from '@/shared/components/Flex/Flex';
+
+const VideoController = () => {
+  return (
+    <Flex $gap={8} $direction={'column'}>
+      <VideoIntervalStepper />
+      <VideoBadges />
+      <WaveScrubber />
+    </Flex>
+  );
+};
+
+export default VideoController;

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

@@ -0,0 +1,54 @@
+import { css, styled } from 'styled-components';
+import useCollectingPartContext from '@/features/killingParts/hooks/useCollectingPartContext';
+import Flex from '@/shared/components/Flex/Flex';
+
+const VideoIntervalStepper = () => {
+  const { interval, increasePartInterval, decreasePartInterval } = useCollectingPartContext();
+
+  return (
+    <Flex $gap={20}>
+      <ControlButton onClick={decreasePartInterval}>-</ControlButton>
+      <CountText>{`${interval} 초`}</CountText>
+      <ControlButton onClick={increasePartInterval}>+</ControlButton>
+    </Flex>
+  );
+};
+
+export default VideoIntervalStepper;
+
+const StepperElementStyle = css`
+  flex: 1;
+
+  min-width: 50px;
+  margin: 0;
+  padding: 4px 11px;
+
+  font-weight: 700;
+  line-height: 1.8;
+  text-align: center;
+
+  border: none;
+  border-radius: 10px;
+`;
+
+const ControlButton = styled.button`
+  ${StepperElementStyle};
+  color: ${({ theme: { color } }) => color.white};
+  background-color: ${({ theme: { color } }) => color.secondary};
+
+  &:active {
+    background-color: ${({ theme: { color } }) => color.disabled};
+    transition: box-shadow 0.2s ease;
+  }
+`;
+
+const CountText = styled.p`
+  ${StepperElementStyle};
+  color: ${({ theme: { color } }) => color.black};
+  background-color: ${({ theme: { color } }) => color.white};
+
+  &:active {
+    box-shadow: 0 0 0 1px inset ${({ theme: { color } }) => color.magenta300};
+    transition: box-shadow 0.1s ease;
+  }
+`;