Merge pull request #228 from depromeet/fix/#221

스타일 QA 수정, 미들웨어 로직 수정

src/app/globals.css

@@ -4,43 +4,43 @@
 
 @layer utilities {
   .header-22 {
-    @apply text-[22px]/[130%] tracking-[-0.44px] font-extrabold;
+    @apply text-[22px]/[130%] tracking-[-0.44px] font-semibold;
   }
   .header-20 {
-    @apply text-[20px]/[130%] tracking-[-0.4px] font-extrabold;
+    @apply text-[20px]/[130%] tracking-[-0.4px] font-semibold;
   }
   .header-18 {
-    @apply text-[18px]/[130%] tracking-[-0.36px] font-extrabold;
+    @apply text-[18px]/[130%] tracking-[-0.36px] font-semibold;
   }
   .body-16-bold {
-    @apply text-[16px]/[140%] tracking-[-0.48px] font-bold;
+    @apply text-[16px]/[140%] tracking-[-0.48px] font-medium;
   }
   .body-16-regular {
-    @apply text-[16px]/[140%] tracking-[-0.48px] font-normal;
+    @apply text-[16px]/[140%] tracking-[-0.48px] font-extralight;
   }
   .body-14-extraBold {
-    @apply text-[14px]/[140%] tracking-[-0.42px] font-extrabold;
+    @apply text-[14px]/[140%] tracking-[-0.42px] font-semibold;
   }
   .body-14-bold {
-    @apply text-[14px]/[140%] tracking-[-0.42px] font-bold;
+    @apply text-[14px]/[140%] tracking-[-0.42px] font-medium;
   }
   .body-14-regular {
-    @apply text-[14px]/[140%] tracking-[-0.42px] font-normal;
+    @apply text-[14px]/[140%] tracking-[-0.42px] font-extralight;
   }
   .caption-12-extraBold {
-    @apply text-[12px]/[140%] tracking-[-0.36px] font-extrabold;
+    @apply text-[12px]/[140%] tracking-[-0.36px] font-semibold;
   }
   .caption-12-bold {
-    @apply text-[12px]/[140%] tracking-[-0.36px] font-bold;
+    @apply text-[12px]/[140%] tracking-[-0.36px] font-medium;
   }
   .caption-12-regular {
-    @apply text-[12px]/[140%] tracking-[-0.36px] font-normal;
+    @apply text-[12px]/[140%] tracking-[-0.36px] font-extralight;
   }
   .caption-10-bold {
-    @apply text-[10px]/[140%] tracking-[-0.3px] font-bold;
+    @apply text-[10px]/[140%] tracking-[-0.3px] font-medium;
   }
   .caption-10-regular {
-    @apply text-[10px]/[140%] tracking-[-0.3px] font-normal;
+    @apply text-[10px]/[140%] tracking-[-0.3px] font-extralight;
   }
   .scrollbar-hide {
     -ms-overflow-style: none;

src/app/search/page.tsx

@@ -87,7 +87,7 @@ export default function Page() {
           resetText={resetText}
         />
       </Header>
-      <div className="h-[100dvh] pt-[68px] overflow-y-scroll">
+      <div className="h-[100dvh] pt-[68px] overflow-y-scroll text-gray-900">
         {!storeList && isMounted && (
           <RecentSearchKeyword
             recentSearchKeywords={recentSearchKeywords}

src/app/terms/page.tsx

@@ -65,6 +65,7 @@ export default function Page() {
         ))}
       </ul>
       <FixedBottomCTAButton
+        className="bg-white"
         disabled={!isRequiredTermsAllChecked}
         onClick={handleClickConfirmButton}
       >

src/components/common/ListItem/index.tsx

@@ -17,20 +17,18 @@ export default function ListItem({
   children,
 }: PropsWithChildren<BasicListItem>) {
   return (
-    <>
-      <li className="w-full pl-[24px] pr-[16px] flex justify-between items-center">
-        <div
-          className={`${cn(
-            'flex justify-between items-center pt-2 pb-4 w-full',
-            {
-              'border-b-gray-100 border-b-[1px]': !isLast,
-            },
-          )}`}
-        >
-          <div className="flex flex-col gap-[9px]">{children}</div>
-          {hasDeleteOption && <DeleteTrashButton onClick={onClick} />}
-        </div>
-      </li>
-    </>
+    <li className="w-full pt-[8px] pl-[24px] pr-[16px] flex justify-between items-center">
+      <div
+        className={`${cn(
+          'flex justify-between items-center pt-[8px] pb-[16px] w-full',
+          {
+            'border-b-gray-100 border-b-[1px]': !isLast,
+          },
+        )}`}
+      >
+        <div className="flex flex-col gap-[9px]">{children}</div>
+        {hasDeleteOption && <DeleteTrashButton onClick={onClick} />}
+      </div>
+    </li>
   );
 }

src/components/common/Pin/index.tsx

@@ -47,7 +47,6 @@ export default function Pin({
             <span className="caption-12-extraBold text-gray-50">
               {totalRevisitedCount}
             </span>
-            명
           </Tag>
         )}
       </button>

src/components/main/CurrentLocationButton/index.tsx

@@ -34,7 +34,7 @@ export default function CurrentLocationButton({
     <Button
       ref={buttonRef}
       {...props}
-      className="w-[50px] h-[50px] rounded-[24px] p-0 bg-white shadow-floating active:bg-white"
+      className="w-[56px] h-[56px] rounded-[24px] p-0 bg-white shadow-floating active:bg-white"
       onClick={handleClick}
     >
       <LocationDefaultIcon

src/components/main/ProfileButton/index.tsx

@@ -23,7 +23,7 @@ export default function ProfileButton({
     <Button
       {...props}
       onClick={handleClickProfileButton}
-      className="w-[50px] h-[50px] rounded-[24px] p-0 bg-white shadow-floating active:bg-white flex items-center justify-center"
+      className="w-[56px] h-[56px] rounded-[24px] p-0 bg-white shadow-floating active:bg-white flex items-center justify-center"
     >
       <ProfileIcon />
     </Button>

src/components/main/StoreInformation/index.tsx

@@ -21,7 +21,7 @@ function StoreInformation({
   return (
     <div className="flex flex-col p-[16px] gap-[8px]">
       <div className="flex flex-col gap-[4px] items-center">
-        <span className="header-20">{storeName}</span>
+        <span className="header-20 text-gray-900">{storeName}</span>
         <div className="flex gap-[4px]">
           <Tag size="small" className="bg-primary-100 text-primary-500">
             내방문 {myRevisitedCount}번
@@ -32,11 +32,13 @@ function StoreInformation({
         </div>
       </div>
       <div className="flex flex-col gap-[4px] items-center">
-        <span className="caption-12-bold">{address}</span>
+        <span className="caption-12-bold text-gray-900">{address}</span>
         <div className="flex gap-[8px] items-center">
           <StarScore rating={totalRating} />
           <hr className="w-[1px] h-[10px] bg-gray-300" />
-          <span className="body-14-bold">방문기록 {totalReviewCount}</span>
+          <span className="body-14-bold text-gray-900">
+            방문기록 {totalReviewCount}
+          </span>
         </div>
       </div>
     </div>

src/components/search/RecentSearchKeyword/index.tsx

@@ -18,13 +18,13 @@ export default function RecentSearchKeyword({
 }: RecentSearchKeywordProps) {
   return (
     <div className="flex flex-col gap-[8px] p-[16px]">
-      <p className="body-14-bold">최근 검색어</p>
+      <p className="body-14-bold text-gray-900">최근 검색어</p>
       <div className="flex gap-[8px] overflow-x-scroll whitespace-nowrap">
         {recentSearchKeywords.map((recentSearchKeyword, index) => (
           <Tag
             key={index}
             size="large"
-            className="py-[8px] bg-gray-100 cursor-pointer"
+            className="py-[8px] bg-gray-100 cursor-pointer text-gray-900"
             onClick={onClick(recentSearchKeyword)}
           >
             <p>{recentSearchKeyword}</p>

src/components/terms/Description/index.tsx

@@ -12,10 +12,10 @@ interface DescriptionProps {
 export default function Description({ type }: DescriptionProps) {
   const terms = TERMS_MAP[type];
   return (
-    <div className="whitespace-pre-wrap flex flex-col gap-[32px]">
+    <div className="whitespace-pre-wrap flex flex-col gap-[32px] pl-[16px] caption-12-regular">
       {terms.map((term, index) => (
         <div key={index} className="flex flex-col gap-[12px]">
-          <h2 className="body-16-bold">{term.title}</h2>
+          <h2 className="body-14-bold">{term.title}</h2>
           {term.subscription && <p>{term.subscription}</p>}
           {term.list && (
             <ul className="list-decimal flex flex-col gap-[12px]">

src/components/terms/TermsItem/index.tsx

@@ -37,7 +37,7 @@ export default function TermsItem({
             {...restProps}
           />
           {checked ? <CheckFill /> : <CheckDefault />}
-          <p className="body-14-extraBold">{title}</p>
+          <p className="body-14-extraBold text-gray-900">{title}</p>
         </label>
         <button onClick={handleClickArrowButton}>
           {isOpenTermsItem ? <UpArrow /> : <DownArrow />}

src/constants/tags.ts

@@ -40,13 +40,7 @@ export const TAGS: Tag[] = [
   {
     value: 'SCHOOLFOOD',
     text: '분식',
-    defaultIcon: '/assets/icon20/food_beer_default_20.svg',
-    selectedIcon: '/assets/icon20/food_beer_active_20.svg',
-  },
-  {
-    value: 'ETC',
-    text: '기타',
-    defaultIcon: '/assets/icon20/food_beer_default_20.svg',
-    selectedIcon: '/assets/icon20/food_beer_active_20.svg',
+    defaultIcon: '/assets/icon20/food_bunsik_default_20.svg',
+    selectedIcon: '/assets/icon20/food_bunsik_active_20.svg',
   },
 ];

src/middleware.ts

@@ -9,34 +9,49 @@ export function middleware(request: NextRequest) {
 
   const url = request.nextUrl.clone();
 
-  // NOTE: splash 화면으로 넘어왔을 때 쿠키 내의 토큰 여부에 따른 리다이렉트 로직
-  if (isFromApp === 'true') {
-    if (accessToken && refreshToken) {
-      url.pathname = '/';
-    } else {
+  // NOTE: 메인 페이지 진입 시 토큰이 존재하지 않으면 로그인 페이지로 리다이렉트
+  if (request.nextUrl.pathname === '/') {
+    const cookieAccessToken = request.cookies.get('accessToken');
+    const cookieRefreshToken = request.cookies.get('refreshToken');
+
+    if (!cookieAccessToken && !cookieRefreshToken) {
       url.pathname = '/login';
+      const response = NextResponse.redirect(url);
+
+      return response;
     }
-  } else {
-    // 웹
-    if (isFirstLogin === 'True') {
-      url.pathname = '/terms';
+  }
+
+  // NOTE: splash 화면으로 넘어왔을 때 쿠키 내의 토큰 여부에 따른 리다이렉트 로직
+  if (request.nextUrl.pathname === '/auth') {
+    if (isFromApp === 'true') {
+      if (accessToken && refreshToken) {
+        url.pathname = '/';
+      } else {
+        url.pathname = '/login';
+      }
     } else {
-      url.pathname = '/';
+      // 웹
+      if (isFirstLogin === 'True') {
+        url.pathname = '/terms';
+      } else {
+        url.pathname = '/';
+      }
     }
-  }
 
-  url.search = '';
+    url.search = '';
 
-  const response = NextResponse.redirect(url);
+    const response = NextResponse.redirect(url);
 
-  if (accessToken && refreshToken) {
-    response.cookies.set('accessToken', accessToken, { path: '/' });
-    response.cookies.set('refreshToken', refreshToken, { path: '/' });
-  }
+    if (accessToken && refreshToken) {
+      response.cookies.set('accessToken', accessToken, { path: '/' });
+      response.cookies.set('refreshToken', refreshToken, { path: '/' });
+    }
 
-  return response;
+    return response;
+  }
 }
 
 export const config = {
-  matcher: '/auth',
+  matcher: ['/auth', '/'],
 };