전체 글

MUI 컴포넌트를 styled-component로 덮어씌울때 CSS가 적용되지 않는 경우가 있다.이럴 때에는 !important를 사용해 나의 스타일을 최우선으로 적용하도록하면 된다.const FindPassword = styled(Typography)` display: block; margin-top: 12px !important; color: var(--gray);`;

MUI + styled-components로 구현하였습니다. 코카콜라 제로 맛있겠다코카콜라 제로 맛있겠다코카콜라 제로 맛있겠다코카콜라 제로 맛있겠다코카콜라 제로 맛있겠다코카콜라 제로 맛있겠다코카콜라 제로 맛있겠다const Name = styled(Typography)` display: -webkit-box; /* 플렉스 박스처럼 동작 */ -webkit-box-orient: vertical; /* 수직 방향으로 텍스트 정렬 */ overflow: hidden; /* 넘치는 텍스트 숨김 */ -webkit-line-clamp: 2; /* 최대 2줄까지만 표시 */ text-overflow: ellipsis; /* 잘린 텍스트 뒤에 '...' 추가 */`;

이 글은 Next.js 15버전을 기준으로 작성되었습니다. 이 글에서는 아래 내용을 스텝 바이 스텝 방식으로 설명합니다.1. Next.js + styled-components 세팅2. Next.js + styled-components 글로벌 스타일 적용3. Next.js + MUI 글로벌 테마 적용  0. 설치// Next.js 프로젝트 세팅$ npx create-next-app@latest {프로젝트 이름}// 예시$ npx create-next-app@latest nextJsProject// styled-components 설치$ npm install styled-components// MUI 관련 라이브러리 설치$ npm install @mui/material @mui/styled-engine-sc..

설명src/│├── app/ // 라우터 폴더│ └── admin/ // /admin 라우터│ └── page.tsx // /admin으로 접근 시 렌더링 되는 컴포넌트│ └── page.tsx // 루트 라우터│├── components/ // 컴포넌트 폴더│ ├── admin/ // admin 페이지에서만 사용하는 컴포넌트│ │ ├── container/ // core와 view를 합친 컨테이너 컴포넌트(페이지 컴포넌트에서 호출)│ │ └── core/ // 비즈니스 로직 포함 컴포넌트(ex - 로그인 버튼)│ │ └── view/ ..

src / service / auth / signUp.tsimport { supabase } from "@/lib/supabaseClient";import { signUpType } from "@/types/auth/signUp.type";export async function signUp({ email, password }: signUpType) { const { data, error } = await supabase.auth.signUp({ email, password }); return { data, error };} src / hooks / useAuth.tsimport { useModalStore } from "@/store";import { useRouter } from "next/navi..

루트 라우터 경로에서만 글로벌 스타일이 적용되는 버그를 해결했습니다.이로 인해 기본 경로에서는 앱바에 스타일이 적용되지만 다른 경로로 이동하면 앱바의 색상이 변경되었습니다.결론부터 말씀드리자면 이유는 어이없게도 본인 과실이었습니다.(역시 컴퓨터는 잘못이 없습니다.) 원인scr / app / page.tsximport GlobalStyles from "@/styles/GlobalStyles";import Home from "@/pages/Home";export default function page() { return ( {/* 루트 라우터 경로에만 글로벌 스타일이 적용되어 있었습니다. */} );} 해결 방법모든 경로에 글로벌 스타일을 적용하기 위해 레이아..

로그인 컴포넌트 ( src / components / signIn / SignIn.tsx )"use client";import { useState } from "react";import useAuth from "@/hooks/auth/useAuth";export default function SignIn() { const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const { handleSignIn } = useAuth(); // 로그인 처리 함수 const signIn = async (e: React.FormEvent) => { e.preventDefault(); handleSign..

이 글은 Next.js, MUI, styled-component, zustand 환경에서 작성된 코드를 공유합니다. 소개어디서든 열 수 있는 모달 컴포넌트입니다. 코드모달 개발src / components / InfoModal.tsx"use client";import styled from "styled-components";import Modal from "@mui/material/Modal";import Fade from "@mui/material/Fade";import { Box, Button } from "@mui/material";import { useModalStore } from "@/store";const InfoModal = () => { const {isOpen, title, conte..