Rookies-2025.02.08

이주원·2025년 2월 8일

SK 쉴더스

sk쉴더스 루키즈

목록 보기

7/36

리엑트에서 next.js 탬플릿을 받아서 사용해 보고싶었습니다.

일단 깃허브에서 탬플릿을 찾았어요

git clone해서 로컬 pc에 복사했습니다.

그리고 package.json에 들어가서 사용되고있는 리엑트 버전과 next.js를 확인후 해당 버전을 설치했습니다.

package.json

  PS C:\Users\r2com\Documents\MiniProject2\Frontend\startup-nextjs> cat package.json
  {
    "name": "startup-nextjs-template",
    "version": "2.1.0",
    "private": true,
    "scripts": {
      "dev": "next dev",
      "build": "next build",
      "start": "next start",
      "lint": "next lint"
    },
    "dependencies": {
      "eslint": "^8.56.0",
      "eslint-config-next": "15.1.6",
      "next": "15.1.6",
      "next-themes": "^0.2.1",
      "react": "19.0.0",
      "react-dom": "19.0.0",
      "react-modal-video": "^2.0.1"
    },
    "devDependencies": {
      "@types/node": "^20.8.9",
      "@types/react": "19.0.8",
      "autoprefixer": "^10.4.17",
      "postcss": "^8.4.35",
      "prettier": "^3.2.5",
      "prettier-plugin-tailwindcss": "^0.5.11",
      "tailwindcss": "^3.4.1",
      "typescript": "^5.3.3"
    }
  }

설치

npm install react@19 react-dom@19 next@15

run dev하고 localhost:3000으로 들어가보니 템플릿이 잘 적용 되었습니다.

이제 템플릿을 적용시키는 법을 알았으니 사용할 이쁜 탬플릿을 골라올 것 입니다.

Reason why front-end engineers should speak English well

because many template data are in English rather than Korean.

혹시나해서 탬플릿을 설치할때 npm install까지 되어있는 상태로 오나 해서 바로 npm run dev 해보았지만 안돼는군요

package.json 확인후 리엑트,next js 버전 설치하고 실행시키면

짜잔 성공

템플릿이 너무 방대해서 주말동안 탬플릿 구조파악을 하다가 끝이날 것 같습니다.

우선 페이지, 컴포넌트 정보가 있는 src 부터 확인할 것 입니다.

src/app 입니다. 페이지 라우팅과 글로벌 설정을 관리하는 역할을 한다고 합니다.

src/app/site 입니다.

page.tsx는 메인페이지나 서브페이지의 공통구조를 정의 합니다.

src/app/context 입니다 React Context API를 사용 하여 글로벌 상태 관리를 위한 파일들이 있다고합니다.

보통 다크모드 토클, 사용자인증 상태, 태마 설정 등을 전역으로 관리할 수 있다고 합니다.

모달(Modal)이란?

모달(Modal)은 사용자가 상호작용하는 동안 현재 페이지의 흐름을 잠시 멈추고, 특정한 정보나 동작을 요구하는 팝업 창입니다.
모달이 열리면 배경이 흐려지거나 비활성화되면서 사용자는 모달 창과의 상호작용에만 집중하게 됩니다.
주로 경고(alert), 확인(confirm), 폼 입력, 이미지 미리보기, 장바구니 등에 사용됩니다.

- context/CartSidebarModalContext.tsx 입니다.

장바구니 모달의 열림과 닫힘 상태를 전역에서 관리하여 어디서든 장바구니 모달을 제어할 수 있게 합니다.

- context/PreviewSliderContext.tsx 입니다.

이 파일은 상품 이미지 슬라이더 또는 미리보기 모달의 열림/닫힘 상태를 전역에서 관리합니다.

예를들어 제품 리스트 페이지에서 미리보기 버튼을 눌렀을 때 모달 창이 열리며 슬라이더가 표시되는 기능을 담당합니다.

- context/QuickViewModalContext.tsx 입니다.

모달의 열림과 닫힘 상태를 전역에서 관리하여 어떤 컴포넌트에서도 모달을 쉽게 제어할 수 있게 합니다.

여러 종류의 모달(알림,확인,정보 모달 등)을 관리하는 범용적인 모달 관리 시스템으로 사용할 수 있습니다.

