chore : 수정사항 반영 (#385)

* feat : 카카오 로그인 세팅 * asset : 배너샘플 추가 * fix : 보관함 잘못 작성된 인자 수정 * feat : 배너 사진 추가
prgrms-web-devcourse-final-project · Dec 9, 2024 · 28642d1 · 28642d1
1 parent b09e014
commit 28642d1
Show file tree

Hide file tree

Showing 14 changed files with 49 additions and 48 deletions.
diff --git a/public/kakao_login_medium_wide.png b/public/kakao_login_medium_wide.png
diff --git a/public/배너샘플1.png b/public/배너샘플1.png
diff --git a/public/배너샘플2.png b/public/배너샘플2.png
diff --git a/public/배너샘플3.png b/public/배너샘플3.png
diff --git a/src/components/Common/Banner/ArchivedlBanner.tsx b/src/components/Common/Banner/ArchivedlBanner.tsx
@@ -1,14 +1,7 @@
 export const ArchivedlBanner = () => {
     return (
-        <button className="flex items-center text-left w-full">
-            <div className="flex flex-col">
-                <p>편지 보관함</p>
-                <p>
-                    보관하신 편지를
-                    <br />
-                    확인해보세요
-                </p>
-            </div>
+        <button className="w-full">
+            <img src="/배너샘플3.png" className="object-contain" />
         </button>
     );
 };
diff --git a/src/components/Common/Banner/Banner.tsx b/src/components/Common/Banner/Banner.tsx
@@ -7,7 +7,9 @@ type BannerProps = {
 
 export const Banner = ({ color, children }: BannerProps) => {
     return (
-        <div className={`flex h-20 rounded-lg shadow transition-all ${color}`}>
+        <div
+            className={`flex h-[150px] rounded-lg overflow-hidden shadow transition-all ${color}`}
+        >
             {children}
         </div>
     );

diff --git a/src/components/Common/Banner/LabelCollectionsBanner.tsx b/src/components/Common/Banner/LabelCollectionsBanner.tsx
@@ -1,27 +1,7 @@
 export const LabelCollectionsBanner = () => {
     return (
-        <button className="flex items-center text-left w-full">
-            <div className="flex flex-col">
-                <p>라벨 모음</p>
-                <p>
-                    가지고 있는 라벨들을
-                    <br />
-                    확인해보세요
-                </p>
-            </div>
-            <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="100"
-                height="60"
-                fill="none"
-                viewBox="0 0 408 249"
-                className="ml-16"
-            >
-                <path
-                    fill="#C3C3C3"
-                    d="M368.5 0.222656L407.21 127.258L39.6975 248.286L94.3479 164.488L0.987028 121.251L368.5 0.222656Z"
-                />
-            </svg>
+        <button className="w-full">
+            <img src="/배너샘플2.png" className="object-contain" />
         </button>
     );
 };
diff --git a/src/components/Common/BannerContainer/BannerContainer.tsx b/src/components/Common/BannerContainer/BannerContainer.tsx
@@ -24,7 +24,7 @@ export const BannerContainer = () => {
             <Swiper
                 pagination={true}
                 modules={[Pagination, Autoplay]}
-                className="w-full px-4 py-12  mx-auto max-w-default"
+                className="w-full px-4 py-12 mx-auto max-w-default"
                 spaceBetween={40}
                 slidesPerView={1}
                 autoplay={{
@@ -40,7 +40,7 @@ export const BannerContainer = () => {
                 {banners.map(({ banner, color }, i) => (
                     <SwiperSlide
                         key={i}
-                        className="transition-transform md:hover:scale-105 px-[20px]"
+                        className="transition-transform md:hover:scale-105 px-[20px] "
                     >
                         <Banner color={color}>
                             {React.createElement(banner)}

diff --git a/src/pages/Home/HomePage.tsx b/src/pages/Home/HomePage.tsx
@@ -94,7 +94,7 @@ export const HomePage = () => {
                         onClick={() => {
                             setOpen(true);
                         }}
-                        className="w-full h-[49px] text-sample-blue flex-center rounded-full border border-sample-blue"
+                        className="w-full h-[49px] text-sample-blue flex-center rounded-full border"
                     >
                         키워드 설정
                     </button>

diff --git a/src/pages/Storage/StoragePage.tsx b/src/pages/Storage/StoragePage.tsx
@@ -50,7 +50,7 @@ export const StoragePage = ({ initialType }: StoragePageProps) => {
                 </div>
             </div>
             <div className="flex flex-col gap-2 mt-[15px]">
-                <StorageList type={initialType} />
+                <StorageList type={storageType} />
             </div>
         </div>
     );

diff --git a/src/pages/User/Login/KakaoRedirectPage.tsx b/src/pages/User/Login/KakaoRedirectPage.tsx
@@ -0,0 +1,3 @@
+export const KakaoRedirectPage = () => {
+    return <div className="">KakaoRedirectPage</div>;
+};
diff --git a/src/pages/User/Login/LoginPage.tsx b/src/pages/User/Login/LoginPage.tsx
@@ -5,6 +5,10 @@ import { PasswordInput } from '@/components/Common/Input/PasswordInput';
 import { useToastStore } from '@/hooks/useToastStore';
 import { useLogin } from './../../../hooks/useLogin';
 
+const KAKAO_CLIENT_ID = import.meta.env.VITE_JAVASCRIPT_KEY as string;
+const REDIRECT_URI = 'http://localhost:5173/login/kakao';
+const kakaoURL = `https://kauth.kakao.com/oauth/authorize?client_id=${KAKAO_CLIENT_ID}&redirect_uri=${REDIRECT_URI}&response_type=code`;
+
 export const LoginPage = () => {
     const navigate = useNavigate();
     const { addToast } = useToastStore();
@@ -27,6 +31,10 @@ export const LoginPage = () => {
         mutate({ email, password });
     };
 
+    const handleKakaoLogin = () => {
+        window.location.href = kakaoURL;
+    };
+
     const handleNavigateRegister = () => {
         navigate('/register');
     };
@@ -44,16 +52,24 @@ export const LoginPage = () => {
                         <EmailInput></EmailInput>
                         <PasswordInput></PasswordInput>
                     </div>
-                    <div className="flex flex-row w-full gap-1">
-                        <button className="btn-primary-filled" type="submit">
-                            로그인
-                        </button>
-                        <button
-                            className="btn-primary"
-                            type="button"
-                            onClick={handleNavigateRegister}
-                        >
-                            회원가입
+                    <div className="flex flex-col gap-1 w-full">
+                        <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>
+                        <button onClick={handleKakaoLogin}>
+                            카카오 로그인
                         </button>
                     </div>
                 </div>

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -19,6 +19,7 @@ import { ProfilePage } from '@/pages/User/Profile/ProfilePage';
 import { StoragePage } from '@/pages/Storage/StoragePage';
 import { MapLetterDetailPage } from './Letter/Detail/MapLetterDetailPage/MapLetterDetailPage';
 import { MapLetterArchieveDetailContainerPage } from './Letter/Detail/MapLetterArchieveDetailContainerPage/MapLetterArchieveDetailContainerPage';
+import { KakaoRedirectPage } from '@/pages/User/Login/KakaoRedirectPage';
 
 export {
     ErrorPage,
@@ -41,5 +42,6 @@ export {
     SuccessLetterPage,
     ProfilePage,
     StoragePage,
-    MapLetterArchieveDetailContainerPage
+    MapLetterArchieveDetailContainerPage,
+    KakaoRedirectPage
 };
diff --git a/src/router.tsx b/src/router.tsx
@@ -21,7 +21,8 @@ import {
     StoragePage,
     KeywordLetterDetailPage,
     MapLetterDetailPage,
-    MapLetterArchieveDetailContainerPage
+    MapLetterArchieveDetailContainerPage,
+    KakaoRedirectPage
 } from './pages';
 import { tokenStorage } from './service/auth/tokenStorage';
 import { AuthProvider } from './AuthProvider';
@@ -191,6 +192,10 @@ export const router = createBrowserRouter([
                 path: '/login',
                 element: <LoginPage />
             },
+            {
+                path: '/login/kakao',
+                element: <KakaoRedirectPage />
+            },
             {
                 path: '/register',
                 element: <RegisterPage />
-Original file line number
+Diff line change
@@ Expand Up @@
                     </div>
                 </div>
                 <div className="flex flex-col gap-2 mt-[15px]">
-                    <StorageList type={initialType} />
+                    <StorageList type={storageType} />
                 </div>
             </div>
         );
@@ Expand Down @@