From 0357614df42f146bd99b9158af721c3be27ffbd4 Mon Sep 17 00:00:00 2001
From: whistleJs <whistle_js@naver.com>
Date: Sun, 11 Feb 2024 09:22:31 +0900
Subject: [PATCH] =?UTF-8?q?feature-058:=20=EB=B9=8C=EB=93=9C=20=EC=98=A4?=
 =?UTF-8?q?=EB=A5=98=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/modals/RecommendationModal.tsx | 21 +++++++------------
 1 file changed, 7 insertions(+), 14 deletions(-)

diff --git a/src/components/modals/RecommendationModal.tsx b/src/components/modals/RecommendationModal.tsx
index 6233b53..d684f7b 100644
--- a/src/components/modals/RecommendationModal.tsx
+++ b/src/components/modals/RecommendationModal.tsx
@@ -1,5 +1,5 @@
-import React, { useState, useEffect } from 'react';
-import { useRecoilState } from 'recoil';
+import React from 'react';
+import { useRecoilState, useRecoilValue } from 'recoil';
 import { recommendationModalState } from '@/stores/modal';
 import useOutsideClick from '@/hooks/useOutsideClick';
 
@@ -7,11 +7,12 @@ import emptyvideoImg from '@/assets/empty-video.png';
 import CloseIcon from '@/assets/icons/close.svg?react';
 import cardimageImg from '@/assets/card-image.png';
 
+import { userInfoState } from '@/stores/user';
+
 import { RecommendationModalContainer } from '@/styles/modals/RecommendationModal.style';
-import { getMyInfoAPI } from '@/apis/user';
 
 const RecommendationModal: React.FC = () => {
-  const [nickname, setNickname] = useState('');
+  const userInfo = useRecoilValue(userInfoState);
   const [modalOpen, setModalOpen] = useRecoilState(recommendationModalState);
 
   const closeModal = () => {
@@ -20,15 +21,6 @@ const RecommendationModal: React.FC = () => {
 
   const [modalRef] = useOutsideClick<HTMLDivElement>(closeModal);
 
-  useEffect(() => {
-    async function fetchNickname() {
-      const response = await getMyInfoAPI();
-      setNickname(response.data.result.nickname);
-    }
-
-    fetchNickname();
-  }, []);
-
   return (
     <RecommendationModalContainer isOpen={modalOpen}>
       <div className="modal-container" ref={modalRef}>
@@ -48,7 +40,8 @@ const RecommendationModal: React.FC = () => {
                 기다리는 동안 이런 영상은 어때요?
               </div>
               <div className="inform-subtext">
-                {nickname}님을 위해 미리 정리 된 영상을 소개해드릴게요
+                {userInfo?.nick_name}님을 위해 미리 정리 된 영상을
+                소개해드릴게요
               </div>
             </div>
           </div>