쇼핑몰 만들기 part2

pages 폴더에 페이지 만들기시작

 

App.jsx에 Home 컴포넌트 있었는데 잠시 없애고 ProductList Import

import Home from "./pages/Home";

const App = () => {

  return <ProductList/>;

};

export default App;

 

 

import React from 'react'

import styled from 'styled-components'

const Container = styled.div`

`

export const ProductList = () => {

  return (

    <Container>ProductList</Container>

  )

}

 

 

 

import React from 'react'

import styled from 'styled-components'

import Navbar from '../components/Navbar'

import { Announcement } from '../components/Announcement';

const Container = styled.div`

`

const Title = styled.h1`

`;

const FilterContainer = styled.div`

`;

const Filter = styled.div`

`

export const ProductList = () => {

    return (

        <Container>

            <Navbar />

            <Announcement />

            <Title>

            </Title>

            <FilterContainer>

                <Filter>Filter1</Filter>

                <Filter>Filter2</Filter>

            </FilterContainer>

        </Container>

    )

}

export default ProductList;

 

 

 

import React from 'react'

import styled from 'styled-components'

import Navbar from '../components/Navbar'

import { Announcement } from '../components/Announcement';

import Products from '../components/Products';

const Container = styled.div`

`

const Title = styled.h1`

`;

const FilterContainer = styled.div`

    display:flex;

    align-items: center;

    justify-content: space-between;

`;

const Filter = styled.div`

`

export const ProductList = () => {

    return (

        <Container>

            <Navbar />

            <Announcement />

            <Title>

            </Title>

            <FilterContainer>

                <Filter>Filter1</Filter>

                <Filter>Filter2</Filter>

            </FilterContainer>

            <Products/>

        </Container>

    )

}

export default ProductList;

 

filter margin 20px 주고 전후

 

 

 

 

 

 

 

아 그 방법 필요없고 그냥 Filter 컴포넌트안에 두개 select 태그 넣으면 되는거였음. 

 

import React from 'react'

import styled from 'styled-components'

import Navbar from '../components/Navbar'

import { Announcement } from '../components/Announcement';

import Products from '../components/Products';

import Newsletter from '../components/Newsletter';

import Footer from '../components/Footer';

const Container = styled.div`

`

const Title = styled.h1`

`;

const FilterContainer = styled.div`

    display:flex;

    align-items: center;

    justify-content: space-between;

`;

const FilterGroup = styled.div`

    display: flex;

    align-items: center;

`;

const FilterText = styled.span`

    font-size: 20px;

    font-weight: 600;

    margin-right: 20px;

`

const Filter = styled.div`

    margin: 20px;

`

const Select = styled.select`

    margin-right: 20px;

`

const Option = styled.option`

`

export const ProductList = () => {

    return (

        <Container>

            <Navbar />

            <Announcement />

            <Title>

            </Title>

            <FilterContainer>

                    <Filter>

                        <FilterText>

                            Filter Products

                        </FilterText>

                        <Select>

                            <Option disabled selected>

                                Color

                            </Option>

                            <Option>White</Option>

                            <Option>Black</Option>

                            <Option>Red</Option>

                            <Option>Blue</Option>

                            <Option>Yellow</Option>

                            <Option>Green</Option>

                        </Select>

                        <Select>

                            <Option disabled selected>

                                Size

                            </Option>

                            <Option>XS</Option>

                            <Option>S</Option>

                            <Option>M</Option>

                            <Option>L</Option>

                            <Option>XL</Option>

                        </Select>

                    </Filter>

                <Filter>

                    <FilterText>Sort Products:</FilterText>

                    <Select>

                        <Option selected>Newest</Option>

                        <Option>Price (asc)</Option>

                        <Option>Price (desc)</Option>

                    </Select>

                </Filter>

            </FilterContainer>

            <Products />

            <Newsletter />

            <Footer />

        </Container>

    )

}

export default ProductList;

 

 

Product 싱글 페이지 제작

 

App.jsx에서 ProductList 없애주고 다시 Product만 import해준다.

 

import { ProductList } from "./pages/ProductList";

const App = () => {

  return <ProductList/>;

};

export default App;

 

 

 

 

import styled from "styled-components"

import Navbar from "../components/Navbar";

import Newsletter from "../components/Newsletter";

