Fix dropdown position

wafflestudio · Jan 9, 2025 · 0184e84 · 0184e84
1 parent c1c1a73
commit 0184e84
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 22 deletions.
diff --git a/src/components/home/Topbar/Menu/DropDown.tsx b/src/components/home/Topbar/Menu/DropDown.tsx
@@ -42,7 +42,7 @@ const Dropdown: React.FC<DropdownProps> = ({
       ref={dropdownRef}
       className={`absolute right-0 ${
         isLoggedIn ? 'mt-32' : 'mt-44'
-      } py-2 w-60 bg-white border border-gray-200 rounded-lg shadow-lg z-50`}
+      } mr-64 py-2 w-60 bg-white border border-gray-200 rounded-lg shadow-lg z-50`}
     >
       {isLoggedIn ? (
         <button

diff --git a/src/components/home/Topbar/Menu/LoginModal.tsx b/src/components/home/Topbar/Menu/LoginModal.tsx
@@ -171,7 +171,7 @@ const LoginModal: React.FC<LoginModalProps> = ({
             )}
             <button
               type="submit"
-              className="mt-5 mb-1 px-14 py-2 w-[500px] h-12 text-white rounded-lg transition-all duration-500 bg-gradient-to-tl from-primary-color from-30% via-[#e8214f] to-[#BD1E59] bg-size-200 bg-pos-0 hover:bg-pos-100"
+              className="mt-5 mb-1 px-14 py-2 w-[500px] h-12 text-white rounded-lg transition-all duration-500 bg-gradient-to-tl from-airbnb from-30% via-[#e8214f] to-[#BD1E59] bg-size-200 bg-pos-0 hover:bg-pos-100"
             >
               로그인
             </button>
@@ -181,7 +181,7 @@ const LoginModal: React.FC<LoginModalProps> = ({
             에어비앤비가 처음이신가요?{' '}
             <button
               onClick={onSwitchToSignup}
-              className="text-primary-color hover:underline"
+              className="text-airbnb hover:underline"
             >
               회원가입
             </button>

diff --git a/src/components/home/Topbar/Menu/RegisterModal.tsx b/src/components/home/Topbar/Menu/RegisterModal.tsx
@@ -167,7 +167,7 @@ const SignupModal: React.FC<SignupModalProps> = ({
             )}
             <button
               type="submit"
-              className="mt-5 mb-1 px-14 py-2 w-[500px] h-12 text-white rounded-lg transition-all duration-500 bg-gradient-to-tl from-primary-color from-30% via-[#e8214f] to-[#BD1E59] bg-size-200 bg-pos-0 hover:bg-pos-100"
+              className="mt-5 mb-1 px-14 py-2 w-[500px] h-12 text-white rounded-lg transition-all duration-500 bg-gradient-to-tl from-airbnb from-30% via-[#e8214f] to-[#BD1E59] bg-size-200 bg-pos-0 hover:bg-pos-100"
             >
               회원가입
             </button>
@@ -177,7 +177,7 @@ const SignupModal: React.FC<SignupModalProps> = ({
             이미 계정이 있으신가요?{' '}
             <button
               onClick={onSwitchToLogin}
-              className="text-primary-color hover:underline"
+              className="text-airbnb hover:underline"
             >
               로그인
             </button>

diff --git a/src/components/home/Topbar/index.tsx b/src/components/home/Topbar/index.tsx
@@ -79,24 +79,27 @@ const Topbar = () => {
             >
               당신의 공간을 에어비앤비하세요
             </button>
-            <button
-              className="flex items-center gap-3 border border-gray-300 rounded-full p-2 hover:shadow-md transition-shadow"
-              onClick={toggleDropdown}
-            >
-              <Menu size={18} />
-              <User size={30} className="text-gray-500" />
-            </button>
 
-            <Dropdown
-              isOpen={isDropdownOpen}
-              isLoggedIn={isLoggedIn}
-              onClose={() => {
-                setDropdownOpen(false);
-              }}
-              onLogin={handleLoginModalOpen}
-              onSignup={handleSignupModalOpen}
-              onLogout={handleLogout}
-            />
+            <div className="flex items-center justify-end space-x-4 relative">
+              <button
+                className="flex items-center gap-3 border border-gray-300 rounded-full p-2 hover:shadow-md transition-shadow"
+                onClick={toggleDropdown}
+              >
+                <Menu size={18} />
+                <User size={30} className="text-gray-500" />
+              </button>
+
+              <Dropdown
+                isOpen={isDropdownOpen}
+                isLoggedIn={isLoggedIn}
+                onClose={() => {
+                  setDropdownOpen(false);
+                }}
+                onLogin={handleLoginModalOpen}
+                onSignup={handleSignupModalOpen}
+                onLogout={handleLogout}
+              />
+            </div>
           </div>
         </div>
       </div>