Skip to content

Feat/component/gnb/DEVING-15 #13

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
dbswl701 merged 15 commits into from
Feb 19, 2025
Merged

Feat/component/gnb/DEVING-15 #13

Show file tree
Hide file tree
Changes from 13 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
2d0ad7a
chore(DEVING-15): 폰트 Pretendard둜 μ„€μ • 및 typography μ»€μŠ€ν…€
dbswl701 Feb 13, 2025
194673a
feat(DEVING-15): GNB κΈ°λ³Έ κ΅¬ν˜„
dbswl701 Feb 13, 2025
b87e2a5
fix(DEVING-15): ν…μŠ€νŠΈμ— λŒ€ν•œ prefixλ₯Ό textμ—μ„œ typo둜 μˆ˜μ •
dbswl701 Feb 13, 2025
4b22834
feat(DEVING-15): GNB 둜그인 ν›„ κ΅¬ν˜„
dbswl701 Feb 13, 2025
3d11922
Merge branch 'feat/component/Dropdown/DEVING-36' of https://github.co…
dbswl701 Feb 14, 2025
1f6c4c0
feat(DEVING-15): gnb에 λ“œλ‘­λ‹€μš΄ μΆ”κ°€
dbswl701 Feb 14, 2025
814b1b0
Merge branch 'feat/component/DEVING-9' of https://github.com/MoimServ…
dbswl701 Feb 18, 2025
de1bf9f
feat(DEVING-15):gnb μˆ˜μ •μ‚¬ν•­ 반영
dbswl701 Feb 18, 2025
6e18951
feat(DEVING-15): gnb λͺ¨λ°”일뷰 μ œμž‘
dbswl701 Feb 18, 2025
b3b94f2
feat(DEVING-15): 메뉴 μ—΄κ³  λ‹«λŠ” κΈ°λŠ₯ μΆ”κ°€
dbswl701 Feb 18, 2025
cbfc5c3
fix(DEVING-15): 메뉴 ν™”λ©΄ λ²—μ–΄λ‚˜μ„œ λ…ΈμΆœλ˜λŠ” 이슈 ν•΄κ²°
dbswl701 Feb 18, 2025
2a33215
feat(DEVING-15): bg색상 λ³€κ²½
dbswl701 Feb 18, 2025
abd1838
fix(DEVING-15): svg νƒ€μž… μ—λŸ¬ ν•΄κ²°
dbswl701 Feb 18, 2025
8a6e844
fix(DEVING-15): 잘λͺ»λœ μ„€μ • μ‚­μ œ
dbswl701 Feb 18, 2025
9c10c8f
refactor(DEVING-15): μ½”λ“œλ¦¬λ·° 반영
dbswl701 Feb 18, 2025
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
10 changes: 9 additions & 1 deletion next.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,12 @@
/** @type {import('next').NextConfig} */
const nextConfig = {};
const nextConfig = {
webpack(config) {
config.module.rules.push({
test: /\.svg$/,
use: ['@svgr/webpack'],
});
return config;
},
};

export default nextConfig;
2,226 changes: 2,114 additions & 112 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

3 changes: 2 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,9 @@
"test": "jest --coverage"
},
"dependencies": {
"@radix-ui/react-slot": "^1.1.2",
"@radix-ui/react-dropdown-menu": "^2.1.6",
"@radix-ui/react-slot": "^1.1.2",
"@svgr/webpack": "^8.1.0",
"autoprefixer": "^10.4.20",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
Expand Down
16 changes: 14 additions & 2 deletions src/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import Header from '@/components/common/Header';
import type { Metadata } from 'next';
import localFont from 'next/font/local';

import '../styles/globals.css';

Expand All @@ -7,14 +9,24 @@ export const metadata: Metadata = {
description: 'Generated by create next app',
};

const pretendard = localFont({
src: '../fonts/PretendardVariable.woff2',
weight: '100 900',
variable: '--font-pretendard',
display: 'swap',
});

export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body>{children}</body>
<html lang="ko" className={pretendard.variable}>
<body>
<Header />
{children}
</body>
</html>
);
}
3 changes: 1 addition & 2 deletions src/app/preview/dropdown/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
'use client';

import Dropdown from '@/components/common/Dropdown';
import { useRouter } from 'next/navigation';
import { useState } from 'react';