import Footer from "../components/Footer";

import { Announcement } from "../components/Announcement";

const Container = styled.div`

`

const Wrapper = styled.div`

`;

const ImgContainer = styled.div`

`;

const Image = styled.img`

`;

const InfoContainer = styled.div`

`;

const Title = styled.h1`

`;

const Desc = styled.p`

`;

const Price = styled.span`

`;

const Product = () => {

    return (

        <Container>

            <Navbar />

            <Announcement />

                <Wrapper>

                    <ImgContainer>

                        <Image src="https://i.ibb.co/S6qMxwr/jean.jpg" />

                    </ImgContainer>

                    <InfoContainer>

                        <Title>Denim Jumpsuit</Title>

                        <Desc>

                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec

                            venenatis, dolor in finibus malesuada, lectus ipsum porta nunc, at

                            iaculis arcu nisi sed mauris. Nulla fermentum vestibulum ex, eget

                            tristique tortor pretium ut. Curabitur elit justo, consequat id

                            condimentum ac, volutpat ornare.

                        </Desc>

                        <Price>$ 20</Price>

                    </InfoContainer>

                </Wrapper>

                <Newsletter />

                <Footer/>

        </Container>

    )

}

export default Product;

 

 

 

부모요소에 flex, 그리고 flex:1 flex:1 이런 것만 넣으면 됨

 

 

아 InfoContainer가 Wrapper 바로 안에

import styled from "styled-components"

import Navbar from "../components/Navbar";

import Newsletter from "../components/Newsletter";

import Footer from "../components/Footer";

import { Announcement } from "../components/Announcement";

const Container = styled.div`

`

const Wrapper = styled.div`

    padding: 50px;

    display: flex;

`;

const ImgContainer = styled.div`

    flex:1;

`;

const Image = styled.img`

    width: 100%;

    height: 90vh;

    object-fit: cover;

`;

const InfoContainer = styled.div`

      flex:1;

      padding: 0px 50px;

`;

const Title = styled.h1`

    font-weight: 200;

`;

const Desc = styled.p`

    margin: 20px 0px;

`;

const Price = styled.span`

    font-weight: 100;

    font-size: 40px;

`;

const FilterContainer = styled.div`

    display: flex;

    justify-content: space-between;

`;

const Filter = styled.div`

   

 

`;

const FilterTitle = styled.span`

`;

const FilterColor = styled.div`

 

`;

const FilterSize = styled.select`

`;

const FilterSizeOption = styled.option`

`

const Product = () => {

    return (

        <Container>

            <Navbar />

            <Announcement />

            <Wrapper>

                <ImgContainer>

                    <Image src="https://i.ibb.co/S6qMxwr/jean.jpg" />

                </ImgContainer>

                <InfoContainer>

                    <Title>Denim Jumpsuit</Title>

                    <Desc>

                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec

                        venenatis, dolor in finibus malesuada, lectus ipsum porta nunc, at

                        iaculis arcu nisi sed mauris. Nulla fermentum vestibulum ex, eget

                        tristique tortor pretium ut. Curabitur elit justo, consequat id

                        condimentum ac, volutpat ornare.

                    </Desc>

                    <Price>$ 20</Price>

               

                <FilterContainer>

                    <Filter>

                        <FilterTitle>Color</FilterTitle>

                        <FilterColor color="black" />

                        <FilterColor color="darkblue" />

                        <FilterColor color="gray" />

                    </Filter>

                    <Filter>

                        <FilterTitle>Size</FilterTitle>

                        <FilterSize>

                            <FilterSizeOption>XS</FilterSizeOption>

                            <FilterSizeOption>S</FilterSizeOption>

                            <FilterSizeOption>M</FilterSizeOption>

                            <FilterSizeOption>L</FilterSizeOption>

                            <FilterSizeOption>XL</FilterSizeOption>

                        </FilterSize>

                    </Filter>

                </FilterContainer>

                </InfoContainer>

            </Wrapper>

            <Newsletter />

            <Footer />

        </Container>

    )

}

export default Product;

 

 

 

 

 

import React from 'react'

import styled from 'styled-components';

const Container = styled.div`

  width: 100vw;

  height: 100vh;

  background: url("https://images.pexels.com/photos/6984661/pexels-photo-6984661.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");

`;

