diff --git a/api/notices.ts b/api/notices.ts
new file mode 100644
index 0000000..ac1599a
--- /dev/null
+++ b/api/notices.ts
@@ -0,0 +1,134 @@
+import {
+  ApiError,
+  authenticatedApiRequest,
+  type ApiRequestOptions,
+  type ClerkTokenGetter,
+} from '@/api/api-client';
+
+const NOTICE_MAX_ATTEMPTS = 3;
+const NOTICE_RETRY_DELAY_MS = 500;
+
+export interface NoticeListItemResponse {
+  id: number;
+  title: string;
+  isPinned: boolean;
+  createdAt: string;
+}
+
+export interface NoticeCursorPageResponse {
+  items: NoticeListItemResponse[];
+  nextCursor: string | null;
+  hasNext: boolean;
+}
+
+export interface NoticeDetailResponse {
+  id: number;
+  title: string;
+  content: string;
+  isPinned: boolean;
+  createdAt: string;
+  updatedAt: string;
+}
+
+interface FetchNoticesOptions extends Pick<ApiRequestOptions, 'signal'> {
+  cursor?: string | null;
+  size?: number;
+}
+
+type NoticeRequestOptions = Pick<ApiRequestOptions, 'signal'>;
+
+export function fetchNotices(
+  getToken: ClerkTokenGetter,
+  { cursor, size = 20, signal }: FetchNoticesOptions = {},
+) {
+  const params = new URLSearchParams({ size: String(size) });
+  const abortSignal = signal ?? undefined;
+
+  if (cursor) {
+    params.set('cursor', cursor);
+  }
+
+  return requestWithRetry(() =>
+    authenticatedApiRequest<NoticeCursorPageResponse>(
+      getToken,
+      `/api/v1/notices?${params.toString()}`,
+      { method: 'GET', signal: abortSignal },
+    ),
+    abortSignal,
+  );
+}
+
+export function fetchNoticeDetail(
+  getToken: ClerkTokenGetter,
+  noticeId: number,
+  options: NoticeRequestOptions = {},
+) {
+  const signal = options.signal ?? undefined;
+
+  return requestWithRetry(() =>
+    authenticatedApiRequest<NoticeDetailResponse>(
+      getToken,
+      `/api/v1/notices/${encodeURIComponent(String(noticeId))}`,
+      { method: 'GET', ...options, signal },
+    ),
+    signal,
+  );
+}
+
+async function requestWithRetry<T>(
+  request: () => Promise<T>,
+  signal?: AbortSignal,
+): Promise<T> {
+  let lastError: unknown;
+
+  for (let attempt = 1; attempt <= NOTICE_MAX_ATTEMPTS; attempt += 1) {
+    try {
+      return await request();
+    } catch (error) {
+      lastError = error;
+
+      if (signal?.aborted || !shouldRetryNoticeRequest(error) || attempt === NOTICE_MAX_ATTEMPTS) {
+        throw error;
+      }
+
+      await delay(NOTICE_RETRY_DELAY_MS * attempt, signal);
+    }
+  }
+
+  throw lastError;
+}
+
+function shouldRetryNoticeRequest(error: unknown) {
+  if (isAbortError(error)) {
+    return false;
+  }
+
+  if (error instanceof ApiError) {
+    return error.status === 408 || error.status === 429 || error.status >= 500;
+  }
+
+  return error instanceof TypeError;
+}
+
+function delay(ms: number, signal?: AbortSignal) {
+  return new Promise<void>((resolve, reject) => {
+    const timeoutId = setTimeout(resolve, ms);
+
+    if (!signal) {
+      return;
+    }
+
+    signal.addEventListener(
+      'abort',
+      () => {
+        clearTimeout(timeoutId);
+        reject(new DOMException('Aborted', 'AbortError'));
+      },
+      { once: true },
+    );
+  });
+}
+
+function isAbortError(error: unknown) {
+  return typeof error === 'object' && error !== null && 'name' in error && error.name === 'AbortError';
+}
diff --git a/app/(tabs)/(home)/notice-detail.tsx b/app/(tabs)/(home)/notice-detail.tsx
new file mode 100644
index 0000000..0d59970
--- /dev/null
+++ b/app/(tabs)/(home)/notice-detail.tsx
@@ -0,0 +1,268 @@
+import { useAuth } from '@clerk/expo';
+import { router, useLocalSearchParams } from 'expo-router';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { ActivityIndicator, ScrollView, StyleSheet, Text, View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+import { fetchNoticeDetail, type NoticeDetailResponse } from '@/api/notices';
+import { AppIcon } from '@/components/ui/app-icon';
+import { Button } from '@/components/ui/button';
+import { Colors, Typography } from '@/constants/theme';
+
+type NoticeDetailState =
+  | { status: 'loading'; data: null; message: null }
+  | { status: 'success'; data: NoticeDetailResponse; message: null }
+  | { status: 'error'; data: null; message: string };
+
+export default function NoticeDetailScreen() {
+  const { id } = useLocalSearchParams<{ id?: string | string[] }>();
+  const { getToken, isLoaded, isSignedIn } = useAuth();
+  const noticeId = useMemo(() => parseNoticeId(id), [id]);
+  const [state, setState] = useState<NoticeDetailState>({
+    status: 'loading',
+    data: null,
+    message: null,
+  });
+  const getTokenRef = useRef(getToken);
+  const retryControllerRef = useRef<AbortController | null>(null);
+
+  useEffect(() => {
+    getTokenRef.current = getToken;
+  }, [getToken]);
+
+  const loadNotice = useCallback(
+    async (signal?: AbortSignal) => {
+      if (!isLoaded) {
+        return;
+      }
+
+      if (!isSignedIn) {
+        setState({
+          status: 'error',
+          data: null,
+          message: '공지사항을 보려면 로그인이 필요합니다.',
+        });
+        return;
+      }
+
+      if (noticeId == null) {
+        setState({
+          status: 'error',
+          data: null,
+          message: '공지사항 정보를 확인할 수 없습니다.',
+        });
+        return;
+      }
+
+      setState({ status: 'loading', data: null, message: null });
+
+      try {
+        const data = await fetchNoticeDetail(() => getTokenRef.current(), noticeId, { signal });
+        setState({ status: 'success', data, message: null });
+      } catch (error) {
+        if (isAbortError(error)) {
+          return;
+        }
+
+        setState({
+          status: 'error',
+          data: null,
+          message: error instanceof Error ? error.message : '공지사항을 불러오지 못했습니다.',
+        });
+      }
+    },
+    [isLoaded, isSignedIn, noticeId],
+  );
+
+  useEffect(() => {
+    const controller = new AbortController();
+
+    void loadNotice(controller.signal);
+
+    return () => {
+      controller.abort();
+      retryControllerRef.current?.abort();
+      retryControllerRef.current = null;
+    };
+  }, [loadNotice]);
+
+  const handleRetry = useCallback(() => {
+    retryControllerRef.current?.abort();
+
+    const controller = new AbortController();
+    retryControllerRef.current = controller;
+
+    void loadNotice(controller.signal).finally(() => {
+      if (retryControllerRef.current === controller) {
+        retryControllerRef.current = null;
+      }
+    });
+  }, [loadNotice]);
+
+  const title = state.data?.title ?? '공지사항';
+
+  return (
+    <SafeAreaView style={styles.safeArea} edges={['top']}>
+      <View style={styles.header}>
+        <AppIcon name="back" onPress={() => router.back()} />
+        <Text style={styles.title} numberOfLines={1}>
+          {title}
+        </Text>
+        <View style={styles.headerSpacer} />
+      </View>
+
+      {state.status === 'loading' && (
+        <View style={styles.centerContent}>
+          <ActivityIndicator size="large" color={Colors.brand.primary} />
+          <Text style={styles.stateText}>공지사항을 불러오는 중입니다.</Text>
+        </View>
+      )}
+
+      {state.status === 'error' && (
+        <View style={styles.centerContent}>
+          <Text style={styles.errorTitle}>공지사항을 불러올 수 없습니다.</Text>
+          <Text style={styles.stateText}>{state.message}</Text>
+          <Button label="다시 시도" variant="secondary" onPress={handleRetry} />
+        </View>
+      )}
+
+      {state.status === 'success' && (
+        <ScrollView
+          style={styles.scroll}
+          contentContainerStyle={styles.content}
+          showsVerticalScrollIndicator={false}
+        >
+          <View style={styles.noticeHeader}>
+            <View style={styles.titleRow}>
+              {state.data.isPinned && (
+                <View style={styles.pinnedBadge}>
+                  <Text style={styles.pinnedText}>공지</Text>
+                </View>
+              )}
+              <Text style={styles.noticeTitle}>{state.data.title}</Text>
+            </View>
+            <Text style={styles.noticeDate}>작성일: {formatDate(state.data.createdAt)}</Text>
+            <Text style={styles.noticeDate}>수정일: {formatDate(state.data.updatedAt)}</Text>
+          </View>
+
+          <Text style={styles.contentText}>{state.data.content}</Text>
+        </ScrollView>
+      )}
+    </SafeAreaView>
+  );
+}
+
+function parseNoticeId(value: string | string[] | undefined) {
+  const raw = Array.isArray(value) ? value[0] : value;
+  const parsed = Number(raw);
+
+  return Number.isInteger(parsed) && parsed > 0 ? parsed : null;
+}
+
+function isAbortError(error: unknown) {
+  return typeof error === 'object' && error !== null && 'name' in error && error.name === 'AbortError';
+}
+
+function formatDate(value: string) {
+  const date = new Date(value);
+
+  if (Number.isNaN(date.getTime())) {
+    return value;
+  }
+
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+
+  return `${year}.${month}.${day}`;
+}
+
+const styles = StyleSheet.create({
+  safeArea: {
+    flex: 1,
+    backgroundColor: Colors.brand.background,
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    gap: 8,
+  },
+  title: {
+    ...Typography.section,
+    color: Colors.brand.text,
+    flex: 1,
+    textAlign: 'center',
+  },
+  headerSpacer: {
+    width: 28,
+  },
+  scroll: {
+    flex: 1,
+  },
+  content: {
+    paddingHorizontal: 24,
+    paddingTop: 8,
+    paddingBottom: 40,
+    gap: 20,
+  },
+  noticeHeader: {
+    backgroundColor: Colors.brand.surface,
+    borderRadius: 14,
+    borderWidth: 1,
+    borderColor: Colors.brand.line,
+    paddingHorizontal: 18,
+    paddingVertical: 18,
+    gap: 8,
+  },
+  titleRow: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    gap: 8,
+  },
+  pinnedBadge: {
+    backgroundColor: Colors.brand.softMint,
+    borderRadius: 4,
+    paddingHorizontal: 6,
+    paddingVertical: 2,
+    marginTop: 2,
+  },
+  pinnedText: {
+    ...Typography.bold12,
+    color: Colors.brand.primaryDeep,
+  },
+  noticeTitle: {
+    ...Typography.section,
+    color: Colors.brand.text,
+    flex: 1,
+    lineHeight: 26,
+  },
+  noticeDate: {
+    ...Typography.summary,
+    color: Colors.brand.textHint,
+  },
+  contentText: {
+    ...Typography.body,
+    color: Colors.brand.textSecondary,
+    lineHeight: 24,
+  },
+  centerContent: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 32,
+    gap: 14,
+  },
+  errorTitle: {
+    ...Typography.profile,
+    color: Colors.brand.text,
+    textAlign: 'center',
+  },
+  stateText: {
+    ...Typography.summary,
+    color: Colors.brand.textSecondary,
+    lineHeight: 20,
+    textAlign: 'center',
+  },
+});
diff --git a/app/(tabs)/(home)/notices.tsx b/app/(tabs)/(home)/notices.tsx
index cbd3274..ed3eaac 100644
--- a/app/(tabs)/(home)/notices.tsx
+++ b/app/(tabs)/(home)/notices.tsx
@@ -1,18 +1,176 @@
+import { useAuth } from '@clerk/expo';
 import { router } from 'expo-router';
