QA를 위한 버그를 수정한다.

apps/client/src/assets/icons/HomeIcon.tsx

@@ -4,8 +4,8 @@ const HomeIcon = (props: SVGProps<SVGSVGElement>) => {
   return (
     <svg
       {...props}
-      width="36"
-      height="36"
+      width="32"
+      height="32"
       viewBox="0 0 36 36"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"

apps/client/src/assets/icons/PersonIcon.tsx

@@ -4,6 +4,8 @@ const PersonIcon = (props: SVGProps<SVGSVGElement>) => {
   return (
     <svg
       {...props}
+      width="36px"
+      height="36px"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >

apps/client/src/assets/icons/PrevIcon.tsx

@@ -0,0 +1,20 @@
+import React, { SVGProps } from 'react';
+
+const PrevIcon = (props: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+    >
+      <path
+        d="M14 7L9 12L14 17" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default PrevIcon;

apps/client/src/components/cake/CakeHeader.tsx

@@ -39,12 +39,10 @@ const Phrase = styled.h1`
 `;
 
 const MyPageButton = styled.button`
-  position: relative;
   width: 2.6rem;
   height: 2.6rem;
   border-radius: 50%;
   border-width: 0;
-  display: relative;
   overflow: hidden;
   cursor: pointer;
   display: flex;

apps/client/src/components/cake/Pagenation.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
+import PrevIcon from '../../assets/icons/PrevIcon';
 
 interface PageProps {
   currentPage: number;
@@ -18,7 +19,7 @@ const Pagenation: React.FC<PageProps> = ({
         onClick={() => changePage(currentPage - 1)}
         disabled={currentPage === 1}
       >
-        &lt;
+        <PrevIcon />
       </button>
       <span>
         {' '}
@@ -27,8 +28,9 @@ const Pagenation: React.FC<PageProps> = ({
       <button
         onClick={() => changePage(currentPage + 1)}
         disabled={currentPage === totalPage}
+        className='next'
       >
-        &gt;
+        <PrevIcon />
       </button>
     </PageContainer>
   );
@@ -54,9 +56,16 @@ const PageContainer = styled.div`
     height: 29px;
     border-radius: 50%;
     border: none;
+    display: flex;
+    justify-content: center;
+    align-items: center;
     background: var(--orange-500);
     font-family: Pretendard;
     color: var(--white);
+
+    &.next{
+      transform: rotate(180deg);
+    }
   }
 
   span{

apps/client/src/components/cake/SharedCake.tsx

@@ -85,8 +85,7 @@ const SharedCake: React.FC<MyCakeProps> = ({ ownerId, data }) => {
         </Button>
       </Buttons>
       <Modal open={open}>
-        <span>편지를 작성하면 포인트를 얻을 수 있어요.</span>
-        <span>로그인 하시겠어요?</span>
+        <span>편지를 작성하면 포인트를 얻을 수 있어요.{'\n'}로그인 하시겠어요?</span>
         <Button
           type="default"
           onClick={() => {

apps/client/src/components/cake/Sidebar.tsx

@@ -7,17 +7,21 @@ import { useNavigate } from 'react-router-dom';
 import useToggleStore from '../../store/useToggleStore';
 import { fetchUserInfo } from '#pages/CreateLetter.tsx';
 import axiosInstance from '#apis/axios.ts';
+import ShareUrlModal from '#components/modal/ShareUrlModal.tsx';
 
 const Sidebar: React.FC<{ isMyCake: boolean }> = ({ isMyCake }) => {
   const navigate = useNavigate();
   const setToggle = useToggleStore((state) => state.setToggle);
   const [user, setUser] = useState('');
+  const [nickname, setNickname] = useState('');
   const [selectedMenu, setSelectedMenu] = useState('cake');
+  const [open, setOpen] = useState(false);
 
   useEffect(() => {
     fetchUserInfo().then((data) => {
       if (data) {
         setUser(data.userId);
+        setNickname(data.nickname);
       }
     });
   }, []);
@@ -52,6 +56,10 @@ const Sidebar: React.FC<{ isMyCake: boolean }> = ({ isMyCake }) => {
     }
   }
 
+  function handleOpen() {
+    setOpen(!open);
+  }
+
   return (
     <S.Container>
       <div className='logo'>
@@ -81,10 +89,15 @@ const Sidebar: React.FC<{ isMyCake: boolean }> = ({ isMyCake }) => {
               <PenIcon width={37} height={37} viewBox="-6 -6 30 30" />
               케이크 수정
             </li>
-            <li>
+            <li onClick={handleOpen}>
               <ShareIcon />
               링크 공유
             </li>
+            <ShareUrlModal
+              nickname={nickname}
+              open={open}
+              handleOpen={handleOpen}
+            />
           </section>
           <Button
             type="default"

apps/client/src/components/common/Toggle.tsx

@@ -19,13 +19,13 @@ const Toggle: React.FC<ToggleBtnProps> = ({ ownerId, toggle, onClick }) => {
   return (
     <Container>
       <ToggleBtn $istoggle={toggle}>
-        <CakeIconWrapper $istoggle={!toggle}>
+        <CakeIconWrapper $istoggle={!toggle} onClick={onClick} >
           <CakeIcon width={32} height={32} fill={'#AEAEAE'} stroke={'#AEAEAE'} />
         </CakeIconWrapper>
-        <GridIconWrapper $istoggle={toggle}>
+        <GridIconWrapper $istoggle={toggle} onClick={onClick} >
           <GridIcon width={20} height={20} fill={'#AEAEAE'} />
         </GridIconWrapper>
-        <Circle $istoggle={toggle} onClick={onClick}>
+        <Circle $istoggle={toggle} >
           <CircleIconWrapper>
             {toggle ? (
               <GridIcon width={20} height={20} fill="#FFF" viewBox='0 0 20 20' />

apps/client/src/components/modal/Modal.tsx

@@ -2,6 +2,24 @@ import React from 'react';
 import styled from 'styled-components';
 import { ModalPortal } from '../../ModalPortal';
 
+const Modal = ({
+  open,
+  children,
+}: {
+  open: boolean;
+  children: React.ReactNode;
+}) => {
+  return (
+    <ModalPortal>
+      <Overlay open={open}>
+        <ModalContainer>{children}</ModalContainer>
+      </Overlay>
+    </ModalPortal>
+  );
+};
+
+export default Modal;
+
 const Overlay = styled.div<{ open: boolean }>`
   display: ${(props) => (props.open ? 'flex' : 'none')};
   flex-direction: column;
@@ -29,6 +47,7 @@ const ModalContainer = styled.div`
   flex-direction: column;
   justify-content: start;
   align-items: center;
+  gap: 12px;
 
   span {
     color: var(--black, #000);
@@ -41,21 +60,3 @@ const ModalContainer = styled.div`
     padding: 29px 18px;
   }
 `;
-
-const Modal = ({
-  open,
-  children,
-}: {
-  open: boolean;
-  children: React.ReactNode;
-}) => {
-  return (
-    <ModalPortal>
-      <Overlay open={open}>
-        <ModalContainer>{children}</ModalContainer>
-      </Overlay>
-    </ModalPortal>
-  );
-};
-
-export default Modal;

apps/client/src/components/modal/ShareUrlModal.tsx

@@ -51,21 +51,23 @@ const ShareUrlModal = ({
 
   return (
     <Modal open={open}>
-      <h3>내 케이크 공유하기</h3>
-      <div>
-        <IconButton onClick={() => kakaoShare(nickname)}>
-          <KakaoLogoIcon width={'3rem'} height={'3rem'} />
-        </IconButton>
-        <IconButton onClick={() => facebookShare(nickname)}>
-          <FacebookLogoIcon width={'3rem'} height={'3rem'} />
-        </IconButton>
-        <IconButton onClick={pasteUrl}>
-          <LinkIcon width={'3rem'} height={'3rem'} />
-        </IconButton>
-      </div>
-      <Button type="default" onClick={handleOpen} >
-        닫기
-      </Button>
+      <ShareBox>
+        <h3>내 케이크 공유하기</h3>
+        <div>
+          <IconButton onClick={() => kakaoShare(nickname)}>
+            <KakaoLogoIcon width={'3rem'} height={'3rem'} />
+          </IconButton>
+          <IconButton onClick={() => facebookShare(nickname)}>
+            <FacebookLogoIcon width={'3rem'} height={'3rem'} />
+          </IconButton>
+          <IconButton onClick={pasteUrl}>
+            <LinkIcon width={'3rem'} height={'3rem'} />
+          </IconButton>
+        </div>
+        <Button type="default" onClick={handleOpen} >
+          닫기
+        </Button>
+      </ShareBox>
     </Modal>
   );
 };
@@ -78,3 +80,11 @@ const IconButton = styled.button`
   cursor: pointer;
   margin: 0 0.5rem;
 `;
+
+const ShareBox = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 24px;
+`