O2F-518 O2F-519 O2F-520 [FEAT] 게시글 상세 조회 프론트엔드 구현

src/apis/ootd/PostDto.ts

@@ -58,6 +58,7 @@ export interface PostImageProductDetailCreateRequest {
 }
 
 export interface PostCreateResponse {
+  id: number;
   thumbnailImgPreSignedUrl: string;
   imgPreSignedUrl: string;
 }
@@ -79,10 +80,13 @@ export interface PostDetailResponse {
   id: number;
   title: string;
   description: string;
+  imgUrl: string;
   stature?: number;
   weight?: number;
   viewCount: number;
+  likeCount: number;
   commentCount: number;
+  isLike?: boolean;
   createdAt: string;
   member: PostDetailMemberResponse;
   hashTags: Array<PostDetailHashTagResponse>;

src/apis/ootd/ProductSearchService.ts

@@ -0,0 +1,30 @@
+import type { ProductSearchPageResponse, ProductSearchResponse } from '@/apis/ootd/PostDto'
+import { AxiosError, type AxiosResponse } from 'axios'
+import { authAxiosInstance } from '@/apis/utils'
+
+export const searchProductFromOOTD = async (lastId: number, query: string)
+  : Promise<ProductSearchPageResponse<ProductSearchResponse>> => {
+  try {
+    const response: AxiosResponse = await authAxiosInstance.get(`/products/search/ootd`, {
+      params: {
+        lastId: lastId,
+        query: query
+      }
+    })
+    return response.data
+  } catch (error) {
+    if (error instanceof AxiosError) {
+      if (error.response) {
+        if (error.response.status >= 400) {
+          alert(error.response.data.message)
+          console.error(`Client Error=${error.response.data.message}`)
+        }
+        if (error.response.status < 500) {
+          alert('서버 내부 오류')
+          console.error('Internal Server Error')
+        }
+      }
+    }
+    throw error
+  }
+}

src/assets/css/ootd/ootd-detail.css

@@ -33,6 +33,10 @@
     fill: var(--Grayscale4, #C6C6C6);
 }
 
+.ootd-detail-like-button-icon.selected {
+    fill: #F00;
+}
+
 .ootd-detail-like-text-wrapper {
     display: flex;
     justify-content: center;
@@ -159,10 +163,6 @@
     gap: 0.625rem;
 }
 
-.ootd-detail-header-content-info-wrapper:hover {
-    cursor: pointer;
-}
-
 .ootd-detail-header-writer-profile-image-wrapper {
     display: flex;
     align-items: flex-start;
@@ -389,7 +389,7 @@
 
 .ootd-detail-tag-button-wrapper {
     display: flex;
-    width: 3.0625rem;
+    width: fit-content;
     height: 1.5625rem;
     justify-content: center;
     align-items: center;
@@ -553,10 +553,6 @@
     gap: 0.925rem;
 }
 
-.ootd-detail-footer-writer-detail-left-wrapper:hover {
-    cursor: pointer;
-}
-
 .ootd-detail-footer-writer-profile-image {
     width: 4.25rem;
     height: 4.25rem;
@@ -1122,8 +1118,6 @@
     gap: 0.625rem;
 
     position: absolute;
-    left: 55%;
-    top: 63%;
 }
 
 .product-detail-tag-wrapper:hover {
@@ -1186,36 +1180,20 @@
 }
 
 .product-detail-tag-dropdown-box {
-    width: 23.1875rem;
-    height: 11rem;
-
-    border-radius: 0.625rem;
-    background: var(--Grayscale1, #FFF);
-    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
-}
+    display: flex;
+    align-items: center;
 
-.product-detail-tag-dropdown-box-2 {
     width: 23.1875rem;
     height: 11rem;
 
-    border-radius: 0.625rem 0.625rem 0rem 0rem;
+    border-radius: 0.625rem;
     background: var(--Grayscale1, #FFF);
     box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
 }
 
-.product-image-wrapper {
-    display: flex;
-    align-items: flex-start;
-
-    position: absolute;
-    bottom: 0.01563rem;
-
-    border-radius: 0.625rem;
-}
-
 .product-image {
-    width: 8.625rem;
-    height: 11rem;
+    width: 7rem;
+    height: 9rem;
 
     border-radius: 0.625rem;
 }

src/assets/css/ootd/ootd-post-comment.css

@@ -58,7 +58,7 @@
 .ootd-detail-comment-input-box-wrapper {
     display: flex;
     padding: 0.3125rem;
-    width: 85%;
+    width: 65vw;
 
     border-radius: 0.3125rem;
     border: 1px solid #C6C6C6;

src/components/ootd/OOTDProductSearchModalComponent.vue

@@ -1,6 +1,6 @@
 <script setup lang='ts'>
 
-import { type PropType, ref } from 'vue'
+import { inject, type PropType, type Ref, ref, watch } from 'vue'
 import type { ProductSearchResponse } from '@/apis/ootd/PostDto'
 
 const VITE_STATIC_IMG_URL = ref<string>(import.meta.env.VITE_STATIC_IMG_URL)
@@ -21,24 +21,24 @@ const props = defineProps({
   }
 })
 
-// TODO: 상품 검색 API 필요
+// TODO: 상품 검색 API 필요 -> API Gateway 필터 나오면 적용 예정
 const products = ref<Array<ProductSearchResponse>>([
   {
-    id: 101,
+    id: 1,
     imgUrl: "/product-img/default-product-img.png",
     name: "상품명1",
     brandName: "BRAND1",
     sizeNames: ["사이즈1", "사이즈2", "사이즈3"]
   },
   {
-    id: 102,
+    id: 2,
     imgUrl: "/product-img/default-product-img.png",
     name: "상품명2",
     brandName: "BRAND2",
     sizeNames: ["사이즈1", "사이즈2", "사이즈3"]
   },
   {
-    id: 103,
+    id: 3,
     imgUrl: "/product-img/default-product-img.png",
     name: "상품명3",
     brandName: "BRAND3",
@@ -47,6 +47,19 @@ const products = ref<Array<ProductSearchResponse>>([
 ])
 const hasNext = ref<boolean>(false)
 
+const isScrollEnd = inject<Ref<boolean | undefined>>('isScrollEnd') as Ref<boolean | undefined>
+watch(isScrollEnd, async (afterScrollEnd, beforeScrollEnd) => {
+  if (afterScrollEnd !== beforeScrollEnd) {
+    if(hasNext.value) {
+
+    }
+    // const currentPage = requestPage.value
+    // if (hasNext.value) {
+    //   await onChangePage(currentPage + 1)
+    // }
+  }
+})
+
 </script>
 
 <template>