diff --git a/client/src/components/CafeActionBar.tsx b/client/src/components/CafeActionBar.tsx
index 9055aad8..bd6224d4 100644
--- a/client/src/components/CafeActionBar.tsx
+++ b/client/src/components/CafeActionBar.tsx
@@ -1,12 +1,15 @@
-import { Suspense, useState, type PropsWithChildren } from 'react';
-import { PiReadCvLogoFill } from 'react-icons/pi';
-import { styled } from 'styled-components';
+import { Suspense, useState } from 'react';
+import { BiSolidInfoCircle } from 'react-icons/bi';
+import { FaShare } from 'react-icons/fa';
+import { PiHeartFill, PiReadCvLogoFill } from 'react-icons/pi';
+import { styled, useTheme } from 'styled-components';
+import { useToast } from '../context/ToastContext';
 import useCafeLikes from '../hooks/useCafeLikes';
+import useClipboard from '../hooks/useClipboard';
 import useUser from '../hooks/useUser';
 import type { Cafe } from '../types';
 import CafeMenuBottomSheet from './CafeMenuBottomSheet';
-import LikeButton from './LikeButton';
-import ShareButton from './ShareButton';
+import IconButton from './IconButton';
 
 type CafeActionBarProps = {
   cafe: Cafe;
@@ -14,42 +17,62 @@ type CafeActionBarProps = {
 
 const CafeActionBar = (props: CafeActionBarProps) => {
   const { cafe } = props;
+  const theme = useTheme();
+  const showToast = useToast();
+  const clipboard = useClipboard();
+
   const { isLiked, setLiked } = useCafeLikes(cafe);
   const { data: user } = useUser();
   const [isMenuOpened, setIsMenuOpened] = useState(false);
 
+  const likeCount = cafe.likeCount + (isLiked ? 1 : 0);
+
+  const handleShare = async () => {
+    try {
+      await clipboard.copyToClipboard(`https://yozm.cafe/cafes/${cafe.id}`);
+      showToast('success', 'URL이 복사되었습니다!');
+    } catch (error) {
+      showToast('error', `URL 복사 실패: ${error}`);
+    }
+  };
+
   const handleLikeCountIncrease = () => {
     if (!user) {
-      alert('로그인이 필요합니다!');
+      showToast('error', '로그인이 필요합니다!');
       return;
     }
-
     setLiked({ isLiked: !isLiked });
   };
 
-  const handlePreventClickPropagation: React.MouseEventHandler<HTMLDivElement> = (event) => {
-    event.stopPropagation();
+  const handleMenuOpen = () => {
+    setIsMenuOpened(true);
+  };
+
+  const handleMenuClose = () => {
+    setIsMenuOpened(false);
   };
 
   return (
-    <Container onClick={handlePreventClickPropagation}>
-      <Action>
-        <ShareButton url={`https://yozm.cafe/cafes/${cafe.id}`} />
-        <LikeButton
-          likeCount={cafe.likeCount + (isLiked ? 1 : 0)}
-          active={isLiked}
-          onChange={handleLikeCountIncrease}
-        />
-      </Action>
-      <Action onClick={() => setIsMenuOpened(true)}>
-        <ActionButton label="메뉴">
-          <PiReadCvLogoFill />
-        </ActionButton>
-      </Action>
+    <Container>
+      <IconButton label="공유" onClick={handleShare}>
+        <FaShare />
+      </IconButton>
+
+      <IconButton label={String(likeCount)} onClick={handleLikeCountIncrease}>
+        <PiHeartFill fill={isLiked ? theme.color.primary : theme.color.white} />
+      </IconButton>
+
+      <IconButton label="메뉴" onClick={handleMenuOpen}>
+        <PiReadCvLogoFill />
+      </IconButton>
+
+      <IconButton label="더보기">
+        <BiSolidInfoCircle />
+      </IconButton>
 
       {isMenuOpened && (
         <Suspense>
-          <CafeMenuBottomSheet cafe={cafe} onClose={() => setIsMenuOpened(false)} />
+          <CafeMenuBottomSheet cafe={cafe} onClose={handleMenuClose} />
         </Suspense>
       )}
     </Container>
@@ -59,51 +82,12 @@ const CafeActionBar = (props: CafeActionBarProps) => {
 export default CafeActionBar;
 
 const Container = styled.aside`
-  position: absolute;
-  right: 0;
-  bottom: 133px;
-
   display: flex;
   flex-direction: column;
-  gap: ${({ theme }) => theme.space[3]};
+  gap: ${({ theme }) => theme.space[5]};
   align-self: flex-end;
 
-  padding-right: ${({ theme }) => theme.space[3]};
-`;
+  padding: ${({ theme }) => theme.space[3]};
 
-const Action = styled.button`
-  padding: 0;
   color: white;
-  background: none;
-  border: none;
-`;
-
-type ActionButtonProps = PropsWithChildren<{
-  label: string;
-}>;
-
-const ActionButton = (props: ActionButtonProps) => {
-  const { label, children } = props;
-
-  return (
-    <ActionButtonContainer>
-      <ActionButtonIcon>{children}</ActionButtonIcon>
-      {label}
-    </ActionButtonContainer>
-  );
-};
-
-const ActionButtonContainer = styled.button`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-`;
-
-const ActionButtonIcon = styled.div`
-  font-size: ${({ theme }) => theme.fontSize['4xl']};
-
-  & > svg {
-    display: block;
-  }
 `;
diff --git a/client/src/components/CafeCard.tsx b/client/src/components/CafeCard.tsx
index 18f21595..5e5bac3d 100644
--- a/client/src/components/CafeCard.tsx
+++ b/client/src/components/CafeCard.tsx
@@ -32,30 +32,40 @@ const CafeCard = (props: CardProps) => {
           {`${currentImageIndex + 1}`}/{cafe.images.length}
         </CardQuantityContents>
       </CardQuantityContainer>
+
       <CarouselImageList onScroll={handleScroll}>
         {cafe.images.map((image, index) => (
           <CarouselImage
             key={index}
             src={Resource.getImageUrl({ size: '500', filename: image })}
-            alt={`${cafe}의 이미지`}
+            alt={`${cafe.name}의 ${index + 1}번째 이미지`}
             loading={Math.abs(currentImageIndex - index) <= 1 ? 'eager' : 'lazy'}
           />
         ))}
       </CarouselImageList>
+
+      <Bottom>
+        <BottomItem $fullWidth>
+          <CafeSummary
+            title={cafe.name}
+            address={cafe.address}
+            onClick={(event) => {
+              event.stopPropagation();
+              setIsShowDetail(true);
+            }}
+          />
+        </BottomItem>
+        <BottomItem $align="right">
+          <CafeActionBar cafe={cafe} />
+        </BottomItem>
+      </Bottom>
+
       <DotsContainer>
         {cafe.images.map((_, index) => (
           <Dot key={index} $active={index === currentImageIndex} />
         ))}
       </DotsContainer>
-      <CafeSummary
-        title={cafe.name}
-        address={cafe.address}
-        onClick={(event) => {
-          event.stopPropagation();
-          setIsShowDetail(true);
-        }}
-      />
-      <CafeActionBar cafe={cafe} />
+
       {isShowDetail && <CafeDetailBottomSheet cafe={cafe} onClose={() => setIsShowDetail(false)} />}
     </Container>
   );
@@ -138,3 +148,18 @@ const CardQuantityContents = styled.div`
   background-color: ${({ theme }) => theme.color.background.secondary};
   border-radius: 10px;
 `;
+
+const Bottom = styled.div`
+  position: absolute;
+  bottom: 40px;
+  display: flex;
+  width: 100%;
+`;
+
+const BottomItem = styled.div<{ $fullWidth?: boolean; $align?: 'left' | 'right' }>`
+  position: absolute;
+  bottom: 0;
+  ${({ $align }) => $align === 'left' && 'left: 0;'}
+  ${({ $align }) => $align === 'right' && 'right: 0;'}
+  ${({ $fullWidth }) => $fullWidth && 'width: 100%;'}
+`;
diff --git a/client/src/components/CafeSummary.tsx b/client/src/components/CafeSummary.tsx
index 007ce22c..6877e398 100644
--- a/client/src/components/CafeSummary.tsx
+++ b/client/src/components/CafeSummary.tsx
@@ -1,4 +1,3 @@
-import { BiSolidInfoCircle } from 'react-icons/bi';
 import { SlLocationPin } from 'react-icons/sl';
 import { styled } from 'styled-components';
 
@@ -20,26 +19,14 @@ const CafeSummary = (props: CafeSummaryProps) => {
           {address}
         </Address>
       </Summary>
-      <ButtonList>
-        <Button>
-          <SolidInfoCircleIcon />
-          <ButtonText>더보기</ButtonText>
-        </Button>
-      </ButtonList>
     </Container>
   );
 };
 
 const Container = styled.div`
   cursor: pointer;
-
-  position: absolute;
-  bottom: 0;
-
   display: flex;
-
   width: 100%;
-  margin-bottom: 40px;
   padding: ${({ theme }) => theme.space[3]};
 `;
 
@@ -63,21 +50,4 @@ const LocationPinIcon = styled(SlLocationPin)`
   font-size: ${({ theme }) => theme.fontSize.sm};
 `;
 
-const ButtonList = styled.div`
-  margin-left: auto;
-  font-size: ${({ theme }) => theme.fontSize.sm};
-`;
-
-const ButtonText = styled.span``;
-
-const Button = styled.button`
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-`;
-
-const SolidInfoCircleIcon = styled(BiSolidInfoCircle)`
-  font-size: ${({ theme }) => theme.fontSize['4xl']};
-`;
-
 export default CafeSummary;
diff --git a/client/src/components/CommentButton.stories.tsx b/client/src/components/CommentButton.stories.tsx
deleted file mode 100644
index b8f94ebb..00000000
--- a/client/src/components/CommentButton.stories.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import CommentButton from './CommentButton';
-
-type Story = StoryObj<typeof CommentButton>;
-
-const meta: Meta<typeof CommentButton> = {
-  title: 'CommentButton',
-  component: CommentButton,
-};
-
-export default meta;
-
-export const Default: Story = {
-  args: {},
-};
diff --git a/client/src/components/CommentButton.tsx b/client/src/components/CommentButton.tsx
deleted file mode 100644
index 7ca63b9b..00000000
--- a/client/src/components/CommentButton.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { PiChatFill } from 'react-icons/pi';
-import { styled } from 'styled-components';
-
-const CommentButton = () => {
-  const handleClick = () => {
-    alert('아직 준비중입니다!');
-  };
-
-  return (
-    <Container>
-      <Button onClick={handleClick} />
-      <Text>댓글</Text>
-    </Container>
-  );
-};
-
-export default CommentButton;
-
-const Container = styled.aside`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-`;
-
-const Button = styled(PiChatFill)`
-  cursor: pointer;
-  font-size: ${({ theme }) => theme.fontSize['5xl']};
-`;
-
-const Text = styled.span`
-  font-size: ${({ theme }) => theme.fontSize.sm};
-`;
diff --git a/client/src/components/IconButton.stories.tsx b/client/src/components/IconButton.stories.tsx
new file mode 100644
index 00000000..e49e121e
--- /dev/null
+++ b/client/src/components/IconButton.stories.tsx
@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { FaShare } from 'react-icons/fa';
+import IconButton from './IconButton';
+
+type Story = StoryObj<typeof IconButton>;
+
+const meta: Meta<typeof IconButton> = {
+  title: 'IconButton',
+  component: IconButton,
+};
+
+export default meta;
+
+export const Default: Story = {
+  args: {
+    children: <FaShare />,
+  },
+};
+
+export const WithLabel: Story = {
+  args: {
+    children: <FaShare />,
+    label: '공유',
+  },
+};
diff --git a/client/src/components/IconButton.tsx b/client/src/components/IconButton.tsx
new file mode 100644
index 00000000..61aa9329
--- /dev/null
+++ b/client/src/components/IconButton.tsx
@@ -0,0 +1,36 @@
+import type { ComponentPropsWithoutRef } from 'react';
+import styled from 'styled-components';
+
+type IconButtonProps = ComponentPropsWithoutRef<'button'> & {
+  label?: string;
+};
+
+const IconButton = (props: IconButtonProps) => {
+  const { label, children, ...restProps } = props;
+
+  return (
+    <Container aria-label={label} {...restProps}>
+      <Icon>{children}</Icon>
+
+      {label && <Label>{label}</Label>}
+    </Container>
+  );
+};
+
+export default IconButton;
+
+const Container = styled.button`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+const Icon = styled.div`
+  font-size: ${({ theme }) => theme.fontSize['4xl']};
+
+  & > * {
+    display: block;
+  }
+`;
+
+const Label = styled.span``;
diff --git a/client/src/components/LikeButton.stories.tsx b/client/src/components/LikeButton.stories.tsx
deleted file mode 100644
index 704d3280..00000000
--- a/client/src/components/LikeButton.stories.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import LikeButton from './LikeButton';
-
-type Story = StoryObj<typeof LikeButton>;
-
-const meta: Meta<typeof LikeButton> = {
-  title: 'LikeButton',
-  component: LikeButton,
-};
-
-export default meta;
-
-export const Default: Story = {
-  args: {
-    likeCount: 1,
-  },
-};
diff --git a/client/src/components/LikeButton.tsx b/client/src/components/LikeButton.tsx
deleted file mode 100644
index 2e052df4..00000000
--- a/client/src/components/LikeButton.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import { useEffect, useState } from 'react';
-import { PiHeartFill } from 'react-icons/pi';
-import { styled } from 'styled-components';
-
-type LikeButtonProps = {
-  likeCount: number;
-  active: boolean;
-  onChange: () => void;
-};
-
-const LikeButton = (props: LikeButtonProps) => {
-  const { likeCount, active, onChange } = props;
-
-  const [announce, setAnnounce] = useState('');
-
-  useEffect(() => {
-    setAnnounce(active ? '좋아요 취소되었습니다.' : '좋아요가 추가되었습니다.');
-    setTimeout(() => setAnnounce(''), 1000);
-  }, [active]);
-
-  const handleLikeClick = () => {
-    onChange?.();
-  };
-
-  return (
-    <Container aria-label="좋아요 버튼" tabIndex={0} role="button">
-      <HeartIcon $active={active} onClick={handleLikeClick} />
-      <LikeCount>{likeCount}</LikeCount>
-      <Announcement aria-live="assertive" aria-atomic="true" aria-relevant="text">
-        {`${likeCount} ${announce}`}
-      </Announcement>
-    </Container>
-  );
-};
-
-export default LikeButton;
-
-const HeartIcon = styled(PiHeartFill)<{ $active: boolean }>`
-  cursor: pointer;
-  font-size: ${({ theme }) => theme.fontSize['4xl']};
-  color: ${({ theme, $active }) => ($active ? theme.color.primary : theme.color.white)};
-`;
-
-const LikeCount = styled.span`
-  font-size: small;
-  color: ${({ theme }) => theme.color.white};
-`;
-
-const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-
-  padding-top: ${({ theme }) => theme.space[3]};
-`;
-
-const Announcement = styled.div`
-  position: absolute;
-  left: -9999px;
-`;
diff --git a/client/src/components/ShareButton.tsx b/client/src/components/ShareButton.tsx
deleted file mode 100644
index bd64ff8c..00000000
--- a/client/src/components/ShareButton.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { FaShare } from 'react-icons/fa';
-import { styled } from 'styled-components';
-
-type ShareButtonProps = {
-  url: string;
-};
-
-const ShareButton = (props: ShareButtonProps) => {
-  const { url } = props;
-  const copyToClipboard = () => {
-    navigator.clipboard.writeText(url).then(
-      () => {
-        alert('URL이 복사되었습니다!');
-      },
-      (error) => {
-        console.error('URL 복사 실패:', error);
-      },
-    );
-  };
-
-  return (
-    <Container>
-      <Button onClick={copyToClipboard} />
-      <Text>공유</Text>
-    </Container>
-  );
-};
-
-export default ShareButton;
-
-const Container = styled.aside`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-`;
-
-const Button = styled(FaShare)`
-  cursor: pointer;
-  font-size: ${({ theme }) => theme.fontSize['4xl']};
-`;
-
-const Text = styled.span`
-  font-size: ${({ theme }) => theme.fontSize.sm};
-`;
diff --git a/client/src/hooks/useClipboard.ts b/client/src/hooks/useClipboard.ts
new file mode 100644
index 00000000..b2109cd5
--- /dev/null
+++ b/client/src/hooks/useClipboard.ts
@@ -0,0 +1,12 @@
+import { useCallback, useMemo } from 'react';
+
+const useClipboard = () => {
+  const copyToClipboard = useCallback((text: string) => {
+    return window.navigator.clipboard.writeText(text);
+  }, []);
+
+  const clipboard = useMemo(() => ({ copyToClipboard }), []);
+  return clipboard;
+};
+
+export default useClipboard;