const Wrapper = styled.div`

`;

const Title = styled.h1`

`;

const Form = styled.form`

`;

const Input = styled.input`

 

`;

const Agreement = styled.span`

`;

const Button = styled.button`

 

`;

const Register = () => {

    return (

        <Container>

            <Wrapper>

                <Title>CREATE AN ACCOUNT</Title>

                <Form>

                    <Input placeholder="name" />

                    <Input placeholder="last name" />

                    <Input placeholder="username" />

                    <Input placeholder="email" />

                    <Input placeholder="password" />

                    <Input placeholder="confirm password" />

                    <Agreement>

                        By creating an account, I consent to the processing of my personal

                        data in accordance with the <b>PRIVACY POLICY</b>

                    </Agreement>

                    <Button>CREATE</Button>

                </Form>

            </Wrapper>

        </Container>

    )

}

export default Register;

 

 

background만 하고 url("주소") 하면 이렇게도 가능. 

 

 

 

import React from 'react'

import styled from 'styled-components';

const Container = styled.div`

  width: 100vw;

  height: 100vh;

  background: linear-gradient(

      rgba(255, 255, 255, 0.5),

      rgba(255, 255, 255, 0.5)

    ),url("https://images.pexels.com/photos/6984661/pexels-photo-6984661.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940") center;

`;

const Wrapper = styled.div`

`;

const Title = styled.h1`

`;

const Form = styled.form`

`;

const Input = styled.input`

 

`;

const Agreement = styled.span`

`;

const Button = styled.button`

 

`;

const Register = () => {

    return (

        <Container>

            <Wrapper>

                <Title>CREATE AN ACCOUNT</Title>

                <Form>

                    <Input placeholder="name" />

                    <Input placeholder="last name" />

                    <Input placeholder="username" />

                    <Input placeholder="email" />

                    <Input placeholder="password" />

                    <Input placeholder="confirm password" />

                    <Agreement>

                        By creating an account, I consent to the processing of my personal

                        data in accordance with the <b>PRIVACY POLICY</b>

                    </Agreement>

                    <Button>CREATE</Button>

                </Form>

            </Wrapper>

        </Container>

    )

}

export default Register;

 

const Container = styled.div`

  width: 100vw;

  height: 100vh;

  background: linear-gradient(

      rgba(255, 255, 255, 0.5),

      rgba(255, 255, 255, 0.5)

    ),url("https://images.pexels.com/photos/6984661/pexels-photo-6984661.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940") center;

`;

 

 

 

 

 

import 문에서 중괄호({})를 사용하는 것은 명명된 내보내기(named exports)를 가져올 때 사용됩니다. styled-components에서 styled와 같이 이름을 가진 내보내기(named exports)를 가져올 때 중괄호를 사용해야 합니다.

 

export default를 사용하면 이렇게 하면 Announcement 컴포넌트를 중괄호 없이 가져올 수 있게 됩니다.

 

 

import styled from "styled-components";

import Announcement from "../components/Announcement";

import Footer from "../components/Footer";

import Navbar from "../components/Navbar";

const Container = styled.div`

`

const Wrapper = styled.div`

  padding: 20px;

`;

const Title = styled.h1`

  font-weight: 300;

  text-align: center;

`;

const Top = styled.div`

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 20px;

`;

const TopButton = styled.button`

  padding: 10px;

  font-weight: 600;

  cursor: pointer;

  border: ${(props) => props.type === "filled" && "none"};

  background-color: ${(props) =>

    props.type === "filled" ? "black" : "transparent"};

  color: ${(props) => props.type === "filled" && "white"};

`;

const TopTexts = styled.div`

`;

const TopText = styled.span`

  text-decoration: underline;

  cursor: pointer;

  margin: 0px 10px;

`;

const Bottom = styled.div`

 

  padding: 20px;

`;

const Info = styled.div`

 

`;

const Summary = styled.div`

 

`;

const Cart = () => {

  return (

    <Container>

      <Navbar />

      <Announcement />

      <Wrapper>

        <Title>YOUR BAG</Title>

        <Top>

          <TopButton>CONTINUE SHOPPING</TopButton>

          <TopTexts>

            <TopText>Shopping Bag(2)</TopText>

            <TopText>Your Wishlist (0)</TopText>

          </TopTexts>

          <TopButton type="filled">CHECKOUT NOW</TopButton>

        </Top>

        <Bottom>

          <Info>Info</Info>

          <Summary>Summary</Summary>

        </Bottom>

      </Wrapper>

      <Footer />

    </Container>

  )

}

