Merge pull request #67 from Prography-9th-3team/fix/style-layout

Fix/사이드바 & 로그인 페이지 스타일 수정
Prography-9th-3team · Jul 20, 2024 · dfb9cda · dfb9cda
2 parents ca59cee + 8cb9eba
commit dfb9cda
Show file tree

Hide file tree

Showing 6 changed files with 134 additions and 57 deletions.
diff --git a/public/assets/image/login_image.png b/public/assets/image/login_image.png
diff --git a/src/app/login/components/GoogleButton.tsx b/src/app/login/components/GoogleButton.tsx
@@ -0,0 +1,41 @@
+import apis from '@/apis/api';
+import Icon from '@/components/common/Icon';
+
+const GoogleButton = () => {
+  const redirectUri = process.env.NEXT_PUBLIC_LOGIN_REDIRECT_URL;
+
+  const handleLogin = () => {
+    try {
+      const popupWidth = 600;
+      const popupHeight = 730;
+
+      const screenWidth = window.innerWidth;
+      const screenHeight = window.innerHeight;
+
+      const popupLeft = (screenWidth - popupWidth) / 2 + window.screenX;
+      const popupTop = (screenHeight - popupHeight) / 2 + window.screenY;
+
+      const loginRedirectUri = apis.auth.google_login(redirectUri as string);
+
+      window.open(
+        loginRedirectUri,
+        'Packit Login',
+        `width=${popupWidth},height=${popupHeight},left=${popupLeft},top=${popupTop},scrollbars=yes,resizable=yes`,
+      );
+    } catch (error) {
+      console.error('Error during Google login:', error);
+    }
+  };
+
+  return (
+    <button
+      onClick={handleLogin}
+      className='w-full h-48 px-16 py-12 text-secondary label-lg border border-border rounded-lg flex justify-center items-center gap-8'
+    >
+      <Icon name='google' />
+      <span>Google 계정으로 로그인</span>
+    </button>
+  );
+};
+
+export default GoogleButton;
diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
@@ -1,37 +1,12 @@
 'use client';
 
-import apis from '@/apis/api';
-import Icon from '@/components/common/Icon';
 import Logo from '@/components/common/Logo';
 import { useRouter } from 'next/navigation';
 import { useEffect } from 'react';
