Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: 다크모드 로고 적용 및 드롭다운 스타일 수정 #54

Merged
merged 8 commits into from
Jul 23, 2024
+48 −8
Merged

feat: 다크모드 로고 적용 및 드롭다운 스타일 수정 #54

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
3bbde3b
feat: 다크모드 로고 적용
Byukchong Jul 20, 2024
67fc989
Merge branch 'master' into feature-jisung
Byukchong Jul 20, 2024
926b4e6
fix: 알림 드롭다운 다크모드 누락 수정
Byukchong Jul 20, 2024
6b13ac0
fix: 알림 카운트 position 수정
Byukchong Jul 20, 2024
4a803b5
Merge branch 'master' into feature-jisung
Byukchong Jul 20, 2024
38d92fd
Merge branch 'master' into feature-jisung
ssumai-kr Jul 22, 2024
49ae29f
Fix: build 오류 수정
eunji-0623 Jul 23, 2024
3c17c59
Fix: build 오류 수정
eunji-0623 Jul 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 7 additions & 4 deletions components/Layout/NavigationBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import Image from 'next/image';
import Link from 'next/link';
import Logo from '@/public/icon/logo_small.svg';
import darkLogo from '@/public/icon/dark_logo_small.svg';
import notificationIcon from '@/public/icon/icon_notification.svg';
import { useUserData } from '@/hooks/useUserData';
import { useEffect, useState } from 'react';
import { useState } from 'react';
import NavigationDropdown from '../NavigationDropdown/NavigationDropdown';
import useClickOutside from '@/hooks/useClickOutside';
import useGetNotification from '@/hooks/useGetNotification';
Expand Down Expand Up @@ -57,7 +58,7 @@ export default function NavigationBar() {
<div className="w-[1200px] flex justify-between items-center ">
<div className="flex items-center">
<Link href="/">
<Image src={Logo} alt="로고 아이콘" />
<Image src={darkMode ? darkLogo : Logo} alt="로고 아이콘" />
</Link>
</div>
<div className="flex items-center gap-4">
Expand All @@ -73,8 +74,10 @@ export default function NavigationBar() {
<div className="relative">
<Image src={notificationIcon} alt="알림 아이콘" />
{data?.totalCount !== undefined && data?.totalCount > 0 && (
<span className="flex justify-center items-center absolute -top-2 -right-2 bg-red-500 w-[15px] h-[15px] text-white text-xs rounded-full px-2">
{data.totalCount}
<span className="absolute top-[-7px] right-[-7px] bg-red-500 w-[15px] h-[15px] text-white text-[12px] rounded-full">
<p className="pr-[1.5px] translate-y-[-10%]">
{data.totalCount}
</p>
</span>
)}
</div>
Expand Down
4 changes: 2 additions & 2 deletions components/NavigationDropdown/NotificationDropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ export default function NotificationDropdown({
}, []);

return (
<div className="z-50 px-[20px] py-[17px] absolute top-[60px] t:right-[100px] w-[368px] h-[360px] animate-slideDown flex-col justify-center overflow-y-auto scrollbar-hide rounded-[5px] m:fixed m:inset-0 m:rounded-none m:w-full m:h-full bg-var-green1 dark:bg-var-dark2 border-var-dark3 border border-solid">
<div className="z-50 px-[20px] py-[17px] absolute top-[80%] right-[8%] t:right-[8%] w-[368px] h-[360px] animate-slideDown flex-col justify-center overflow-y-auto scrollbar-hide rounded-[5px] m:fixed m:inset-0 m:rounded-none m:w-full m:h-full bg-var-green1 dark:bg-var-dark2 border-var-dark3 border border-solid">
<div className="flex text-[20px] font-bold mb-[10px] justify-between ">
알림 {data ? `${data.totalCount}` : '0'}개
<CloseButton onClick={onClick} />
Expand Down Expand Up @@ -95,7 +95,7 @@ export default function NotificationDropdown({
{hasNextPage && <div ref={ref} />}
</div>
) : (
<div className="flex justify-center items-center h-[245px] bg-white py-[24px] rounded-[5px] m:bg-var-green1 m:px-[20px] m:py-[40px]">
<div className="flex justify-center items-center h-[245px] bg-white py-[24px] rounded-[5px] m:bg-var-green1 m:px-[20px] m:py-[40px] dark:bg-var-dark3">
새로운 알림이 없습니다.
</div>
)}
Expand Down
10 changes: 9 additions & 1 deletion pages/login.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ import { GetServerSideProps } from 'next';
import useEnterSubmit from '@/hooks/useEnterSubmit';
import Spinner from '@/components/Spinner/Spinner';
import { InitialPageMeta } from '@/components/MetaData/MetaData';
import { darkModeState } from '@/states/themeState';
import { useRecoilState } from 'recoil';

export const getServerSideProps: GetServerSideProps = async () => {
return {
Expand All @@ -25,6 +27,7 @@ export const getServerSideProps: GetServerSideProps = async () => {
export default function LoginPage() {
const { postLoginMutation, isLoading } = useLogin();
const { isLoggedIn } = useLoginState();
const [darkMode, setDarkMode] = useRecoilState(darkModeState);
const router = useRouter();
const {
register,
Expand Down Expand Up @@ -54,7 +57,12 @@ export default function LoginPage() {
<div className="flex flex-col items-center max-w-[640px] m-auto pt-[160px] gap-[40px] px-[20px] ">
{/* 로고 */}
<Link href="/">
<Image width={340} height={192} src="/icon/logo_big.svg" alt="로고" />
<Image
width={340}
height={192}
src={`${darkMode ? '/icon/dark_logo_big.svg' : '/icon/logo_big.svg'}`}
alt="로고"
/>
</Link>

{/* 로그인 폼 */}
Expand Down
10 changes: 9 additions & 1 deletion pages/signup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ import { useRouter } from 'next/router';
import { GetServerSideProps } from 'next';
import useEnterSubmit from '@/hooks/useEnterSubmit';
import { InitialPageMeta } from '@/components/MetaData/MetaData';
import { useRecoilState } from 'recoil';
import { darkModeState } from '@/states/themeState';

export const getServerSideProps: GetServerSideProps = async () => {
return {
Expand All @@ -26,6 +28,7 @@ export default function SingupPage() {
const [isChecked, setIsChecked] = useState(false);
const { isLoggedIn } = useLoginState();
const router = useRouter();
const [darkMode, setDarkMode] = useRecoilState(darkModeState);
const { postSignupMutation, isLoading } = useSignup();

const {
Expand Down Expand Up @@ -68,7 +71,12 @@ export default function SingupPage() {
<div className="flex flex-col items-center max-w-[640px] m-auto pt-[160px] gap-[40px] px-[20px] ">
{/* 로고 */}
<Link href="/">
<Image width={340} height={192} src="/icon/logo_big.svg" alt="로고" />
<Image
width={340}
height={192}
src={`${darkMode ? '/icon/dark_logo_big.svg' : '/icon/logo_big.svg'}`}
alt="로고"
/>
</Link>

{/* 로그인 폼 */}
Expand Down
5 changes: 5 additions & 0 deletions public/icon/dark_logo_big.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading