Merge pull request #109 from hamlsy/release/shop-info

change shop-info api spec

Author: hamlsy

src/core/constants/markerSizes.js

@@ -4,13 +4,13 @@
  */
 
 // 유저 마커 크기 (플레이어가 선택한 위치에 표시되는 마커)
-export const USER_MARKER_SIZE = { width: 24, height: 35 };
+export const USER_MARKER_SIZE = { width: 26, height: 37 };
 
 // 결과 마커 크기 (정답 위치에 표시되는 마커)
-export const RESULT_MARKER_SIZE = { width: 24, height: 35 };
+export const RESULT_MARKER_SIZE = { width: 26, height: 37 };
 
 // 게임 중 마커 크기 (지도 클릭 시 표시되는 인터랙티브 마커)
-export const GAME_MARKER_SIZE = { width: 24, height: 35 };
+export const GAME_MARKER_SIZE = { width: 26, height: 37 };
 
 // 게임 중 마커 offset (마커 이미지의 앵커 포인트)
 export const GAME_MARKER_OFFSET = { x: 12, y: 35 };

src/features/friend/components/FriendChatWindow.vue

@@ -16,7 +16,13 @@
       >
         <div class="chat-header-left">
           <div class="chat-avatar-wrap">
-            <div class="chat-avatar" :style="{ background: friend.avatarColor }">
+            <img
+              v-if="friend.markerImageUrl"
+              :src="friend.markerImageUrl"
+              class="chat-avatar-img"
+              :alt="friend.nickname"
+            />
+            <div v-else class="chat-avatar" :style="{ background: friend.avatarColor }">
               {{ friend.nickname[0].toUpperCase() }}
             </div>
             <span class="chat-online-dot" :class="{ online: friend.isOnline }"></span>
@@ -60,20 +66,32 @@
             <p>{{ friend.nickname }}님과 대화를 시작해보세요</p>
           </div>
 
-          <div
-            v-for="(msg, i) in messages"
-            :key="msg.id"
-            class="message-item"
-            :class="{
-              'is-mine': msg.isMine,
-              'show-avatar': shouldShowAvatar(i),
-            }"
-          >
+          <template v-for="(msg, i) in messages" :key="msg.id">
+            <!-- 날짜 구분선 -->
+            <div v-if="shouldShowDateSeparator(i)" class="chat-date-separator">
+              <span>{{ formatDateSeparator(msg.timestamp) }}</span>
+            </div>
+
+            <div
+              class="message-item"
+              :class="{
+                'is-mine': msg.isMine,
+                'show-avatar': shouldShowAvatar(i),
+              }"
+            >
             <!-- 상대방 메시지 -->
             <template v-if="!msg.isMine">
-              <div v-if="shouldShowAvatar(i)" class="msg-avatar" :style="{ background: friend.avatarColor }">
-                {{ friend.nickname[0].toUpperCase() }}
-              </div>
+              <template v-if="shouldShowAvatar(i)">
+                <img
+                  v-if="friend.markerImageUrl"
+                  :src="friend.markerImageUrl"
+                  class="msg-avatar-img"
+                  :alt="friend.nickname"
+                />
+                <div v-else class="msg-avatar" :style="{ background: friend.avatarColor }">
+                  {{ friend.nickname[0].toUpperCase() }}
+                </div>
+              </template>
               <div v-else class="msg-avatar-spacer"></div>
               <div class="msg-bubble other-bubble">
                 <p class="msg-text">{{ msg.text }}</p>
@@ -88,7 +106,8 @@
                 <span v-if="shouldShowTime(i)" class="msg-time">{{ formatTime(msg.timestamp) }}</span>
               </div>
             </template>
-          </div>
+            </div>
+          </template>
         </div>
 
         <!-- 맨 아래로 이동 버튼 -->
@@ -290,6 +309,25 @@ export default {
       return !sameMinute
     }
 
+    // 날짜 구분선
+    function shouldShowDateSeparator(index) {
+      if (index === 0) return true
+      const msg = props.messages[index]
+      const prev = props.messages[index - 1]
+      const msgDate = new Date(msg.timestamp).toLocaleDateString()
+      const prevDate = new Date(prev.timestamp).toLocaleDateString()
+      return msgDate !== prevDate
+    }
+
+    function formatDateSeparator(timestamp) {
+      if (!timestamp) return ''
+      return new Date(timestamp).toLocaleDateString('ko-KR', {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric'
+      })
+    }
+
     function formatTime(timestamp) {
       if (!timestamp) return ''
       return new Date(timestamp).toLocaleTimeString('ko-KR', { hour: '2-digit', minute: '2-digit' })
@@ -308,7 +346,8 @@ export default {
       isAtBottom,
       onHeaderClick, onWindowFocus, onScroll,
       scrollToBottomManual,
-      sendMessage, shouldShowAvatar, shouldShowTime, formatTime, autoResize,
+      sendMessage, shouldShowAvatar, shouldShowTime, 
+      shouldShowDateSeparator, formatDateSeparator, formatTime, autoResize,
     }
   },
 }
