Merge pull request #157 from YAPP-Github/fix/qa

Seojunhwan · web-flow · commit 7d7b4a54178a · 2025-08-23T00:13:15.000+09:00
diff --git a/next.config.ts b/next.config.ts
@@ -13,6 +13,7 @@ const nextConfig: NextConfig = {
   },
 
   images: {
+    unoptimized: true,
     remotePatterns: [
       {
         protocol: "https",
diff --git a/src/app/(auth)/login/page.tsx b/src/app/(auth)/login/page.tsx
@@ -27,8 +27,6 @@ export default function LoginPage() {
           alt='로그인 배경화면'
           fill
           priority
-          // TODO: 추후 제거
-          unoptimized
         />
 
         <GNB
@@ -52,8 +50,6 @@ export default function LoginPage() {
             alt='로그인 일러스트'
             width={149}
             height={139}
-            // TODO: 추후 제거
-            unoptimized
           />
         </div>
 
diff --git a/src/app/(cheer)/cheer/_components/CheerCard/CheerCard.tsx b/src/app/(cheer)/cheer/_components/CheerCard/CheerCard.tsx
@@ -176,8 +176,6 @@ const CheerCardImages = ({ images, storeName }: CheerCardImagesProps) => {
                   alt={`${storeName}-${idx + 1}`}
                   fill
                   objectFit='cover'
-                  // TODO: 추후 제거
-                  unoptimized
                 />
               </div>
             ))}
@@ -196,8 +194,6 @@ const CheerCardImages = ({ images, storeName }: CheerCardImagesProps) => {
           alt={storeName}
           fill
           objectFit='cover'
-          // TODO: 추후 제거
-          unoptimized
         />
       )}
     </div>
@@ -224,8 +220,6 @@ const CheerCardTags = ({ tags }: CheerCardTagsProps) => {
               alt={tagInfo.label}
               width={14}
               height={14}
-              // TODO: 추후 제거
-              unoptimized
             />
             {tagInfo.label}
           </Tag>
diff --git a/src/app/(cheer)/cheer/page.tsx b/src/app/(cheer)/cheer/page.tsx
@@ -30,6 +30,8 @@ export default function CheerPage() {
         />
       </Bleed>
 
+      <Spacer size={12} />
+
       <ChipFilter />
 
       <Spacer size={16} />
diff --git a/src/app/(home)/_components/Header/Header.tsx b/src/app/(home)/_components/Header/Header.tsx
@@ -1,39 +1,20 @@
 "use client";
 
-import { useQuery } from "@tanstack/react-query";
 import Link from "next/link";
 
-import { memberQueryOptions } from "@/app/member/_api";
 import LogoWordmarkIcon from "@/assets/logo-wordmark.svg";
-import MarketIcon from "@/assets/market.svg";
-import PersonIcon from "@/assets/person.svg";
-import { Button } from "@/components/ui/Button";
+import SearchIcon from "@/assets/search.svg";
 import { GNB } from "@/components/ui/GNB";
 
 export const Header = () => {
-  const { data: member } = useQuery({ ...memberQueryOptions, retry: false });
-
   return (
     <GNB
       leftAddon={<LogoWordmarkIcon width={46} height={24} />}
       align='left'
       rightAddon={
-        member?.id ? (
-          <>
-            <Link href='/stores'>
-              <MarketIcon width={24} height={24} />
-            </Link>
-            <Link href='/member/profile'>
-              <PersonIcon width={24} height={24} />
-            </Link>
-          </>
-        ) : (
-          <Link href='/login'>
-            <Button variant='primary' size='small' style={{ width: "6.3rem" }}>
-              로그인
-            </Button>
-          </Link>
-        )
+        <Link href='/stores' aria-label='가게 검색'>
+          <SearchIcon width={24} height={24} />
+        </Link>
       }
     />
   );
diff --git a/src/app/(home)/_components/RecentCheers/RecentCheers.tsx b/src/app/(home)/_components/RecentCheers/RecentCheers.tsx
@@ -125,8 +125,6 @@ const RecentSupportCard = ({
             alt={`${store.name} 가게 이미지`}
             className={styles.storeImage}
             src={store.imageUrl}
-            // TODO: 추후 제거
-            unoptimized
           />
         ) : (
           <span className={styles.storeImageFallback}>
diff --git a/src/app/(home)/_components/RecentlySupportStories/RecentlySupportStories.tsx b/src/app/(home)/_components/RecentlySupportStories/RecentlySupportStories.tsx
@@ -100,8 +100,6 @@ const SupportedStoreCard = ({
           src={imageUrl}
           alt={`${storeName} 가게 이미지`}
           objectFit='cover'
-          // TODO: 추후 제거
-          unoptimized
         />
       </div>
       <VStack className={styles.supportedStoreCardContent}>
diff --git a/src/app/(home)/_components/RegisterPopup/RegisterPopup.tsx b/src/app/(home)/_components/RegisterPopup/RegisterPopup.tsx
@@ -77,8 +77,6 @@ export const RegisterPopup = () => {
                         height: "214px",
                         marginLeft: "10px",
                       }}
-                      // TODO: 추후 제거
-                      unoptimized
                     />
                   </div>
                 </div>
diff --git a/src/app/(home)/_components/ServiceIntroBottomSheet/ServiceIntroBottomSheet.tsx b/src/app/(home)/_components/ServiceIntroBottomSheet/ServiceIntroBottomSheet.tsx
@@ -111,8 +111,6 @@ export const ServiceIntroBottomSheet = () => {
                         src={content.imageSrc}
                         alt={content.imageAlt}
                         priority
-                        // TODO: 추후 제거
-                        unoptimized
                       />
                     </motion.div>
                   </AnimatePresence>
diff --git a/src/app/(home)/_components/StoreStory/StoreStory.tsx b/src/app/(home)/_components/StoreStory/StoreStory.tsx
@@ -99,8 +99,6 @@ const StoreStoryCard = ({ src, title, description }: StoreStoryCardProps) => {
         src={src}
         alt={`${title} 가게 이야기 이미지`}
         className={styles.storyImage}
-        // TODO: 추후 제거
-        unoptimized
       />
       <div className={styles.storyCardGradient} />
       <VStack gap={4} style={{ zIndex: 1, position: "relative" }}>
diff --git a/src/app/(home)/_components/Story/Story.tsx b/src/app/(home)/_components/Story/Story.tsx
@@ -3,7 +3,7 @@
 import { Suspense } from "@suspensive/react";
 import { useRouter } from "next/navigation";
 import { useRef } from "react";
-import { toast, Toaster } from "sonner";
+import { toast } from "sonner";
 
 import { useImageUploadContext } from "@/app/story/register/_contexts";
 import { imageFileSchema } from "@/app/story/register/_schemas";
@@ -65,7 +65,6 @@ export const Story = () => {
           <StoryList />
         </Suspense>
       </HStack>
-      <Toaster position='bottom-center' richColors />
     </div>
   );
 };
diff --git a/src/app/(home)/_components/Story/StoryList/StoryList.tsx b/src/app/(home)/_components/Story/StoryList/StoryList.tsx
@@ -32,8 +32,6 @@ export const StoryList = () => {
               height={80}
               alt={`스토리 이미지 ${story.storyId}`}
               className={styles.storyImage}
-              // TODO: 추후 제거
-              unoptimized
             />
           </div>
         </div>
diff --git a/src/app/(store)/stores/(list)/_components/StoreList/StoreList.css.ts b/src/app/(store)/stores/(list)/_components/StoreList/StoreList.css.ts
@@ -6,8 +6,13 @@ export const container = style({
   height: "100%",
 });
 
-export const separator = style({
-  borderTop: `1px solid ${colors.coolNeutral[97]}`,
+export const emptyWrapper = style({
+  paddingBlock: "10rem",
+  textAlign: "center",
+});
+
+export const infoIcon = style({
+  color: semantic.icon.disabled,
 });
 
 export const divider = style({
@@ -16,10 +21,6 @@ export const divider = style({
   backgroundColor: colors.neutral[95],
 });
 
-export const storeCard = style({
-  paddingBlock: "2.4rem",
-});
-
 export const storeImagesContainer = style({
   position: "relative",
   paddingInline: "2rem",
@@ -51,7 +52,7 @@ export const emptyImage = style({
   alignItems: "center",
   justifyContent: "center",
 
-  width: "126px",
+  width: "100%",
   height: "168px",
 
   flexShrink: 0,
diff --git a/src/app/(store)/stores/(list)/_components/StoreList/StoreList.tsx b/src/app/(store)/stores/(list)/_components/StoreList/StoreList.tsx
@@ -12,6 +12,7 @@ import {
   storeCheersQueryOptions,
   storeImagesQueryOptions,
 } from "@/app/(store)/_api/shop";
+import InfoIcon from "@/assets/info.svg";
 import LogoWordMark from "@/assets/logo-wordmark.svg";
 import { Bleed } from "@/components/ui/Bleed";
 import { Skeleton } from "@/components/ui/Skeleton";
@@ -36,17 +37,39 @@ export const StoreList = ({ category }: { category: string }) => {
     })
   );
 
+  if (stores.length === 0) {
+    return <EmptyStoreList />;
+  }
+
   return (
     <VStack className={styles.container}>
-      {stores.map(store => (
-        <StoreCard
-          key={store.id}
-          id={store.id}
-          name={store.name}
-          location={`${store.district} ${store.neighborhood}`}
-          category={store.category}
-        />
-      ))}
+      <Spacer size={24} />
+      <VStack gap={28}>
+        {stores.map(store => (
+          <Link href={`/stores/${store.id}`} key={store.id}>
+            <StoreCard
+              key={store.id}
+              id={store.id}
+              name={store.name}
+              location={`${store.district} ${store.neighborhood}`}
+              category={store.category}
+            />
+          </Link>
+        ))}
+      </VStack>
+    </VStack>
+  );
+};
+
+const EmptyStoreList = () => {
+  return (
+    <VStack gap={12} align='center' className={styles.emptyWrapper}>
+      <InfoIcon width={44} height={44} className={styles.infoIcon} />
+      <Text typo='body1Md' color='#767676'>
+        검색하신 가게를 찾을 수 없습니다.
+        <br />
+        다시 한 번 검색해 주세요.
+      </Text>
     </VStack>
   );
 };
@@ -63,7 +86,7 @@ const StoreCard = ({
   category: string;
 }) => {
   return (
-    <VStack className={styles.storeCard}>
+    <VStack>
       <VStack gap={4}>
         <Text as='h3' typo='title2Bd'>
           {name}
@@ -129,8 +152,6 @@ const StoreImages = ({ storeId }: { storeId: number }) => {
                 alt={"이미지"}
                 fill
                 className={styles.storeImage}
-                // TODO: 추후 제거
-                unoptimized
               />
             </div>
           ) : (
diff --git a/src/app/(store)/stores/[storeId]/_components/StoreInfo/StoreInfo.tsx b/src/app/(store)/stores/[storeId]/_components/StoreInfo/StoreInfo.tsx
@@ -57,8 +57,6 @@ const StoreInfoImageCarousel = ({ storeId }: { storeId: number }) => {
               src={image}
               fill
               alt={`${index + 1}번째 가게 이미지`}
-              // TODO: 추후 제거
-              unoptimized
             />
           </div>
         ))}
diff --git a/src/app/(store)/stores/[storeId]/_components/StoreStories/StoreStories.tsx b/src/app/(store)/stores/[storeId]/_components/StoreStories/StoreStories.tsx
@@ -10,21 +10,24 @@ import { Avatar } from "@/app/member/_components/Avatar";
 import { storiesByKakaoIdQueryOptions } from "@/app/story/_api";
 import CameraIcon from "@/assets/camera.svg";
 import { Button } from "@/components/ui/Button";
+import { Skeleton } from "@/components/ui/Skeleton";
 import { Spacer } from "@/components/ui/Spacer";
 import { HStack, VStack } from "@/components/ui/Stack";
 import { Text } from "@/components/ui/Text";
-import { colors } from "@/styles";
+import { colors, radius } from "@/styles";
 
 import * as styles from "./StoreStories.css";
 
 export const StoreStories = ({ storeId }: { storeId: number }) => {
   const router = useRouter();
-  const { data: store } = useQuery(storeDetailQueryOptions(Number(storeId)));
+  const { data: store, isLoading } = useQuery(
+    storeDetailQueryOptions(Number(storeId))
+  );
 
-  if (!store) {
+  if (!store || isLoading) {
     return (
       <VStack className={styles.storeStoriesContainer}>
-        <Text>가게 정보를 불러오는 중...</Text>
+        <Skeleton width={124} height={220} radius={radius[160]} />
       </VStack>
     );
   }
@@ -73,8 +76,6 @@ const StoreStoriesContent = ({ kakaoId }: { kakaoId: string }) => {
                 className={styles.image}
                 width={124}
                 height={220}
-                // TODO: 추후 제거
-                unoptimized
               />
               <div className={styles.overlay} />
               <HStack align='center' gap={4} className={styles.memberWrapper}>
diff --git a/src/app/(store)/stores/register/_components/RegisterFunnel/_components/StoreInfoStep/StoreInfoStep.tsx b/src/app/(store)/stores/register/_components/RegisterFunnel/_components/StoreInfoStep/StoreInfoStep.tsx
@@ -172,8 +172,6 @@ const StoreRegistrationGuideBottomSheet = ({
                   alt='가게 등록 주의사항'
                   width={24}
                   height={24}
-                  // TODO: 추후 제거
-                  unoptimized
                 />
                 <Text
                   as='h4'
diff --git a/src/app/(store)/stores/register/success/page.tsx b/src/app/(store)/stores/register/success/page.tsx
@@ -67,8 +67,6 @@ export default function StoreRegisterSuccessPage() {
           alt='가게 등록 성공'
           width={280}
           height={280}
-          // TODO: 추후 제거
-          unoptimized
         />
       </VStack>
 
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -5,10 +5,12 @@ import "slick-carousel/slick/slick-theme.css";
 import { GoogleAnalytics } from "@next/third-parties/google";
 import type { Metadata, Viewport } from "next";
 import Script from "next/script";
+import { type CSSProperties } from "react";
 import { Toaster } from "sonner";
 
 import { RegisterServiceWorkerClient } from "@/lib/pwa";
 import { MSWProvider, OverlayProvider, QueryProvider } from "@/providers";
+import { semantic } from "@/styles";
 import { pretendard } from "@/styles/pretendard";
 
 import * as styles from "./layout.css";
@@ -61,7 +63,21 @@ export default function RootLayout({
               </MSWProvider>
             </OverlayProvider>
           </QueryProvider>
-          <Toaster position='bottom-center' richColors />
+          <Toaster
+            position='bottom-center'
+            toastOptions={{
+              style: {
+                backdropFilter: "blur(26px)",
+              },
+            }}
+            style={
+              {
+                "--normal-bg": "rgba(42, 42, 42, 0.52)",
+                "--normal-text": semantic.text.white,
+                "--normal-border": "transparent",
+              } as CSSProperties
+            }
+          />
         </div>
       </body>
     </html>
diff --git a/src/app/member/profile/_components/TabList/TabList.tsx b/src/app/member/profile/_components/TabList/TabList.tsx
diff --git a/src/app/member/setting/_components/MenuList/MenuList.tsx b/src/app/member/setting/_components/MenuList/MenuList.tsx
diff --git a/src/app/story/[id]/_components/StoryDetailContent/StoryDetailContent.tsx b/src/app/story/[id]/_components/StoryDetailContent/StoryDetailContent.tsx
diff --git a/src/app/story/register/_components/StoryImagePreview/StoryImagePreview.tsx b/src/app/story/register/_components/StoryImagePreview/StoryImagePreview.tsx
diff --git a/src/components/ui/FloatingButton/FloatingButton.css.ts b/src/components/ui/FloatingButton/FloatingButton.css.ts
diff --git a/src/components/ui/FoodCategory/FoodCategory.css.ts b/src/components/ui/FoodCategory/FoodCategory.css.ts
diff --git a/src/components/ui/FoodCategory/FoodCategory.tsx b/src/components/ui/FoodCategory/FoodCategory.tsx

Original file line number	Diff line number	Diff line change
`@@ -13,6 +13,7 @@ const nextConfig: NextConfig = {`
`13`	`13`	`},`
`14`	`14`
`15`	`15`	`images: {`
	`16`	`+ unoptimized: true,`
`16`	`17`	`remotePatterns: [`
`17`	`18`	`{`
`18`	`19`	`protocol: "https",`