src/app/css 입니다. 글로벌 스타일링 파일이나 Tailwind CSS 설정 파일이 저장된 폴더입니다.

glovals.css 파일이 보통 포함되어 있으며, Tailwind의 기본 설정이나 커스터마이징된 스타일을 여기에 적용합니다.

src/app/fonts 입니다. 프로젝트에서 사용하는 커스텀 폰트 파일을 저장하는 폴더입니다.

async-gallery.css: 이미지 갤러리 및 슬라이더 관련 스타일을 정의.

euclid-circular-a-font.css: Euclid Circular A 폰트를 불러와서 텍스트 스타일링.

style.css: 사이트의 글로벌 스타일을 관리하는 핵심 CSS 파일로, 전체적인 레이아웃과 UI 요소를 설정.

구글 폰트나 로컬 폰트 파일을 관리하며, css파일이나 Tailwind 설정을 통해 적용됩니다.

이 디렉토리는 Euclid Circular A 폰트의 다양한 굵기(Regular, Bold, Light, Medium, SemiBold)와 이탤릭 스타일을 포함합니다.

.woff와 .woff2 형식으로 제공되어 웹 환경에서 빠르고 효율적인 폰트 로딩을 지원합니다.

CSS를 통해 폰트를 쉽게 적용하거나, 다른 폰트로 커스터마이징할 수 있습니다.

src/components 이번에 살펴볼 것은 컴포넌트 패키지 입니다. 웹 애플리케이션의 UI 요소를 구성하는 컴포넌트를 모아 놓은 곳 이라고합니다. 각 폴더는 어떤 기능을 담당하는 컴포넌트를 포함하고 있으며 이들을 조합해서 앱의 UI/UX를 구성한다고 합니다.

해당폴더에 파일이 22개입니다.

  PS C:\Users\r2com\Documents\MiniProject2\Frontend\nextjs-ecommerce-template-main\src\components> (Get-ChildItem "C:\Users\r2com\Documents\MiniProject2\Frontend\nextjs-ecommerce-template-main\src\components" | Measure-Object).Count
  22

Auth

auth 패키지는 웹 애플리케이션에서 사용자 인증을 처리하는 핵심적인 컴포넌트 디렉터리로, 로그인과 회원가입을 담당합니다. 사용자 계정을 생성하고 로그인할 수 있으며 소셜 로그인 옵션도 함께 제공되어 편리하게 인증환경을 구축할 수 있습니다.

API와 연결하여 실제 인증로직을 구현하거나 JWT 토큰등을 사용해 보안을 강화할 수 있을 것 같습니다.

Blog

Blog 패키지는 블로그 기능을 위한 다양한 컴포넌트들을 모아놓은 디렉토리 입니다.

1. 블로그 글 목록 표시: BlogItem.tsx를 통해 개별 블로그 글을 깔끔하게 렌더링.

2. 카테고리 필터링: Categories.tsx로 인기 카테고리를 나열하여 필터링 기능 제공.

3. 최신 글 보여주기: LatestPosts.tsx로 최신 블로그 글을 한눈에 보여줌.

4. 검색 기능: SearchForm.tsx로 사용자가 원하는 키워드로 블로그 글을 검색 가능.

5. 상품 연동: LatestProducts.tsx로 블로그에 관련된 최신 상품 정보를 함께 표시.

BlogDetails

BlogDetails 패지지는 개별 블로그 포스트의 상세 정보 페이지를 렌더링하는 역할을 합니다. 사용자가 블로그 목록에서 특정 글을 클릭했을 때, 해당 글의 내용, 이미지, 작성자 정보, 그리고 태그 및 공유 링크등을 자세히 보여주는 페이지입니다.

BlogDetailsWithSidebar

BlogDetailsWithSidebar 패키지는 블로그 상세 페이지에 사이드바를 포함한 레이아웃을 구성하는 역할을 합니다. 이 컴포넌트는 블로그 본문과 함께 검색 폼, 최신 포스트, 최신 상품, 인기 카테고리, 그리고 태그 목록을 사이드바에 배치하여 사용자가 콘텐츠를 더 쉽게 탐색할 수 있도록 합니다.

BlogGrid