@@ -396,6 +435,15 @@ export default {
   color: #ffffff;
 }
 
+.chat-avatar-img {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  object-fit: contain;
+  border: 1.5px solid var(--color-border);
+  background: var(--color-background);
+}
+
 .chat-online-dot {
   position: absolute;
   bottom: 0;
@@ -525,6 +573,23 @@ export default {
 .chat-empty-icon { font-size: 22px; color: var(--color-border-dark); }
 .chat-empty p { margin: 0; }
 
+.chat-date-separator {
+  text-align: center;
+  margin: 16px 0 8px;
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--color-text-secondary);
+  display: flex;
+  justify-content: center;
+}
+
+.chat-date-separator span {
+  background: var(--color-surface-hover);
+  padding: 4px 12px;
+  border-radius: 12px;
+  border: 1px solid var(--color-border);
+}
+
 /* ── 메시지 아이템 ───────────────────────────────────────── */
 .message-item {
   display: flex;
@@ -549,6 +614,17 @@ export default {
   margin-bottom: 2px;
 }
 
+.msg-avatar-img {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  object-fit: contain;
+  border: 1.5px solid var(--color-border);
+  background: var(--color-background);
+  flex-shrink: 0;
+  margin-bottom: 2px;
+}
+
 .msg-avatar-spacer {
   width: 24px;
   flex-shrink: 0;

src/features/friend/components/FriendPanel.vue

@@ -576,7 +576,7 @@ export default {
 }
 
 .avatar-img {
-  object-fit: cover;
+  object-fit: contain;
   border: 1.5px solid var(--color-border);
   background: var(--color-background);
 }

src/features/shop/services/shop.service.js

@@ -31,9 +31,9 @@ const SHOP_ENDPOINTS = {
  * @property {number} price - 아이템 가격
  * @property {number} stock - 재고 수량
  * @property {string} imageUrl - 이미지 URL
- * @property {boolean} owned - 보유 여부
- * @property {number} [memberItemId] - 사용자 보유 아이템 ID (owned가 true일 때)
- * @property {boolean} [equipped] - 장착 여부 (마커 등에서 사용)
+ * @property {boolean} isOwned - 보유 여부
+ * @property {number|null} [ownedMemberItemId] - 사용자 보유 아이템 ID (isOwned가 true일 때)
+ * @property {boolean} [isEquipped] - 현재 장착 여부
  */
 
 /**
@@ -50,7 +50,7 @@ const SHOP_ENDPOINTS = {
  */
 class ShopService {
   /**
-   * 상점 내 정보 조회 (내 포인트, 장착 아이템, 보유 아이템)
+   * 상점 내 정보 조회 (내 포인트, 장착 아이템)
    * @returns {Promise<ApiResponse>} API 응답 데이터
    */
   async getShopInfo() {
@@ -191,9 +191,9 @@ class ShopService {
       price: item.price,
       stock: 999, // 더미 재고
       imageUrl: item.image,
-      owned: item.owned,
-      memberItemId: item.owned ? Math.floor(Math.random() * 10000) : null,
-      equipped: item.equipped || false,
+      isOwned: item.owned,
+      ownedMemberItemId: item.owned ? Math.floor(Math.random() * 10000) : null,
+      isEquipped: item.equipped || false,
       rarity: item.rarity,
       isNew: item.isNew,
       currencyType: item.currencyType
@@ -217,9 +217,9 @@ class ShopService {
       image: apiItem.imageUrl,
       category: categoryId,
       isNew: apiItem.isNew || false,
-      owned: apiItem.owned,
-      memberItemId: apiItem.memberItemId,
-      equipped: apiItem.equipped || false,
+      owned: apiItem.isOwned ?? apiItem.owned ?? false,
+      memberItemId: apiItem.ownedMemberItemId ?? apiItem.memberItemId ?? null,
+      equipped: apiItem.isEquipped ?? apiItem.equipped ?? false,
       stock: apiItem.stock,
       itemId: apiItem.itemId
     };