Merge branch 'dev' into feature-027

index.html

@@ -17,6 +17,11 @@
     <div id="root"></div>
 
     <script type="module" src="/src/main.tsx"></script>
-    <script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
+    <script
+      src="https://developers.kakao.com/sdk/js/kakao.js"
+      async
+      defer
+    ></script>
+    <script src="https://www.youtube.com/iframe_api" async defer></script>
   </body>
 </html>

package.json

@@ -13,6 +13,7 @@
     "@types/jest": "^29.5.11",
     "@types/node": "^20.11.17",
     "@types/react-modal": "^3.16.3",
+    "@types/youtube": "^0.0.50",
     "axios": "^1.6.4",
     "lodash": "^4.17.21",
     "react": "^18.2.0",

src/apis/sms.ts

@@ -10,6 +10,10 @@ export const sendSMSAPI = (data: sendSMSRequest) => {
 
   };
 
+export const sendSMSFindAPI = (data : sendSMSRequest) => {
+  return axios.post<APIResponse<smsResponse>>(PREFIX + '/sendSMS-find', data);
+}
+
 export const checkSMSAPI = (data : checkSMSRequest, token : string) => {
     return axios.post<APIResponse<smsResponse>>(PREFIX + '/checkSMS', data, {
       headers : { Authorization : `Bearer ${token}`}

src/apis/user.ts

@@ -13,7 +13,9 @@ import {
   NickNameResponse,
   FindEmailResponse,
   FindEmailRequest,
-  CreateVideoAlarmRequest,
+  FindPasswordResponse,
+  FindPasswordRequest,
+  CreateVideoAlarmRequest
 } from '@/models/user';
 import {
   AlarmResponse,
@@ -91,4 +93,11 @@ export const createVideoAlarmAPI = (
     PREFIX + `/videoAlarm/${videoId}/${status}`,
     data,
   );
-};
+}
+
+export const findPasswordAPI = (data : FindPasswordRequest) => {
+  return axios.post<FindPasswordResponse>(
+    PREFIX + '/findPassword',
+    data
+  );
+}

src/apis/videos.ts

@@ -76,13 +76,6 @@ export const getUnReadDummyVideosAPI = () => {
   return axios.get<APIResponse<VideoResponse>>('/videos/dummyVideos/unRead');
 };
 
-export const getUnReadDummyVideos = async (): Promise<
-  APIResponse<Record<'videos', IVideoProps[]>>
-> => {
-  const response = await axiosInstance.get('/videos/dummyVideos/unRead');
-  return response.data;
-};
-
 export const getAllDummyVideos = async (): Promise<
   APIResponse<Record<'videos', IVideoProps[]>>
 > => {

src/components/FindPassword.tsx

@@ -0,0 +1,32 @@
+import React from "react"
+import MailPng from '@/assets/mail.png';
+import Container from "@/styles/FindEmail";
+import { useNavigate } from "react-router-dom";
+
+interface FindEmailProp {
+    email : string;
+}
+
+const FindPassword : React.FC<FindEmailProp> = ({email}) => {
+    const navigate = useNavigate();
+
+    const handleLoginBtn = () => {
+        navigate('/sign-in');
+    }
+    return(
+        <Container>
+            <div className="wrapper">
+                <div style={{gap : '15px'}}>
+                    <img src={MailPng}/>
+                    <center><span className="result">{email}로 <br /> 회원님의 임시 비밀번호를 전송하였습니다!</span></center>
+                    <span className="tool">로그인하고 나만의 영상 아카이빙을 시작해요</span>
+                </div>
+                <div style={{gap : '10px'}}>
+                    <button style={{backgroundColor : '#1E1E1E', color : '#FFFFFF'}} onClick={handleLoginBtn}>로그인 하러가기</button>
+                </div>
+            </div>
+        </Container>
+    );
+}
+
+export default FindPassword;

src/components/Home/SearchYoutube.tsx

@@ -93,6 +93,13 @@ const SearchYoutube = ({ searchRef }: Props) => {
     }
   };
 
+  const handleChangeInput: React.ChangeEventHandler<HTMLInputElement> = (e) => {
+    setInputLink(e.target.value);
+    setVideoLink(null);
+    setStatus('NONE');
+    setProgress(0);
+  };
+
   const handleClickCreateVideoButton = async () => {
     if (!modelingData) return;
 
@@ -156,7 +163,7 @@ const SearchYoutube = ({ searchRef }: Props) => {
                 type="text"
                 value={inputLink}
                 disabled={status === 'CONTINUE'}
-                onChange={(e) => setInputLink(e.target.value)}
+                onChange={handleChangeInput}
                 placeholder="https://youtube.com/..."
               />
             </div>