BlogGrid 패키지는 블로그 게시글을 그리드 형태로 목록화하여 표시하는 역할을 합니다. 이 컴포넌트는 여러 개의 블로그 포스트를 카드 형식으로 나열하고, 사용자가 페이지를 쉽게 탐색할 수 있도록 페이지네이션 기능을 제공합니다.

BlogGridWithSidebar

BlogGridWithSidebar 패키지는 블로그 게시글을 그리드 형태로 나열하면서 동시에 사이드 바를 통해 검색, 최근 게시물, 인기 제품, 카테고리, 태그 등의 다양한 기능을 제공하는 역할을 합니다.

Cart

Cart 패키지는 전자상거래 사이트에서 사용자가 선택한 상품을 장바구니에 저장하고 관리하는 기능을 제공합니다. 해당 패키지는 장바구니 목록 표시, 할인 코드 적용, 주문 요약 및 상품 수량 조절 등의 전체 쇼핑 프로세스를 관리하는 데 중요한 역할을 합니다.

Checkout

Checkout 패키지는 전자상거래 사이트의 결제 과정을 관리하는 핵심 컴포넌트로, 사용자가 상품 구매를 완료하기 위해 필요한 모든 정보를 입력하고 결제 옵션을 선택할 수 있는 페이지를 제공합니다.

이 패키지는 개인 정보 입력, 배송 옵션 선택, 결제 수단 선택 등 다양한 하위 컴포넌트로 구성되어 있어 사용자 친화적인 결제 경험을 제공합니다.

Common

Common 패키지는 애플리케이션 전반에서 재사용 가능한 UI 구성 요소들을 제공하여 사용자 경험을 향상시키고 일관성을 유지하는 역할을 합니다.

PreLoader: 페이지 콘텐츠가 로드되는 동안 로딩 스피너를 표시하여 사용자에게 로딩 상태를 시각적으로 알려줍니다.

PreviewSlider: 제품 이미지나 콘텐츠를 슬라이드 형식으로 보여주는 기능으로, 사용자가 여러 이미지를 쉽게 탐색할 수 있도록 지원합니다.

ProductItem: 개별 제품 정보를 표시하며, 빠른 보기, 장바구니 추가, 찜하기 등의 기능을 제공합니다. 이 과정에서 Redux를 활용한 상태 관리가 이루어집니다.

CartSidebarModal: Common 패키지의 하위디렉토리인 CartSidebarModal의 역할은 사용자가 웹사이트에서 장바구니를 빠르게 확인하고 관리할 수 있도록 사이드바 형태로 제공되는 모달 창입니다.

Contact

Contact 컴포넌트는 웹사이트의 연락처 페이지를 구성하는 UI 컴포넌트로, 사용자가 사이트 운영자에게 연락할 수 있는 정보를 제공하고 메시지를 보낼 수 있는 양식을 포함합니다.

Error

Error 패키지는 웹사이트에서 발생할 수 있는 오류 상황(특히 404 오류)에 대해 사용자에게 안내를 제공하는 UI 컴포넌트입니다. 사용자가 존재하지 않는 페이지에 접근했을 때, 이 컴포넌트를 통해 오류 메시지를 표시하고 홈으로 쉽게 돌아갈 수 있는 링크를 제공합니다.

home

home 패키지는 하위 디렉토리 아주 많습니다.

index.tsx

Hero : 이커머스 웹사이트의 메인 페이지 상단에 위치하는 Hero 섹션을 담당합니다. 이 섹션은 방문자에게 가장 주목할 만한 상품이나 프로모션을 강조하는 중요한 부분입니다.

Categories : 사용자가 다양한 제품 카테고리를 시각적으로 탐색할 수 있도록 구성된 컴포넌트입니다.

NewArrivals : 새로운 제품을 소개하는 섹션을 렌더링하는 역할을 합니다. 이 컴포넌트는 최신 제품을 그리드 형태로 보여주며, 사용자는 'View All' 버튼을 통해 전체 상품 목록 페이지로 이동할 수 있습니다.

PromoBanner : 이커머스 웹사이트의 홈 화면에 프로모션 배너를 표시하는 역할을 합니다. 이 컴포넌트는 주목할 만한 할인 이벤트나 특별 프로모션을 시각적으로 강조하여 방문자의 관심을 끌고 구매를 유도하는 데 중점을 둡니다.

