Public view image 조회,수정 개선 및 myPage 추가

apps/web/package.json

@@ -11,10 +11,10 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@review-canvas/theme": "workspace:*",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.0",
     "@react-hookz/web": "^24.0.4",
+    "@review-canvas/theme": "workspace:*",
     "@tanstack/react-query": "^5.28.8",
     "axios": "^1.6.8",
     "dayjs": "^1.11.10",
@@ -32,6 +32,7 @@
     "@review-canvas/eslint-config": "workspace:*",
     "@review-canvas/tailwind-config": "workspace:*",
     "@review-canvas/typescript-config": "workspace:*",
+    "@svgr/webpack": "^8.1.0",
     "@types/node": "^20.11.24",
     "@types/react": "^18.2.61",
     "@types/react-dom": "^18.2.19",

apps/web/src/app/layout.tsx

@@ -4,10 +4,10 @@ import { useEffect } from 'react';
 
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
-import GlobalStyles from '@/components/global-styles.tsx';
-import { DesignPropertyServiceProvider } from '@/services/design-property.tsx';
-import useShop from '@/state/shop.ts';
-import { notoSansKR } from '@/theme/font.ts';
+import GlobalStyles from '@/components/global-styles';
+import { DesignPropertyServiceProvider } from '@/services/design-property';
+import useShop from '@/state/shop';
+import { notoSansKR } from '@/theme/font';
 
 import './globals.css';
 

apps/web/src/app/mypage/[productID]/connected-page.tsx

@@ -4,10 +4,10 @@ import { Suspense } from 'react';
 
 import { useSuspenseQuery } from '@tanstack/react-query';
 
-import CloseButton from '@/components/close-button';
-import MyReviewList from '@/components/review/my-list';
-import { ReviewItemStyleProvider } from '@/contexts/style/review-item';
-import { ReviewListStyleProvider } from '@/contexts/style/review-list';
+import CloseButton from '@/components/button/close';
+import MyReviewListOnProduct from '@/components/review/my-review/list';
+import { ReviewItemStyleProvider } from '@/contexts/style/review-item-style';
+import { ReviewListStyleProvider } from '@/contexts/style/review-list-style';
 import useReviewCanvasReady from '@/hooks/use-review-canvas-ready.ts';
 import { useDesignPropertyService } from '@/services/design-property';
 import { useConnectedShop } from '@/state/shop.ts';
@@ -42,7 +42,7 @@ export default function MyReviewsPage({ productID }: ConnectedPageProps) {
             value={designPropertyService.convertDesignPropertyToReviewItemStyle(designPropertyQuery.data)}
           >
             <Suspense fallback={<div>loading...</div>}>
-              <MyReviewList productID={productID} />
+              <MyReviewListOnProduct productID={productID} />
             </Suspense>
           </ReviewItemStyleProvider>
         </ReviewListStyleProvider>

apps/web/src/app/mypage/connected-page.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import { Suspense } from 'react';
+
+import { useSuspenseQuery } from '@tanstack/react-query';
+
+import MyReviewList from '@/components/review/my-page/list';
+import { ReviewItemStyleProvider } from '@/contexts/style/review-item-style';
+import { ReviewListStyleProvider } from '@/contexts/style/review-list-style';
+import useReviewCanvasReady from '@/hooks/use-review-canvas-ready.ts';
+import { useDesignPropertyService } from '@/services/design-property';
+import { useConnectedShop } from '@/state/shop.ts';
+
+export default function MyReviewsPage() {
+  const { id } = useConnectedShop();
+  const designPropertyService = useDesignPropertyService();
+
+  useReviewCanvasReady('mypage');
+  const designPropertyQuery = useSuspenseQuery({
+    queryKey: ['design-property', id],
+    queryFn: () => designPropertyService.get(id),
+  });
+
+  return (
+    <main className="relative">
+      <div className="p-2">
+        <ReviewListStyleProvider
+          value={designPropertyService.convertDesignPropertyResponseToReviewListStyle(designPropertyQuery.data)}
+        >
+          <ReviewItemStyleProvider
+            value={designPropertyService.convertDesignPropertyToReviewItemStyle(designPropertyQuery.data)}
+          >
+            <Suspense fallback={<div>loading...</div>}>
+              <MyReviewList />
+            </Suspense>
+          </ReviewItemStyleProvider>
+        </ReviewListStyleProvider>
+      </div>
+    </main>
+  );
+}

apps/web/src/app/mypage/page.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+import { Suspense } from 'react';
+
+import useReviewCanvasReady from '@/hooks/use-review-canvas-ready';
+import DisconnectedPage from '@/pages/disconnected-page';
+import { ReviewServiceProvider } from '@/services/review';
+import useShop from '@/state/shop';
+
+import ConnectedPage from './connected-page';
+
+export default function Page() {
+  const shop = useShop();
+
+  useReviewCanvasReady('list');
+
+  if (!shop.connected) return <DisconnectedPage />;
+
+  return (
+    <ReviewServiceProvider>
+      <Suspense fallback={<div>loading...</div>}>
+        <ConnectedPage />
+      </Suspense>
+    </ReviewServiceProvider>
+  );
+}

apps/web/src/app/products/[productID]/reviews/connected-page.tsx

@@ -4,12 +4,12 @@ import { Suspense } from 'react';
 
 import { useSuspenseQuery } from '@tanstack/react-query';
 
-import ReviewList from '@/components/review/list.tsx';
-import { ReviewItemStyleProvider } from '@/contexts/style/review-item.ts';
-import { ReviewListStyleProvider } from '@/contexts/style/review-list.ts';
-import useMessageToShop from '@/hooks/use-message-to-shop.ts';
-import { useDesignPropertyService } from '@/services/design-property.tsx';
-import { useConnectedShop } from '@/state/shop.ts';
+import ReviewList from '@/components/review/list';
+import { ReviewItemStyleProvider } from '@/contexts/style/review-item-style';
+import { ReviewListStyleProvider } from '@/contexts/style/review-list-style';
+import useMessageToShop from '@/hooks/use-message-to-shop';
+import { useDesignPropertyService } from '@/services/design-property';
+import { useConnectedShop } from '@/state/shop';
 import { MESSAGE_TYPES } from '@/utils/message';
 
 interface ConnectedPageProps {
@@ -49,7 +49,7 @@ export default function ConnectedPage({ productID }: ConnectedPageProps) {
             onClick={openMyPage}
             type="button"
           >
-            My Page
+            My Review
           </button>
           <button
             className="border-2 border-indigo-500/60 text-white bg-blue-500 m-2"

apps/web/src/app/replies/[replyID]/delete/page.tsx

@@ -5,8 +5,8 @@ import { useParams } from 'next/navigation';
 
 import DeleteConfirm from '@/components/delete-confrim';
 import useReviewCanvasReady from '@/hooks/use-review-canvas-ready.ts';
-import type { PathInfo } from '@/services/api-types/review';
-import { useReviewService } from '@/services/review.tsx';
+import type { PathInfo } from '@/models/api-type';
+import { useReviewService } from '@/services/review';
 import useShop from '@/state/shop.ts';
 import { MESSAGE_TYPES, sendMessageToShop } from '@/utils/message.ts';
 

apps/web/src/app/replies/[replyID]/edit/page.tsx

@@ -4,12 +4,12 @@ import { useEffect, useState } from 'react';
 import { useMutation, useQuery } from '@tanstack/react-query';
 import { notFound, useParams } from 'next/navigation';
 
-import CloseButton from '@/components/close-button';
-import useReviewCanvasReady from '@/hooks/use-review-canvas-ready.ts';
-import type { CreateReplyItemRequest } from '@/services/api-types/review';
-import { useReviewService } from '@/services/review.tsx';
-import useShop from '@/state/shop.ts';
-import { MESSAGE_TYPES, sendMessageToShop } from '@/utils/message.ts';
+import CloseButton from '@/components/button/close';
+import useReviewCanvasReady from '@/hooks/use-review-canvas-ready';
+import type { CreateReplyItemRequest } from '@/models/api-type';
+import { useReviewService } from '@/services/review';
+import useShop from '@/state/shop';
+import { MESSAGE_TYPES, sendMessageToShop } from '@/utils/message';
 
 type PageParams = {
   replyID: string;
@@ -78,7 +78,7 @@ export default function ReplyEditPage() {
     <div className="relative p-4 flex flex-col gap-8">
       <CloseButton onClose={close} />
       <form
-        className="relative p-4 flex flex-col gap-8"
+        className="relative p-4 flex flex-col gap-3"
         onSubmit={handleSubmit}
       >
         {replyDetail.nickName ? (
@@ -87,17 +87,14 @@ export default function ReplyEditPage() {
           </div>
         ) : null}
         <textarea
-          className="relative p-4 flex flex-col gap-8 border-2 overflow-hidden resize-none"
+          className="relative p-2 flex flex-col gap-8 border-2 overflow-hidden resize-none"
           defaultValue={replyDetail.content}
           onChange={handleChange}
-          rows={3}
+          rows={4}
         />
-        <button
-          className="self-end"
-          type="submit"
-        >
-          저장
-        </button>
+        <div className="self-end rounded-lg border-2 border-indigo-500/20 text-white bg-gray-800/70 px-8 py-1">
+          <button type="submit">수정</button>
+        </div>
       </form>
     </div>
   );

apps/web/src/app/replies/layout.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { ReviewServiceProvider } from '@/services/review.tsx';
+import { ReviewServiceProvider } from '@/services/review';
 
 export default function ReviewLayout({ children }: React.PropsWithChildren) {
   return <ReviewServiceProvider>{children}</ReviewServiceProvider>;

apps/web/src/app/reviews/[reviewID]/connected-page.tsx

@@ -4,18 +4,18 @@ import { Suspense, useEffect, useState } from 'react';
 
 import { useMutation, useQuery, useSuspenseQuery } from '@tanstack/react-query';
 
-import CloseButton from '@/components/close-button';
-import Reply from '@/components/reply/item';
+import CloseButton from '@/components/button/close';
+import Reply from '@/components/reply/board-style-item';
 import ImageSlide from '@/components/review/image-slide';
 import { Star } from '@/components/review/star';
-import { ReviewItemStyleProvider } from '@/contexts/style/review-item';
-import { ReviewListStyleProvider } from '@/contexts/style/review-list';
-import type { CreateReplyItemRequest, ReplyItem } from '@/services/api-types/review';
+import { ReviewItemStyleProvider } from '@/contexts/style/review-item-style';
+import { ReviewListStyleProvider } from '@/contexts/style/review-list-style';
+import type { CreateReplyItemRequest, ReplyItem } from '@/models/api-type';
 import { useDesignPropertyService } from '@/services/design-property';
-import { useReviewService } from '@/services/review.tsx';
-import useShop, { useConnectedShop } from '@/state/shop.ts';
+import { useReviewService } from '@/services/review';
+import useShop, { useConnectedShop } from '@/state/shop';
 import { isEnterKeyPressedWithoutShift } from '@/utils/keyboard';
-import { MESSAGE_TYPES, sendMessageToShop } from '@/utils/message.ts';
+import { MESSAGE_TYPES, sendMessageToShop } from '@/utils/message';
 
 interface ConnectedPageProps {
   reviewID: string;
@@ -45,7 +45,6 @@ export default function ReviewDetailPage({ reviewID }: ConnectedPageProps) {
   const reviewDetailQuery = useQuery({
     queryKey: ['review-detail', { requestId: reviewID, mallId: id, memberId: userID }],
     queryFn: () => reviewService.get({ requestId: reviewID, mallId: id, memberId: userID ? userID : undefined }),
-    enabled: Boolean(shop.connected && reviewID),
   });
 
   const createReplyMutation = useMutation({
@@ -100,74 +99,78 @@ export default function ReviewDetailPage({ reviewID }: ConnectedPageProps) {
   };
 
   const reviewDetail = reviewDetailQuery.data.data;
+  const isImage = reviewDetail.imageVideoUrls.reviewResizeImageUrls.length > 0;
+  const layoutStyle = isImage ? 'grid grid-cols-2 h-full' : '';
 
   return (
-    <main>
+    <main className="absolute top-0 left-0 w-full h-full">
       <CloseButton onClose={close} />
-      <div className="relative justify-center bg-black/60">
-        <ImageSlide reviewResizeImageUrls={reviewDetail.imageVideoUrls.reviewResizeImageUrls} />
-      </div>
-
-      <div className="flex flex-col p-4">
-        <CloseButton onClose={close} />
-        <div className="flex gap-0.5 m-2 items-center w-fit">
-          <Star
-            setStar={() => {}}
-            size="small"
-            star={reviewDetail.score}
-          />
+      <div className={layoutStyle}>
+        <div className="relative justify-center bg-gray-100">
+          <ImageSlide reviewResizeImageUrls={reviewDetail.imageVideoUrls.reviewResizeImageUrls} />
         </div>
-        <div className="flex flex-col gap-2 m-2">
-          <div>
-            작성자 <span>{reviewDetail.nickname}</span>
-          </div>
-          <p>{reviewDetail.content}</p>
-        </div>
-        {shop.userID ? (
-          <div className="relative flex flex-col gap-2 px-3 mt-8">
-            <div>댓글</div>
-            <textarea
-              className="border-2 border-gray-400/80 p-1 overflow-hidden resize-none"
-              maxLength={500}
-              onChange={handleChange}
-              onKeyDown={handleKeyDown}
-              placeholder="댓글을 작성해주세요."
-              rows={3}
-              value={content}
+
+        <div className="flex flex-col p-4">
+          <div className="flex gap-0.5 m-2 items-center w-fit">
+            <Star
+              setStar={() => {}}
+              size="small"
+              star={reviewDetail.score}
             />
-            <div className="absolute right-2 bottom-2 mr-4 border-2 border-gray-300/80 rounded-md z-10 items-center bg-violet-100/40">
-              <button
-                className="text-sm px-3 py-1"
-                disabled={content.length === 0}
-                onClick={submit}
-                type="button"
-              >
-                작성
-              </button>
+          </div>
+          <div className="flex flex-col gap-2 m-2">
+            <div>
+              작성자 <span>{reviewDetail.nickname}</span>
             </div>
+            <p>{reviewDetail.content}</p>
           </div>
-        ) : null}
-
-        <ReviewListStyleProvider
-          value={designPropertyService.convertDesignPropertyResponseToReviewListStyle(designPropertyQuery.data)}
-        >
-          <ReviewItemStyleProvider
-            value={designPropertyService.convertDesignPropertyToReviewItemStyle(designPropertyQuery.data)}
-          >
-            <Suspense fallback={<div>loading...</div>}>
-              <div className="mt-8">
-                {reviewDetail.replies.map((it: ReplyItem) => (
-                  <Reply
-                    isModal
-                    key={it.replyId}
-                    memberId={shop.userID}
-                    reply={it}
-                  />
-                ))}
+          {shop.userID ? (
+            <div className="relative flex flex-col gap-2 px-3 mt-8">
+              <div>댓글</div>
+              <textarea
+                className="border-2 border-gray-400/80 p-1 overflow-hidden resize-none"
+                maxLength={500}
+                onChange={handleChange}
+                onKeyDown={handleKeyDown}
+                placeholder="댓글을 작성해주세요."
+                rows={3}
+                value={content}
+              />
+              <div className="absolute right-2 bottom-2 mr-4 border-2 border-gray-300/80 rounded-md z-10 items-center bg-violet-100/40">
+                <button
+                  className="text-sm px-3 py-1"
+                  disabled={content.length === 0}
+                  onClick={submit}
+                  type="button"
+                >
+                  작성
+                </button>
               </div>
-            </Suspense>
-          </ReviewItemStyleProvider>
-        </ReviewListStyleProvider>
+            </div>
+          ) : null}
+          <div>
+            <ReviewListStyleProvider
+              value={designPropertyService.convertDesignPropertyResponseToReviewListStyle(designPropertyQuery.data)}
+            >
+              <ReviewItemStyleProvider
+                value={designPropertyService.convertDesignPropertyToReviewItemStyle(designPropertyQuery.data)}
+              >
+                <Suspense fallback={<div>loading...</div>}>
+                  <div className="mt-8">
+                    {reviewDetail.replies.map((it: ReplyItem) => (
+                      <Reply
+                        isModal
+                        key={it.replyId}
+                        memberId={shop.userID}
+                        reply={it}
+                      />
+                    ))}
+                  </div>
+                </Suspense>
+              </ReviewItemStyleProvider>
+            </ReviewListStyleProvider>
+          </div>
+        </div>
       </div>
     </main>
   );