Hotfix/final

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 && (
         <>

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}

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

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

@@ -1,31 +1,17 @@
 'use client';
 
-import { useSearchParams } from 'next/navigation';
-
 import EmptyCase from './components/EmptyCase';
 import FilterSheet from './components/FilterSheet';
 import FilterTab from './components/FilterTab';
 import PhotoList from './components/PhotoList';
 import { usePoseFeedQuery } from '@/apis';
 import { Spacing } from '@/components/Spacing';
-import useDidMount from '@/hooks/useDidMount';
 import useFilterState from '@/hooks/useFilterState';
 
 export default function Feed() {
-  const params = useSearchParams();
-
-  const { filterState, updateFilterState } = useFilterState();
+  const { filterState } = useFilterState();
   const { data, isFetched } = usePoseFeedQuery(filterState);
 
-  useDidMount(() => {
-    if (!params.get('filter')) return;
-    updateFilterState({
-      tags: new Array(params.get('filter') || ''),
-      frameCount: 0,
-      peopleCount: 0,
-    });
-  });
-
   return (
     <>
       <FilterTab />

src/app/(Main)/pick/components/PickSection.tsx

@@ -45,7 +45,7 @@ export default function PickSection() {
 
       <Spacing size={16} />
 
-      <div className="relative flex h-460 w-300 items-center justify-center">
+      <div className="relative flex items-center justify-center">
         {true && <Lottie loop animationData={lottiePick} play />}
         <Image
           src={image || '/images/image-frame.png'}

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} />
 

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,10 +44,9 @@ export default function DetailSection({ poseId }: DetailSectionProps) {
         </Link>
       )}
       <div className="flex justify-center">
-        <div className="relative h-520 w-440">
-          <Image
+        <div className="relative">
+          <img
             src={imageKey}
-            fill
             alt="detailImage"
             className="cursor-pointer"
             onClick={() =>

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>
   );

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>

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>
   );
 }

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;