+import GoogleButton from './components/GoogleButton';
 
 const Login = () => {
   const router = useRouter();
-  const redirectUri = process.env.NEXT_PUBLIC_LOGIN_REDIRECT_URL;
-
-  const handleLogin = () => {
-    try {
-      const popupWidth = 600;
-      const popupHeight = 730;
-
-      const screenWidth = window.innerWidth;
-      const screenHeight = window.innerHeight;
-
-      const popupLeft = (screenWidth - popupWidth) / 2 + window.screenX;
-      const popupTop = (screenHeight - popupHeight) / 2 + window.screenY;
-
-      const loginRedirectUri = apis.auth.google_login(redirectUri as string);
-
-      window.open(
-        loginRedirectUri,
-        'Packit Login',
-        `width=${popupWidth},height=${popupHeight},left=${popupLeft},top=${popupTop},scrollbars=yes,resizable=yes`,
-      );
-    } catch (error) {
-      console.error('Error during Google login:', error);
-    }
-  };
 
   useEffect(() => {
     const handleTokenSaved = (event: MessageEvent) => {
@@ -53,28 +28,82 @@ const Login = () => {
   }, [router]);
 
   return (
-    <div className='w-full h-full flex items-center justify-center flex-col'>
-      <div className='flex flex-col gap-32 justify-center items-center w-360 mb-[26px]'>
-        <Logo type='default' width={126} height={30} />
-        <span className='text-center heading-3xl-bd'>
-          패킷으로 쉽고 간편하게
-          <br />
-          나만의 인사이트를 관리하세요
-        </span>
-        <button
-          onClick={handleLogin}
-          className='w-full h-48 px-16 py-12 border border-border rounded-lg heading-md-bold flex items-center gap-[65px]'
+    <>
+      {/* Desktop 뷰 */}
+      <div className='hidden h-full md:grid grid-cols-2'>
+        {/* 좌측 영역 */}
+        <div className='h-full flex items-center justify-center flex-col'>
+          <div className='flex flex-col gap-32 justify-center items-center w-360 mb-[26px]'>
+            <Logo type='default' width={126} height={30} />
+            <span className='text-text text-center heading-3xl-bd'>
+              패킷으로 쉽고 간편하게
+              <br />
+              나만의 인사이트를 관리하세요
+            </span>
+            <GoogleButton />
+          </div>
+          <span className='body-sm text-center text-text-minimal'>
+            로그인 시 서비스의 <span className='underline'>개인 정보 보호 정책</span> 및{' '}
+            <span className='underline'>서비스 약관</span>에 동의하게 되며,
+            <br /> 서비스 이용을 위해 이메일과 이름, 프로필 이미지를 수집합니다.
+          </span>
+        </div>
+        {/* 우측 영역 */}
+        <div className='w-full flex items-center bg-black overflow-hidden'>
+          <img
+            className='ml-[120px] w-min-[722px] h-min-[440px] w-full h-auto aspect-[843/722]'
+            src='/assets/image/login_image.png'
+            alt='로그인 이미지'
+          />
+        </div>
+      </div>
+      {/* Mobile 뷰 */}
+      <div className='h-full md:hidden'>
+        <div className='pt-32 px-10 flex flex-col gap-32'>
+          <div className='flex flex-col gap-20 justify-center items-center mb-[26px]'>
+            <Logo type='default' width={126} height={30} />
+            <span className='text-text text-center heading-3xl-bd'>
+              패킷으로 쉽고 간편하게
+              <br />
+              나만의 인사이트를
+              <br />
+              관리하세요
+            </span>
+          </div>
+          <div
+            className='w-full flex items-center border border-[] rounded-2xl overflow-hidden'
+            style={{
+              border: '1px solid rgba(0, 0, 0, 0.03)',
+              background:
+                'linear-gradient(180deg, rgba(226, 229, 236, 0.80) 0%, rgba(226, 229, 236, 0.60) 100%)',
+            }}
+          >
+            <div className='pt-[38px] pl-[36px]'>
+              <img
+                className='w-full h-auto aspect-[843/722]'
+                src='/assets/image/login_image.png'
+                alt='로그인 이미지'
+              />
+            </div>
+          </div>
+        </div>
+
+        <div
+          className='px-20 pt-24 pb-20 w-full flex flex-col gap-12 sticky bottom-0'
+          style={{
+            background:
+              'linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.07) 0.78%, rgba(255, 255, 255, 0.15) 1.7%, rgba(255, 255, 255, 0.25) 3.19%, #FFF 14.17%)',
+          }}
         >
-          <Icon name='google' />
-          <span>Google 계정으로 로그인</span>
-        </button>
+          <GoogleButton />
+          <span className='body-sm text-center text-text-minimal'>
+            로그인 시 서비스의 <span className='underline'>개인 정보 보호 정책</span> 및{' '}
+            <span className='underline'>서비스 약관</span>에 동의하게 되며,
+            <br /> 서비스 이용을 위해 이메일과 이름, 프로필 이미지를 수집합니다.
+          </span>
+        </div>
       </div>
-      <span className='body-sm text-center text-icon-sub'>
-        로그인 시 서비스의 <span className='underline'>개인 정보 보호 정책</span> 및{' '}
-        <span className='underline'>서비스 약관</span>에 동의하게 되며,
-        <br /> 서비스 이용을 위해 이메일과 이름, 프로필 이미지를 수집합니다.
-      </span>
-    </div>
+    </>
   );
 };
 

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -9,9 +9,6 @@ const Home = () => {
         <h1 className='text-text heading-3xl-bd'>내 북마크</h1>
       </header>
       <Suspense>
-        {/* filter area
-        TODO : Suspense fallback Component
-      */}
         <FilterBox />
         {/* 컨텐츠 영역 */}
         <ContentBox />

diff --git a/src/components/ContentBox/index.tsx b/src/components/ContentBox/index.tsx
@@ -55,7 +55,7 @@ const ContentBox = () => {
       {bookmarkData?.content.length ?? 0 > 0 ? (
         <>
           {listView === 'grid' ? (
-            <div className='grid gap-20 2xl:xl:grid-cols-5 xl:grid-cols-4 lg:grid-cols-3 md:grid-cols-2 grid-cols-1'>
+            <div className='grid gap-20 2xl:xl:grid-cols-5 xl:grid-cols-4 lg:grid-cols-3 grid-cols-2'>
               {bookmarkData?.content.map((item) => (
                 <BookmarkCard
                   key={item.bookMarkId}

diff --git a/src/components/Sidebar/index.tsx b/src/components/Sidebar/index.tsx
@@ -84,12 +84,19 @@ const SideBar = () => {
           <aside className={cn(sidebarVariants({ isOpenSidebar }))}>
             <div className='p-6 flex justify-between relative'>
               <LogoIcon />
-              <button
-                className={cn(sideButtonVariants({ isOpenSidebar }))}
-                onClick={handleToggleSidebar}
+              <div
+                className={cn([
+                  'hidden group-hover:block',
+                  !isOpenSidebar && 'w-60 h-40 text-right absolute -right-[60px]',
+                ])}
               >
-                <Icon name={getIcon} className='w-16 h-16 text-icon-secondary' />
-              </button>
+                <button
+                  className={cn(sideButtonVariants({ isOpenSidebar }))}
+                  onClick={handleToggleSidebar}
+                >
+                  <Icon name={getIcon} className='w-16 h-16 text-icon-secondary' />
+                </button>
+              </div>
             </div>
 
             {/* 프로필 영역 */}
@@ -99,7 +106,9 @@ const SideBar = () => {
                   profileUrl={profileData?.imageUrl}
                   size={isOpenSidebar ? AVATAR_SIZE.XL : AVATAR_SIZE.SM}
                 />
-                {isOpenSidebar && <div className='heading-lg-bd'>{profileData?.name}</div>}
+                {isOpenSidebar && (
+                  <div className='text-text heading-lg-bd'>{profileData?.name}</div>
+                )}
               </div>
               <Button
                 className='min-h-40 min-w-40'
@@ -158,6 +167,7 @@ const SideBar = () => {
 export const sidebarVariants = cva(
   [
     'h-dvh p-12 flex flex-col border-divide-minimal border-r  whitespace-nowrap bg-white transition-all duration-300',
+    'group',
   ],
   {
     variants: {
@@ -174,7 +184,7 @@ export const sideButtonVariants = cva(
   {
     variants: {
       isOpenSidebar: {
-        false: 'absolute -right-14 border border-border bg-surface',
+        false: 'border border-border bg-surface',
       },
     },
   },