feat: 로딩스피너 구현

src/api/comments/getComments.ts

@@ -5,7 +5,7 @@ export interface CommentData {
   creatorId: number;
   creatorProfileImageUrl: string | null;
   creatorNickname: string;
-  alias: string;
+  aliasName: string;
   aliasColor: string;
   postDate: string;
   content: string;
@@ -21,7 +21,7 @@ export interface ReplyData {
   creatorId: number;
   creatorProfileImageUrl: string | null;
   creatorNickname: string;
-  alias: string;
+  aliasName: string;
   aliasColor: string;
   postDate: string;
   content: string;

src/api/feeds/getFeedDetail.ts

@@ -6,7 +6,7 @@ export interface FeedDetailData {
   creatorId: number;
   creatorNickname: string;
   creatorProfileImageUrl: string;
-  alias: string;
+  aliasName: string;
   aliasColor: string;
   postDate: string;
   isbn: string;

src/components/common/LoadingSpinner.tsx

@@ -0,0 +1,57 @@
+import styled from '@emotion/styled';
+import LoadingSpinnerIcon from '@/assets/common/loadingspinner.svg';
+import { colors, typography } from '@/styles/global/global';
+
+interface LoadingSpinnerProps {
+  message?: string;
+  size?: 'small' | 'medium' | 'large';
+  fullHeight?: boolean;
+}
+
+const LoadingSpinner = ({
+  message = '로딩 중...',
+  size = 'medium',
+  fullHeight = false,
+}: LoadingSpinnerProps) => {
+  return (
+    <Container fullHeight={fullHeight}>
+      <SpinnerImage size={size} src={LoadingSpinnerIcon} alt="로딩 중" />
+      {message && <LoadingText>{message}</LoadingText>}
+    </Container>
+  );
+};
+
+const Container = styled.div<{ fullHeight: boolean }>`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  ${({ fullHeight }) =>
+    fullHeight &&
+    `
+    min-height: 100vh;
+    background-color: var(--color-black-main);
+  `}
+`;
+
+const SpinnerImage = styled.img<{ size: string }>`
+  ${({ size }) => {
+    switch (size) {
+      case 'small':
+        return 'width: 24px; height: 24px;';
+      case 'large':
+        return 'width: 48px; height: 48px;';
+      default: // medium
+        return 'width: 32px; height: 32px;';
+    }
+  }}
+`;
+
+const LoadingText = styled.p`
+  margin-top: 20px;
+  color: ${colors.white};
+  font-size: ${typography.fontSize.lg};
+  font-weight: ${typography.fontWeight.semibold};
+`;
+
+export default LoadingSpinner;

src/components/common/Post/PostHeader.tsx

@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 interface PostHeaderProps {
   creatorProfileImageUrl?: string;
   creatorNickname?: string;
-  alias?: string;
+  aliasName?: string;
   aliasColor?: string;
   postDate: string;
   creatorId?: number;
@@ -13,8 +13,8 @@ interface PostHeaderProps {
 const PostHeader = ({
   creatorProfileImageUrl,
   creatorNickname,
-  alias,
-  aliasColor = '#FFFFFF', // 기본값 설정
+  aliasName,
+  aliasColor,
   postDate,
   creatorId,
   type = 'post',
@@ -34,7 +34,7 @@ const PostHeader = ({
         <div className="infoBox">
           <div className="username">{creatorNickname}</div>
           <div className="usertitle" style={{ color: aliasColor }}>
-            {alias}
+            {aliasName}
           </div>
         </div>
       </div>

src/components/common/Post/Reply.tsx

@@ -19,7 +19,7 @@ const Reply = ({
   creatorId,
   creatorProfileImageUrl,
   creatorNickname,
-  alias,
+  aliasName,
   aliasColor,
   postDate,
   content,
@@ -117,7 +117,7 @@ const Reply = ({
       <PostHeader
         creatorProfileImageUrl={creatorProfileImageUrl || undefined}
         creatorNickname={creatorNickname}
-        alias={alias}
+        aliasName={aliasName}
         aliasColor={aliasColor}
         postDate={postDate}
         creatorId={creatorId}

src/components/common/Post/SubReply.tsx

@@ -21,7 +21,7 @@ const SubReply = ({
   creatorId,
   creatorProfileImageUrl,
   creatorNickname,
-  alias,
+  aliasName,
   aliasColor,
   postDate,
   content,
@@ -139,7 +139,7 @@ const SubReply = ({
         <PostHeader
           creatorProfileImageUrl={creatorProfileImageUrl || ''}
           creatorNickname={creatorNickname}
-          alias={alias}
+          aliasName={aliasName || ''}
           aliasColor={aliasColor}
           postDate={postDate}
           creatorId={creatorId}
@@ -148,8 +148,7 @@ const SubReply = ({
         <ReplySection onClick={handleMoreClick}>
           <div className="left">
             <div className="reply">
-              <div className="reply-nickname">@{parentCommentCreatorNickname} </div>
-              {content}
+              <span className="reply-nickname">@{parentCommentCreatorNickname}</span> {content}
             </div>
             <div
               className="sub-reply"
@@ -229,7 +228,7 @@ const ReplySection = styled.div`
       line-height: 20px;
 
       .reply-nickname {
-        color: ${colors.grey[100]};
+        color: ${colors.white};
         font-size: ${typography.fontSize.sm};
         font-weight: ${typography.fontWeight.regular};
         line-height: 20px;

src/components/feed/FeedDetailPost.tsx

@@ -18,8 +18,12 @@ const Container = styled.div`
 
 const BorderBottom = styled.div`
   width: 100%;
-  height: 10px;
-  background-color: var(--color-darkgrey-dark);
+  min-width: 280px;
+  max-width: 500px;
+  margin: 0 auto;
+  padding: 0 20px;
+  height: 6px;
+  background: #1c1c1c;
 `;
 
 interface FeedDetailPostProps extends FeedDetailData {

src/components/feed/FeedPost.tsx

@@ -18,8 +18,12 @@ const Container = styled.div`
 
 const BorderBottom = styled.div`
   width: 100%;
-  height: 10px;
-  background-color: var(--color-darkgrey-dark);
+  min-width: 280px;
+  max-width: 500px;
+  margin: 0 auto;
+  padding: 0 20px;
+  height: 6px;
+  background: #1c1c1c;
 `;
 
 const FeedPost = ({ showHeader, isLast, isMyFeed, ...postData }: FeedPostProps) => {

src/components/feed/MyFeed.tsx

@@ -7,6 +7,7 @@ import { colors, typography } from '@/styles/global/global';
 import TotalBar from './TotalBar';
 import { getMyProfile } from '@/api/feeds/getMyProfile';
 import type { MyProfileData } from '@/types/profile';
+import LoadingSpinner from '@/components/common/LoadingSpinner';
 
 const MyFeed = ({ showHeader, posts = [], isMyFeed, isLast = false }: FeedListProps) => {
   const [profileData, setProfileData] = useState<MyProfileData | null>(null);
@@ -32,7 +33,9 @@ const MyFeed = ({ showHeader, posts = [], isMyFeed, isLast = false }: FeedListPr
   }, []);
 
   if (loading || !profileData) {
-    return <></>;
+    return (
+      <LoadingSpinner message="내 피드 정보를 불러오는 중..." size="large" fullHeight={true} />
+    );
   }
 
   return (

src/pages/signup/SignupGenre.tsx

@@ -27,26 +27,91 @@ const SignupGenre = () => {
   const nickname = location.state?.nickname;
 
   // 쿠키에서 Authorization 토큰 추출
-  const getAuthTokenFromCookie = () => {
+  const getAuthTokenFromCookie = async () => {
     console.log('=== 쿠키 디버깅 ===');
     console.log('현재 페이지 URL:', window.location.href);
     console.log('현재 도메인:', window.location.hostname);
     console.log('전체 쿠키:', document.cookie);
 
-    const cookies = document.cookie.split(';');
-    console.log('분리된 쿠키들:', cookies);
+    // 방법 1: document.cookie 사용
+    if (document.cookie) {
+      const cookies = document.cookie.split(';');
+      console.log('분리된 쿠키들:', cookies);
+
+      for (const cookie of cookies) {
+        const [name, value] = cookie.trim().split('=');
+        console.log('쿠키 이름:', name, '값:', value);
+        if (name === 'Authorization') {
+          console.log('Authorization 토큰 발견:', value);
+          return value;
+        }
+      }
+    }
+
+    // 방법 2: 직접 쿠키 이름으로 검색
+    const authCookie = document.cookie
+      .split(';')
+      .find(cookie => cookie.trim().startsWith('Authorization='));
+
+    if (authCookie) {
+      const token = authCookie.split('=')[1];
+      console.log('직접 검색으로 Authorization 토큰 발견:', token);
+      return token;
+    }
 
-    for (const cookie of cookies) {
-      const [name, value] = cookie.trim().split('=');
-      console.log('쿠키 이름:', name, '값:', value);
-      if (name === 'Authorization') {
-        console.log('Authorization 토큰 발견:', value);
-        return value;
+    // 방법 3: 정규식으로 검색
+    const cookieMatch = document.cookie.match(/Authorization=([^;]+)/);
+    if (cookieMatch && cookieMatch[1]) {
+      console.log('정규식으로 Authorization 토큰 발견:', cookieMatch[1]);
+      return cookieMatch[1];
+    }
+
+    // 방법 4: 모든 쿠키를 순회하며 검색
+    const allCookies = document.cookie.split(';');
+    for (let i = 0; i < allCookies.length; i++) {
+      const cookie = allCookies[i].trim();
+      if (cookie.startsWith('Authorization=')) {
+        const token = cookie.substring('Authorization='.length);
+        console.log('순회 검색으로 Authorization 토큰 발견:', token);
+        return token;
       }
     }
 
+    // 방법 5: 쿠키가 비어있는지 확인
+    if (!document.cookie || document.cookie.trim() === '') {
+      console.log('document.cookie가 비어있습니다.');
+    }
+
+    // 방법 6: 쿠키 길이 확인
+    console.log('쿠키 총 길이:', document.cookie.length);
+    console.log('쿠키 원본 문자열:', JSON.stringify(document.cookie));
+
+    // 방법 7: 서버에서 쿠키 정보 가져오기 (HttpOnly 쿠키일 경우)
+    try {
+      console.log('서버에서 쿠키 정보를 가져오는 중...');
+      const response = await fetch(`${import.meta.env.VITE_API_BASE_URL}/users/me`, {
+        method: 'GET',
+        credentials: 'include', // 쿠키 포함
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      });
+
+      if (response.ok) {
+        const data = await response.json();
+        console.log('서버 응답:', data);
+        // 서버에서 토큰을 헤더로 보내주거나, 사용자 정보를 통해 인증 상태 확인
+        if (data.data && data.data.userId) {
+          console.log('서버에서 사용자 정보 확인됨, 인증 상태 유효');
+          return 'VALID_AUTH'; // 특별한 값으로 인증 상태 표시
+        }
+      }
+    } catch (error) {
+      console.log('서버 쿠키 확인 실패:', error);
+    }
+
     console.log('Authorization 토큰을 찾을 수 없습니다.');
-    console.log('가능한 원인: 도메인 불일치, 경로 불일치, 쿠키 만료');
+    console.log('가능한 원인: 도메인 불일치, 경로 불일치, 쿠키 만료, HttpOnly 설정');
     return null;
   };
 
@@ -74,7 +139,7 @@ const SignupGenre = () => {
     if (!selectedAlias || !nickname) return;
 
     // 쿠키에서 토큰 추출
-    const authToken = getAuthTokenFromCookie();
+    const authToken = await getAuthTokenFromCookie();
     if (!authToken) {
       console.log('쿠키에서 Authorization 토큰을 찾을 수 없습니다.');
       console.log('토큰이 없어 회원가입을 진행할 수 없습니다.');