export default Cart;

 

 

so i'm gonna give some size info is gonna be three units and this one will be just one unit
so i can use flex

 

flex:1 , flex:3 이런거 하려면 먼저 부모요소에 flex 써야함.

 

 

import styled from "styled-components";

import Announcement from "../components/Announcement";

import Footer from "../components/Footer";

import Navbar from "../components/Navbar";

const Container = styled.div`

`

const Wrapper = styled.div`

  padding: 20px;

`;

const Title = styled.h1`

  font-weight: 300;

  text-align: center;

`;

const Top = styled.div`

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 20px;

`;

const TopButton = styled.button`

  padding: 10px;

  font-weight: 600;

  cursor: pointer;

  border: ${(props) => props.type === "filled" && "none"};

  background-color: ${(props) =>

    props.type === "filled" ? "black" : "transparent"};

  color: ${(props) => props.type === "filled" && "white"};

`;

const TopTexts = styled.div`

`;

const TopText = styled.span`

  text-decoration: underline;

  cursor: pointer;

  margin: 0px 10px;

`;

const Bottom = styled.div`

  display: flex;

  justify-content: space-between;

`;

const Info = styled.div`

  flex: 3;

`;

const Product = styled.div`

`;

const ProductDetail = styled.div`

`;

const Image = styled.img`

  width: 200px;

`;

const Details = styled.div`

`;

const ProductName = styled.span``;

const ProductId = styled.span``;

const ProductColor = styled.div`

 

`;

const ProductSize = styled.span``;

const PriceDetail = styled.div`

 

`;

const Summary = styled.div`

  flex: 1;

`;

const Cart = () => {

  return (

    <Container>

      <Navbar />

      <Announcement />

      <Wrapper>

        <Title>YOUR BAG</Title>

        <Top>

          <TopButton>CONTINUE SHOPPING</TopButton>

          <TopTexts>

            <TopText>Shopping Bag(2)</TopText>

            <TopText>Your Wishlist (0)</TopText>

          </TopTexts>

          <TopButton type="filled">CHECKOUT NOW</TopButton>

        </Top>

        <Bottom>

          <Info>

            <Product>

              <ProductDetail>

                <Image src="https://i.pinimg.com/originals/2d/af/f8/2daff8e0823e51dd752704a47d5b795c.png" />

                <Details>

                  <ProductName>

                    <b>Product:</b> HAKURA T-SHIRT

                  </ProductName>

                  <ProductId>

                    <b>ID:</b> 93813718293

                  </ProductId>

                  <ProductColor color="gray" />

                  <ProductSize>

                    <b>Size:</b> M

                  </ProductSize>

                </Details>

              </ProductDetail>

              <PriceDetail>price</PriceDetail>

            </Product>

          </Info>

          <Summary>Summary</Summary>

        </Bottom>

      </Wrapper>

      <Footer />

    </Container>

  )

}

export default Cart;

 

그래서 +1- 가 옆으로 안 올라갔던거임....

 

 

 

 

간단히 말해, space-between은 첫 번째와 마지막 아이템을 컨테이너의 양 끝에 정렬하고 나머지 아이템 사이의 간격을 최대로 늘리며, space-around은 모든 아이템 사이의 간격을 균등하게 유지합니다.

 

이게 문제였네 부모요소에!!

 

 

 

반응형

 

2:37:07
okay firstly i'm going to show you how you can use media query inside your style
2:37:13
components for example if you come here and say media
2:37:19
and it's going to be on this screen

 

and i'm going to write here my breakpoint it's going to be max with
2:37:31
and it will be 380 pixels which is the breakpoint for
2:37:36
mobile devices so inside i can write here my style properties
2:37:42
if i say display none for example it's just an example don't worry about
2:37:47
that so let's check as you can see it's disappeared
2:37:54
let's make this bigger okay it works like that but we have a lot of
2:38:00
components and pages and writing this each time can be a
2:38:06
little bit tough and it can be a waste of time so what i'm gonna do is creating here

 