-import { ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import {
+  ActivityIndicator,
+  FlatList,
+  RefreshControl,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 
+import { fetchNotices, type NoticeListItemResponse } from '@/api/notices';
 import { AppIcon } from '@/components/ui/app-icon';
+import { Button } from '@/components/ui/button';
 import { Colors, Typography } from '@/constants/theme';
 
-// TODO: 공지사항 목록은 추후 GET /api/v1/notices API 연동으로 대체
-// TODO: 공지사항 상세 화면 추가 시 선택한 공지는 GET /api/v1/notices/{id} API 연동으로 조회
-const PLACEHOLDER_NOTICES: { id: number; title: string; date: string; isPinned: boolean }[] = [
-  { id: 1, title: 'LinClean 서비스 오픈 안내', date: '2026.04.01', isPinned: true },
-  { id: 2, title: '개인정보 처리방침 개정 안내', date: '2026.03.15', isPinned: false },
-];
+const NOTICE_PAGE_SIZE = 20;
+
+interface LoadNoticesOptions {
+  cursor?: string | null;
+  refresh?: boolean;
+  signal?: AbortSignal;
+}
 
 export default function NoticesScreen() {
+  const { getToken, isLoaded, isSignedIn } = useAuth();
+  const [notices, setNotices] = useState<NoticeListItemResponse[]>([]);
+  const [nextCursor, setNextCursor] = useState<string | null>(null);
+  const [hasNext, setHasNext] = useState(false);
+  const [isInitialLoading, setIsInitialLoading] = useState(true);
+  const [isRefreshing, setIsRefreshing] = useState(false);
+  const [isLoadingMore, setIsLoadingMore] = useState(false);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const getTokenRef = useRef(getToken);
+  const activeRequestRef = useRef<AbortController | null>(null);
+  const isLoadingMoreRef = useRef(false);
+
+  useEffect(() => {
+    getTokenRef.current = getToken;
+  }, [getToken]);
+
+  const loadNotices = useCallback(
+    async ({ cursor = null, refresh = false, signal }: LoadNoticesOptions = {}) => {
+      if (!isLoaded) {
+        return;
+      }
+
+      if (!isSignedIn) {
+        setErrorMessage('공지사항을 보려면 로그인이 필요합니다.');
+        setIsInitialLoading(false);
+        return;
+      }
+
+      if (cursor) {
+        isLoadingMoreRef.current = true;
+        setIsLoadingMore(true);
+      } else if (refresh) {
+        setIsRefreshing(true);
+      } else {
+        setIsInitialLoading(true);
+      }
+
+      setErrorMessage(null);
+
+      try {
+        const page = await fetchNotices(() => getTokenRef.current(), {
+          cursor,
+          size: NOTICE_PAGE_SIZE,
+          signal,
+        });
+
+        setNotices((current) => (cursor ? [...current, ...page.items] : page.items));
+        setNextCursor(page.nextCursor);
+        setHasNext(page.hasNext);
+      } catch (error) {
+        if (isAbortError(error)) {
+          return;
+        }
+
+        setErrorMessage(error instanceof Error ? error.message : '공지사항을 불러오지 못했습니다.');
+      } finally {
+        isLoadingMoreRef.current = false;
+
+        if (signal?.aborted) {
+          return;
+        }
+
+        setIsInitialLoading(false);
+        setIsRefreshing(false);
+        setIsLoadingMore(false);
+      }
+    },
+    [isLoaded, isSignedIn],
+  );
+
+  const startLoadNotices = useCallback(
+    (options: Omit<LoadNoticesOptions, 'signal'> = {}) => {
+      activeRequestRef.current?.abort();
+
+      const controller = new AbortController();
+      activeRequestRef.current = controller;
+
+      void loadNotices({ ...options, signal: controller.signal }).finally(() => {
+        if (activeRequestRef.current === controller) {
+          activeRequestRef.current = null;
+        }
+      });
+    },
+    [loadNotices],
+  );
+
+  useEffect(() => {
+    startLoadNotices();
+
+    return () => {
+      activeRequestRef.current?.abort();
+      activeRequestRef.current = null;
+    };
+  }, [startLoadNotices]);
+
+  const handleRefresh = useCallback(() => {
+    startLoadNotices({ refresh: true });
+  }, [startLoadNotices]);
+
+  const handleLoadMore = useCallback(() => {
+    if (
+      !hasNext ||
+      !nextCursor ||
+      isInitialLoading ||
+      isRefreshing ||
+      activeRequestRef.current ||
+      isLoadingMoreRef.current
+    ) {
+      return;
+    }
+
+    isLoadingMoreRef.current = true;
+    startLoadNotices({ cursor: nextCursor });
+  }, [hasNext, isInitialLoading, isRefreshing, nextCursor, startLoadNotices]);
+
+  const handleRetry = useCallback(() => {
+    startLoadNotices();
+  }, [startLoadNotices]);
+
+  const renderNotice = useCallback(
+    ({ item }: { item: NoticeListItemResponse }) => (
+      <TouchableOpacity
+        style={styles.noticeItem}
+        activeOpacity={0.7}
+        onPress={() =>
+          router.push({
+            pathname: '/(tabs)/(home)/notice-detail' as any,
+            params: { id: String(item.id) },
+          })
+        }
+      >
+        <View style={styles.noticeTop}>
+          {item.isPinned && (
+            <View style={styles.pinnedBadge}>
+              <Text style={styles.pinnedText}>공지</Text>
+            </View>
+          )}
+          <Text style={styles.noticeTitle}>{item.title}</Text>
+        </View>
+        <Text style={styles.noticeDate}>{formatDate(item.createdAt)}</Text>
+      </TouchableOpacity>
+    ),
+    [],
+  );
+
   return (
     <SafeAreaView style={styles.safeArea} edges={['top']}>
       <View style={styles.header}>
@@ -21,39 +179,80 @@ export default function NoticesScreen() {
         <View style={styles.headerSpacer} />
       </View>
 
-      <ScrollView
-        style={styles.scroll}
-        contentContainerStyle={styles.content}
-        showsVerticalScrollIndicator={false}
-      >
-        {PLACEHOLDER_NOTICES.map((notice, index) => (
-          <TouchableOpacity
-            key={notice.id}
-            style={[styles.noticeItem, index < PLACEHOLDER_NOTICES.length - 1 && styles.noticeItemBorder]}
-            activeOpacity={0.7}
-          >
-            <View style={styles.noticeTop}>
-              {notice.isPinned && (
-                <View style={styles.pinnedBadge}>
-                  <Text style={styles.pinnedText}>공지</Text>
+      {isInitialLoading && (
+        <View style={styles.centerContent}>
+          <ActivityIndicator size="large" color={Colors.brand.primary} />
+          <Text style={styles.stateText}>공지사항을 불러오는 중입니다.</Text>
+        </View>
+      )}
+
+      {!isInitialLoading && errorMessage && notices.length === 0 && (
+        <View style={styles.centerContent}>
+          <Text style={styles.errorTitle}>공지사항을 불러올 수 없습니다.</Text>
+          <Text style={styles.stateText}>{errorMessage}</Text>
+          <Button label="다시 시도" variant="secondary" onPress={handleRetry} />
+        </View>
+      )}
+
+      {!isInitialLoading && (!errorMessage || notices.length > 0) && (
+        <View style={styles.listCard}>
+          <FlatList
+            data={notices}
+            keyExtractor={(item) => String(item.id)}
+            renderItem={renderNotice}
+            ItemSeparatorComponent={() => <View style={styles.itemSeparator} />}
+            contentContainerStyle={notices.length === 0 && styles.emptyListContent}
+            showsVerticalScrollIndicator={false}
+            refreshControl={
+              <RefreshControl
+                refreshing={isRefreshing}
+                onRefresh={handleRefresh}
+                tintColor={Colors.brand.primary}
+                colors={[Colors.brand.primary]}
+              />
+            }
+            onEndReached={handleLoadMore}
+            onEndReachedThreshold={0.4}
+            ListEmptyComponent={
+              <View style={styles.empty}>
+                <Text style={styles.emptyText}>공지사항이 없습니다.</Text>
+              </View>
+            }
+            ListFooterComponent={
+              isLoadingMore ? (
+                <View style={styles.footerLoading}>
+                  <ActivityIndicator color={Colors.brand.primary} />
                 </View>
-              )}
-              <Text style={styles.noticeTitle}>{notice.title}</Text>
-            </View>
-            <Text style={styles.noticeDate}>{notice.date}</Text>
-          </TouchableOpacity>
-        ))}
-
-        {PLACEHOLDER_NOTICES.length === 0 && (
-          <View style={styles.empty}>
-            <Text style={styles.emptyText}>공지사항이 없습니다.</Text>
-          </View>
-        )}
-      </ScrollView>
+              ) : null
+            }
+          />
+          {errorMessage && notices.length > 0 && (
+            <Text style={styles.inlineError}>{errorMessage}</Text>
+          )}
+        </View>
+      )}
     </SafeAreaView>
   );
 }
 
+function isAbortError(error: unknown) {
+  return typeof error === 'object' && error !== null && 'name' in error && error.name === 'AbortError';
+}
+
+function formatDate(value: string) {
+  const date = new Date(value);
+
+  if (Number.isNaN(date.getTime())) {
+    return value;
+  }
+
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+
+  return `${year}.${month}.${day}`;
+}
+
 const styles = StyleSheet.create({
   safeArea: {
     flex: 1,
@@ -75,26 +274,29 @@ const styles = StyleSheet.create({
   headerSpacer: {
     width: 28,
   },
-  scroll: {
+  listCard: {
     flex: 1,
-  },
-  content: {
     marginHorizontal: 24,
+    marginTop: 8,
+    marginBottom: 24,
     backgroundColor: Colors.brand.surface,
     borderRadius: 14,
     borderWidth: 1,
     borderColor: Colors.brand.line,
     overflow: 'hidden',
-    marginTop: 8,
+  },
+  emptyListContent: {
+    flexGrow: 1,
   },
   noticeItem: {
     paddingHorizontal: 18,
     paddingVertical: 16,
     gap: 6,
   },
-  noticeItemBorder: {
-    borderBottomWidth: 1,
-    borderBottomColor: Colors.brand.line,
+  itemSeparator: {
+    height: 1,
+    backgroundColor: Colors.brand.line,
+    marginHorizontal: 18,
   },
   noticeTop: {
     flexDirection: 'row',
@@ -122,6 +324,7 @@ const styles = StyleSheet.create({
     color: Colors.brand.textHint,
   },
   empty: {
+    flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
     paddingVertical: 60,
@@ -130,4 +333,31 @@ const styles = StyleSheet.create({
     ...Typography.body,
     color: Colors.brand.textHint,
   },
+  centerContent: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 32,
+    gap: 14,
+  },
+  errorTitle: {
+    ...Typography.profile,
+    color: Colors.brand.text,
+    textAlign: 'center',
+  },
+  stateText: {
+    ...Typography.summary,
+    color: Colors.brand.textSecondary,
+    lineHeight: 20,
+    textAlign: 'center',
+  },
+  footerLoading: {
+    paddingVertical: 16,
+  },
+  inlineError: {
+    ...Typography.caption,
+    color: Colors.brand.textWarning,
+    paddingHorizontal: 18,
+    paddingVertical: 12,
+  },
 });