+
Cocktail Discovery Service, SSOUL
+
© 2025 SSOUL.
All rights reserved.
diff --git a/src/components/footer/Github.tsx b/src/shared/components/footer/Github.tsx
similarity index 100%
rename from src/components/footer/Github.tsx
rename to src/shared/components/footer/Github.tsx
diff --git a/src/components/header/DropdownMenu.tsx b/src/shared/components/header/DropdownMenu.tsx
similarity index 85%
rename from src/components/header/DropdownMenu.tsx
rename to src/shared/components/header/DropdownMenu.tsx
index 82bbc04..ea43583 100644
--- a/src/components/header/DropdownMenu.tsx
+++ b/src/shared/components/header/DropdownMenu.tsx
@@ -1,5 +1,5 @@
import { navItem } from '@/shared/utills/navigation';
-import LogoDark from '../../../public/logoDark.svg';
+import Image from 'next/image';
import Close from '@/shared/assets/icons/close_32.svg';
import User from '@/shared/assets/icons/user_24.svg';
import Link from 'next/link';
@@ -66,8 +66,14 @@ function DropdownMenu({ isClicked, setIsClicked }: Props) {
id="mobile-dropdown-menu"
ref={menuRef}
>
-
-
+
+
@@ -95,20 +101,20 @@ function DropdownMenu({ isClicked, setIsClicked }: Props) {
))}
-
-
+
+
-
+
diff --git a/src/components/header/HamburgerMenu.tsx b/src/shared/components/header/HamburgerMenu.tsx
similarity index 100%
rename from src/components/header/HamburgerMenu.tsx
rename to src/shared/components/header/HamburgerMenu.tsx
diff --git a/src/components/header/Header.tsx b/src/shared/components/header/Header.tsx
similarity index 89%
rename from src/components/header/Header.tsx
rename to src/shared/components/header/Header.tsx
index 2a8da2e..dbad4da 100644
--- a/src/components/header/Header.tsx
+++ b/src/shared/components/header/Header.tsx
@@ -19,7 +19,7 @@ function Header() {
useEffect(() => {
const handleScroll = () => {
const currentScrollTop = window.scrollY;
- console.log(currentScrollTop, lastScrollTop);
+ // console.log(currentScrollTop, lastScrollTop);
if (Math.abs(currentScrollTop - lastScrollTop) < -5) return;
@@ -49,7 +49,7 @@ function Header() {
return (
{
// console.log('로그아웃 클릭');
+ router.push('/login');
},
},
];
return (
-
+
{headerBtn.map(({ icon: Icon, label, onClick, className }) => (
))}
diff --git a/src/shared/components/header/HeaderLogo.tsx b/src/shared/components/header/HeaderLogo.tsx
new file mode 100644
index 0000000..79639a9
--- /dev/null
+++ b/src/shared/components/header/HeaderLogo.tsx
@@ -0,0 +1,20 @@
+import Link from 'next/link';
+import Image from 'next/image';
+
+function HeaderLogo() {
+ return (
+
+
+
+
+
+ );
+}
+
+export default HeaderLogo;
diff --git a/src/components/header/NavItem.tsx b/src/shared/components/header/NavItem.tsx
similarity index 100%
rename from src/components/header/NavItem.tsx
rename to src/shared/components/header/NavItem.tsx
diff --git a/src/shared/components/scrollTop/ScrollTopBtn.tsx b/src/shared/components/scrollTop/ScrollTopBtn.tsx
index 3db9d6a..e9cf395 100644
--- a/src/shared/components/scrollTop/ScrollTopBtn.tsx
+++ b/src/shared/components/scrollTop/ScrollTopBtn.tsx
@@ -50,7 +50,7 @@ function ScrollTopBtn() {
onClick={scrollToTop}
className="flex-center w-10 h-10 shadow-[0_4px_12px_0_rgba(0,0,0,0.5)] bg-secondary rounded-full"
>
-
+
);
diff --git a/src/shared/styles/_utilities.css b/src/shared/styles/_utilities.css
index e132857..a7045fb 100644
--- a/src/shared/styles/_utilities.css
+++ b/src/shared/styles/_utilities.css
@@ -1,5 +1,42 @@
-@layer utilities{
-.flex-center {
+@layer utilities {
+ .flex-center {
@apply flex justify-center items-center;
}
+
+ /*
+ 모든 페이지는 div 한번 감싸야 함
+ - flex-1 적용 → 상위 main/flex 구조에서 남은 화면 높이 채우기
+ - max-width 설정 → 페이지별 디자인 가이드에 맞춰서 (ex: 824, 1024, 1224, full)
+ - padding 적용 → 좌우 여백 통일 (ex: px-4)
+ - 중앙 정렬 유지 → mx-auto
+
+
+ * max-width
+ 824 → 로그인, 커뮤니티 상세/글쓰기
+ 1024 → 레시피 상세, 챗봇, 커뮤니티리스트, 마이페이지
+ 1224 → 레시피 리스트
+ full → 메인
+
+ * 824 레이아웃 예시
+ ex)
+ */
+
+ /* 페이지 레이아웃 기본 값 */
+ .page-layout {
+ @apply flex-1 w-full px-4 mx-auto;
+ }
+
+ /* max-width 별 */
+ .max-w-824 {
+ @apply max-w-[51.5rem];
+ }
+ .max-w-1024 {
+ @apply max-w-[64rem];
+ }
+ .max-w-1224 {
+ @apply max-w-[76.5rem];
+ }
+ .max-w-full {
+ @apply max-w-full;
+ }
}