alter-app · dohy-eon · May 19, 2026 · May 4, 2026 · May 4, 2026 · May 3, 2026
diff --git a/index.html b/index.html
@@ -24,6 +24,11 @@
       type="text/javascript"
       src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js"
     ></script>
+    <!-- 네이버 지도 API v3  -->
+    <script
+      type="text/javascript"
+      src="https://oapi.map.naver.com/openapi/v3/maps.js?ncpKeyId=%VITE_NAVER_MAP_CLIENT_ID%"
+    ></script>
   </head>
   <body>
     <div id="root"></div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -31,6 +31,7 @@
     "date-fns": "^4.1.0",
     "date-fns-tz": "^3.2.0",
     "firebase": "^12.10.0",
+    "framer-motion": "^12.38.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^7.12.0",

diff --git a/src/app/App.tsx b/src/app/App.tsx
@@ -13,6 +13,8 @@ import { SocialChatPage } from '@/pages/manager/social-chat'
 import { LoginPage } from '@/pages/login'
 import { KakaoCallbackPage } from '@/pages/oauth/KakaoCallbackPage'
 import { JobLookupMapPage } from '@/pages/user/job-lookup-map'
+import { JobLookupMapApplyPage } from '@/pages/user/job-lookup-map-apply'
+import { JobLookupMapDetailPage } from '@/pages/user/job-lookup-map-detail'
 import { SchedulePage } from '@/pages/user/schedule'
 import { UserHomePage } from '@/pages/user/home'
 import { WorkspaceMembersPage } from '@/pages/user/workspace-members'