#를 쓰는이유

 

#을 사용하여 ${props => props.color}와 같은 방식으로 색상 코드를 동적으로 생성하고 CSS에 적용할 수 있습니다. 이를 통해 컴포넌트에 전달된 color 프롭스 값에 따라 배경색을 동적으로 변경할 수 있습니다.

요약하면, ${}을 사용하여 CSS 속성을 동적으로 설정하고, #은 이러한 값을 문자열에 삽입하는 데 사용됩니다.

 

import { FacebookOutlined, Instagram, MailOutline, Phone, Room, Twitter } from '@mui/icons-material';

import React from 'react'

import styled from 'styled-components';

const Container = styled.div`

   display: flex;

`

const Left = styled.div`

    flex: 1;

    display: flex;

    flex-direction: column;

    padding: 20px;

`

const Logo = styled.h1`

`;

const Desc = styled.p`

    margin: 20px 0px;

`;

const SocialContainer = styled.div`

    display: flex;

 

`;

const SocialIcon = styled.div`

    width: 40px;

    height: 40px;

    border-radius: 50%;

    color: black;

    background-color: #${props => props.color};

    display: flex;

    align-items:center;

    justify-content: center;

 

`;

const Center = styled.div`

    flex: 1;

    padding: 20px;

`

const Title = styled.h3`

    margin-bottom: 30px;

`

const List = styled.ul`

    margin:0;

    padding: 0;

    list-style: none;

    display: flex;

    flex-wrap: wrap;

`

const ListItem = styled.li`

    width: 50%;

`

const Right = styled.div`

    flex: 1;

    margin-top: 20px;

`

const ContactItem = styled.div`

    margin-bottom: 20px;

    display: flex;

    align-item: center;

`

const Payment = styled.img`

`;

const Footer = () => {

    return (

        <Container>

            <Left>

                <Logo>Cassie.</Logo>

                <Desc> There are many variations of passages of Lorem Ipsum available, but

                    the majority have suffered alteration in some form, by injected

                    humour, or randomised words which don’t look even slightly believable.</Desc>

                <SocialContainer>

                    <SocialIcon color="3B5999">

                        <FacebookOutlined c />

                    </SocialIcon>

                    <SocialIcon color="E4405F">

                        <Instagram />

                    </SocialIcon>

                    <SocialIcon color="55ACEE" >

                        <Twitter />

                    </SocialIcon>

                </SocialContainer>

            </Left>

            <Center>

                <Title>Useful Links</Title>

                <List>

                    <ListItem>Home</ListItem>

                    <ListItem>Cart</ListItem>

                    <ListItem>Man Fashion</ListItem>

                    <ListItem>Woman Fashion</ListItem>

                    <ListItem>Accessories</ListItem>

                    <ListItem>My Account</ListItem>

                    <ListItem>Order Tracking</ListItem>

                    <ListItem>Wishlist</ListItem>

                    <ListItem>Wishlist</ListItem>

                    <ListItem>Terms</ListItem>

                </List>

            </Center>

            <Right>

                <Title>Contact</Title>

                <ContactItem>

                    <Room /> South Korea, Seoul

                </ContactItem>

                <ContactItem>

                    <Phone /> +82 234 56 78

                </ContactItem>

                <ContactItem>

                    <MailOutline /> dudnfsla1@naver.com

                </ContactItem>

                <Payment src="https://i.ibb.co/Qfvn4z6/payment.png" />

            </Right>

        </Container>

    )

}

export default Footer;

@media 쿼리는 CSS에서 사용되며, 미디어 유형 또는 특정 뷰포트 조건에 따라 스타일을 적용하거나 변경하는 데 사용됩니다. @media 쿼리는 미디어 유형 또는 특정 화면 크기에 따라 스타일을 다르게 정의할 수 있게 해줍니다.

@media only screen and (max-width: 380px)는 다음과 같이 해석할 수 있습니다:

