Merge pull request #32 from dnd-side-project/OZ-80-F-QA-4

Refactoring : QA 4차 반영

.github/release-drafter.yml

@@ -0,0 +1,40 @@
+name-template: "v$RESOLVED_VERSION 🌈" ## 릴리즈 제목
+tag-template: "v$RESOLVED_VERSION" ## 태그
+categories:
+  - title: "🚀 Features"
+    labels:
+      - "Bookmark 🔖"
+      - "✨ Feat"
+      - "PoseFeed 🧩"
+      - "PosePick 🃏"
+      - "PoseTalk 💬"
+      - "💄 Style"
+  - title: "🐛 Bug Fixes"
+    labels:
+      - "🛠 Fix"
+  - title: "🧰 Maintenance"
+    labels:
+      - "♻️ Refactor"
+change-template: "- $TITLE @$AUTHOR (#$NUMBER)"
+change-title-escapes: '\<*_&' # You can add # and @ to disable mentions, and add ` to disable code blocks.
+version-resolver:
+  major:
+    labels:
+      - "major"
+  minor:
+    labels:
+      - "minor"
+  patch:
+    labels:
+      - "patch"
+  default: patch
+template: | # 릴리즈 내용
+  ## Changes (v$RESOLVED_VERSION)
+
+  $CHANGES
+
+  ## Previos Tag
+  $PREVIOUS_TAG 
+
+  ## Contributors
+  $CONTRIBUTORS 

.github/workflows/release-drafter.yml

@@ -0,0 +1,20 @@
+name: Release Drafter
+
+on:
+  push:
+    branches:
+      - OZ-80* 
+
+permissions:
+  contents: read
+
+jobs:
+  update_release_draft:
+    permissions:
+      contents: write
+      pull-requests: write
+    runs-on: ubuntu-latest
+    steps:
+      - uses: release-drafter/release-drafter@v5
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

src/app/(Main)/components/MainHeader.tsx

@@ -1,12 +1,17 @@
 import Image from 'next/image';
