Merge pull request #60 from dnd-side-project/seo

seo, style : 최종 배포 관련 변경사항

public/manifest.json

@@ -8,47 +8,37 @@
   "start_url": "/",
   "icons": [
     {
-      "src": "/pwa-icons/icon-48x48.png",
-      "sizes": "48x48",
+      "src": "/pwa-icons/favicon-16-square.png",
+      "sizes": "16x16",
       "type": "image/png"
     },
     {
-      "src": "/pwa-icons/icon-72x72.png",
-      "sizes": "72x72",
+      "src": "/pwa-icons/favicon-32-square.png",
+      "sizes": "32x32",
       "type": "image/png"
     },
     {
-      "src": "/pwa-icons/icon-96x96.png",
-      "sizes": "96x96",
+      "src": "/pwa-icons/favicon-64-square.png",
+      "sizes": "64x64",
       "type": "image/png"
     },
     {
-      "src": "/pwa-icons/icon-128x128.png",
-      "sizes": "128x128",
+      "src": "/pwa-icons/favicon-180-square.png",
+      "sizes": "180x180",
       "type": "image/png"
     },
     {
-      "src": "/pwa-icons/icon-144x144.png",
-      "sizes": "144x144",
-      "type": "image/png"
-    },
-    {
-      "src": "/pwa-icons/icon-152x152.png",
-      "sizes": "152x152",
-      "type": "image/png"
-    },
-    {
-      "src": "/pwa-icons/icon-192x192.png",
+      "src": "/pwa-icons/favicon-192-square.png",
       "sizes": "192x192",
       "type": "image/png"
     },
     {
-      "src": "/pwa-icons/icon-384x384.png",
-      "sizes": "384x384",
+      "src": "/pwa-icons/favicon-256-square.png",
+      "sizes": "256x256",
       "type": "image/png"
     },
     {
-      "src": "/pwa-icons/icon-512x512.png",
+      "src": "/pwa-icons/favicon-512-square.png",
       "sizes": "512x512",
       "type": "image/png",
       "purpose": "any maskable"

src/app/(Main)/feed/FeedSection.tsx

@@ -27,14 +27,22 @@ export default function FeedSection() {
       <FilterTab />
       <Spacing size={50} />
       <div>
-        {data.pages[0].recommendation ? (
+        {data.pages[0].filteredContents.empty ? (
+          <EmptyCase
+            title={'신비한 포즈를 찾으시는군요!'}
+            text={'찾고 싶은 포즈를 저희에게 알려주세요.'}
+            button={'문의사항 남기기'}
+            path={URL.inquiry}
+          />
+        ) : (
+          <div className="columns-2	py-16">
+            {data.pages.map((page) => (
+              <PhotoList key={page.filteredContents.number} data={page.filteredContents.content} />
+            ))}
+          </div>
+        )}
+        {data.pages[0].recommendation && (
           <>
-            <EmptyCase
-              title={'신비한 포즈를 찾으시는군요!'}
-              text={'찾고 싶은 포즈를 저희에게 알려주세요.'}
-              button={'문의사항 남기기'}
-              path={URL.inquiry}
-            />
             <h4 className="mb-16">이런 포즈는 어때요?</h4>
             <div className="columns-2	py-16">
               {data.pages.map((page) => (
@@ -45,12 +53,6 @@ export default function FeedSection() {
               ))}
             </div>
           </>
-        ) : (
-          <div className="columns-2	py-16">
-            {data.pages.map((page) => (
-              <PhotoList key={page.filteredContents.number} data={page.filteredContents.content} />
-            ))}
-          </div>
         )}
         <div ref={ref} />
       </div>

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

@@ -21,7 +21,7 @@ export default function EmptyCase(props: EmptyCase) {
       <Spacing size={32} />
       <div className="flex justify-center">
         <Link href={path}>
-          <PrimaryButton text={button} type="secondary" />
+          <PrimaryButton text={button} type="fill" />
         </Link>
       </div>
     </div>

src/app/(Main)/feed/page.tsx

@@ -1,16 +1,9 @@
 import { QueryAsyncBoundary } from '@suspensive/react-query';
-import { Metadata } from 'next';
 
 import FeedSection from './FeedSection';
 import { RejectedFallback } from '@/components/ErrorBoundary';
 import { Loading } from '@/components/Loading';
 import { PageAnimation } from '@/components/PageAnimation';
-import { META_STRING } from '@/constants/meta';
-
-export const metadata: Metadata = {
-  title: '포즈피드',
-  description: META_STRING.description.feed,
-};
 
 export default function Feed() {
   return (

src/app/(Main)/pick/page.tsx

@@ -1,12 +1,4 @@
-import { Metadata } from 'next';
-
 import PickSection from './components/PickSection';
-import { META_STRING } from '@/constants/meta';
-
-export const metadata: Metadata = {
-  title: '포즈픽',
-  description: META_STRING.description.pick,
-};
 
 export default function Pick() {
   return <PickSection />;

src/app/(Main)/talk/page.tsx

@@ -1,15 +1,7 @@
-import { Metadata } from 'next';
-
 import TalkSection from './components/TalkSection';
 import TitleSection from './components/TitleSection';
 import { PageAnimation } from '@/components/PageAnimation';
 import { Spacing } from '@/components/Spacing';
-import { META_STRING } from '@/constants/meta';
-
-export const metadata: Metadata = {
-  title: '포즈톡',
-  description: META_STRING.description.talk,
-};
 
 export default function Talk() {
   return (

src/app/(Sub)/detail/[id]/components/DetailHeader.tsx

@@ -1,29 +1,31 @@
 'use client';
-import Image from 'next/image';
-import { useRouter } from 'next/navigation';
 
+import Image from 'next/image';
 import IconButton from '@/components/Button/IconButton';
 import { Header } from '@/components/Header';
 import { PreparingModal } from '@/components/Modal';
 import { useOverlay } from '@/components/Overlay/useOverlay';
+import Link from 'next/link';
+import { ICON } from '@/constants/icon';
 
 export default function DetailHeader() {
   const { open } = useOverlay();
-  const router = useRouter();
 
   return (
     <Header
       leftNode={
-        <IconButton size="large" onClick={() => router.back()}>
-          <Image src="/icons/close.svg" width={24} height={24} alt="back" />
-        </IconButton>
+        <Link href={'/feed'}>
+          <IconButton size="large">
+            <Image src="/icons/close.svg" width={24} height={24} alt="back" />
+          </IconButton>
+        </Link>
       }
       rightNode={
         <IconButton
           size="large"
           onClick={() => open(({ exit }) => <PreparingModal onClose={exit} />)}
         >
-          <Image src="/icons/bookmark.svg" width={24} height={24} alt="bookmark" />
+          <Image src={ICON.bookmark.black} width={24} height={24} alt="bookmark" />
         </IconButton>
       }
       className="px-4"

src/app/(Sub)/detail/[id]/components/DetailSection.tsx

@@ -26,7 +26,7 @@ export default function DetailSection({ poseId }: DetailSectionProps) {
   const pathname = usePathname();
 
   if (!data) return null;
-  const { imageKey, tagAttributes, sourceUrl } = data.poseInfo;
+  const { imageKey, tagAttributes, sourceUrl, peopleCount, frameCount } = data.poseInfo;
 
   const handleShareLink = async () => {
     await copy(BASE_SITE_URL + pathname);
@@ -57,6 +57,8 @@ export default function DetailSection({ poseId }: DetailSectionProps) {
         </div>
       </div>
       <div className="flex flex-wrap gap-10 px-20 py-12">
+        <Tag type="people" value={peopleCount} name={`${peopleCount}인`} />
+        <Tag type="frame" value={frameCount} name={`${frameCount}컷`} />
         {tagAttributes?.split(',').map((tag, index) => <Tag key={index} name={tag} />)}
       </div>
 
@@ -75,17 +77,35 @@ export default function DetailSection({ poseId }: DetailSectionProps) {
   );
 }
 interface TagProps {
+  type?: 'people' | 'frame' | 'tag';
+  value?: number;
   name: string;
 }
 
-function Tag({ name }: TagProps) {
+function Tag({ type = 'tag', value, name }: TagProps) {
   const { updateFilterState } = useFilterState();
   const handleTag = () => {
-    updateFilterState({
-      tags: new Array(name),
-      frameCount: 0,
-      peopleCount: 0,
-    });
+    let filterState;
+    if (type === 'people') {
+      filterState = {
+        tags: [],
+        frameCount: 0,
+        peopleCount: value || 0,
+      };
+    } else if (type === 'frame') {
+      filterState = {
+        tags: [],
+        frameCount: value || 0,
+        peopleCount: 0,
+      };
+    } else {
+      filterState = {
+        tags: new Array(name),
+        frameCount: 0,
+        peopleCount: 0,
+      };
+    }
+    updateFilterState(filterState);
   };
 
   return (

src/app/(Sub)/menu/components/MenuListSection.tsx

@@ -25,19 +25,22 @@ export default function MenuListSection() {
     ));
   };
 
-  const handleLogoutClick = () => {
-    open(({ exit }) => (
-      <MenuModal onClose={exit} onConfirm={() => console.log('로그아웃')}>
-        <LogoutModalContent />
-      </MenuModal>
-    ));
-  };
+  // const handleLogoutClick = () => {
+  //   open(({ exit }) => (
+  //     <MenuModal onClose={exit} onConfirm={() => console.log('로그아웃')}>
+  //       <LogoutModalContent />
+  //     </MenuModal>
+  //   ));
+  // };
 
   return (
     <section className="flex flex-col">
       <button className="flex flex-col py-12" onClick={handleInquiryClick}>
         서비스 이용 문의
       </button>
+      <button className="flex flex-col py-12" onClick={() => window.open(URL.information)}>
+        서비스 정보
+      </button>
       {/* <button className="flex flex-col py-12 text-tertiary" onClick={handleLogoutClick}>
         로그아웃
       </button> */}

src/app/layout.tsx

@@ -24,7 +24,7 @@ export const metadata: Metadata = {
     google: 'MB7qV_Oa4G4gR0jHgjtnE6S4g4blocE2mjo7z-z2f6Q',
   },
   other: {
-    'naver-site-verification': '65f3aba9349cce28018ac7a97d4f87ff00709aa3',
+    'naver-site-verification': 'eb9f471cae26de34e6bc71849e73f04cb8b00d83',
   },
   openGraph: {
     title: META_STRING.title,

src/app/robots.txt

@@ -1,4 +1,4 @@
-User-Agent: *
+User-agent: *
 Allow: /
 
 Sitemap: https://www.posepicker.site/sitemap.xml

src/components/BottomFixedDiv/index.tsx

@@ -10,7 +10,7 @@ export default function BottomFixedDiv({
 }: StrictPropsWithChildren<BottomFixedDivProps>) {
   return (
     <div
-      className={`fixed inset-x-0 bottom-0 mx-auto max-w-440 bg-white px-20 pb-20 pt-10 ${className}`}
+      className={`fixed inset-x-0 bottom-0 mx-auto max-w-440 bg-white px-20 pb-25 pt-10 ${className}`}
     >
       {children}
     </div>

src/constants/icon.ts

@@ -7,6 +7,7 @@ export const ICON = {
   bookmark: {
     fill: '/icons/bookmark_fill.svg',
     empty: '/icons/bookmark.svg',
+    black: '/icons/bookmark_black.svg',
   },
   arrow: {
     back: '/icons/arrow_back.svg',

src/constants/meta.ts

@@ -1,17 +1,17 @@
 export const META_STRING = {
-  title: 'PosePicker',
+  title: 'PosePicker | 포즈피커',
   description: {
     main: '포토부스에서 고민하는 당신을 위한 포즈 추천 서비스',
     sub: '포즈가 고민될 땐? 포즈피커!',
-    pick: '시간 없을 땐 포즈픽으로 빠르게 랜덤 포즈를 추천받아보세요.',
-    talk: '포즈톡에서 뽑은 랜덤 제시어로 나만의 개성있는 포즈를 완성해보세요.',
-    feed: '포즈피드에서 조건에 맞는 포즈를 찾고, 친구한테 공유해보세요',
+    // pick: '시간 없을 땐 포즈픽으로 빠르게 랜덤 포즈를 추천받아보세요.',
+    // talk: '포즈톡에서 뽑은 랜덤 제시어로 나만의 개성있는 포즈를 완성해보세요.',
+    // feed: '포즈피드에서 조건에 맞는 포즈를 찾고, 친구한테 공유해보세요',
   },
   image: {
     og: '/meta/og_main.png',
     detail: '/meta/og_detail.png',
-    kakao_share: '/meta/og_kakao.png',
+    kakao_share: 'https://www.posepicker.site/meta/og_kakao.png',
   },
   favicon: '/meta/favicon.ico',
-  appleIcon: '/meta/apple_touch_icon.png',
+  appleIcon: '/pwa-icons/favicon-192-rounded.png',
 };

src/constants/url.ts

@@ -2,4 +2,5 @@ export const URL = {
   site: 'https://www.posepicker.site',
   inquiry:
     'https://docs.google.com/forms/d/e/1FAIpQLSeZuPZTXnO4rZ4k39SzXv96PWAW4gLcTYBrsRUrgRHSVV9Ldg/viewform?usp=sf_link',
+  information: 'https://shineshine.notion.site/a668d9eba61f48e584df2ad3a946c313',
 };