Merge pull request #36 from dnd-side-project/hotfix/final

Hotfix/final
dnd-side-project · Aug 26, 2023 · ecc381f · ecc381f
2 parents 3a96692 + 5dc8963
commit ecc381f
Show file tree

Hide file tree

Showing 17 changed files with 94 additions and 55 deletions.
diff --git a/public/icons/carat_down_gray.svg b/public/icons/carat_down_gray.svg
diff --git a/public/icons/close.svg b/public/icons/close.svg
diff --git a/public/icons/close_gray.svg b/public/icons/close_gray.svg
diff --git a/public/workbox-e34f44db.js.map b/public/workbox-e34f44db.js.map
diff --git a/src/app/(Main)/feed/components/FilterTab.tsx b/src/app/(Main)/feed/components/FilterTab.tsx
@@ -22,7 +22,13 @@ export default function FilterTab() {
         onClick={openBottomSheet}
       >
         <h5 id="subtitle-2">필터</h5>
-        <Image src={ICON.carat.down} alt="▾" width={16} height={16} priority />
+        <Image
+          src={isFiltered ? ICON.carat.down_purple : ICON.carat.down}
+          alt="▾"
+          width={16}
+          height={16}
+          priority
+        />
       </button>
       {isFiltered && (
         <>

diff --git a/src/app/(Main)/feed/components/Photo.tsx b/src/app/(Main)/feed/components/Photo.tsx
@@ -19,13 +19,7 @@ export default function Photo({ imageKey, source, id }: Photo) {
       <div className={`relative z-0 mb-16 inline-block h-fit w-full rounded-8`}>
         {imageKey && (
           <>
-            <Image
-              src={imageKey}
-              alt={source || ''}
-              width={200}
-              height={100}
-              className="rounded-8"
-            />
+            <img src={imageKey} alt={source || ''} 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}

diff --git a/src/app/(Main)/feed/components/PhotoList.tsx b/src/app/(Main)/feed/components/PhotoList.tsx
@@ -7,7 +7,7 @@ interface PhotoList {
 
 export default function PhotoList({ data }: PhotoList) {
   return (
-    <div className="columns-2	overflow-y-scroll">
+    <div className="columns-2	overflow-y-scroll py-16">
       {data ? (
         data.map((item) => (
           <Photo

diff --git a/src/app/(Main)/feed/page.tsx b/src/app/(Main)/feed/page.tsx
@@ -1,6 +1,7 @@
 'use client';
 
-import { useSearchParams } from 'next/navigation';
+import Link from 'next/link';
+import { useRouter, useSearchParams } from 'next/navigation';
 
 import EmptyCase from './components/EmptyCase';
 import FilterSheet from './components/FilterSheet';
@@ -13,6 +14,7 @@ import useFilterState from '@/hooks/useFilterState';
 
 export default function Feed() {
   const params = useSearchParams();
+  const router = useRouter();
 
   const { filterState, updateFilterState } = useFilterState();
   const { data, isFetched } = usePoseFeedQuery(filterState);
@@ -24,6 +26,7 @@ export default function Feed() {
       frameCount: 0,
       peopleCount: 0,
     });
+    router.replace('/feed');
   });
 
   return (
@@ -37,8 +40,11 @@ export default function Feed() {
               title={'신비한 포즈를 찾으시는군요!'}
               text={'찾고 싶은 포즈를 저희에게 알려주세요.'}
               button={'문의사항 남기기'}
-              path={''}
+              path={
+                'https://docs.google.com/forms/d/e/1FAIpQLSeZuPZTXnO4rZ4k39SzXv96PWAW4gLcTYBrsRUrgRHSVV9Ldg/viewform?usp=sf_link'
+              }
             />
+
             <h4 className="mb-16">이런 포즈는 어때요?</h4>
             <PhotoList data={data.recommendedContents.content} />
           </>

diff --git a/src/app/(Main)/pick/components/PickSection.tsx b/src/app/(Main)/pick/components/PickSection.tsx
@@ -45,32 +45,34 @@ export default function PickSection() {
 
       <Spacing size={16} />
 
-      <div className="relative flex h-460 w-300 items-center justify-center">
-        {true && <Lottie loop animationData={lottiePick} play />}
-        <Image
-          src={image || '/images/image-frame.png'}
-          fill
-          alt="sample"
-          priority
-          loading="eager"
-          className={clsx({ hidden: isLoading }, 'cursor-pointer')}
-          onClick={() =>
-            open(({ exit }) => (
-              <Popup>
-                <Image
-                  src={image || '/images/image-frame.png'}
-                  alt="enlargementImage"
-                  priority
-                  loading="eager"
-                  onClick={exit}
-                  width={500}
-                  height={440}
-                  className="cursor-pointer"
-                />
-              </Popup>
-            ))
-          }
-        />
+      <div className="flex h-460 w-full items-center justify-center bg-black">
+        <div className="relative flex h-460 w-300 items-center justify-center">
+          {true && <Lottie loop animationData={lottiePick} play />}
+          <Image
+            src={image || '/images/image-frame.png'}
+            fill
+            alt="sample"
+            priority
+            loading="eager"
+            className={clsx({ hidden: isLoading }, 'cursor-pointer')}
+            onClick={() =>
+              open(({ exit }) => (
+                <Popup>
+                  <Image
+                    src={image || '/images/image-frame.png'}
+                    alt="enlargementImage"
+                    priority
+                    loading="eager"
+                    onClick={exit}
+                    width={500}
+                    height={440}
+                    className="cursor-pointer"
+                  />
+                </Popup>
+              ))
+            }
+          />
+        </div>
       </div>
 
       <BottomFixedButton

diff --git a/src/app/(Main)/talk/components/TalkSection.tsx b/src/app/(Main)/talk/components/TalkSection.tsx
@@ -24,8 +24,7 @@ export default function TalkSection() {
     onStopLoading: () => data && setTalkWord(data.poseWord.content),
     initialState: false,
   });
-  const [talkWord, setTalkWord] = useState<string>(`제시어에 맞춰
-  포즈를 취해요!`);
+  const [talkWord, setTalkWord] = useState<string>(`제시어에 맞춰 포즈를 취해요!`);
 
   const handleTalkClick = () => {
     if (isFirstLoading) stopFirstLoading();
@@ -35,7 +34,7 @@ export default function TalkSection() {
 
   return (
     <section className="flex flex-col items-center">
-      <h1 className="text-center">{talkWord}</h1>
+      <h1 className="max-w-310 break-keep text-center">{talkWord}</h1>
 
       <Spacing size={10} />
 

diff --git a/src/app/(Sub)/detail/[id]/components/DetailHeader.tsx b/src/app/(Sub)/detail/[id]/components/DetailHeader.tsx
@@ -1,10 +1,14 @@
+'use client';
 import Image from 'next/image';
 import Link from 'next/link';
 
 import IconButton from '@/components/Button/IconButton';
 import { Header } from '@/components/Header';
+import { Popup } from '@/components/Modal';
+import { useOverlay } from '@/components/Overlay/useOverlay';
 
 export default function DetailHeader() {
+  const { open } = useOverlay();
   return (
     <Header
       leftNode={
@@ -15,7 +19,17 @@ export default function DetailHeader() {
         </Link>
       }
       rightNode={
-        <IconButton size="large">
+        <IconButton
+          size="large"
+          onClick={() =>
+            open(({ exit }) => (
+              <Popup onClick={exit} className="cursor-pointer rounded-8" onCloseOutside={exit}>
+                <p>해당 기능은 아직 준비중이에요!</p>
+                <p> 업데이트를 기대해 주세요.</p>
+              </Popup>
+            ))
+          }
+        >
           <Image src="/icons/bookmark.svg" width={24} height={24} alt="bookmark" />
         </IconButton>
       }

diff --git a/src/app/(Sub)/detail/[id]/components/DetailSection.tsx b/src/app/(Sub)/detail/[id]/components/DetailSection.tsx
@@ -34,7 +34,7 @@ export default function DetailSection({ poseId }: DetailSectionProps) {
   };
 
   return (
-    <div>
+    <div className="overflow-y-auto pb-160">
       {sourceUrl && (
         <Link
           href={'https://' + sourceUrl}
@@ -44,12 +44,13 @@ export default function DetailSection({ poseId }: DetailSectionProps) {
         </Link>
       )}
       <div className="flex justify-center">
-        <div className="relative h-520 w-440">
+        <div className="relative">
           <Image
             src={imageKey}
-            fill
             alt="detailImage"
             className="cursor-pointer"
+            width={450}
+            height={440}
             onClick={() =>
               open(({ exit }) => (
                 <Popup>

diff --git a/src/app/(Sub)/menu/components/InqueryModal.tsx b/src/app/(Sub)/menu/components/InqueryModal.tsx
@@ -1,3 +1,5 @@
+import Link from 'next/link';
+
 import { Button } from '@/components/Button';
 import { Popup } from '@/components/Modal';
 import { Spacing } from '@/components/Spacing';
@@ -11,7 +13,9 @@ export default function MenuModal({ onConfirm, onClose }: MenuModalProps) {
   return (
     <Popup>
       <Spacing size={20} />
-      <div>문의사항을 남기시겠습니까?</div>
+      <Link href="https://docs.google.com/forms/d/e/1FAIpQLSeZuPZTXnO4rZ4k39SzXv96PWAW4gLcTYBrsRUrgRHSVV9Ldg/viewform?usp=sf_link">
+        문의사항을 남기시겠습니까?
+      </Link>
       <Spacing size={20} />
       <div className="flex w-full justify-evenly gap-8">
         <Button className="bg-default" onClick={onClose}>

diff --git a/src/components/BottomFixedDiv/index.tsx b/src/components/BottomFixedDiv/index.tsx
@@ -9,7 +9,9 @@ export default function BottomFixedDiv({
   className,
 }: StrictPropsWithChildren<BottomFixedDivProps>) {
   return (
-    <div className={`fixed inset-x-0 bottom-20 mx-auto max-w-440 px-20 ${className}`}>
+    <div
+      className={`fixed inset-x-0 bottom-0 mx-auto max-w-440 bg-white px-20 pb-20 pt-10 ${className}`}
+    >
       {children}
     </div>
   );

diff --git a/src/components/Modal/BottomSheet.tsx b/src/components/Modal/BottomSheet.tsx
@@ -21,7 +21,7 @@ export default function BottomSheet({ children }: StrictPropsWithChildren) {
         <div className="fixed inset-x-0 bottom-0 z-30 mx-auto max-w-440 rounded-t-16 bg-white">
           <div className="flex justify-end px-8 pt-12">
             <button className="p-12" onClick={closeBottomSheet}>
-              <Image src={ICON.close} width={24} height={24} alt={'x'} />
+              <Image src={ICON.close.black} width={24} height={24} alt={'x'} />
             </button>
           </div>
           <div className="column flex flex-col gap-20 p-20">{children}</div>

diff --git a/src/components/Selection/Tag.tsx b/src/components/Selection/Tag.tsx
@@ -11,16 +11,16 @@ interface Tag {
 export default function Tag({ selected, onClick, text }: Tag) {
   return (
     <div
-      className={`flex min-w-fit cursor-pointer gap-4 rounded-30 px-12 py-5 ${
+      className={`flex min-w-fit cursor-pointer gap-6 rounded-30 px-12 py-5 ${
         selected ? 'bg-main-violet-bright' : 'bg-sub-white'
       }`}
       onClick={onClick}
     >
       <div id="subtitle-2" className={selected ? 'text-main-violet-dark' : 'text-secondary'}>
         {text}
       </div>
-      {selected && <Image src={ICON.close} width={12} height={12} alt="x" />}
-      {selected ?? <Image src={ICON.close} width={12} height={12} alt="x" />}
+      {selected && <Image src={ICON.close.gray} width={12} height={12} alt="x" />}
+      {selected ?? <Image src={ICON.close.gray} width={12} height={12} alt="x" />}
     </div>
   );
 }
diff --git a/src/constants/icon.ts b/src/constants/icon.ts
@@ -1,5 +1,8 @@
 export const ICON = {
-  close: '/icons/close.svg',
+  close: {
+    black: '/icons/close.svg',
+    gray: '/icons/close_gray.svg',
+  },
   restart: '/icons/restart.svg',
   bookmark: {
     fill: '/icons/bookmark_fill.svg',
@@ -10,6 +13,7 @@ export const ICON = {
   },
   carat: {
     up: '/icons/carat_up.svg',
-    down: '/icons/carat_down.svg',
+    down_purple: '/icons/carat_down.svg',
+    down: '/icons/carat_down_gray.svg',
   },
 } as const;