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

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

@@ -1,59 +1,55 @@
+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 useToastContext from '@/shared/components/Toast/hooks/useToastContext';
+import Spacing from '@/shared/components/Spacing';
 import { toPlayingTimeText } from '@/shared/utils/convertTime';
-import copyClipboard from '@/shared/utils/copyClipBoard';
 
 const RegisterPart = () => {
   const { isOpen, openModal, closeModal } = useModal();
-  const { showToast } = useToastContext();
   const { user } = useAuthContext();
-  const { interval, partStartTime, songId, songVideoId } = useCollectingPartContext();
+  const { interval, partStartTime, songId } = useCollectingPartContext();
   const video = useVideoPlayerContext();
   const { createKillingPart } = usePostKillingPart();
+  const navigate = useNavigate();
 
   // 현재 useMutation 훅이 response 객체를 리턴하지 않고 내부적으로 처리합니다.
   // 때문에 컴포넌트 단에서 createKillingPart 성공 여부에 따라 등록 완료 만료를 처리를 할 수 없어요!
-  // 현재 비로그인 시에 등록을 누르면 두 개의 모달이 뜹니다.
+  // 현재 비로그인 시에 등록을 누르면 두 개의 모달이 뜹니다.정
   const submitKillingPart = async () => {
     video.pause();
     await createKillingPart(songId, { startSecond: partStartTime, length: interval });
-    openModal();
+    navigate(-1);
   };
 
   const voteTimeText = toPlayingTimeText(partStartTime, partStartTime + interval);
 
-  const copyPartVideoUrl = async () => {
-    await copyClipboard(`https://www.youtube.com/watch?v=${songVideoId}&t=${partStartTime}s`);
-    closeModal();
-    showToast('클립보드에 영상링크가 복사되었습니다.');
-  };
-
   return (
     <>
-      <RegisterButton type="submit" onClick={submitKillingPart}>
+      <RegisterButton type="submit" onClick={openModal}>
         등록
       </RegisterButton>
       <Modal isOpen={isOpen} closeModal={closeModal}>
         <ModalTitle>
-          <TitleColumn>{user?.nickname}님의</TitleColumn>
-          <TitleColumn>킬링파트 등록을 완료했습니다.</TitleColumn>
+          <TitleColumn>{user?.nickname}님의 파트 저장</TitleColumn>
         </ModalTitle>
         <ModalContent>
-          <Message>{voteTimeText}</Message>
-          <Message>파트를 공유해 보세요😀</Message>
+          <Message>
+            <Part>{voteTimeText}</Part>
+          </Message>
+          <Spacing direction="vertical" size={6} />
+          <Message>나만의 파트로 등록하시겠습니까?</Message>
         </ModalContent>
         <ButtonContainer>
           <Confirm type="button" onClick={closeModal}>
-            확인
+            취소
           </Confirm>
-          <Share type="button" onClick={copyPartVideoUrl}>
-            공유하기
+          <Share type="button" onClick={submitKillingPart}>
+            등록
           </Share>
         </ButtonContainer>
       </Modal>
@@ -76,11 +72,6 @@ const RegisterButton = styled.button`
   border-radius: 6px;
 
   @media (min-width: ${({ theme }) => theme.breakPoints.md}) {
-    position: static;
-    left: unset;
-    transform: unset;
-
-    width: 100%;
     padding: 11px 15px;
 
     font-size: 18px;
@@ -125,3 +116,13 @@ const ButtonContainer = styled.div`
   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

@@ -1,19 +1,39 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import styled from 'styled-components';
 
 interface SoundWaveProps {
   length: number;
+  progressWidth: number;
 }
-const SoundWave = ({ length }: SoundWaveProps) => {
-  return Array.from({ length }, (_, index) => {
-    return (
+// eslint-disable-next-line react/display-name
+const SoundWave = forwardRef<HTMLDivElement, SoundWaveProps>(
+  ({ length, progressWidth }, boxRef) => {
+    const stretchWaveHeight =
+      (activeHeight: string, inactiveHeight: string) => (dom: HTMLDivElement | null) => {
+        if (!dom || !boxRef || typeof boxRef === 'function') return;
+        if (boxRef.current?.scrollLeft) {
+          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 />
-        <ShortBar />
+        <LongBar ref={stretchWaveHeight('25px', '20px')} />
+        <ShortBar ref={stretchWaveHeight('17px', '12px')} />
       </React.Fragment>
-    );
-  });
-};
+    ));
+  }
+);
 
 export default SoundWave;
 
@@ -26,6 +46,8 @@ const LongBar = styled.div`
 
   background-color: ${({ theme: { color } }) => color.white};
   border-radius: 5px;
+
+  transition: height 0.2s ease;
 `;
 
 const ShortBar = styled.div`
@@ -36,4 +58,6 @@ const ShortBar = styled.div`
 
   background-color: ${({ theme: { color } }) => color.white};
   border-radius: 5px;
+
+  transition: height 0.2s ease;
 `;