release: develop-> main (#275)

Author: Yunil-dev

messages/en/common.json

@@ -19,7 +19,8 @@
     "submit": "Submit",
     "search": "Search",
     "reset": "Reset",
-    "home": "Go to home"
+    "home": "Go to home",
+    "share": "Share"
   },
   "navigation": {
     "home": "Home",

messages/ja/common.json

@@ -19,7 +19,8 @@
     "submit": "送信",
     "search": "検索",
     "reset": "リセット",
-    "home": "ホームへ"
+    "home": "ホームへ",
+    "share": "共有"
   },
   "loading": {
     "text": "読み込み中...",

messages/ko/common.json

@@ -19,7 +19,8 @@
     "submit": "제출",
     "search": "검색",
     "reset": "초기화",
-    "home": "홈으로"
+    "home": "홈으로",
+    "share": "공유하기"
   },
   "navigation": {
     "home": "홈",

src/components/app-bar/index.styles.ts

@@ -1,6 +1,19 @@
 import { css } from '@emotion/react';
 import { theme } from '@/styles';
 
+const SIDE_PADDING = 16;
+const ACTION_BUTTON_SIZE = 24;
+const ACTION_BUTTON_GAP = 8;
+
+const getLeftReservedWidth = (leftButton: boolean) =>
+  SIDE_PADDING + (leftButton ? ACTION_BUTTON_SIZE : 0);
+
+const getRightReservedWidth = (homeButton: boolean, rightButton: boolean) =>
+  SIDE_PADDING +
+  (homeButton ? ACTION_BUTTON_SIZE : 0) +
+  (homeButton && rightButton ? ACTION_BUTTON_GAP : 0) +
+  (rightButton ? ACTION_BUTTON_SIZE : 0);
+
 export const wrapper = (props: { backgroundColor: string }) => css`
   flex-shrink: 0;
   position: relative;
@@ -30,13 +43,32 @@ export const contents = css`
   padding: 8px 16px;
 `;
 
-export const center = css`
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
-
-  white-space: nowrap;
-`;
+export const center = (props: {
+  leftButton: boolean;
+  homeButton: boolean;
+  rightButton: boolean;
+}) => {
+  const reservedWidth =
+    Math.max(
+      getLeftReservedWidth(props.leftButton),
+      getRightReservedWidth(props.homeButton, props.rightButton)
+    ) * 2;
+
+  return css`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    overflow: hidden;
+
+    max-width: calc(100% - ${reservedWidth}px);
+
+    white-space: nowrap;
+  `;
+};
 
 export const logoButton = css`
   display: inline-flex;
@@ -80,7 +112,6 @@ export const rightButtonWrapper = (props: { buttonType: string }) => css`
 
   width: 24px;
   height: 24px;
-  margin-left: auto;
   border-radius: 50%;
 
   background-color: ${props.buttonType === 'styled'
@@ -95,3 +126,11 @@ export const rightButtonWrapper = (props: { buttonType: string }) => css`
     opacity: 0.8;
   }
 `;
+
+export const rightActions = css`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  margin-left: auto;
+`;

src/components/app-bar/index.tsx

@@ -6,6 +6,9 @@ import {
   Chevron,
   Share,
   ShareWhite,
+  GnbHomeActive,
+  GnbHomeInactive,
+  GnbHomeWhite,
 } from '@/icons';
 import { Text } from '../text';
 import {
@@ -15,6 +18,7 @@ import {
   leftButtonWrapper,
   rightButtonWrapper,
   logoButton,
+  rightActions,
 } from './index.styles';
 import { useRouter } from 'next/router';
 import { useCurrentLocale } from '@/i18n/navigation';
@@ -33,6 +37,8 @@ interface Props {
   logo?: LogoType;
   onLogoClick?: () => void;
   backgroundColor?: BackgroundColor;
+  homeButton?: boolean;
+  onHomeClick?: () => void;
   rightButton?: boolean;
   rightButtonType?: RightButtonType;
   onRightButtonClick?: () => void;
@@ -59,6 +65,12 @@ const RIGHT_BUTTON_ICON_MAP = {
   share: <Share width="24px" height="24px" />,
 } as const;
 
+const HOME_BUTTON_ICON_MAP = {
+  white: <GnbHomeWhite width="24px" height="24px" />,
+  styled: <GnbHomeActive width="24px" height="24px" />,
+  dark: <GnbHomeInactive width="24px" height="24px" />,
+} as const;
+
 const LOGO_MAP = {
   light: <KommaSpaceLogoWhite width="90px" height="40px" />,
   dark: <KommaSpaceLogo width="90px" height="40px" />,
@@ -72,6 +84,8 @@ export function AppBar({
   leftButton = false,
   buttonType = 'styled',
   backgroundColor = 'none',
+  homeButton = false,
+  onHomeClick,
   rightButton = false,
   rightButtonType = 'share',
   onRightButtonClick,
@@ -88,15 +102,28 @@ export function AppBar({
     router.push(`/${currentLocale}${ROUTES.HOME}`);
   };
 
+  const handleHomeClick = () => {
+    if (onHomeClick) {
+      onHomeClick();
+      return;
+    }
+    router.push(`/${currentLocale}${ROUTES.HOME}`);
+  };
+
   return (
     <header css={wrapper({ backgroundColor: BACKGROUND_COLOR_MAP[backgroundColor] })}>
       <div css={contents}>
         {leftButton && (
-          <button onClick={onBackClick} css={leftButtonWrapper({ buttonType })}>
+          <button
+            type="button"
+            onClick={onBackClick}
+            css={leftButtonWrapper({ buttonType })}
+            aria-label={t('button.back')}
+          >
             {BUTTON_ICON_MAP[buttonType]}
           </button>
         )}
-        <div css={center}>
+        <div css={center({ leftButton, homeButton, rightButton })}>
           {logo && (
             <button
               type="button"
@@ -113,10 +140,29 @@ export function AppBar({
             </Text>
           )}
         </div>
-        {rightButton && (
-          <button onClick={onRightButtonClick} css={rightButtonWrapper({ buttonType })}>
-            {RIGHT_BUTTON_ICON_MAP[rightButtonType]}
-          </button>
+        {(homeButton || rightButton) && (
+          <div css={rightActions}>
+            {homeButton && (
+              <button
+                type="button"
+                onClick={handleHomeClick}
+                css={rightButtonWrapper({ buttonType })}
+                aria-label={t('button.home')}
+              >
+                {HOME_BUTTON_ICON_MAP[buttonType]}
+              </button>
+            )}
+            {rightButton && (
+              <button
+                type="button"
+                onClick={onRightButtonClick}
+                css={rightButtonWrapper({ buttonType })}
+                aria-label={t('button.share')}
+              >
+                {RIGHT_BUTTON_ICON_MAP[rightButtonType]}
+              </button>
+            )}
+          </div>
         )}
       </div>
     </header>

src/components/company-detail/company-review-list-content.tsx

@@ -40,15 +40,18 @@ export function CompanyReviewListContent({
     }
   }, [canUseMyCountryOnly, myCountryOnly]);
 
+  const effectiveCountry = canUseMyCountryOnly && myCountryOnly ? country : undefined;
+
   const queryParams = useMemo(
     () => ({
       companyId,
       // TODO: Re-enable after backend filter behavior is aligned.
       // with_photos: withPhotos || undefined,
       my_country_only: canUseMyCountryOnly && myCountryOnly ? true : undefined,
+      country: effectiveCountry,
       tags: selectedTags.length > 0 ? selectedTags.join(',') : undefined,
     }),
-    [companyId, canUseMyCountryOnly, myCountryOnly, selectedTags]
+    [companyId, canUseMyCountryOnly, myCountryOnly, effectiveCountry, selectedTags]
   );
 
   const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading } =

src/components/program-123-detail-view/index.tsx

@@ -494,6 +494,7 @@ export function Program123DetailView({
           ) : (
             <AppBar
               leftButton
+              homeButton
               buttonType="dark"
               onBackClick={onBackClick ?? handleDefaultBackClick}
               backgroundColor="bg_surface1"

src/icons/GnbHomeWhite.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+
+export const GnbHomeWhite = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" {...props}>
+    <path
+      stroke="#fff"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+      d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"
+    />
+    <path
+      stroke="#fff"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+      d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"
+    />
+  </svg>
+);

src/icons/index.ts

@@ -45,6 +45,7 @@ export * from './GnbCalendarActive';
 export * from './GnbCalendarInactive';
 export * from './GnbHomeActive';
 export * from './GnbHomeInactive';
+export * from './GnbHomeWhite';
 export * from './GnbMypageActive';
 export * from './GnbMypageInactive';
 export * from './GnbSearchActive';

src/pages/404.tsx

@@ -19,7 +19,7 @@ export default function NotFoundPage() {
       {isDesktop ? (
         <DesktopAppBar onSearchChange={() => {}} showSearch={false} />
       ) : (
-        <AppBar onBackClick={router.back} leftButton={true} buttonType="dark" />
+        <AppBar onBackClick={router.back} leftButton={true} homeButton={true} buttonType="dark" />
       )}
       <div css={pageWrapper}>
         <div css={content}>