export default function Home() {
const [selectedFilter, setSelectedFilter] = useState<string | null>(null);
const [selectedFilter] = useState<string | null>(null);
Copy link

@coderabbitai coderabbitai bot Feb 18, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

μƒνƒœ 관리 둜직 였λ₯˜

selectedFilter의 setter ν•¨μˆ˜κ°€ μ œκ±°λ˜μ–΄ μƒνƒœλ₯Ό λ³€κ²½ν•  수 μ—†μŠ΅λ‹ˆλ‹€. 이둜 인해 ν•„ν„° κΈ°λŠ₯이 μž‘λ™ν•˜μ§€ μ•Šμ„ 수 μžˆμŠ΅λ‹ˆλ‹€.

λ‹€μŒκ³Ό 같이 μˆ˜μ •ν•˜μ—¬ μƒνƒœ λ³€κ²½ κΈ°λŠ₯을 λ³΅μ›ν•˜μ„Έμš”:

-  const [selectedFilter] = useState<string | null>(null);
+  const [selectedFilter, setSelectedFilter] = useState<string | null>(null);
πŸ“ Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const [selectedFilter] = useState<string | null>(null);
const [selectedFilter, setSelectedFilter] = useState<string | null>(null);

Copy link
Contributor Author

@dbswl701 dbswl701 Feb 18, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ν•„μš”ν•˜μ§€ μ•Šμ€ 뢀뢄이라 μƒλž΅ν•¨.

Copy link

@coderabbitai coderabbitai bot Feb 18, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@dbswl701 λ„€, μ΄ν•΄ν–ˆμŠ΅λ‹ˆλ‹€. μƒνƒœκ°€ ν‘œμ‹œ λͺ©μ μœΌλ‘œλ§Œ μ‚¬μš©λ˜λŠ” 것을 ν™•μΈν–ˆμŠ΅λ‹ˆλ‹€.

✏️ Learnings added 
Learnt from: dbswl701
PR: MoimService/Moim-FE#13
File: src/app/preview/dropdown/page.tsx:7-7
Timestamp: 2025-02-18T07:28:11.028Z
Learning: In React components, when a state variable is only used for display purposes and doesn't need to be modified, the setter function can be omitted from the useState destructuring.

Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure review instructions. You can manage existing learnings in the app.

const filterOptions = [
{ value: 'all', label: '전체' },
{ value: 'completed', label: 'μ™„λ£Œλ¨' },
Expand Down
11 changes: 11 additions & 0 deletions src/app/preview/gnb/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
'use client';

import Header from '@/components/common/Header';

export default function Home() {
return (
<div className="mt-40">
<Header isLogIn />
Copy link

@coderabbitai coderabbitai bot Feb 18, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

πŸ› οΈ Refactor suggestion

둜그인 μƒνƒœ 관리 κ°œμ„  ν•„μš”

isLogIn prop이 ν•˜λ“œμ½”λ”©λ˜μ–΄ μžˆμŠ΅λ‹ˆλ‹€. μ‹€μ œ μ‚¬μš©μžμ˜ 둜그인 μƒνƒœλ₯Ό λ°˜μ˜ν•˜λ„λ‘ μˆ˜μ •μ΄ ν•„μš”ν•©λ‹ˆλ‹€.

λ‹€μŒκ³Ό 같이 μ‹€μ œ 둜그인 μƒνƒœλ₯Ό μ‚¬μš©ν•˜λ„λ‘ μˆ˜μ •μ„ μ œμ•ˆν•©λ‹ˆλ‹€:

-      <Header isLogIn />
+      <Header isLogIn={useAuth().isAuthenticated} />
πŸ“ Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<Header isLogIn />
<Header isLogIn={useAuth().isAuthenticated} />

Copy link
Contributor Author

@dbswl701 dbswl701 Feb 18, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

μΆ”ν›„ 둜그인 둜직 ꡬ성 μ‹œ λ³€κ²½ μ˜ˆμ •

Copy link

@coderabbitai coderabbitai bot Feb 18, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@dbswl701 λ„€, μ΄ν•΄ν–ˆμŠ΅λ‹ˆλ‹€. 둜그인 둜직이 κ΅¬ν˜„λ˜λ©΄ κ·Έλ•Œ ν•¨κ»˜ μˆ˜μ •ν•˜μ‹œλ©΄ λ˜κ² μŠ΅λ‹ˆλ‹€.

✏️ Learnings added 
Learnt from: dbswl701
PR: MoimService/Moim-FE#13
File: src/app/preview/gnb/page.tsx:8-8
Timestamp: 2025-02-18T07:37:44.358Z
Learning: The hardcoded `isLogIn` prop in the GNB preview page (`src/app/preview/gnb/page.tsx`) is temporary and will be replaced with actual authentication state when login functionality is implemented.

Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure review instructions. You can manage existing learnings in the app.

</div>
);
}
17 changes: 17 additions & 0 deletions src/assets/icon/logo.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.
3 changes: 3 additions & 0 deletions src/assets/icon/profile.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.
168 changes: 168 additions & 0 deletions src/components/common/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,168 @@
'use client';

import Logo from '@/assets/icon/logo.svg';
import Profile from '@/assets/icon/profile.svg';
import { Menu } from 'lucide-react';
import Link from 'next/link';
import { useState } from 'react';

import Dropdown from './Dropdown';

const BeforeLogin = () => {
return (
<nav className="ml-auto flex">
<Link
href="/login"
className="text-head3 hidden h-[54px] items-center justify-center text-white lg:flex"
>
둜그인
</Link>
</nav>
);
};

const AfterLogin = () => {
const menu = [
{ label: 'λ‚΄ λͺ¨μž„' },
{ label: 'λ§ˆμ΄νŽ˜μ΄μ§€' },
{ label: 'λ‘œκ·Έμ•„μ›ƒ' },
];
return (
<nav className="ml-auto hidden lg:flex">
<div className="flex items-center">
<Dropdown items={menu} trigger={<Profile />} />
<span className="typo-head3 m-auto w-[77px] text-center text-white">
김밀식
</span>
</div>
</nav>
);
};
Copy link

@coderabbitai coderabbitai bot Feb 18, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

AfterLogin μ»΄ν¬λ„ŒνŠΈμ˜ 메뉴 ν•­λͺ©μ— λŒ€ν•œ λ™μž‘μ„ κ΅¬ν˜„ν•΄μ•Ό ν•©λ‹ˆλ‹€.

메뉴 ν•­λͺ©λ“€μ— λŒ€ν•œ λ§ν¬λ‚˜ 클릭 ν•Έλ“€λŸ¬κ°€ κ΅¬ν˜„λ˜μ–΄ μžˆμ§€ μ•ŠμŠ΅λ‹ˆλ‹€. λ˜ν•œ μ‚¬μš©μž 이름이 ν•˜λ“œμ½”λ”©λ˜μ–΄ μžˆμŠ΅λ‹ˆλ‹€.

λ‹€μŒκ³Ό 같이 μˆ˜μ •ν•˜λŠ” 것을 μ œμ•ˆν•©λ‹ˆλ‹€:

 const menu = [
-  { label: 'λ‚΄ λͺ¨μž„' },
-  { label: 'λ§ˆμ΄νŽ˜μ΄μ§€' },
-  { label: 'λ‘œκ·Έμ•„μ›ƒ' },
+  { label: 'λ‚΄ λͺ¨μž„', href: '/my-meetings' },
+  { label: 'λ§ˆμ΄νŽ˜μ΄μ§€', href: '/my-page' },
+  { label: 'λ‘œκ·Έμ•„μ›ƒ', onClick: handleLogout },
 ];

 return (
   <nav className="ml-auto hidden lg:flex">
     <div className="flex items-center">
       <Dropdown items={menu} trigger={<Profile />} />
       <span className="typo-head3 m-auto w-[77px] text-center text-white">
-        김밀식
+        {user?.name}
       </span>
     </div>
   </nav>
 );
πŸ“ Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const AfterLogin = () => {
const menu = [
{ label: 'λ‚΄ λͺ¨μž„' },
{ label: 'λ§ˆμ΄νŽ˜μ΄μ§€' },
{ label: 'λ‘œκ·Έμ•„μ›ƒ' },
];
return (
<nav className="ml-auto hidden lg:flex">
<div className="flex items-center">
<Dropdown items={menu} trigger={<Profile />} />
<span className="typo-head3 m-auto w-[77px] text-center text-white">
김밀식
</span>
</div>
</nav>
);
};
const AfterLogin = () => {
const menu = [
{ label: 'λ‚΄ λͺ¨μž„', href: '/my-meetings' },
{ label: 'λ§ˆμ΄νŽ˜μ΄μ§€', href: '/my-page' },
{ label: 'λ‘œκ·Έμ•„μ›ƒ', onClick: handleLogout },
];
return (
<nav className="ml-auto hidden lg:flex">
<div className="flex items-center">
<Dropdown items={menu} trigger={<Profile />} />
<span className="typo-head3 m-auto w-[77px] text-center text-white">
{user?.name}
</span>
</div>
</nav>
);
};


const MobileBeforeLogin = () => {
return (
<div className="py-[24px]">
<Link
className="typo-head3 p-[16px] text-Cgray500 hover:text-Cgray700"
href="/login"
>
둜그인
</Link>
<Link
className="typo-head3 p-[16px] text-main hover:text-[#5C73FF]"
href="/signup"
>
νšŒμ›κ°€μž…
</Link>
</div>
);
};

const MobileAfterLogin = () => {
return (
<div className="flex flex-col py-[24px]">
<div className="flex items-center justify-between">
<Link
className="typo-head3 p-[16px] text-Cgray500 hover:text-Cgray700"
href="/login"
>
λ‘œκ·Έμ•„μ›ƒ
</Link>
<div className="flex">
<Profile />
<span className="typo-head3 m-auto w-[77px] text-center text-white">
김밀식
</span>
</div>
</div>
<Link
className="typo-head4 p-[16px] text-Cgray400 hover:text-Cgray500"
href="/signup"
>
λ§ˆμ΄νŽ˜μ΄μ§€
</Link>
<Link
className="typo-head4 p-[16px] text-Cgray400 hover:text-Cgray500"
href="/signup"
>
λ‚˜μ˜ λͺ¨μž„
</Link>
</div>
);
};
Copy link

@coderabbitai coderabbitai bot Feb 18, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

MobileAfterLogin μ»΄ν¬λ„ŒνŠΈμ˜ 링크 경둜λ₯Ό μˆ˜μ •ν•΄μ•Ό ν•©λ‹ˆλ‹€.

잘λͺ»λœ κ²½λ‘œκ°€ μ‚¬μš©λ˜κ³  μžˆμŠ΅λ‹ˆλ‹€:

  • λ‘œκ·Έμ•„μ›ƒ 링크가 /login을 가리킴
  • λ§ˆμ΄νŽ˜μ΄μ§€μ™€ λ‚˜μ˜ λͺ¨μž„ 링크가 /signup을 가리킴

λ‹€μŒκ³Ό 같이 μˆ˜μ •ν•˜λŠ” 것을 μ œμ•ˆν•©λ‹ˆλ‹€:

-          href="/login"
+          onClick={handleLogout}
...
-        href="/signup"
+        href="/my-page"
...
-        href="/signup"
+        href="/my-meetings"
πŸ“ Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const MobileAfterLogin = () => {
return (
<div className="flex flex-col py-[24px]">
<div className="flex items-center justify-between">
<Link
className="typo-head3 p-[16px] text-Cgray500 hover:text-Cgray700"
href="/login"
>
λ‘œκ·Έμ•„μ›ƒ
</Link>
<div className="flex">
<Profile />
<span className="typo-head3 m-auto w-[77px] text-center text-white">
김밀식
</span>
</div>
</div>
<Link
className="typo-head4 p-[16px] text-Cgray400 hover:text-Cgray500"
href="/signup"
>
λ§ˆμ΄νŽ˜μ΄μ§€
</Link>
<Link
className="typo-head4 p-[16px] text-Cgray400 hover:text-Cgray500"
href="/signup"
>
λ‚˜μ˜ λͺ¨μž„
</Link>
</div>
);
};
const MobileAfterLogin = () => {
return (
<div className="flex flex-col py-[24px]">
<div className="flex items-center justify-between">
<Link
className="typo-head3 p-[16px] text-Cgray500 hover:text-Cgray700"
onClick={handleLogout}
>
λ‘œκ·Έμ•„μ›ƒ
</Link>
<div className="flex">
<Profile />
<span className="typo-head3 m-auto w-[77px] text-center text-white">
김밀식
</span>
</div>
</div>
<Link
className="typo-head4 p-[16px] text-Cgray400 hover:text-Cgray500"
href="/my-page"
>
λ§ˆμ΄νŽ˜μ΄μ§€
</Link>
<Link
className="typo-head4 p-[16px] text-Cgray400 hover:text-Cgray500"
href="/my-meetings"
>
λ‚˜μ˜ λͺ¨μž„
</Link>
</div>
);
};


const NavLinks = ({ isMobile }: { isMobile?: boolean }) => {
return (
<ul
className={`${!isMobile ? 'hidden items-center text-Cgray700 lg:flex' : 'text-Cgray400'}`}
>
<li className="typo-head4 p-[16px]">
<Link
href="/Mogakco"
className={`${isMobile ? 'hover:text-Cgray500' : 'hover:text-white'}`}
>
λͺ¨κ°μ½”
</Link>
</li>
<li className="typo-head4 p-[16px]">
<Link
href="/study"
className={`${isMobile ? 'hover:text-Cgray500' : 'hover:text-white'}`}
>
μŠ€ν„°λ””
</Link>
</li>
<li className="typo-head4 p-[16px]">
<Link
href="/side-project"
className={`${isMobile ? 'hover:text-Cgray500' : 'hover:text-white'}`}
>
μ‚¬μ΄λ“œ ν”„λ‘œμ νŠΈ
</Link>
</li>
<li className="typo-head4 p-[16px]">
<Link
href="/hobby"
className={`${isMobile ? 'hover:text-Cgray500' : 'hover:text-white'}`}
>
μ·¨λ―Έ
</Link>
</li>
</ul>
);
};

const Header = ({ isLogIn = false }) => {
const [isOpen, setIsOpen] = useState(false);
return (
<div>
{/* desktop */}
<header
className={`flex h-20 items-center bg-BG px-[24px] lg:bg-main ${!isOpen && 'bg-main'}`}
>
<div className="item-center mx-auto flex w-full max-w-[1340px] items-center justify-between">
<Link href="/" className="mr-[40px] flex-shrink-0">
<Logo />
</Link>
<NavLinks />
{isLogIn ? <BeforeLogin /> : <AfterLogin />}
Copy link

@coderabbitai coderabbitai bot Feb 18, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

둜그인 μƒνƒœμ— λ”°λ₯Έ 쑰건뢀 λ Œλ”λ§ 둜직이 λ°˜λŒ€λ‘œ λ˜μ–΄ μžˆμŠ΅λ‹ˆλ‹€.

isLogIn이 true일 λ•Œ BeforeLogin μ»΄ν¬λ„ŒνŠΈλ₯Ό λ Œλ”λ§ν•˜κ³  μžˆμŠ΅λ‹ˆλ‹€.

λ‹€μŒκ³Ό 같이 μˆ˜μ •ν•˜λŠ” 것을 μ œμ•ˆν•©λ‹ˆλ‹€:

-          {isLogIn ? <BeforeLogin /> : <AfterLogin />}
+          {isLogIn ? <AfterLogin /> : <BeforeLogin />}
πŸ“ Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
{isLogIn ? <BeforeLogin /> : <AfterLogin />}
{isLogIn ? <AfterLogin /> : <BeforeLogin />}

<Menu
className="text-white lg:hidden"
onClick={() => setIsOpen((prev) => !prev)}
/>
</div>
</header>

{/* mobile */}
<div
className={`fixed right-0 h-screen w-screen transform overflow-x-hidden bg-BG px-[24px] transition-transform duration-300 ease-in-out ${
isOpen ? 'translate-x-0' : 'translate-x-full'
} lg:hidden`}
>
{isLogIn ? <MobileBeforeLogin /> : <MobileAfterLogin />}
<NavLinks isMobile />
</div>
</div>
);
};
export default Header;
Binary file added src/fonts/PretendardVariable.woff2
View file
Open in desktop
Binary file not shown.
5 changes: 5 additions & 0 deletions src/types/global.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
declare module '*.svg' {
import React from 'react';
const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
export default ReactComponent;
}
11 changes: 9 additions & 2 deletions tailwind.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,12 @@ export default {
],
theme: {
extend: {
screens: {
md: '376px',
lg: '745px',
},
Comment on lines +13 to +16
Copy link

@coderabbitai coderabbitai bot Feb 18, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

πŸ› οΈ Refactor suggestion

λ°˜μ‘ν˜• 브레이크포인트 μž¬κ²€ν†  ν•„μš”

ν˜„μž¬ μ„€μ •λœ 브레이크포인트 값듀이 일반적인 λͺ¨λ°”일 κΈ°κΈ° 크기와 λ§žμ§€ μ•Šμ„ 수 μžˆμŠ΅λ‹ˆλ‹€:

  • md: 376px (일반적인 λͺ¨λ°”일 κΈ°κΈ° λ„ˆλΉ„μΈ 375px보닀 1px 큼)
  • lg: 745px (일반적인 νƒœλΈ”λ¦Ώ 브레이크포인트인 768px와 차이가 있음)

ν‘œμ€€ 브레이크포인트 κ°’μœΌλ‘œ μˆ˜μ •μ„ μ œμ•ˆν•©λ‹ˆλ‹€:

       screens: {
-        md: '376px',
-        lg: '745px',
+        md: '375px',
+        lg: '768px',
       },
πŸ“ Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
screens: {
md: '376px',
lg: '745px',
},
screens: {
md: '375px',
lg: '768px',
},

Copy link
Contributor Author

@dbswl701 dbswl701 Feb 18, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

375px 인 경우 λͺ¨λ°”일뷰가 보여져야 ν•˜μ§€λ§Œ, md: 375px을 ν•˜λ©΄ md이상인 κ²½μš°μ— 적용이 λ˜κΈ°μ— 여기에 1px을 μΆ”κ°€ν•˜μ˜€μŠ΅λ‹ˆλ‹€.

Copy link

@coderabbitai coderabbitai bot Feb 18, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@dbswl701 μ•„, μ΄ν•΄ν–ˆμŠ΅λ‹ˆλ‹€. 375pxμ—μ„œ λͺ¨λ°”일 λ·°λ₯Ό μ •ν™•ν•˜κ²Œ μœ μ§€ν•˜κΈ° μœ„ν•œ μ˜λ„μ μΈ μ„€μ •μ΄μ—ˆκ΅°μš”. μ΄λŠ” 맀우 μ„Έμ‹¬ν•œ μ ‘κ·Ό λ°©μ‹μž…λ‹ˆλ‹€. 이전 μ œμ•ˆμ„ μ² νšŒν•˜κ² μŠ΅λ‹ˆλ‹€.

✏️ Learnings added 
Learnt from: dbswl701
PR: MoimService/Moim-FE#13
File: tailwind.config.ts:13-16
Timestamp: 2025-02-18T07:31:07.887Z
Learning: In responsive design breakpoints, when mobile view needs to be maintained at exactly 375px, setting the md breakpoint to 376px (instead of 375px) is preferred. This ensures mobile styles are applied at 375px, while md styles only take effect from 376px onwards.

Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure review instructions. You can manage existing learnings in the app.

colors: {
main: '#525FEE',
main: '#3853EA', // 이전 #525FEE
default: '#C2C9FF',
solid: '#E5e7fa',
disable: '#30333e',
Expand All @@ -27,7 +31,7 @@ export default {
clear: '#00c48c',
Cgray700: '#B4BBCE',
Cgray800: '#D8DEE8',
BG: '#121212',
BG: '#0F0F0F',
BG_2: '1B1B1D',
background: 'hsl(var(--background))',
foreground: 'hsl(var(--foreground))',
Expand Down Expand Up @@ -76,6 +80,9 @@ export default {
sm: 'calc(var(--radius) - 4px)',
},
},
fontFamily: {
sans: ['var(--font-pretendard)', 'sans-serif'],
},
},
plugins: [
function ({ addComponents }: PluginAPI) {
Expand Down
8 changes: 7 additions & 1 deletion tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,12 @@
"@/assets/*": ["assets/*"]
}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"include": [
"src",
"next-env.d.ts",
"**/*.ts",
"**/*.tsx",
".next/types/**/*.ts"
],
"exclude": ["node_modules", "postcss.config.js"]
}