From 24ecdfee70f4dc43c17f3d98fa96db578156b373 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9E=84=EC=B1=84=EB=AF=BC?=
 <87525734+cmlim0070@users.noreply.github.com>
Date: Sat, 7 Dec 2024 13:58:32 +0900
Subject: [PATCH] =?UTF-8?q?feat=20:=20=EB=9D=BC=EB=B2=A8=EC=B2=A9=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=A0=88=EC=9D=B4=EC=95=84?=
 =?UTF-8?q?=EC=9B=83=20+=20=EC=A0=84=EC=B2=B4=20=EB=A0=88=EC=9D=B4?=
 =?UTF-8?q?=EC=95=84=EC=9B=83=20=EC=88=98=EC=A0=95=20(#290)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat : 라벨 콜렉션 페이지 추가

* feat : 라벨 관련 타입 선언

* fix : 잘못 전달되던 인자 수정

* fix : [임시] http로 롤백

* style : 전체 스타일 레이아웃 수정

* style : AuthLayer 스타일 추가

* chore : https로 변경

* style : 너비, 높이값 삭제

* style : 공통 컴포넌트들 스타일 수정
---
 .../Common/BottleLetter/Label/Label.tsx       |  4 +-
 src/components/Common/Container/Container.tsx | 16 +++-
 src/components/Common/Input/NicknameInput.tsx |  4 +-
 src/components/Common/Itembox/Itembox.tsx     |  6 +-
 .../Common/NavigationBar/NavigationBar.tsx    |  2 +-
 .../TopButtonContainer/TopButtonContainer.tsx |  2 +-
 .../WelcomeMessageContainer.tsx               |  2 +-
 src/components/Profile/NicknameSection.tsx    | 27 ++++--
 .../Profile/ProfileImageSection.tsx           |  1 +
 src/hooks/useUserInfo.ts                      |  5 +-
 src/index.css                                 | 27 +++++-
 src/main.tsx                                  |  6 +-
 src/pages/Home/HomePage.tsx                   | 61 +++++++------
 src/pages/LabelCollectionsPage.tsx            |  3 -
 src/pages/Notification/NotificationPage.tsx   | 10 +-
 src/pages/Storage/LabelCollectionsPage.tsx    | 63 +++++++++++++
 src/pages/User/Login/LoginPage.tsx            | 60 ++++++------
 src/pages/User/MyPage/MyPage.tsx              | 25 +++--
 src/pages/User/Profile/ProfilePage.tsx        | 41 ++++-----
 src/pages/User/Register/RegisterPage.tsx      | 91 +++++++++----------
 src/pages/index.tsx                           |  2 +-
 src/router.tsx                                | 73 ++++++++++-----
 src/service/api.ts                            |  2 +
 src/service/label/get/getUserLabel.ts         | 13 +++
 src/service/user/changeNickname.ts            |  5 +-
 src/types/label.ts                            |  5 +
 26 files changed, 343 insertions(+), 213 deletions(-)
 delete mode 100644 src/pages/LabelCollectionsPage.tsx
 create mode 100644 src/pages/Storage/LabelCollectionsPage.tsx
 create mode 100644 src/service/label/get/getUserLabel.ts

diff --git a/src/components/Common/BottleLetter/Label/Label.tsx b/src/components/Common/BottleLetter/Label/Label.tsx
index 099ba2af..cd717569 100644
--- a/src/components/Common/BottleLetter/Label/Label.tsx
+++ b/src/components/Common/BottleLetter/Label/Label.tsx
@@ -4,13 +4,13 @@ import { LabelProps } from '@/types/label';
 export const Label = ({ imgSrc, isActive }: LabelProps) => {
     return (
         <div
-            className={`w-[80px] h-[100px] flex justify-center items-center border-[1px] rounded-2xl ${
+            className={`w-full h-full flex justify-center items-center border-[1px] rounded-2xl  ${
                 isActive ? 'border-sample-blue' : 'border-transparent'
             }`}
         >
             <img
                 src={`${imgSrc}`}
-                className="object-contain w-full h-full p-1"
+                className="object-contain max-h-full max-w-full p-1"
             />
         </div>
     );
diff --git a/src/components/Common/Container/Container.tsx b/src/components/Common/Container/Container.tsx
index bf7aed10..fcfdde3d 100644
--- a/src/components/Common/Container/Container.tsx
+++ b/src/components/Common/Container/Container.tsx
@@ -1,9 +1,21 @@
 import React from 'react';
 
 interface ContainerProps {
+    px?: number;
+    pb?: number;
     children?: React.ReactNode;
 }
 
-export const Container: React.FC<ContainerProps> = ({ children }) => {
-    return <div className="px-6 pb-[100px] w-full h-full">{children}</div>;
+export const Container: React.FC<ContainerProps> = ({
+    px = 0,
+    pb = 6,
+    children
+}) => {
+    return (
+        <div
+            className={`border-box px-${px} py-6 w-full h-full overflow-auto scrollbar-hide`}
+        >
+            {children}
+        </div>
+    );
 };
diff --git a/src/components/Common/Input/NicknameInput.tsx b/src/components/Common/Input/NicknameInput.tsx
index 0b5a27b3..a1ddffe1 100644
--- a/src/components/Common/Input/NicknameInput.tsx
+++ b/src/components/Common/Input/NicknameInput.tsx
@@ -5,6 +5,7 @@ import { Input } from './Input';
 type NicknameInputProps = {
     defaultValue?: string;
     disabled?: boolean;
+    showText?: boolean;
     onValueChange?: (value: string) => void;
     onKeyDown?: (e: React.KeyboardEvent) => void;
 };
@@ -12,6 +13,7 @@ type NicknameInputProps = {
 export const NicknameInput = ({
     defaultValue,
     disabled,
+    showText = true,
     onValueChange,
     onKeyDown
 }: NicknameInputProps) => {
@@ -20,7 +22,7 @@ export const NicknameInput = ({
             type="text"
             autoComplete="nickname"
             name="nickname"
-            text="닉네임"
+            text={showText ? '닉네임' : null}
             errorMessage={AUTH_INPUT_VALIDATION.nickname.errorMessage}
             pattern={AUTH_INPUT_VALIDATION.nickname.regexp}
             maxLength={15}
diff --git a/src/components/Common/Itembox/Itembox.tsx b/src/components/Common/Itembox/Itembox.tsx
index c3b8b142..bd0afa65 100644
--- a/src/components/Common/Itembox/Itembox.tsx
+++ b/src/components/Common/Itembox/Itembox.tsx
@@ -14,13 +14,13 @@ export const Itembox = ({
     padding = '0',
     children
 }: ItemboxProps) => {
-    const itemboxScaleStyle = `w-[${width}] h-[${height}] p-${padding}`;
+    const itemboxScaleStyle = `w-[${width}] p-${padding}`;
 
     return (
         <div
-            className={`${itemboxScaleStyle} bg-white p-1 rounded-md flex items-center justify-center`}
+            className={`aspect-square bg-white p-1 rounded-md flex items-center justify-center border border-sample-gray aspect-square`}
         >
-            <div className="w-full h-full">{children}</div>
+            {children}
         </div>
     );
 };
diff --git a/src/components/Common/NavigationBar/NavigationBar.tsx b/src/components/Common/NavigationBar/NavigationBar.tsx
index 41ac23a9..2714545a 100644
--- a/src/components/Common/NavigationBar/NavigationBar.tsx
+++ b/src/components/Common/NavigationBar/NavigationBar.tsx
@@ -18,7 +18,7 @@ export const NavigationBar = () => {
     ];
 
     return (
-        <nav className="flex justify-around bg-white border-y p-3 fixed bottom-0 w-full z-[999] max-w-[473px]">
+        <nav className="flex justify-around bg-white border-y p-3 max-w-[473px]">
             {navItems.map((item) => (
                 <div className="flex justify-center flex-1" key={item.id}>
                     <NavigationItem
diff --git a/src/components/HomePage/TopButtonContainer/TopButtonContainer.tsx b/src/components/HomePage/TopButtonContainer/TopButtonContainer.tsx
index fcea7897..a5e1fe4c 100644
--- a/src/components/HomePage/TopButtonContainer/TopButtonContainer.tsx
+++ b/src/components/HomePage/TopButtonContainer/TopButtonContainer.tsx
@@ -4,7 +4,7 @@ import { IoIosNotifications } from 'react-icons/io';
 
 export const TopButtonContainer = () => {
     return (
-        <div className="flex justify-between">
+        <div className="flex justify-between px-6 py-4">
             <NavLink to={'/'}>
                 <Logo h={34} />
             </NavLink>
diff --git a/src/components/HomePage/WelcomeMessageContainer/WelcomeMessageContainer.tsx b/src/components/HomePage/WelcomeMessageContainer/WelcomeMessageContainer.tsx
index 530ae4b4..baa3c5bf 100644
--- a/src/components/HomePage/WelcomeMessageContainer/WelcomeMessageContainer.tsx
+++ b/src/components/HomePage/WelcomeMessageContainer/WelcomeMessageContainer.tsx
@@ -34,7 +34,7 @@ export const WelcomeMessageContainer = ({
         : '떠다니는 편지를 열심히 찾는 중 이에요.';
 
     return (
-        <div className="absolute z-[3]">
+        <div className="z-[3]">
             {message}
             <p className="font-medium text-title1">{messageBody}</p>
             <p className="font-medium text-sample-textgray">{subMessage}</p>
diff --git a/src/components/Profile/NicknameSection.tsx b/src/components/Profile/NicknameSection.tsx
index 1e835591..5f176f7e 100644
--- a/src/components/Profile/NicknameSection.tsx
+++ b/src/components/Profile/NicknameSection.tsx
@@ -1,6 +1,5 @@
 import React, { useState } from 'react';
 import { useToastStore } from '@/hooks/useToastStore';
-import { checkNickname } from '@/service/auth';
 import { changeNickname } from '@/service/user';
 import { NicknameInput } from '@/components/Common/Input/NicknameInput';
 import { useUserStore } from '@/stores';
@@ -12,15 +11,22 @@ export const NicknameSection = () => {
     const { handleGetUserInfo } = useUserInfo();
     const [isNicknameEditing, setIsNicknameEditing] = useState<boolean>(false);
 
-    const handleEditNickname = () => {
-        if (!isNicknameEditing) setIsNicknameEditing(true);
+    const handleEditNicknameMode = () => {
+        if (!isNicknameEditing) {
+            setIsNicknameEditing(true);
+            return;
+        }
+        setIsNicknameEditing(false);
     };
 
     const handleNicknameChange = async (nickname: string) => {
         try {
-            const response = await changeNickname(nickname);
+            console.log(nickname);
+            const response = await changeNickname({ nickname });
+            console.log(response);
             if (response.isSuccess) {
-                addToast(response.message, 'success');
+                addToast('닉네임을 변경했어요.', 'success');
+                handleEditNicknameMode();
                 handleGetUserInfo();
             }
         } catch (error) {
@@ -34,6 +40,10 @@ export const NicknameSection = () => {
         const $nicknameForm = e.target as HTMLFormElement;
         const nicknameFormData = new FormData($nicknameForm);
         const [nickname] = [nicknameFormData.get('nickname') as string];
+        if (user.nickname === nickname) {
+            addToast('동일한 닉네임이에요.', 'warning');
+            return;
+        }
         handleNicknameChange(nickname);
     };
 
@@ -44,14 +54,17 @@ export const NicknameSection = () => {
                     onSubmit={handleNicknameSubmit}
                     className="flex flex-row items-center justify-center gap-3"
                 >
-                    <NicknameInput defaultValue={user?.nickname} />
+                    <NicknameInput
+                        defaultValue={user?.nickname}
+                        showText={false}
+                    />
                 </form>
             );
         return (
             <div className="flex flex-row items-center justify-center gap-2 font-semibold">
                 {user?.nickname}
                 <img
-                    onClick={handleEditNickname}
+                    onClick={() => handleEditNicknameMode()}
                     className="w-[15px] h-[15px] p-[2px] bg-sample-gray rounded-sm"
                     src="/ic_pen.svg"
                 />
diff --git a/src/components/Profile/ProfileImageSection.tsx b/src/components/Profile/ProfileImageSection.tsx
index 2580de06..322c680a 100644
--- a/src/components/Profile/ProfileImageSection.tsx
+++ b/src/components/Profile/ProfileImageSection.tsx
@@ -56,6 +56,7 @@ export const ProfileImageSection = ({
             const response = await changeProfileImage(imageItem.url);
             if (response) {
                 addToast('프로필 이미지가 변경되었습니다.', 'success');
+                console.log('이미지:', user.profileImageUrl);
                 handleGetUserInfo();
                 handleDismiss();
             }
diff --git a/src/hooks/useUserInfo.ts b/src/hooks/useUserInfo.ts
index 4329c828..af0591ac 100644
--- a/src/hooks/useUserInfo.ts
+++ b/src/hooks/useUserInfo.ts
@@ -8,7 +8,6 @@ export const useUserInfo = () => {
     const { addToast } = useToastStore();
 
     const handleGetUserInfo = async () => {
-        console.log('유저 정보 불러오기:');
         const userInfoResponse = await getUserInfo();
 
         if (!userInfoResponse) {
@@ -16,12 +15,12 @@ export const useUserInfo = () => {
             logout();
             return false;
         }
-        const userInfoWithEmail = {
+        const userInfo = {
             nickname: userInfoResponse.nickname || '알 수 없음',
             profileImageUrl: userInfoResponse.profileImageUrl || 'testimg.jpg',
             email: userInfoResponse.email || '알 수 없음'
         };
-        setUser(userInfoWithEmail);
+        setUser(userInfo);
         return true;
     };
 
diff --git a/src/index.css b/src/index.css
index 9b164532..360a9538 100644
--- a/src/index.css
+++ b/src/index.css
@@ -10,14 +10,35 @@
 }
 
 @layer base {
-    html,
+    html {
+        @apply w-full h-full;
+    }
     body {
-        @apply h-full;
+        @apply w-full h-full m-0 p-0 flex justify-center;
     }
     #root {
-        @apply mx-auto min-w-[375px] max-w-[477px]  bg-white border h-auto min-h-screen text-sample-black;
+        @apply min-w-[375px] 
+          max-w-[477px]          
+          w-full             
+          bg-white               
+          border                
+          min-h-screen            
+          text-sample-black
+          flex                  
+          flex-col;
+    }
+}
+
+@layer utilities {
+    .scrollbar-hide {
+        -ms-overflow-style: none; /* IE and Edge */
+        scrollbar-width: none; /* Firefox */
+    }
+    .scrollbar-hide::-webkit-scrollbar {
+        display: none; /* Chrome, Safari, Opera */
     }
 }
+
 @layer components {
     .btn-primary {
         @apply w-full p-2 transition-colors border rounded-md border-sample-blue text-sample-blue hover:bg-sample-blue hover:text-white;
diff --git a/src/main.tsx b/src/main.tsx
index 08107058..4aeae6c3 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -2,8 +2,4 @@ import { createRoot } from 'react-dom/client';
 import './index.css';
 import { App } from '@/App';
 
-createRoot(document.getElementById('root')!).render(
-    <div>
-        <App />
-    </div>
-);
+createRoot(document.getElementById('root')!).render(<App />);
diff --git a/src/pages/Home/HomePage.tsx b/src/pages/Home/HomePage.tsx
index 767b672d..9b58dabc 100644
--- a/src/pages/Home/HomePage.tsx
+++ b/src/pages/Home/HomePage.tsx
@@ -3,9 +3,9 @@ import { SliderMenuContainer } from '@/components/Common/SliderMenuContainer/Sli
 import { Toggle } from '@/components/Common/Toggle/Toggle';
 import { BottomSheetContent } from '@/components/HomePage/BottomSheet/BottomSheetContent';
 import { LetterContainer } from '@/components/HomePage/LetterContainer/LetterContainer';
-import { TopButtonContainer } from '@/components/HomePage/TopButtonContainer/TopButtonContainer';
 import { WelcomeMessageContainer } from '@/components/HomePage/WelcomeMessageContainer/WelcomeMessageContainer';
 import { useUserStore } from '@/stores/useUserStore';
+
 import { Container } from '@/components/Common/Container/Container';
 import { useEffect, useState } from 'react';
 import { useGetRecommendLetter } from '@/hooks/useGetRecommendLetter';
@@ -23,6 +23,7 @@ export type RecommendLetter = {
     label: string;
 };
 
+
 export const HomePage = () => {
     const { user } = useUserStore();
 
@@ -71,7 +72,6 @@ export const HomePage = () => {
     }
 
     return (
-        <Container>
             <div className="flex flex-col gap-5">
                 <TopButtonContainer />
                 <Toggle
@@ -90,35 +90,38 @@ export const HomePage = () => {
                     />
                     <LetterContainer letters={letters} />
                 </div>
+            <div>
+                <WelcomeMessageContainer nickname={user?.nickname} newLetter />
+                <LetterContainer />
+            </div>
 
-                <div className="flex justify-center px-20">
-                    <button
-                        onClick={() => {
-                            setOpen(true);
-                        }}
-                        className="w-full h-[49px] text-sample-blue flex-center rounded-full border border-sample-blue"
-                    >
-                        키워드 설정
-                    </button>
-                </div>
-
-                <div className="mx-[-20px]">
-                    <BannerContainer />
-                </div>
-
-                <SliderMenuContainer
-                    open={open}
-                    onDismiss={onDismiss}
-                    snapPoints={() => [window.innerHeight * 0.95]}
+            <div className="flex justify-center px-20">
+                <button
+                    onClick={() => {
+                        setOpen(true);
+                    }}
+                    className="w-full h-[49px] text-sample-blue flex-center rounded-full border border-sample-blue"
                 >
-                    <BottomSheetContent
-                        onClick={() => {
-                            setOpen(false);
-                        }}
-                        nickname={user?.nickname}
-                    />
-                </SliderMenuContainer>
+                    키워드 설정
+                </button>
+            </div>
+
+            <div className="mx-[-20px]">
+                <BannerContainer />
             </div>
-        </Container>
+
+            <SliderMenuContainer
+                open={open}
+                onDismiss={onDismiss}
+                snapPoints={() => [window.innerHeight * 0.95]}
+            >
+                <BottomSheetContent
+                    onClick={() => {
+                        setOpen(false);
+                    }}
+                    nickname={user?.nickname}
+                />
+            </SliderMenuContainer>
+        </div>
     );
 };
diff --git a/src/pages/LabelCollectionsPage.tsx b/src/pages/LabelCollectionsPage.tsx
deleted file mode 100644
index e10c7898..00000000
--- a/src/pages/LabelCollectionsPage.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export const LabelCollectionsPage = () => {
-    return <div className="">LabelCollectionsPage</div>;
-};
diff --git a/src/pages/Notification/NotificationPage.tsx b/src/pages/Notification/NotificationPage.tsx
index f73f32be..0beb83ed 100644
--- a/src/pages/Notification/NotificationPage.tsx
+++ b/src/pages/Notification/NotificationPage.tsx
@@ -1,4 +1,3 @@
-import { Container } from '@/components/Common/Container/Container';
 import { Margin } from '@/components/Common/Margin/Margin';
 import { TitleClosedTopBar } from '@/components/Common/TitleClosedTopBar/TitleClosedTopBar';
 import { NotificationContainer } from '@/components/NotificationPage/NotificationContainer';
@@ -77,26 +76,21 @@ export const NotificationPage = () => {
         }));
 
     return (
-        <Container>
+        <>
             <Margin top={20} />
-
             <TitleClosedTopBar title="알림" />
-
             <Margin top={20} />
-
             <div>
                 <h3 className="text-[14px] text-[#22B8EF]">새로운 소식</h3>
                 <Margin top={8} />
                 <NotificationContainer notifications={unReadNotifications} />
             </div>
-
             <Margin top={20} />
-
             <div>
                 <h3 className="text-[14px] text-[#22B8EF]">이전 알림</h3>
                 <Margin top={8} />
                 <NotificationContainer notifications={readNotifications} />
             </div>
-        </Container>
+        </>
     );
 };
diff --git a/src/pages/Storage/LabelCollectionsPage.tsx b/src/pages/Storage/LabelCollectionsPage.tsx
new file mode 100644
index 00000000..e146758e
--- /dev/null
+++ b/src/pages/Storage/LabelCollectionsPage.tsx
@@ -0,0 +1,63 @@
+import { getUserLabel } from './../../service/label/get/getUserLabel';
+import { useQuery } from '@tanstack/react-query';
+import { LabelType } from '@/types/Label';
+import { Itembox } from './../../components/Common/Itembox/Itembox';
+import { Label } from '@/components/Common/BottleLetter/Label/Label';
+
+const testLable: LabelType[] = [
+    { labelId: 1, imageUrl: '/라벨_샘플_01.png' },
+    { labelId: 2, imageUrl: '/라벨_샘플_02.png' },
+    { labelId: 3, imageUrl: '/라벨_샘플_01.png' },
+    { labelId: 4, imageUrl: '/라벨_샘플_02.png' },
+    { labelId: 5, imageUrl: '/라벨_샘플_01.png' }
+];
+
+export const LabelCollectionsPage = () => {
+    const { data, isLoading, isError } = useQuery({
+        queryKey: ['userLabel'],
+        queryFn: getUserLabel,
+        retry: 1
+    });
+
+    const renderList = () => {
+        // if (isLoading) return <div>로딩중...</div>;
+        // if (isError) return <div>에러</div>;
+        // if (data.isSuccess) {
+        //     return (
+        //         <div className="">
+        //             {testLable.result.map((item, index) => {
+        //                 return (
+        //                     <div key={item.labelId + { index }}>
+        //                         {item.imageUrl}
+        //                     </div>
+        //                 );
+        //             })}
+        //         </div>
+        //     );
+        // }
+        // 테스트 라벨 데이터 바인딩
+        return (
+            <div className="grid grid-cols-4 gap-4 w-full">
+                {testLable.map((item, index) => {
+                    return (
+                        <Itembox key={item.labelId + index}>
+                            <Label imgSrc={item.imageUrl} />
+                        </Itembox>
+                    );
+                })}
+            </div>
+        );
+    };
+
+    return (
+        <div className="h-full flex flex-col justify-between">
+            <div className="flex flex-col gap-5">
+                <h3 className="text-lg font-bold">라벨 모음</h3>
+                {renderList()}
+            </div>
+            <button className="btn-base bg-sample-blue text-white h-[50px] flex items-center justify-center">
+                라벨 더 뽑으러 가기
+            </button>
+        </div>
+    );
+};
diff --git a/src/pages/User/Login/LoginPage.tsx b/src/pages/User/Login/LoginPage.tsx
index 36a9244f..1272ae8c 100644
--- a/src/pages/User/Login/LoginPage.tsx
+++ b/src/pages/User/Login/LoginPage.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import { EmailInput } from '@/components/Common/Input/EmailInput';
 import { PasswordInput } from '@/components/Common/Input/PasswordInput';
-import { Container } from '@/components/Common/Container/Container';
 import { useToastStore } from '@/hooks/useToastStore';
 import { useLogin } from './../../../hooks/useLogin';
 
@@ -33,40 +32,35 @@ export const LoginPage = () => {
     };
 
     return (
-        <Container>
-            <div className="flex flex-col gap-3 h-full my-[50px]">
-                <form
-                    className=" flex flex-col gap-5"
-                    onSubmit={handleSubmit}
-                    noValidate
-                >
-                    <h2 className="font-bold text-2xl ">로그인</h2>
-                    <div className="flex flex-col gap-5">
-                        <div className="flex flex-col gap-2">
-                            <EmailInput></EmailInput>
-                            <PasswordInput></PasswordInput>
-                        </div>
-                        <div className="flex flex-row gap-1 w-full">
-                            <button
-                                className="btn-primary-filled"
-                                type="submit"
-                            >
-                                로그인
-                            </button>
-                            <button
-                                className="btn-primary"
-                                type="button"
-                                onClick={handleNavigateRegister}
-                            >
-                                회원가입
-                            </button>
-                        </div>
+        <div className="flex flex-col gap-3 h-full my-[50px]">
+            <form
+                className=" flex flex-col gap-5"
+                onSubmit={handleSubmit}
+                noValidate
+            >
+                <h2 className="font-bold text-2xl ">로그인</h2>
+                <div className="flex flex-col gap-5">
+                    <div className="flex flex-col gap-2">
+                        <EmailInput></EmailInput>
+                        <PasswordInput></PasswordInput>
+                    </div>
+                    <div className="flex flex-row gap-1 w-full">
+                        <button className="btn-primary-filled" type="submit">
+                            로그인
+                        </button>
+                        <button
+                            className="btn-primary"
+                            type="button"
+                            onClick={handleNavigateRegister}
+                        >
+                            회원가입
+                        </button>
                     </div>
-                </form>
-                <div className="flex flex- gap-3">
-                    <div className="text-caption">회원 정보 찾기</div>
                 </div>
+            </form>
+            <div className="flex flex- gap-3">
+                <div className="text-caption">회원 정보 찾기</div>
             </div>
-        </Container>
+        </div>
     );
 };
diff --git a/src/pages/User/MyPage/MyPage.tsx b/src/pages/User/MyPage/MyPage.tsx
index 7b0eb2a0..dd0c3984 100644
--- a/src/pages/User/MyPage/MyPage.tsx
+++ b/src/pages/User/MyPage/MyPage.tsx
@@ -2,7 +2,6 @@ import { useUserStore } from '@/stores/useUserStore';
 import { ProfileSection } from '@/components/MyPage/ProfileSection';
 import { MenuListSection } from '@/components/MyPage/MenuListSection';
 import { KeywordListSection } from '@/components/MyPage/KeywordListSection';
-import { Container } from '@/components/Common/Container/Container';
 
 export const MyPage = () => {
     const { user } = useUserStore();
@@ -21,21 +20,19 @@ export const MyPage = () => {
         { content: '보관함', url: '/storage/bookmark' }
     ];
 
-    const labelMenuItems = [{ content: '라벨첩', url: '/mypage/label' }];
+    const labelMenuItems = [{ content: '라벨첩', url: '/labels' }];
 
     return (
-        <Container>
-            <div className="flex flex-col gap-8">
-                <h1 className="font-semibold text-gray-600 text-[21px]">
-                    마이페이지
-                </h1>
-                <div className="flex flex-col gap-10">
-                    <ProfileSection user={user!} />
-                    <MenuListSection menuItems={menuItems} />
-                    <MenuListSection menuItems={labelMenuItems} />
-                    <KeywordListSection keywords={sampleKeywords} />
-                </div>
+        <div className="flex flex-col gap-8">
+            <h1 className="font-semibold text-gray-600 text-[21px]">
+                마이페이지
+            </h1>
+            <div className="flex flex-col gap-10">
+                <ProfileSection user={user!} />
+                <MenuListSection menuItems={menuItems} />
+                <MenuListSection menuItems={labelMenuItems} />
+                <KeywordListSection keywords={sampleKeywords} />
             </div>
-        </Container>
+        </div>
     );
 };
diff --git a/src/pages/User/Profile/ProfilePage.tsx b/src/pages/User/Profile/ProfilePage.tsx
index a8c5ae23..0ef72fbc 100644
--- a/src/pages/User/Profile/ProfilePage.tsx
+++ b/src/pages/User/Profile/ProfilePage.tsx
@@ -4,7 +4,6 @@ import { AccountInfoSection } from '@/components/Profile/AccountInfoSection';
 import { NicknameSection } from '@/components/Profile/NicknameSection';
 import { ProfileImageSection } from '@/components/Profile/ProfileImageSection';
 import { useState } from 'react';
-import { Container } from '@/components/Common/Container/Container';
 
 export const ProfilePage = () => {
     const navigate = useNavigate();
@@ -16,29 +15,27 @@ export const ProfilePage = () => {
     };
 
     return (
-        <Container>
-            <div className="flex flex-col gap-10">
-                <div className="flex flex-col items-center justify-center gap-5 ">
-                    <ProfileImageSection
-                        isEditing={isProfileImageEditing}
-                        onEditingChange={setisProfileImageEditing}
+        <div className="flex flex-col gap-10">
+            <div className="flex flex-col items-center justify-center gap-5 ">
+                <ProfileImageSection
+                    isEditing={isProfileImageEditing}
+                    onEditingChange={setisProfileImageEditing}
+                />
+                <NicknameSection />
+                <div className="flex flex-row gap-4">
+                    <IconMenuButton
+                        onClick={() => setisProfileImageEditing(true)}
+                        iconUrl="/ic_pen.svg"
+                        content="아바타 변경"
+                    />
+                    <IconMenuButton
+                        onClick={handleNavigateShare}
+                        iconUrl="/ic_share.svg"
+                        content="프로필 공유"
                     />
-                    <NicknameSection />
-                    <div className="flex flex-row gap-4">
-                        <IconMenuButton
-                            onClick={() => setisProfileImageEditing(true)}
-                            iconUrl="/ic_pen.svg"
-                            content="아바타 변경"
-                        />
-                        <IconMenuButton
-                            onClick={handleNavigateShare}
-                            iconUrl="/ic_share.svg"
-                            content="프로필 공유"
-                        />
-                    </div>
                 </div>
-                <AccountInfoSection />
             </div>
-        </Container>
+            <AccountInfoSection />
+        </div>
     );
 };
diff --git a/src/pages/User/Register/RegisterPage.tsx b/src/pages/User/Register/RegisterPage.tsx
index 6fc1214e..0139f751 100644
--- a/src/pages/User/Register/RegisterPage.tsx
+++ b/src/pages/User/Register/RegisterPage.tsx
@@ -3,7 +3,6 @@ import { useRegisterForm } from '@/hooks/useRegisterForm';
 import { EmailSection } from '@/components/RegisterPage/EmailSection';
 import { PasswordSection } from '@/components/RegisterPage/PasswordSection';
 import { NicknameSection } from '@/components/RegisterPage/NicknameSection';
-import { Container } from '@/components/Common/Container/Container';
 
 export const RegisterPage = () => {
     const {
@@ -23,54 +22,48 @@ export const RegisterPage = () => {
     };
 
     return (
-        <Container>
-            <div className="flex flex-col gap-3 h-full my-[50px]">
-                <h2 className="font-bold text-2xl ">회원가입</h2>
-                <div>
-                    <form
-                        className="flex flex-col gap-5"
-                        onSubmit={handleSubmit}
-                        onKeyDown={handleFormKeyDown}
-                        noValidate
-                    >
-                        <EmailSection
-                            email={formState.email}
-                            onEmailChange={(value) =>
-                                updateField('email', value)
-                            }
-                            onAuthNumChange={(value) =>
-                                updateField('authNum', value)
-                            }
-                            onRequestVerify={handleRequestEmailVerifyCode}
-                            onRequestAuthNumVerify={handleVerifyEmail}
-                            isEmailSend={validationState.isEmailSend}
-                            isEmailVerified={validationState.isEmailVerified}
-                        ></EmailSection>
-                        <PasswordSection
-                            onPasswordChange={(value) =>
-                                updateField('password', value)
-                            }
-                            onConfirmPasswordChange={(value) =>
-                                updateField('confirmPassword', value)
-                            }
-                        ></PasswordSection>
-                        <NicknameSection
-                            nickname={formState.nickname}
-                            onNicknameChange={(value) =>
-                                updateField('nickname', value)
-                            }
-                            onRequestNicknameVerify={handleCheckNickname}
-                            isNicknameChecked={
-                                validationState.isNicknameChecked
-                            }
-                            isNicknameValid={validationState.isNicknameValid}
-                        ></NicknameSection>
-                        <button type="submit" className="btn-primary-filled">
-                            가입하기
-                        </button>
-                    </form>
-                </div>
+        <div className="flex flex-col gap-3 h-full my-[50px]">
+            <h2 className="font-bold text-2xl ">회원가입</h2>
+            <div>
+                <form
+                    className="flex flex-col gap-5"
+                    onSubmit={handleSubmit}
+                    onKeyDown={handleFormKeyDown}
+                    noValidate
+                >
+                    <EmailSection
+                        email={formState.email}
+                        onEmailChange={(value) => updateField('email', value)}
+                        onAuthNumChange={(value) =>
+                            updateField('authNum', value)
+                        }
+                        onRequestVerify={handleRequestEmailVerifyCode}
+                        onRequestAuthNumVerify={handleVerifyEmail}
+                        isEmailSend={validationState.isEmailSend}
+                        isEmailVerified={validationState.isEmailVerified}
+                    ></EmailSection>
+                    <PasswordSection
+                        onPasswordChange={(value) =>
+                            updateField('password', value)
+                        }
+                        onConfirmPasswordChange={(value) =>
+                            updateField('confirmPassword', value)
+                        }
+                    ></PasswordSection>
+                    <NicknameSection
+                        nickname={formState.nickname}
+                        onNicknameChange={(value) =>
+                            updateField('nickname', value)
+                        }
+                        onRequestNicknameVerify={handleCheckNickname}
+                        isNicknameChecked={validationState.isNicknameChecked}
+                        isNicknameValid={validationState.isNicknameValid}
+                    ></NicknameSection>
+                    <button type="submit" className="btn-primary-filled">
+                        가입하기
+                    </button>
+                </form>
             </div>
-        </Container>
+        </div>
     );
 };
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 52688e16..7ec0276e 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -5,7 +5,7 @@ import { MapExplorerPage } from '@/pages/Map/MapExplorerPage';
 import { LoginPage } from '@/pages/User/Login/LoginPage';
 import { RegisterPage } from '@/pages/User/Register/RegisterPage';
 import { ArchivedPage } from '@/pages/ArchivedPage';
-import { LabelCollectionsPage } from '@/pages/LabelCollectionsPage';
+import { LabelCollectionsPage } from '@/pages/Storage/LabelCollectionsPage';
 import { LetterDetailPage } from '@/pages/Letter/Detail/LetterDetailPage';
 import { NotificationPage } from '@/pages/Notification/NotificationPage';
 import { ReplyLetterDetailPage } from '@/pages/Letter/Detail/ReplyLetterDetailPage';
diff --git a/src/router.tsx b/src/router.tsx
index 4276d74e..87dec013 100644
--- a/src/router.tsx
+++ b/src/router.tsx
@@ -24,6 +24,8 @@ import {
 import { Margin } from './components/Common/Margin/Margin';
 import { tokenStorage } from './service/auth/tokenStorage';
 import { AuthProvider } from './AuthProvider';
+import { Container } from '@/components/Common/Container/Container';
+import { TopButtonContainer } from './components/HomePage/TopButtonContainer/TopButtonContainer';
 
 type RouteProps = {
     children: ReactNode;
@@ -44,18 +46,30 @@ export const PublicRoute = ({ children }: RouteProps) => {
 };
 
 const CommonLayout = () => (
-    <>
-        <Margin top={50}>
+    <div className="flex flex-col h-full">
+        <TopButtonContainer />
+        <Container px={6} pb={6}>
             <Outlet />
-        </Margin>
+        </Container>
         <NavigationBar />
-    </>
+    </div>
 );
 
 const SimpleLayout = () => (
-    <>
-        <Outlet />
-    </>
+    <div className="flex flex-col h-full">
+        <Container>
+            <Outlet />
+        </Container>
+        <NavigationBar />
+    </div>
+);
+
+const AuthLayout = () => (
+    <div className="flex flex-col h-full">
+        <Container px={6} pb={6}>
+            <Outlet />
+        </Container>
+    </div>
 );
 
 export const router = createBrowserRouter([
@@ -72,10 +86,7 @@ export const router = createBrowserRouter([
                 path: '/',
                 element: <HomePage />
             },
-            {
-                path: '/mapexplorer',
-                element: <MapExplorerPage />
-            },
+
             {
                 path: '/mypage',
                 element: <MyPage />
@@ -118,6 +129,21 @@ export const router = createBrowserRouter([
             }
         ]
     },
+    {
+        path: '/',
+        element: (
+            <ProtectedRoute>
+                <SimpleLayout />
+            </ProtectedRoute>
+        ),
+        errorElement: <ErrorPage />,
+        children: [
+            {
+                path: '/mapexplorer',
+                element: <MapExplorerPage />
+            }
+        ]
+    },
     {
         path: '/letter',
         element: (
@@ -136,19 +162,22 @@ export const router = createBrowserRouter([
         ]
     },
     {
-        path: '/login',
-        element: (
-            <PublicRoute>
-                <LoginPage />
-            </PublicRoute>
-        )
-    },
-    {
-        path: '/register',
+        path: '/',
         element: (
             <PublicRoute>
-                <RegisterPage />
+                <AuthLayout />
             </PublicRoute>
-        )
+        ),
+        errorElement: <ErrorPage />,
+        children: [
+            {
+                path: '/login',
+                element: <LoginPage />
+            },
+            {
+                path: '/register',
+                element: <RegisterPage />
+            }
+        ]
     }
 ]);
diff --git a/src/service/api.ts b/src/service/api.ts
index 4379bdfa..76313fdf 100644
--- a/src/service/api.ts
+++ b/src/service/api.ts
@@ -81,6 +81,7 @@ export const defaultApi = (option?: AxiosRequestConfig): AxiosInstance => {
     );
 
     instance.interceptors.response.use(
+
         (response) => {
             if (response.data.isSuccess === false) {
                 throw formatApiError(response.data.code, response.data.message);
@@ -94,6 +95,7 @@ export const defaultApi = (option?: AxiosRequestConfig): AxiosInstance => {
                     'ERROR500',
                     '네트워크 요청에 실패했습니다.'
                 );
+
         }
     );
 
diff --git a/src/service/label/get/getUserLabel.ts b/src/service/label/get/getUserLabel.ts
new file mode 100644
index 00000000..7ef2010c
--- /dev/null
+++ b/src/service/label/get/getUserLabel.ts
@@ -0,0 +1,13 @@
+import { defaultApi } from '@/service/api';
+import { ApiResponseType } from '@/types/apiResponse';
+import { Label } from '@/types/Label';
+
+type GetUserLabelResponseType = ApiResponseType<Label[]>;
+
+export const getUserLabel = async (): Promise<GetUserLabelResponseType> => {
+    const api = defaultApi();
+
+    const response = await api.get('/labels/user');
+    console.log('라벨응답:', response);
+    return response.data;
+};
diff --git a/src/service/user/changeNickname.ts b/src/service/user/changeNickname.ts
index b1d15598..f58accb9 100644
--- a/src/service/user/changeNickname.ts
+++ b/src/service/user/changeNickname.ts
@@ -11,8 +11,7 @@ export async function changeNickname({
     nickname
 }: ChangeNicknameProps): Promise<ChangeNicknameResponse> {
     const api = defaultApi();
-    const response = await api.patch('/user/nickname', {
-        nickname
-    });
+    console.log('전송:', nickname);
+    const response = await api.patch('/user/nickname', { nickname });
     return response.data;
 }
diff --git a/src/types/label.ts b/src/types/label.ts
index 24f9ec00..009bf5b1 100644
--- a/src/types/label.ts
+++ b/src/types/label.ts
@@ -2,3 +2,8 @@ export type LabelProps = {
     imgSrc: string;
     isActive?: boolean;
 };
+
+export type LabelType = {
+    labelId: number;
+    imageUrl: string;
+};