Writing (#21)

* Add: 프로젝트 캠프 1주차 리뷰 작성 * Update: last modified 날짜 추가 * Update: 수업 사진 추가 및 사진 alt text 수정 * Update: FontAwesomeIcon 대체 - 초기 렌더링 문제 방지 * Update: ProfileImage 숨기기 * Fix: 이미지 크기에 따른 모바일 화면 overflow 오류 해결 * Add: Next.js 프로젝트 캠프 2주차 내용 작성 * Add: 'nextjs' 태그 추가 * Update: 커버 이미지 변경 * Change: 폴더 날짜 변경 * Add: 이미지 추가 * Add: 프로젝트 캠프 3주차 리뷰 작성 * Update: 오탈자 수정 및 hydration 참고 링크 추가 * Update: auth 기본 설명 수정 * Add: 사용자 인증 내용 추가 * Update: 사용자 인증 내용 수정 * Change: 프로젝트 카테고리; Course -> Camp * Update: 앱 라우터 그룹 참고 내용 추가 * Change: 폴더 날짜 변경 * Pull (#11) * Writing (#10) * Add: 프로젝트 캠프 1주차 리뷰 작성 * Update: last modified 날짜 추가 * Update: 수업 사진 추가 및 사진 alt text 수정 * Update: FontAwesomeIcon 대체 - 초기 렌더링 문제 방지 * Update: ProfileImage 숨기기 * Fix: 이미지 크기에 따른 모바일 화면 overflow 오류 해결 * Add: Next.js 프로젝트 캠프 2주차 내용 작성 * Add: 'nextjs' 태그 추가 * Update: 커버 이미지 변경 * Change: 폴더 날짜 변경 * Add: 이미지 추가 * Add: 프로젝트 캠프 3주차 리뷰 작성 * Update: 오탈자 수정 및 hydration 참고 링크 추가 * Update: auth 기본 설명 수정 * Add: 사용자 인증 내용 추가 * Update: 사용자 인증 내용 수정 * Change: 프로젝트 카테고리; Course -> Camp * Update: 앱 라우터 그룹 참고 내용 추가 * Change: 폴더 날짜 변경 * Delete contents/2024-06-07 directory 중복 디렉토리 삭제 * Update: post table style * Add: 4주차 프로젝트 진행 리뷰 작성 * Update: 날짜 수정 * Update: 폴더 날짜 수정 * chore: change emoji * chore: add favicon * chore: change input checkbox * write: 프로젝트 캠프 5주차 리뷰 작성 * style: 다크 모드 적용 (#15) * Writing (#14) * chore: change emoji * chore: add favicon * chore: change input checkbox * write: 프로젝트 캠프 5주차 리뷰 작성 * [Style] useDarkMode 훅 추가 * [Style] flex 스타일 수정 * [Feat] 테마 토글 버튼 컴포넌트 추가 * [Style] prefer-color-scheme 스타일 적용 * chore * chore: 수정 * write: 오류 해결 과정 정리글 작성 * write: 프로젝트 캠프 6주차 진행 과정 리뷰 작성 * chore: update tag * style: update * write: dark-mode context * Merge * Merge * Merge * fix: delete replicate * fix: bold in table * chore: change image file format (png -> jpg) & update posts * write: about add dark mode toggle function in blog * refactor: separate icons * write: 프로젝트 넷째주 진행 리뷰 작성 * . * try to fix: build error * try to fix:: * try to fix::
callmebyneon · Jul 14, 2024 · c23d558 · c23d558
1 parent 7e69ef2
commit c23d558
Showing 1 changed file with 48 additions and 67 deletions.
diff --git a/contents/2024-07-15/thenextjs-week-7.md b/contents/2024-07-15/thenextjs-week-7.md
@@ -54,78 +54,59 @@ emoji: '💻'
 
 아래 코드에서 현재 프로젝트의 컴포넌트들을 크게 비즈니스 로직/데이터 계층과 표현 계층으로 나눠본다. 예를 들어 메인 페이지에서의 스터디 리뷰 카드 슬라이드를 컴포넌트를 나눌 때, Swiper.js를 사용해 만든 전체 코드를 Swiper(`swiper/react`) 컴포넌트를 이용하여 기본적인 컴포넌트 디자인과 구조를 만드는 컴포넌트, 데이터를 보여줄 각 슬라이드 요소의 디자인 표현 컴포넌트(presentaional), 데이터를 사용하여 실제 페이지 컴포넌트에서 바로 사용하게 될 슬라이드 섹션 컨텐츠 컴포넌트로 각각의 관심사별로 레이어를 구분하여 이해할 수 있다.
 
-```tsx
-// Swiper Slide Component
+```jsx
+// ReviewSwiper.tsx
 ...
-export default function ReviewSwiper({ children }: TProps) {
-  return (
-    <>
-      <div className="flex items-center justify-center w-full mx-auto overflow-hidden relative">
-        <div className="swiperContainer w-[1900px] mx-auto">
-          <Swiper
-            modules={[Navigation, Pagination, A11y]}
-            navigation={{
-              prevEl: '.prevNavigation',
-              nextEl: '.nextNavigation',
-            }}
-            spaceBetween={24}
-            slidesPerView={3.5}
-            centeredSlides={true}
-            grabCursor={true}
-            pagination={{
-              clickable: true,
-              renderBullet: ...
-            }}
-          >
-            {children}
-            <div className="bg-gradient-to-r from-white w-[520px] h-full absolute top-0 left-0 z-10"></div>
-            <div className="bg-gradient-to-l from-white w-[520px] h-full absolute top-0 right-0 z-10"></div>
-          </Swiper>
-        </div>
-        <div className="navigations">
-          <div className="prevNavigation">
-            <SliderNavigationButton direction="prev" />
-          </div>
-          <div className="nextNavigation">
-            <SliderNavigationButton direction="next" />
-          </div>
-        </div>
-      </div>
-    </>
-  )
-}
+<div className="flex items-center justify-center w-full mx-auto overflow-hidden relative">
+  <div className="swiperContainer w-[1900px] mx-auto">
+    <Swiper
+      modules={[Navigation, Pagination, A11y]}
+      navigation={{
+        prevEl: '.prevNavigation',
+        nextEl: '.nextNavigation',
+      }}
+      spaceBetween={24}
+      slidesPerView={3.5}
+      centeredSlides={true}
+      grabCursor={true}
+      pagination={...}
+    >
+      {children}
+      <div className="bg-gradient-to-r from-white w-[520px] h-full absolute top-0 left-0 z-10"></div>
+      <div className="bg-gradient-to-l from-white w-[520px] h-full absolute top-0 right-0 z-10"></div>
+    </Swiper>
+  </div>
+  <div className="navigations">
+    <div className="prevNavigation">
+      <SliderNavigationButton direction="prev" />
+    </div>
+    <div className="nextNavigation">
+      <SliderNavigationButton direction="next" />
+    </div>
+  </div>
+</div>
 ```
 
 ```tsx
-// UserStudyReviewItem
+// UserReviewItem.tsx
 ...
-export default function UserReviewItem({
-  review,
-  className,
-}: {
-  review: TReview
-  className?: string
-}) {
-  return (
-    <div
-      className={
-        clsx(
-          'snap-center rounded-twenty overflow-hidden w-[520px] flex flex-col border border-line-alt select-none mb-12 ',
-          className
-        )
-      }
-    >
-      <div className="flex flex-col items-center justify-center py-4 px-16 bg-card h-[200px]">
-        <p className="text-body-400 w-[380px] text-justify">{review.text}</p>
-      </div>
-      <div className="flex flex-col items-center justify-center gap-2 py-2 h-[90px] relative">
-        <div className="triangle w-0 h-0 border-x-[15px] border-y-[25px] border-t-[#f0f4fa] border-b-transparent border-l-transparent border-r-transparent absolute top-0 left-1/4 -translate-x-full"></div>
-        <p className="text-label-600">'{review.studyName}' 후기</p>
-        <p className="text-label-400">{review.writerKeyword}</p>
-      </div>
-    </div>
-  )
-}
+<div
+  className={
+    clsx(
+      'snap-center rounded-twenty overflow-hidden w-[520px] flex flex-col border border-line-alt select-none mb-12 ',
+      className
+    )
+  }
+>
+  <div className="flex flex-col items-center justify-center py-4 px-16 bg-card h-[200px]">
+    <p className="text-body-400 w-[380px] text-justify">{review.text}</p>
+  </div>
+  <div className="flex flex-col items-center justify-center gap-2 py-2 h-[90px] relative">
+    <div className="triangle w-0 h-0 border-x-[15px] border-y-[25px] border-t-[#f0f4fa] border-b-transparent border-l-transparent border-r-transparent absolute top-0 left-1/4 -translate-x-full"></div>
+    <p className="text-label-600">'{review.studyName}' 후기</p>
+    <p className="text-label-400">{review.writerKeyword}</p>
+  </div>
+</div>
 ```
 
 ```tsx