develp branch 작업내용 머지 : develop -> main

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/api/index.ts

@@ -2,7 +2,7 @@ import axios, { type AxiosResponse, type AxiosError } from 'axios';
 
 // 하드코딩된 액세스 토큰
 const ACCESS_TOKEN =
-  'Bearer eyJhbGciOiJIUzI1NiJ9.eyJ1c2VySWQiOjEsImlhdCI6MTc1NDIwMTY4OCwiZXhwIjoxNzU2NzkzNjg4fQ.oOyJ7JI_t2-Xq1-gfAv4ZaYNrbyplvqdxhCk76-Txe4';
+  'Bearer eyJhbGciOiJIUzI1NiJ9.eyJ1c2VySWQiOjksImlhdCI6MTc1NDM4MjY1MiwiZXhwIjoxNzU2OTc0NjUyfQ.CCb_F6OGe02_ITYsE-tqc2_PvSkRsxd96t8NWNIa1pI';
 
 // 토큰 관리 유틸리티
 export const TokenManager = {

src/api/rooms/createRoom.ts

@@ -0,0 +1,40 @@
+import { apiClient } from '../index';
+import type { CreateRoomRequest, CreateRoomData, ApiResponse } from '@/types/room';
+
+// API 응답 타입
+export type CreateRoomResponse = ApiResponse<CreateRoomData>;
+
+// 방 생성 API 함수
+export const createRoom = async (roomData: CreateRoomRequest) => {
+  const response = await apiClient.post<CreateRoomResponse>('rooms', roomData);
+  return response.data;
+};
+
+/*
+사용 예시:
+const roomData: CreateRoomRequest = {
+  isbn: "9788936434632",
+  category: "문학",
+  roomName: "문학 모임",
+  description: "문학을 사랑하는 사람들의 모임입니다.",
+  progressStartDate: "2023.10.01",
+  progressEndDate: "2023.10.31",
+  recruitCount: 5,
+  password: "1234",
+  isPublic: true
+};
+
+try {
+  const result = await createRoom(roomData);
+  if (result.isSuccess) {
+    console.log("생성된 방 ID:", result.data.roomId);
+    // 성공 처리 로직
+  } else {
+    console.error("방 생성 실패:", result.message);
+    // 실패 처리 로직
+  }
+} catch (error) {
+  console.error("API 호출 오류:", error);
+  // 에러 처리 로직
+}
+*/

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;