only screen: 이 @media 쿼리는 화면에서만 적용됨을 나타냅니다. 다른 미디어 유형(예: 프린터)에 대해서는 적용되지 않습니다.
(max-width: 380px): 화면의 최대 너비가 380px인 경우에 스타일을 적용합니다. 이것은 뷰포트의 너비가 380px 이하일 때 해당 스타일이 적용된다는 것을 의미합니다.
따라서, 위의 코드에서 @media 쿼리 내에서 정의된 스타일은 뷰포트 너비가 380px 미만일 때만 적용됩니다. 예를 들어, 화면 너비가 380px 미만인 모바일 장치에서 이 스타일이 적용됩니다. 이는 모바일 장치에서 네비게이션 바(Container)를 숨기거나 다른 스타일을 적용하는 데 사용될 수 있습니다.

import { css } from "styled-components";

export const mobile = (props) => {

  return css`

    @media only screen and (max-width: 380px) {

      ${props}

    }

  `;

};

 

${props}를 사용하는 것은 스타일드 컴포넌트(Styled-components)에서 유용한 패턴 중 하나입니다. 이 코드는 mobile 함수를 호출할 때 전달된 스타일(props)을 미디어 쿼리 내에서 해당 스타일로 삽입할 수 있도록 돕습니다.

여기에 설명을 추가해보겠습니다:

mobile 함수는 스타일드 컴포넌트의 css 함수를 사용하여 스타일을 생성하는 함수입니다.
@media 쿼리 내에서는 특정 화면 크기 조건에 해당하는 스타일을 정의하려고 합니다.
${props}는 사용자가 mobile 함수를 호출할 때 전달한 스타일 객체를 나타냅니다.
${props}를 사용하면 사용자가 mobile 함수를 호출할 때 전달한 스타일을 @media 쿼리 내에서 쉽게 포함시킬 수 있습니다.

 

import React from 'react'

import styled from 'styled-components'

import SearchIcon from '@mui/icons-material/Search';

import { Badge } from '@mui/material';

import ShoppingCartOutlinedIcon from '@mui/icons-material/ShoppingCartOutlined';

import {mobile} from "../Responsive"

const Container = styled.div`

    height:60px;

    ${mobile({ backgroundColor: "red"})}

`;

const Wrapper = styled.div`

    padding: 10px 20px;

    display: flex;

    align-item: center;

    justify-content: space-between;

`;

const Left = styled.div`

     flex: 1;

    display: flex;

    align-items: center;

`

const Language = styled.span`

    font-size: 14px;

    cursor: pointer;

`

const SearchContainer = styled.div`

    border: 0.5px solid lightgray;

    display: flex;

    align-items: center;

    margin-left: 25px;

    padding: 5px;

   

`

const Input = styled.input`

    border: none;

`

const Center = styled.div`

     flex: 1;

     text-align: center;

`

const Logo = styled.h1`

    font-weight: bold;

`

const Right = styled.div`

     flex: 1;

     display:flex;

     align-items: center;

     justify-content: flex-end;

`

const MenuItem = styled.div`

    font-size: 14px;

    cursor: pointer;

   margin-left: 25px;

`

const Navbar = () => {

    return (

        <Container>

            <Wrapper>

                <Left>

                    <Language>english</Language>

                    <SearchContainer>

                        <Input />

                        <SearchIcon style={{color: "gray", fontsize: 18}}/>

                    </SearchContainer>

                </Left>

                <Center><Logo>CASSIE</Logo></Center>

                <Right>

                    <MenuItem>REGISTER</MenuItem>

                    <MenuItem>SIGN IN</MenuItem>

                    <MenuItem>

                        <Badge badgeContent={4} color="primary">

                        <ShoppingCartOutlinedIcon/>

                        </Badge>

                    </MenuItem>

                </Right>

            </Wrapper>

        </Container>

    )

}

export default Navbar

 

 

 

 

import React from 'react'

import styled from 'styled-components';

import {categories} from "../data";

import { Categoryitem } from './Categoryitem';

import { mobile } from '../Responsive';

const Container = styled.div`

    display: flex;

    padding: 20px;

    justify-content: space-between;

    ${mobile({padding: "0px", flexDirection: "column"})}

`

export const Categories = () => {

  return (

    <Container>

        {categories.map(item=>(

            <Categoryitem item={item} key={item.id}/>

        ))}

    </Container>

  )

}

 

 textAlign: "center"는 화면의 너비가 380px보다 작은 경우, 텍스트를 가운데 정렬하는 스타일을 제공합니다. 이것은 반응형 디자인을 구현할 때 유용한 방법 중 하나입니다.