Skip to content

#261 다크모드에 어울리게 변경 #277

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

Merged
junghwaYang merged 1 commit into from
Dec 30, 2024
Merged

#261 다크모드에 어울리게 변경 #277

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
2 changes: 1 addition & 1 deletion components/Headers/Headers.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export default function Headers() {
const isMobile = useCheckMobile();

return (
<header className="fixed left-0 top-0 z-10 flex w-full items-center justify-between bg-background py-5 shadow-custom pc:h-[80px] pc:px-[80px] tamo:h-[60px] tamo:px-[20px]">
<header className="fixed left-0 top-0 z-10 flex w-full items-center justify-between bg-background py-5 shadow-custom dark:shadow-custom-dark pc:h-[80px] pc:px-[80px] tamo:h-[60px] tamo:px-[20px]">
<div className="flex gap-10">
<Link href="/">
<Image
Expand Down
4 changes: 2 additions & 2 deletions components/Input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,8 +69,8 @@ const InputField = forwardRef<HTMLInputElement, InputFieldProps>(
containerHorizontal: 'flex items-center gap-[10px]',
labelVertical: 'text-14 text-gray-500',
labelHorizontal: 'text-14 text-gray-400 w-[60px] flex-shrink-0',
base: 'px-[20px] py-[10px] h-[45px] w-full rounded-md text-[14px] text-gray-500 placeholder:text-14 focus:outline-none',
error: 'border border-red-100 bg-red-50',
base: 'px-[20px] py-[10px] h-[45px] w-full rounded-md text-[14px] placeholder:text-14 focus:outline-none',
error: 'bg-red-50 dark:bg-gray-100 dark:border dark:border-red-100',
normal:
'bg-gray-100 focus:border-green-200 focus:ring-1 focus:ring-green-200',
errorText: 'text-12 text-red-100',
Expand Down
2 changes: 1 addition & 1 deletion components/LinkBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ export default function LinkBar({
className={`flex min-w-20 items-center gap-[5px] rounded-custom bg-green-100 px-[10px] py-[3px] text-green-200 transition-colors hover:bg-green-200 hover:text-green-100 mo:py-1 ${classNames}`}
>
<IconLink width={20} height={20} className="size-5 mo:size-4" />
<p className="flex-1 truncate whitespace-nowrap text-14 mo:text-12">
<p className="flex-1 truncate whitespace-nowrap text-14 dark:text-green-300 mo:text-12">
{link}
</p>
</button>
Expand Down
2 changes: 1 addition & 1 deletion components/SnackBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export interface SnackBarProps {
const severityConfig = {
fail: {
style:
'bg-red-50 border-red-100 fixed left-1/2 transform -translate-x-1/2 top-[120px] mx-auto mo:bottom-[80px] mo:top-auto shadow-custom mo:min-w-[280px]',
'bg-red-50 border-[#d14343] fixed left-1/2 transform -translate-x-1/2 top-[120px] mx-auto mo:bottom-[80px] mo:top-auto shadow-custom mo:min-w-[280px]',
icon: '/icon/icon-fail.svg',
textStyle: 'text-red-100 text-14sb mo:text-12sb ',
},
Expand Down
2 changes: 1 addition & 1 deletion components/UserProfile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ function UserProfile({

return (
// 메인 컨테이너
<div className="max-w-4xl rounded-custom bg-background shadow-custom dark:shadow-custom-dark pc:h-auto pc:w-[320px] pc:p-7 tamo:w-full tamo:p-5">
<div className="bgCard max-w-4xl rounded-custom bg-background shadow-custom dark:shadow-custom-dark pc:h-auto pc:w-[320px] pc:p-7 tamo:w-full tamo:p-5">
{/* 레이아웃 컨테이너: PC에서는 세로, 모바일/태블릿에서는 가로 배치 */}
<div
className={`flex ${isEditing ? 'flex-col' : 'flex-col mo:flex-row ta:flex-row pc:flex-col'}`}
Expand Down
4 changes: 2 additions & 2 deletions components/boards.page/BoardCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ export default function BoardCard({
return (
<Link
href={`/boards/${id}`}
className="block h-auto w-[250px] overflow-hidden rounded-custom shadow-custom dark:shadow-custom-dark ta:w-full"
className="scaleStyle block h-auto w-[250px] overflow-hidden rounded-custom shadow-custom dark:shadow-custom-dark ta:w-full"
>
<div className="relative h-[130px] w-auto overflow-hidden bg-gray-100 ta:h-[17.475vw]">
<Image
Expand All @@ -39,7 +39,7 @@ export default function BoardCard({
sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw"
/>
</div>
<div className="bg-background px-[20px] pb-[14px] pt-[20px] mo:pt-[11px]">
<div className="bgCard px-[20px] pb-[14px] pt-[20px] mo:pt-[11px]">
<h3 className="mb-[6px] truncate text-18sb mo:mb-0 mo:text-16sb">
{title}
</h3>
Expand Down
2 changes: 1 addition & 1 deletion components/boards.page/BoardDetailCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@ export default function BoardDetailCard({
};

return (
<div className="rounded-custom bg-background px-[30px] py-10 shadow-custom dark:shadow-custom-dark mo:p-5 mo:pb-[14px]">
<div className="bgCard rounded-custom bg-background px-[30px] py-10 shadow-custom dark:shadow-custom-dark mo:p-5 mo:pb-[14px]">
<header className="mb-[38px] mo:mb-[15px] mo:pb-[11px] ta:mb-[30px] ta:pb-2 tamo:border-b">
<div className="mb-[30px] flex items-center justify-between mo:mb-[14px]">
<h1 className="w-full break-all text-32sb mo:text-24sb">
Expand Down
2 changes: 1 addition & 1 deletion components/boards.page/BoardList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export default function BoardList({ data = [] }: BoardListResponse) {
name={item.writer.name}
likeCount={item.likeCount}
createdAt={item.createdAt}
className={`${tableStyles} mo:flex`}
className={`${tableStyles} hover:dark:bg-green-100 mo:flex`}
/>
))}
</div>
Expand Down
2 changes: 1 addition & 1 deletion components/boards.page/Comment.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ export default function Comment({
}, [createdAt, updatedAt]);

return (
<div className="flex items-start gap-5 rounded-custom px-[30px] py-[22px] shadow-custom dark:shadow-custom-dark mo:gap-[15px] mo:px-5 mo:py-4">
<div className="bgCard flex items-start gap-5 rounded-custom px-[30px] py-[22px] shadow-custom dark:shadow-custom-dark mo:gap-[15px] mo:px-5 mo:py-4">
<div className="size-[50px] overflow-hidden rounded-full mo:size-10">
<Image
src={profile ? profile : '/icon/icon-profile.svg'}
Expand Down
2 changes: 1 addition & 1 deletion components/wikiList.page/ListItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ export default function ListItem({ data, onSnackBarClick }: ListItemProps) {
};

return (
<li className="relative rounded-custom shadow-custom transition-all hover:scale-[1.02] hover:bg-gray-100 hover:shadow-xl dark:shadow-custom-dark">
<li className="bgCard relative rounded-custom shadow-custom transition-all hover:scale-[1.02] hover:bg-gray-300 hover:shadow-xl dark:shadow-custom-dark">
<Link
href={`/wiki/${code}`}
className="flex gap-8 rounded-full px-9 py-6 mo:gap-5 mo:px-6 mo:py-5"
Expand Down
2 changes: 1 addition & 1 deletion pages/_app.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ export default function App({ Component, pageProps }: AppProps) {
<QueryClientProvider client={queryClient}>
<Component {...pageProps} />
{/* NOTE : 배포 시 false로 변경 */}
<ReactQueryDevtools initialIsOpen={true} />
<ReactQueryDevtools initialIsOpen={false} />
</QueryClientProvider>
</SnackbarProvider>
</ProfileProvider>
Expand Down
11 changes: 7 additions & 4 deletions styles/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@

:root {
--background: #ffffff;
--card: #fff;
--white: #ffffff;
--gray-100: #f7f7fa;
--gray-200: #e4e5f0;
Expand All @@ -28,7 +29,8 @@
}

.dark {
--background: #121212;
--background: #191d2d;
--card: #2a2f46;
--white: #e4e4e4;
--gray-100: #3b415b;
--gray-200: #474d66;
Expand All @@ -41,9 +43,6 @@
--green-200: #4cbfa4;
--green-300: #a5e5d1;

--red-50: #8a1c1c;
--red-100: #d14343;

--purple-100: #b095ff;

--yellow-100: #e7a832;
Expand All @@ -52,6 +51,10 @@
--blue-100: #1a1f2e;
}

.bgCard {
@apply bg-card;
}

body {
color: var(--gray-500);
background: var(--background);
Expand Down
1 change: 1 addition & 0 deletions tailwind.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ export default {
colors: {
background: 'var(--background)',
white: 'var(--white)',
card: 'var(--card)',
gray: {
100: 'var(--gray-100)',
200: 'var(--gray-200)',
Expand Down
Loading