+import Link from 'next/link';
 
 import Tab from './Tab';
 import { Header } from '@/components/Header';
 
 export default function MainHeader() {
   return (
     <Header
-      leftNode={<h4>PosePicker</h4>}
+      leftNode={
+        <Link href="/pick">
+          <h4>PosePicker</h4>
+        </Link>
+      }
       rightNode={<Image src="/icons/menu.svg" width={24} height={24} alt="24" />}
       headerDownNode={<Tab />}
       className="px-20"

src/app/(Main)/feed/components/Photo.tsx

@@ -1,6 +1,9 @@
+'use client';
 import Image from 'next/image';
 import Link from 'next/link';
 
+import { Popup } from '@/components/Modal';
+import { useOverlay } from '@/components/Overlay/useOverlay';
 import { ICON } from '@/constants/icon';
 
 interface Photo {
@@ -10,14 +13,39 @@ interface Photo {
 }
 
 export default function Photo({ imageKey, source, id }: Photo) {
+  const { open } = useOverlay();
   return (
     <Link href={`detail/${id}`}>
       <div className={`relative z-0 mb-16 inline-block h-fit w-full rounded-8`}>
         {imageKey && (
           <>
-            <img src={imageKey} alt={source} className="rounded-8" />
+            <Image
+              src={imageKey}
+              alt={source || ''}
+              width={200}
+              height={100}
+              className="rounded-8"
+            />
             <div className="absolute bottom-6 right-6 h-36 w-36 rounded-24 bg-white bg-opacity-30 p-6">
-              <Image src={ICON.bookmark.empty} width={24} height={24} alt="🔖" />
+              <Image
+                src={ICON.bookmark.empty}
+                width={24}
+                height={24}
+                alt="🔖"
+                onClick={(e) => {
+                  e.preventDefault();
+                  open(({ exit }) => (
+                    <Popup
+                      onClick={exit}
+                      className="cursor-pointer rounded-8"
+                      onCloseOutside={exit}
+                    >
+                      <p>해당 기능은 아직 준비중이에요!</p>
+                      <p> 업데이트를 기대해 주세요.</p>
+                    </Popup>
+                  ));
+                }}
+              />
             </div>
           </>
         )}

src/app/layout.tsx

@@ -13,7 +13,7 @@ import type { Metadata } from 'next';
 
 const DEFAULT_OG_TITLE = 'PosePicker';
 const DEFAULT_OG_DESC = '포토부스에서 고민하는 당신을 위한 포즈 추천';
-const DEFAULT_OG_IMAGE = '/images/main.png';
+const DEFAULT_OG_IMAGE = '/images/main_star.png';
 
 export const metadata: Metadata = {
   metadataBase: new URL(BASE_SITE_URL),

src/components/Modal/Modal.tsx

@@ -1,14 +1,23 @@
 import ModalWrapper from './PortalWrapper';
 import { StrictPropsWithChildren } from '@/types';
 
-interface PopupProps {
+interface PopupProps extends React.HTMLAttributes<HTMLTableSectionElement> {
   className?: string;
+  onCloseOutside?: () => void;
 }
 
-export default function Popup({ className, children }: StrictPropsWithChildren<PopupProps>) {
+export default function Popup({
+  className,
+  children,
+  onCloseOutside,
+  ...props
+}: StrictPropsWithChildren<PopupProps>) {
   return (
-    <ModalWrapper>
-      <section className={`flex flex-col items-center  bg-white px-16 py-12 ${className}`}>
+    <ModalWrapper onClick={onCloseOutside}>
+      <section
+        className={`flex flex-col items-center  bg-white px-16 py-12 ${className}`}
+        {...props}
+      >
         {children}
       </section>
     </ModalWrapper>

src/components/Modal/PortalWrapper.tsx

@@ -7,7 +7,7 @@ import { useOnClickOutside } from '@/hooks/useOnClickOutside';
 
 import type { StrictPropsWithChildren } from '@/types';
 
-interface PortalWrapperProps {
+interface PortalWrapperProps extends React.HTMLAttributes<HTMLDivElement> {
   onClose?: () => void;
   isBackGroundBlur?: boolean;
   className?: string;
@@ -18,6 +18,7 @@ export default function PortalWrapper({
   children,
   isBackGroundBlur = true,
   className,
+  ...props
 }: StrictPropsWithChildren<PortalWrapperProps>) {
   const portalRef = useRef<HTMLDivElement>(null);
 
@@ -35,6 +36,7 @@ export default function PortalWrapper({
           },
           className
         )}
+        {...props}
       >
         {children}
       </div>

src/components/Overlay/useOverlay.tsx

@@ -8,9 +8,10 @@ let elementId = 1;
 
 interface Options {
   exitOnUnmount?: boolean;
+  delay?: number;
 }
 
-export function useOverlay({ exitOnUnmount = true }: Options = {}) {
+export function useOverlay({ exitOnUnmount = true, delay }: Options = {}) {
   const context = useContext(OverlayContext);
 
   if (context == null) {
@@ -44,6 +45,11 @@ export function useOverlay({ exitOnUnmount = true }: Options = {}) {
             }}
           />
         );
+        if (!delay) return;
+        const timer = setTimeout(() => {
+          unmount(id);
+        }, delay);
+        return () => clearTimeout(timer);
       },
       close: () => {
         overlayRef.current?.close();
@@ -52,6 +58,6 @@ export function useOverlay({ exitOnUnmount = true }: Options = {}) {
         unmount(id);
       },
     }),
-    [id, mount, unmount]
+    [delay, id, mount, unmount]
   );
 }

src/components/WaitingToast/WaitingToast.tsx

@@ -0,0 +1,13 @@
+interface WaitingToastProps {
+  onClose: () => void;
+}
+export default function WaitingToast({ onClose }: WaitingToastProps) {
+  return (
+    <div
+      onClick={onClose}
+      className="inset-x-0 mx-auto max-w-390 cursor-pointer rounded-4 bg-zinc-900 bg-opacity-80 px-36 py-12 text-white"
+    >
+      해당 기능은 준비 중입니다. 조금만 기다려 주세요!
+    </div>
+  );
+}

src/components/WaitingToast/index.ts

@@ -0,0 +1 @@
+export { default as WaitingToast } from './WaitingToast';

src/hooks/useKakaoShare.ts

@@ -23,8 +23,8 @@ export default function useKakaoShare() {
       kakao.Link.sendDefault({
         objectType: 'feed',
         content: {
-          title: '포즈를 뽑아봐 !',
-          description: '당신에게 어울리는 포즈를 추천해드립니다.',
+          title: 'PosePicker',
+          description: '포토부스에서 고민하는 당신을 위한 포즈 추천',
           imageUrl:
             'https://github.com/gloddy-dev/gloddy-client/assets/62178788/a145c7ca-b487-4b2a-9913-cc1589e44f91',
           link: {