Merge pull request #93 from teamViNO/feature-072

src/App.tsx

@@ -41,15 +41,19 @@ import useUpdateCategories from '@/hooks/useUpdateCategories';
 
 // Store
 import { userTokenState } from '@/stores/user';
+import { getTempToken } from './apis/videos';
 
 const App = () => {
   const userToken = useRecoilValue(userTokenState);
   const { updateCategories } = useUpdateCategories();
 
   useEffect(() => {
+    (async () => {
+      const response = await getTempToken();
+      document.cookie = `tempToken=${response.result.tempToken}`;
+    })();
     userToken && updateCategories();
   }, [updateCategories, userToken]);
-
   return (
     <ThemeProvider theme={theme}>
       <GlobalStyle />

src/apis/feedback.ts

@@ -0,0 +1,6 @@
+import axiosInstance from './config/instance';
+
+export const postFeedback = async (text: string) => {
+  const response = await axiosInstance.post('/feedback', { text });
+  return response;
+};

src/apis/videos.ts

@@ -1,5 +1,6 @@
 import { APIBaseResponse, APIResponse } from '@/models/config/axios';
 import {
+  ITempTokenResponse,
   IVideo,
   UpdateVideoCategoryRequest,
   UpdateVideoRequest,
@@ -91,3 +92,16 @@ export const createDummyVideoToMine = async (
 
   return response.data;
 };
+
+export const getTempToken = async (): Promise<
+  APIResponse<ITempTokenResponse>
+> => {
+  const response = await axiosInstance.get('/');
+  return response.data;
+};
+
+export const getVideoModeling = async (url: string) => {
+  const response = await axiosInstance.get(`/video/?v=${url}`);
+  console.log(response);
+  return response.data;
+};

src/components/Home/SearchYoutube.tsx

@@ -13,6 +13,7 @@ import {
 
 import VideoIcon from '@/assets/icons/video.svg?react';
 import WarningIcon from '@/assets/icons/warning.svg?react';
+import { getVideoModeling } from '@/apis/videos';
 
 interface SearchBarProps {
   onSearch: (value: string) => void;
@@ -27,6 +28,10 @@ const SearchYoutube: React.FC<SearchBarProps> = ({ onSearch, searchRef }) => {
 
   const setModalOpen = useSetRecoilState(recommendationModalState);
 
+  const onStartConvert = async () => {
+    await getVideoModeling(inputLink);
+  };
+
   const handleSubmit = (event: FormEvent) => {
     event.preventDefault();
     if (isValidYoutubeLink(inputLink)) {
@@ -112,7 +117,7 @@ const SearchYoutube: React.FC<SearchBarProps> = ({ onSearch, searchRef }) => {
           </div>
           <SearchButton
             type="submit"
-            // onClick={ handleClick }
+            onClick={onStartConvert}
             style={{
               color: isButtonValid ? 'white' : theme.color.gray300,
               backgroundColor: isButtonValid

src/components/layout/footer/SendEmail.tsx

@@ -2,13 +2,23 @@ import * as FooterStyle from '@/styles/layout/footer';
 import { useState } from 'react';
 
 import SendEmailImage from '@/assets/mail.png';
+import { postFeedback } from '@/apis/feedback';
 
 const SendEmail = () => {
   const [feedback, setFeedback] = useState<string>('');
 
   const handleInputFeedback = (e: React.ChangeEvent<HTMLInputElement>) =>
     setFeedback(e.target.value);
 
+  const onSendFeedback = async () => {
+    const res = await postFeedback(feedback);
+    if (res.data.success) {
+      setFeedback('');
+      return;
+    }
+    alert('피드백을 전송하는 과정에서 오류가 발생했습니다.');
+  };
+
   return (
     <FooterStyle.SendEmailWrap>
       <FooterStyle.SendEmailImage src={SendEmailImage} alt="메일 보내기" />
@@ -18,7 +28,13 @@ const SendEmail = () => {
         value={feedback}
         onChange={handleInputFeedback}
       />
-      <FooterStyle.SendEmailButton>보내기</FooterStyle.SendEmailButton>
+      <FooterStyle.SendEmailButton
+        onClick={onSendFeedback}
+        disabled={!feedback}
+        className={`${!feedback && 'disabled'}`}
+      >
+        보내기
+      </FooterStyle.SendEmailButton>
     </FooterStyle.SendEmailWrap>
   );
 };

src/models/video.ts

@@ -52,3 +52,7 @@ export interface UpdateVideoRequest {
 export interface UpdateVideoCategoryRequest {
   video_id: (string | number)[];
 }
+
+export interface ITempTokenResponse {
+  tempToken: string;
+}

src/styles/layout/footer/index.ts

@@ -46,6 +46,14 @@ export const SendEmailButton = styled.button`
   color: ${theme.color.white};
   border: 0;
   cursor: pointer;
+  transition: all 0.2s;
+
+  &.disabled {
+    cursor: default;
+    background-color: ${theme.color.gray200};
+    color: ${theme.color.gray300};
+    border: 0;
+  }
 `;
 
 export const AboutViNOWrap = styled.div`

src/utils/getTokenInCookie.ts

@@ -0,0 +1,7 @@
+const getTokenInCookie = () =>
+  document.cookie
+    .split(';')
+    .find((cookie) => cookie.includes('tempToken'))
+    ?.split('=')[1];
+
+export default getTokenInCookie;