프론트엔드/Component

믹스인 코드src / styles / mixins.tsimport { css } from '@emotion/react';// 믹스인 정의export const mixinFlex = (direction : "row" | "column") => css` display: flex; flex-direction: ${direction}; align-items: center; justify-content: center;`; 컴포넌트 코드"use client";import { Accordion, AccordionDetails, AccordionSummary, styled, Typography } from "@mui/material";import React from "react";import ExpandMore..

설치npm install swiper/react 예시 코드"use client";import { styled } from "@mui/material";import { Swiper, SwiperSlide } from "swiper/react";import { Pagination } from "swiper/modules";import "swiper/swiper-bundle.css";const images = [ "/img/main-banner1.png", "/img/main-banner1.png", "/img/main-banner1.png",];const Carousel = () => { return ( {images.map((src, index) => ( ..

"use client";import { Accordion, AccordionDetails, AccordionSummary, styled, Typography } from "@mui/material";import React from "react";import ExpandMoreOutlinedIcon from "@mui/icons-material/ExpandMoreOutlined";type AccordionByCollegeType = { title : string; majors : string[];}const AccordionByCollege = ({title, majors}:AccordionByCollegeType) => { return ( } aria-contr..

"use client";import * as React from "react";import SwipeableDrawer from "@mui/material/SwipeableDrawer";import Button from "@mui/material/Button";import { useSidebarStore } from "@/store/sidebarStore";import SidebarItem from "./SidebarItem";import styled from "styled-components";const Sidebar = () => { const { items, items2, isOpen, open, close } = useSidebarStore(); const isSecondOpen = useSi..

import { SidebarStoreType } from "@/types/store/sidebar.type";import { create } from "zustand";export const useSidebarStore = create((set) => ({ isOpen: false, items: [ { text: "제로 칼로리", isSelect: false, query: "zero_calories" }, { text: "로우 칼로리", isSelect: false, query: "low_calories" }, { text: "제로 슈가", isSelect: false, query: "zero_sugar" }, { text: "로우 슈가", isSelect: false, que..

이 글은 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..

이 글은 Next.js, MUI, styled-component 환경에서 작성된 코드를 공유합니다. 모달1 ( 주변 어둡게 )"use client";import styled from "styled-components";import Backdrop from "@mui/material/Backdrop";import Modal from "@mui/material/Modal";import Fade from "@mui/material/Fade";import Button from "@mui/material/Button";import { useState } from "react";import { Box } from "@mui/material";const InfoModal = () => { // React 상태: 모..

// 사용법// 1. 라이브러리 설치// npm install react-swipeable// npm install @mui/material @emotion/react @emotion/styled// npm install @mui/icons-material// npm install styled-components// 2. 컴포넌트 사용(props로 )// // 사용법// 1. 라이브러리 설치// npm install react-swipeable// npm install @mui/material @emotion/react @emotion/styled// npm install @mui/icons-material// npm install styled-components// 2. 컴포넌트 사용(props로 )/..