메인 병합

src/app/(providers)/(root)/auth/_components/BackButton.tsx

@@ -1,5 +1,6 @@
 'use client';
 import { useRouter } from 'next/navigation';
+import ArrowLeftIcon from '@/icons/ArrowLeft.svg';
 
 type BackButtonProps = {
   className?: string;
@@ -8,8 +9,8 @@ type BackButtonProps = {
 const BackButton = ({ className = '' }: BackButtonProps) => {
   const route = useRouter();
   return (
-    <button onClick={() => route.back()} className={`text-[20px] font-bold text-[#333333] ${className}`}>
-      ←
+    <button onClick={() => route.back()} className={`${className}`}>
+      <ArrowLeftIcon className="h-[24px] w-[24px]" />
     </button>
   );
 };

src/app/(providers)/(root)/auth/login/page.tsx

@@ -1,7 +1,4 @@
 'use client';
-import useShallowSelector from '@/hooks/useShallowSelector';
-import { useAuthStore } from '@/providers/AuthStoreProvider';
-import { AuthStoreTypes } from '@/store/authStore';
 import useUserStore from '@/store/userStore';
 import { supabase } from '@/utils/supabase/supabaseClient';
 import { useMutation } from '@tanstack/react-query';
@@ -10,16 +7,10 @@ import { useState } from 'react';
 import BackButton from '../_components/BackButton';
 import { setCookie } from '../_utils/cookieUtils';
 
-type UserType = {
-  user: AuthStoreTypes['user'];
-};
-
 const LoginPage = () => {
   const [email, setEmail] = useState<string>('');
   const [password, setPassword] = useState<string>('');
   const setUserData = useUserStore((state) => state.setUserData);
-  const workspaceId = useUserStore((state) => state.workspaceId);
-  const { user } = useShallowSelector<AuthStoreTypes, UserType>(useAuthStore, ({ user }) => ({ user }));
   const route = useRouter();
 
   // TODO : 리팩터링 예정
@@ -42,12 +33,11 @@ const LoginPage = () => {
         return alert('사용자 정보가 일치하지 않습니다.');
       }
 
-      console.log(session.user.id);
-
       const { data: workspaceUserData, error: workspaceUserError } = await supabase
         .from('workspace_user')
         .select('workspace_id')
         .eq('user_id', session.user.id)
+        .order('created_at', { ascending: false })
         .limit(1)
         .single();
 
@@ -80,7 +70,7 @@ const LoginPage = () => {
         </h1>
         <div className="flex flex-col gap-[24px]">
           <div className="flex flex-col">
-            <label className="text-[14px] text-[#333] opacity-60 pl-[6px] pb-2" htmlFor="email">
+            <label className="text-[14px] text-[#2F323C] pl-[6px] pb-2" htmlFor="email">
               이메일주소
             </label>
             <input
@@ -93,8 +83,8 @@ const LoginPage = () => {
               required={true}
             />
           </div>
-          <div className="flex flex-col pb-[13px] ">
-            <label className="text-[14px] text-[#333] opacity-60 pl-[6px] pb-2" htmlFor="password">
+          <div className="flex flex-col ">
+            <label className="text-[14px] text-[#2F323C] pl-[6px] pb-2" htmlFor="password">
               비밀번호
             </label>
             <input
@@ -108,7 +98,7 @@ const LoginPage = () => {
             />
           </div>
         </div>
-        <div className="flex justify-center pb-4">
+        <div className="flex justify-center mt-[40px]">
           <button
             onClick={() => emailLoginMutate()}
             className="w-full text-lg py-[12px] px-[22px] bg-[#7173FA] text-white rounded-lg shadow-md"
@@ -117,7 +107,8 @@ const LoginPage = () => {
             {loginMutation.isPending ? '로그인 중입니다...' : '로그인'}
           </button>
         </div>
-        <button className="text-[#333] text-center text-[12px] font-normal underline">비밀번호를 잊으셨나요?</button>
+        {/* // TODO: MVP이후 비밀번호 찾기 구현  */}
+        {/* <button className="text-[#333] text-center text-[12px] font-normal underline">비밀번호를 잊으셨나요?</button> */}
       </div>
     </main>
   );

src/app/(providers)/(root)/auth/signup/page.tsx

@@ -32,6 +32,8 @@ const SignUpPage = () => {
         }
       });
 
+      if (error?.message === 'Email rate limit exceeded') return alert('이메일 전송 할당량이 초과되었습니다.');
+
       if (error) return alert(`회원가입 중 에러 : ${error.message}`);
 
       if (data) {

src/app/(providers)/(root)/page.tsx

@@ -6,6 +6,7 @@ import { Navigation, Pagination } from 'swiper/modules';
 import Image from 'next/image';
 import Link from 'next/link';
 import { signInWithKakao } from './auth/_utils/kakaoLogin';
+import KakaoIcon from '@/icons/Kakao.svg';
 
 const mockData = [
   {
@@ -63,10 +64,11 @@ const LandingPage = () => {
               onClick={signInWithKakao}
               className="flex justify-center items-center w-full h-[56px] text-lg font-medium bg-[#FEE502] rounded-lg text-[#3B1E1D] px-[22px] py-[12px]"
             >
-              카카오로 시작하기
+              <KakaoIcon className="h-6 w-6" />
+              <span className="ml-3">카카오로 시작하기</span>
             </button>
           </div>
-          <div className="pb-7 text-[14px] text-[#333] flex justify-center items-center ">
+          <div className="pb-7 text-[14px] text-[#2F323C] flex justify-center items-center ">
             <Link href="/auth/login">이메일로 로그인</Link> ㅣ <Link href="/auth/signup">회원가입</Link>
           </div>
         </div>

src/app/(providers)/(root)/workspace/landing/page.tsx

@@ -48,8 +48,6 @@ const InviteCodePage = () => {
         return;
       }
 
-      console.log('카카오 워크스페이스 유저 ID: ', workspaceData.id);
-
       setCookie('userToken', String(workspaceData.id), 1);
       setUserData(user.id, workspaceData.id);
 

src/components/Input/Input.tsx

@@ -1,4 +1,6 @@
 import React, { useEffect, useState } from 'react';
+import EyeIcon from '@/icons/Eye.svg';
+import EyeOffIcon from '@/icons/EyeOff.svg';
 
 export interface InputProps {
   type?: string;
@@ -29,10 +31,6 @@ const Input = ({
   const [isFocused, setIsFocused] = useState(false);
   const [state, setState] = useState<'default' | 'focus' | 'typing'>('default');
 
-  useEffect(() => {
-    setState(value ? 'typing' : 'default');
-  }, [value]);
-
   const handleIconClick = () => {
     if (togglePasswordVisibility === false) {
       setIsPasswordVisible((prev) => !prev);
@@ -61,6 +59,9 @@ const Input = ({
   };
 
   const renderIcon = () => {
+    if (isPasswordVisible && type === 'password') {
+      return <EyeOffIcon />;
+    }
     if (status === 'error') {
       return (
         <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -96,66 +97,11 @@ const Input = ({
       switch (state) {
         case 'focus':
           if (type === 'password') {
-            return (
-              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <g clipPath="url(#clip0)">
-                  <path
-                    d="M0.667 8C0.667 8 3.333 2.667 8 2.667C12.667 2.667 15.333 8 15.333 8C15.333 8 12.667 13.333 8 13.333C3.333 13.333 0.667 8 0.667 8Z"
-                    stroke="#2F323C"
-                    strokeWidth="1.6"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                  />
-                  <path
-                    d="M8 10C9.105 10 10 9.105 10 8C10 6.895 9.105 6 8 6C6.896 6 6 6.895 6 8C6 9.105 6.896 10 8 10Z"
-                    stroke="#2F323C"
-                    strokeWidth="1.6"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                  />
-                </g>
-                <defs>
-                  <clipPath id="clip0">
-                    <rect width="16" height="16" fill="white" />
-                  </clipPath>
-                </defs>
-              </svg>
-            );
+            return <EyeIcon className="text-[#2F323C] stroke-current" />;
           }
         case 'typing':
           if (type === 'password') {
-            return (
-              <svg
-                onClick={handleIconClick}
-                width="16"
-                height="16"
-                viewBox="0 0 16 16"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <g clipPath="url(#clip0)">
-                  <path
-                    d="M0.667 8C0.667 8 3.333 2.667 8 2.667C12.667 2.667 15.333 8 15.333 8C15.333 8 12.667 13.333 8 13.333C3.333 13.333 0.667 8 0.667 8Z"
-                    stroke="#2F323C"
-                    strokeWidth="1.6"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                  />
-                  <path
-                    d="M8 10C9.105 10 10 9.105 10 8C10 6.895 9.105 6 8 6C6.896 6 6 6.895 6 8C6 9.105 6.896 10 8 10Z"
-                    stroke="#2F323C"
-                    strokeWidth="1.6"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                  />
-                </g>
-                <defs>
-                  <clipPath id="clip0">
-                    <rect width="16" height="16" fill="white" />
-                  </clipPath>
-                </defs>
-              </svg>
-            );
+            return <EyeIcon onClick={handleIconClick} className="text-[#2F323C] stroke-current" />;
           } else {
             return (
               <svg
@@ -223,8 +169,12 @@ const Input = ({
     return 'border-grey200';
   };
 
+  useEffect(() => {
+    setState(value ? 'typing' : 'default');
+  }, [value]);
+
   return (
-    <div className={`relative ${className}`}>
+    <div className={`relative inline-flex ${className}`}>
       <input
         id={id}
         type={isPasswordVisible && type === 'password' ? 'text' : type}

src/middleware.ts

@@ -3,7 +3,6 @@ import { NextResponse, type NextRequest } from 'next/server';
 const EMAIL_TOKEN = 'sb-ripbxzxpvscuqgdjpkix-auth-token';
 const KAKAO_TOKEN_0 = 'sb-ripbxzxpvscuqgdjpkix-auth-token.0';
 const KAKAO_TOKEN_1 = 'sb-ripbxzxpvscuqgdjpkix-auth-token.1';
-const AUTH_PATHS = ['/auth', '/workspace'];
 
 export const middleware = (request: NextRequest) => {
   console.log('redirect 미들웨어 실행~~~');
@@ -33,13 +32,6 @@ export const middleware = (request: NextRequest) => {
     return NextResponse.next();
   }
 
-  // if (pathname.startsWith('/workspace')) {
-  //   if (emailToken) {
-  //     return NextResponse.redirect(new URL(`/${userToken}`, request.url));
-  //   }
-  //   return NextResponse.next();
-  // }
-
   if (pathname === '/') {
     if (emailToken || kakaoToken0 || kakaoToken1) {
       return NextResponse.redirect(new URL(`/${userToken}`, request.url));