최종 프로젝트 회고 #1 - 레이아웃

---

최종 프로젝트를 분해해보고자 한다.

노션에 대부분의 역할과 프로젝트에 대한 설명이 적혀있긴 하지만, 필자의 역할에 대해 간단하게 작성하자면,

우선 필자가 맡은 페이지는 마이페이지(모바일사이즈 유저보드, 복약 전체 리스트, 내가 쓴 댓글), 캘린더 페이지 내 약 등록, 그 외 페이지 내에 자잘한 모달들이었다.

#1에선 필자가 맡은 페이지와 레이아웃에 대해서 간단히 소개하고자 한다.

---

🟡 src\app(root)\mypage\page.tsx

import React from "react";
import MediLists from "@/components/templates/mypage/MediLists";
import UserBoard from "@/components/templates/mypage/UserBoard";
import Posts from "@/components/templates/mypage/posts";

const MyPage = () => {
  return (
    <div className="max-w-[996px] mx-auto px-4 desktop:px-0 py-4 mt-20 desktop:mt-24">
      {/* 데스크탑 사이즈 레이아웃 */}
      <div className="hidden desktop:flex desktop:flex-row desktop:gap-[25px] mb-8">
        <div className="w-[301px]">
          <UserBoard className="h-full" />
        </div>
        <div className="w-[670px]">
          <MediLists className="h-full" />
        </div>
      </div>
      
      {/* 모바일 사이즈 레이아웃 */}
      <div className="flex flex-col gap-10 mb-8 desktop:hidden">
        <UserBoard className="w-full" />
        <MediLists className="w-full" />
      </div>
      
      {/* Posts는 항상 아래에 배치 */}
      <div className="mt-10 desktop:mt-8">
        <Posts />
      </div>
    </div>
  );
};

export default MyPage;

필자의 마이페이지 페이지 레이아웃.

파일명에서 유추할 수 있 듯 app router를 사용하여서 페이지를 정의하였다. 반응형도 구현하였기에, 사이즈에 맞추어 값을 준 상태이다.

---

+ 🟣 app router와 page router의 차이?

-> app router는 파일 시스템 기반 라우팅을 더 유연하게 처리할 수 있으며 디렉터리 구조에 따라 페이지를 정의.

-> next는 app 디렉터리 안의 파일과 폴더를 기준으로 라우트를 자동으로 생성.

-> (root)는 특정 그룹을 나누기 위한 용도로 사용. 괄호로 감싸진 폴더는 url 경로에 영향을 미치지 않고 내부적으로 경로를 구성하는데에만 사용.

-> mypage 폴더 내에 있는 page.tsx 파일로 매핑. => 해당 경로에 렌더링될 컴포넌트를 정의할 파일.

//

그렇다면 페이지 라우터는?

-> pages 디렉토리의 파일을 기반으로 URL 경로가 생성

-> 경로 설정: pages/about.js → /about 경로로 자동 매핑.

보통은 next 12 이하버전에서 사용하기 떄문에 app router를 사용하는 추세이다.

---

피그마에 정의된 사이즈대로 값을 준 모습이다.

---

🟡 src\app(root)\mypage\Medications\page.tsx

그리고 복약 정보를 보여주는 페이지의 레이아웃.

// src/app/(root)/mypage/Medications/page.tsx

import Medications from '@/components/templates/mypage/Medications';

export default function MedicationsPage() {
  return (
    <div className="max-w-[1000px] mx-auto px-4 py-4"> {/* MyPage와 동일한 최대 너비 및 좌우 여백 설정 */}
      <Medications />
    </div>
  );
}

이또한 디자이너 분이 지정해주신 피그마 값에 맞게 주었다.