BestSeller : 이커머스 웹사이트의 홈 페이지에 이번 달의 베스트셀러 제품을 보여주는 역할을 합니다.

Countdown : 웹사이트에 타이머 기능을 제공하는 컴포넌트입니다. 이 컴포넌트는 특정 이벤트나 제품 출시 등의 중요한 순간까지 남은 시간을 시각적으로 표시합니다.

Testimonials : Testimonials 패키지는 사용자 피드백을 표시하는 섹션을 구성하는 역할을 합니다.

MailSuccess

사용자가 이메일을 성공적으로 보낸 후 표시되는 확인 메시지 화면을 담당합니다. 이 컴포넌트는 사용자에게 메시지 전송이 성공했음을 알리고, 홈 페이지로 돌아갈 수 있는 링크를 제공합니다.

MyAccount

MyAccount 패키지는 사용자 계정 관리 인터페이스를 제공하는 컴포넌트로 구성되어 있습니다. 이 패키지는 AddressModal.tsx, index.tsx, 그리고 tabsData.tsx 파일로 이루어져 있습니다.

Orders

Orders 패키지는 주문 관리 기능을 담당하는 모듈로, 사용자 주문의 조회, 편집, 상세 정보 확인 등의 작업을 지원합니다.

Shop

Shop 패키지는 사용자에게 다양한 방식으로 상품을 탐색하고, 손쉽게 상호작용할 수 있는 기능을 제공합니다.

ShopDetails

ShopDetails 패키지는 제품의 상세 정보를 시각적으로 제공하는 기능을 담당하며, 제품 이미지 미리보기 및 확대, 다양한 옵션(색상, 용량 등) 선택, 제품 설명 및 사용자 리뷰 탭 제공, 최근 본 상품 표시, 수량 조절 및 구매 버튼 등의 상호작용 기능을 포함합니다. 이를 통해 사용자가 제품 정보를 쉽게 확인하고 직관적으로 쇼핑할 수 있도록 돕습니다.

ShopWithoutSidebar

ShopWithoutSidebar 패키지는 사이드바 없이 제품을 그리드 또는 리스트 형식으로 표시하고, 정렬 및 필터링 기능과 페이지네이션을 제공하는 컴포넌트입니다.

ShopWithSidebar

ShopWithSidebar 패키지는 사이드바 필터를 통해 카테고리, 색상, 사이즈, 성별, 가격별로 상품을 쉽게 검색하고 탐색할 수 있도록 합니다.

Wishlist

Wishlist 패키지는 사용자가 관심 있는 상품을 저장하고 관리하는 기능을 제공합니다.

src/redux

애플리케이션의 상태 관리를 담당한다고합니다.

cart-slice.ts, wishlist-slice.ts, quickView-slice.ts와 같은 파일을 통해 장바구니, 위시리스트, 빠른 보기 모달 등의 상태를 관리하며, store.ts에서 이 모든 상태를 통합하여 Redux 스토어를 구성합니다. 이를 통해 전역 상태를 효율적으로 관리하고, 다양한 컴포넌트 간 데이터 흐름을 원활하게 합니다.

주로 애플리케이션의 내부적인 상태 관리를 담당하는 부분이라 UI와 직접적인 관계는 없습니다. 이 디렉토리 안의 파일들은 장바구니, 위시리스트, 빠른 보기 같은 기능들의 데이터 상태를 관리하고, 이러한 상태를 UI 컴포넌트에 전달해서 화면에 표시되도록 돕는 역할을 합니다.

src/types

types 디렉토리는 애플리케이션의 데이터 구조를 정의하는 역할을 합니다. 이 디렉토리에서 정의된 타입들은 코드 전반에 걸쳐 일관된 데이터 형식을 유지하도록 도와주며, 특히 TypeScript에서 타입 안정성을 보장하는 데 중요한 역할을 합니다.

즉 , src/types는 앱의 데이터가 어떻게 생겼는지 규칙을 정하는 곳 입니다.

끝... 오늘은 여까지

이주원

뭐가될지 모름

이전 포스트

Rookies-2025.02.07

다음 포스트

Rookies-2025.02.09

0개의 댓글