fix: 회원가입 튜토리얼 페이지 추가

src/components/common/Modal/PopupContainer.tsx

@@ -69,7 +69,7 @@ const Wrapper = styled.div`
   min-width: 320px;
   max-width: 767px;
   margin: 0 auto;
-  background-color: rgba(18, 18, 18, 0.1);
+  background-color: rgba(18, 18, 18, 0.3);
   backdrop-filter: blur(2.5px);
   z-index: 1000;
 `;

src/components/common/Modal/ReplyModal.tsx

@@ -111,7 +111,7 @@ const ModalContainer = styled.div`
   padding: 20px 12px;
   border-radius: 16px;
   border: 1px solid ${colors.grey[200]};
-  background-color: ${colors.black.main};
+  background-color: rgba(18, 18, 18, 0.3);
   z-index: 1001;
 `;
 

src/components/feed/BookInfoCard.tsx

@@ -2,6 +2,31 @@ import { useNavigate } from 'react-router-dom';
 import styled from '@emotion/styled';
 import rightArrow from '../../assets/common/rightArrow.svg';
 
+interface BookInfoCardProps {
+  bookTitle: string;
+  bookAuthor: string;
+  isbn: string;
+}
+
+const BookInfoCard = ({ bookTitle, bookAuthor, isbn }: BookInfoCardProps) => {
+  const navigate = useNavigate();
+
+  const handleClick = () => {
+    navigate(`/search/book/${isbn}`);
+  };
+
+  return (
+    <BookContainer onClick={handleClick}>
+      <div className="left">{bookTitle}</div>
+      <div className="right">
+        <div className="name">{bookAuthor}</div>
+        <div className="author">저</div>
+        <img src={rightArrow} />
+      </div>
+    </BookContainer>
+  );
+};
+
 const BookContainer = styled.div`
   display: flex;
   height: 44px;
@@ -48,29 +73,4 @@ const BookContainer = styled.div`
   }
 `;
 
-interface BookInfoCardProps {
-  bookTitle: string;
-  bookAuthor: string;
-  isbn: string;
-}
-
-const BookInfoCard = ({ bookTitle, bookAuthor, isbn }: BookInfoCardProps) => {
-  const navigate = useNavigate();
-
-  const handleClick = () => {
-    navigate(`/book/${isbn}`);
-  };
-
-  return (
-    <BookContainer onClick={handleClick}>
-      <div className="left">{bookTitle}</div>
-      <div className="right">
-        <div className="name">{bookAuthor}</div>
-        <div className="author">저</div>
-        <img src={rightArrow} />
-      </div>
-    </BookContainer>
-  );
-};
-
 export default BookInfoCard;

src/components/feed/Profile.tsx

@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react';
 import styled from '@emotion/styled';
 import MyFollower from './MyFollower';
 import { postFollow } from '@/api/users/postFollow';
+import { usePopupStore } from '@/stores/usePopupStore';
 
 export interface ProfileProps {
   showFollowButton?: boolean;
@@ -27,6 +28,7 @@ const Profile = ({
   userId,
 }: ProfileProps) => {
   const [followed, setFollowed] = useState(isFollowing);
+  const { openPopup } = usePopupStore();
 
   useEffect(() => {
     setFollowed(isFollowing);
@@ -50,6 +52,17 @@ const Profile = ({
       // API 응답으로 팔로우 상태 업데이트
       setFollowed(response.data.isFollowing);
       console.log(`${nickname} - ${response.data.isFollowing ? '띱 완료' : '띱 취소'}`);
+
+      // Snackbar 표시
+      const message = response.data.isFollowing 
+        ? `${nickname}님을 띱 했어요.` 
+        : `${nickname}님을 띱 취소했어요.`;
+
+      openPopup('snackbar', {
+        message,
+        variant: 'top',
+        onClose: () => {}
+      });
     } catch (error) {
       console.error('팔로우/언팔로우 실패:', error);
       // 에러 발생 시 상태 변경하지 않음

src/components/feed/UserProfileItem.tsx

@@ -5,6 +5,7 @@ import rightArrow from '../../assets/feed/rightArrow.svg';
 import type { UserProfileItemProps } from '@/types/user';
 import { colors, typography } from '@/styles/global/global';
 import { postFollow } from '@/api/users/postFollow';
+import { usePopupStore } from '@/stores/usePopupStore';
 
 const UserProfileItem = ({
   profileImgUrl,
@@ -19,6 +20,7 @@ const UserProfileItem = ({
 }: UserProfileItemProps) => {
   const navigate = useNavigate();
   const [followed, setFollowed] = useState(isFollowing);
+  const { openPopup } = usePopupStore();
 
   const handleProfileClick = () => {
     navigate(`/otherfeed/${userId}`);
@@ -32,6 +34,17 @@ const UserProfileItem = ({
       // API 응답으로 팔로우 상태 업데이트
       setFollowed(response.data.isFollowing);
       console.log(`${nickname} - ${response.data.isFollowing ? '띱 완료' : '띱 취소'}`);
+
+      // Snackbar 표시
+      const message = response.data.isFollowing 
+        ? `${nickname}님을 띱 했어요.` 
+        : `${nickname}님을 띱 취소했어요.`;
+
+      openPopup('snackbar', {
+        message,
+        variant: 'top',
+        onClose: () => {}
+      });
     } catch (error) {
       console.error('팔로우/언팔로우 실패:', error);
     }

src/components/search/BookSearchResult.tsx

@@ -6,10 +6,20 @@ import { useNavigate } from 'react-router-dom';
 interface BookSearchResultProps {
   type: 'searching' | 'searched';
   searchedBookList: SearchedBook[];
+  hasMore?: boolean;
+  isLoading?: boolean;
+  lastBookElementCallback?: (node: HTMLDivElement | null) => void;
 }
 
-export function BookSearchResult({ type, searchedBookList }: BookSearchResultProps) {
+export function BookSearchResult({
+  type,
+  searchedBookList,
+  hasMore = false,
+  isLoading = false,
+  lastBookElementCallback,
+}: BookSearchResultProps) {
   const navigate = useNavigate();
+
   const isEmptySearchedBookList = () => {
     if (searchedBookList.length === 0) return true;
     else return false;
@@ -18,6 +28,7 @@ export function BookSearchResult({ type, searchedBookList }: BookSearchResultPro
   const handleApplyBook = () => {
     navigate('/search/applybook');
   };
+
   return (
     <Wrapper>
       <List>
@@ -30,8 +41,16 @@ export function BookSearchResult({ type, searchedBookList }: BookSearchResultPro
             <RequestButton onClick={handleApplyBook}>책 신청하기</RequestButton>
           </EmptyWrapper>
         ) : (
-          searchedBookList.map(book => (
-            <BookItem key={book.id} onClick={() => navigate(`/search/book/${book.isbn}`)}>
+          searchedBookList.map((book, index) => (
+            <BookItem
+              key={book.id}
+              onClick={() => navigate(`/search/book/${book.isbn}`)}
+              ref={
+                index === searchedBookList.length - 1 && lastBookElementCallback
+                  ? lastBookElementCallback
+                  : undefined
+              }
+            >
               <Cover src={book.coverUrl} alt={`${book.title} 커버`} />
               <BookInfo>
                 <Title>{book.title}</Title>
@@ -42,6 +61,12 @@ export function BookSearchResult({ type, searchedBookList }: BookSearchResultPro
             </BookItem>
           ))
         )}
+
+        {/* 로딩 상태 표시 */}
+        {isLoading && searchedBookList.length > 0 && <></>}
+
+        {/* 더 이상 데이터가 없음을 표시 */}
+        {!hasMore && searchedBookList.length > 0 && <></>}
       </List>
     </Wrapper>
   );