@@ -107,6 +109,14 @@ export function App() {
             path={ROUTES.USER.JOB_LOOKUP_MAP}
             element={<JobLookupMapPage />}
           />
+          <Route
+            path={ROUTES.USER.JOB_LOOKUP_MAP_DETAIL}
+            element={<JobLookupMapDetailPage />}
+          />
+          <Route
+            path={ROUTES.USER.JOB_LOOKUP_MAP_APPLY}
+            element={<JobLookupMapApplyPage />}
+          />
           <Route
             path={ROUTES.USER.HOME}
             element={

diff --git a/src/assets/icons/alba/Bookmark.svg → src/assets/icons/job-lookup-map/Bookmark.svg b/src/assets/icons/alba/Bookmark.svg → src/assets/icons/job-lookup-map/Bookmark.svg
diff --git a/src/assets/icons/alba/Calendar.svg → src/assets/icons/job-lookup-map/Calendar.svg b/src/assets/icons/alba/Calendar.svg → src/assets/icons/job-lookup-map/Calendar.svg
diff --git a/src/assets/icons/job-lookup-map/Chevrondown.svg b/src/assets/icons/job-lookup-map/Chevrondown.svg
diff --git a/src/assets/icons/alba/Clock.svg → src/assets/icons/job-lookup-map/Clock.svg b/src/assets/icons/alba/Clock.svg → src/assets/icons/job-lookup-map/Clock.svg
diff --git a/src/assets/icons/job-lookup-map/List.svg b/src/assets/icons/job-lookup-map/List.svg
diff --git a/src/assets/icons/job-lookup-map/Mappin.svg b/src/assets/icons/job-lookup-map/Mappin.svg
diff --git a/src/assets/icons/alba/Thumbsup.svg → src/assets/icons/job-lookup-map/Thumbsup.svg b/src/assets/icons/alba/Thumbsup.svg → src/assets/icons/job-lookup-map/Thumbsup.svg
diff --git a/src/features/auth/ui/KakaoLoginButton.tsx b/src/features/auth/ui/KakaoLoginButton.tsx
@@ -24,13 +24,14 @@ export function KakaoLoginButton({ redirectFrom }: KakaoLoginButtonProps) {
     try {
       setIsLoading(true)
 
-      const authorizationCode = await requestFreshKakaoAuthorizationCode()
+      const { authorizationCode, redirectUri } =
+        await requestFreshKakaoAuthorizationCode(getKakaoOAuthRedirectUri())
 
       await loginSocial(
         {
           provider: 'KAKAO',
           authorizationCode,
-          redirectUri: getKakaoOAuthRedirectUri(),
+          redirectUri,
           platformType: 'WEB',
         },
         setAuth,

diff --git a/src/features/job-lookup-map/api/posting.ts b/src/features/job-lookup-map/api/posting.ts
@@ -0,0 +1,96 @@
+import axiosInstance from '@/shared/lib/axiosInstance'
+import type { CommonApiResponse } from '@/shared/types/common'
+import type {
+  ApplyPostingRequest,
+  PostingListResponse,
+  PostingDetailResponse,
+} from '@/features/job-lookup-map/types/posting'
+
+export type FetchPostingsParams = {
+  pageSize: number
+  cursor?: string
+}
+
+function isCommonApiEnvelope(
+  value: unknown
+): value is CommonApiResponse<unknown> {
+  return (
+    value !== null &&
+    typeof value === 'object' &&
+    'timestamp' in value &&
+    'data' in value
+  )
+}
+
+function isPostingDetailResponse(
+  value: unknown
+): value is PostingDetailResponse {
+  if (value === null || typeof value !== 'object') return false
+  const record = value as Record<string, unknown>
+  const workspace = record.workspace
+  return (
+    typeof record.id === 'number' &&
+    typeof record.title === 'string' &&
+    typeof record.description === 'string' &&
+    typeof record.payAmount === 'number' &&
+    typeof record.paymentType === 'string' &&
+    typeof record.createdAt === 'string' &&
+    typeof record.scrapped === 'boolean' &&
+    Array.isArray(record.keywords) &&
+    Array.isArray(record.schedules) &&
+    workspace !== null &&
+    typeof workspace === 'object' &&
+    typeof (workspace as { id?: unknown }).id === 'number'
+  )
+}
+
+function unwrapPostingDetailBody(body: unknown): PostingDetailResponse {
+  if (isCommonApiEnvelope(body)) {
+    if (!isPostingDetailResponse(body.data)) {
+      throw new Error('공고 상세 응답 형식이 올바르지 않습니다.')
+    }
+    return body.data
+  }
+
+  if (isPostingDetailResponse(body)) {
+    return body
+  }
+
+  throw new Error('공고 상세를 불러오지 못했습니다.')
+}
+
+export async function fetchPostings(
+  params: FetchPostingsParams
+): Promise<PostingListResponse> {
+  const response = await axiosInstance.get<PostingListResponse>(
+    '/app/postings',
+    {
+      params: {
+        pageSize: params.pageSize,
+        ...(params.cursor !== undefined &&
+          params.cursor !== '' && { cursor: params.cursor }),
+      },
+    }
+  )
+  return response.data
+}
+
+export async function fetchPostingDetail(
+  postingId: number
+): Promise<PostingDetailResponse> {
+  const response = await axiosInstance.get<unknown>(
+    `/app/postings/${postingId}`
+  )
+  return unwrapPostingDetailBody(response.data)
+}
+
+/** POST /app/postings/apply/{postingId} — 공고 지원 */
+export async function applyPosting(
+  postingId: number,
+  body: ApplyPostingRequest
+): Promise<void> {
+  await axiosInstance.post<CommonApiResponse<Record<string, never>>>(
+    `/app/postings/apply/${postingId}`,
+    body
+  )
+}
diff --git a/src/features/job-lookup-map/common/AlbaFindCategoryBar.tsx b/src/features/job-lookup-map/common/AlbaFindCategoryBar.tsx
@@ -0,0 +1,103 @@
+import ChevrondownIcon from '@/assets/icons/job-lookup-map/Chevrondown.svg?react'
+
+export type AlbaFindMode = 'nearby' | 'region'
+
+export type AlbaFindFilterId = 'sort' | 'distance' | 'salary'
+
+type AlbaFindCategoryBarProps = {
+  mode: AlbaFindMode
+  onModeChange: (mode: AlbaFindMode) => void
+  activeFilter: AlbaFindFilterId
+  onFilterChange: (id: AlbaFindFilterId) => void
+}
+
+const NEARBY_FILTER_ITEMS: { id: AlbaFindFilterId; label: string }[] = [
+  { id: 'sort', label: '최신순' },
+  { id: 'distance', label: '거리' },
+  { id: 'salary', label: '급여' },
+]
+
+const REGION_FILTER_ITEMS: { id: AlbaFindFilterId; label: string }[] = [
+  { id: 'sort', label: '최신순' },
+  { id: 'distance', label: '서울' },
+  { id: 'salary', label: '전체' },
+]
+
+function getFilterItems(mode: AlbaFindMode) {
+  return mode === 'region' ? REGION_FILTER_ITEMS : NEARBY_FILTER_ITEMS
+}
+
+export function AlbaFindCategoryBar({
+  mode,
+  onModeChange,
+  activeFilter,
+  onFilterChange,
+}: AlbaFindCategoryBarProps) {
+  const filterItems = getFilterItems(mode)
+
+  return (
+    <div className="flex flex-col gap-3">
+      <div className="flex h-12 gap-1 rounded-lg bg-bg-dark p-1" role="tablist">
+        <button
+          type="button"
+          role="tab"
+          aria-selected={mode === 'nearby'}
+          onClick={() => onModeChange('nearby')}
+          className={`min-h-10 flex-1 rounded-lg typography-body01-semibold transition-colors ${
+            mode === 'nearby'
+              ? 'border border-line-2 bg-white text-text-100 shadow-[0px_1px_4px_0px_rgba(0,0,0,0.12)]'
+              : 'bg-transparent text-text-50'
+          }`}
+        >
+          주변에서 찾기
+        </button>
+        <button
+          type="button"
+          role="tab"
+          aria-selected={mode === 'region'}
+          onClick={() => onModeChange('region')}
+          className={`min-h-10 flex-1 rounded-lg typography-body01-semibold transition-colors ${
+            mode === 'region'
+              ? 'border border-line-2 bg-white text-text-100 shadow-[0px_1px_4px_0px_rgba(0,0,0,0.12)]'
+              : 'bg-transparent text-text-50'
+          }`}
+        >
+          지역에서 찾기
+        </button>
+      </div>
+
+      <div className="flex flex-wrap items-center gap-2">
+        {filterItems.map(({ id, label }, index) => {
+          const active = activeFilter === id
+          const showChevron = mode === 'nearby' || id === 'sort'
+          return (
+            <div key={id} className="flex items-center gap-2">
+              {index === 1 ? (
+                <div
+                  className="h-[26px] w-px shrink-0 bg-[#d9d9d9]"
+                  aria-hidden
+                />
+              ) : null}
+              <button
+                type="button"
+                onClick={() => onFilterChange(id)}
+                className={`inline-flex h-[26px] min-w-0 items-center gap-1 rounded-full px-3 transition-colors ${
+                  active
+                    ? 'bg-main typography-body03-semibold text-text-100'
+                    : 'border border-line-2 bg-white typography-body03-regular text-text-90'
+                }`}
+              >
+                <span>{label}</span>
+                {showChevron ? (
+                  <ChevrondownIcon
+                    className={active ? 'text-text-100' : 'text-text-70'}
+                  />
+                ) : null}
+              </button>
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
diff --git a/...red/ui/manager/alba-find/AlbaFindList.tsx → ...es/job-lookup-map/common/AlbaFindList.tsx b/...red/ui/manager/alba-find/AlbaFindList.tsx → ...es/job-lookup-map/common/AlbaFindList.tsx