교보문고 클론 코딩 시작~

프로젝트를 시작한 계기

• 인프런에서 제로초님의 Next.js 강의를 들었는데, 너무 멋있어서 나도 저렇게 만들고 싶다는 생각이 들어 클론코딩을 시작을 하게 됐다. 

 

교보문고 선정 이유 

• 교보문고를 클론코딩을 한 사례가 없기도 하고, 옛날에 교보문고에서 책을 자주 구매를 했고, eBook을 통해 책도 자주 읽기 때문에 선택을 하게 됐다. 

 

기술 스택 

이번 프로젝트에서는 백엔드 없이 < 프론트엔드 > 중심으로 구현을 했다. 

 

현재 사용한 기술 스택 

• Framework : Next.js 15 (App Router 사용)
• Styling : CSS Module
• Language :  TypeScript
• State Management : Zustand
• Authentication: Auth.js(Next.Auth) ( 카카오 로그인)

 

교보문고 메인 페이지

 

헤더, 책 리스트 컴포넌트

푸터 컴포넌트

 

위의 이미지를 컴포넌트로 선정한 이유 

 

교보문고 웹사이트를 분석해 보니, 

헤더바, 책 리스트가 여러번 반복 되고 있었다. 

그래서 중복을 피하면서 웹사이트의 핵심 요소를 포함하는 3가지 컴포넌트를 만들었다.

 

 

Header Component-Navigation Bar

헤더 컴포넌트

 

헤더 컴포넌트 부터 만든 이유는 모든 페이지에서 공통으로 사용이 되고 있어서,

헤더 컴포넌트를 만들어두면, 다른 페이지들을 작업을 할 대 재사용하기 좋을 것같아서, 제일 먼저 만들게 되었다.

 

메인 페이지를 작업 하면서 가장 오래 걸리고, 개인적으로 힘들었던 부분이 네비게이션 바였다.

 

처음에는 크기와 위치가 원하는 대로 나오지 않았고, 스타일이 의도한 대로 적용이 되지 않아, 만들고 지우고 다시 만드는 작업을 여러 번 반복을 해야 했다... 

 

브랜드 더보기 버튼에 border 값을 주지 않았는데, 검정색 테두리가 계속 나타났다..

Computed 탭을 확인을 해보니, border 속성이 자동으로 적용되는 것을 확인을 하고, 

border : none 속성을 넣어서 해결을 했다. 

 

이런 문제를 겪으면서, CSS 속성이 예상치 못한 방식으로 적용될 수 있다는 점을 다시 한번 배우게 되엇다. 

특히, Computed 탭을 적극적으로 활용하는 것이 중요하다는걸 체감한 경험이 되었다.

 

 

네비게이션 바의 Search div & servicebox 간격 문제 해결

 

margin 값을 조정했지만, 적용이 되지 않아서, 이럴 때 강제적으로 !important를 사용을 하면 강제적으로 스타일을 덮어 씌울 수 있다는걸 알게 되어서 정상적으로 조정을 할 수 있게 됐다. 

 

기존 CSS에서 강하게 적용된 스타일이 있을 경우 우선순위를 고려 해야 한다는점을 알았다.

 

 

완성된 네비게이션바

 

Header Component - Search Bar

 

Search Bar

 

Link 태그의 text-decoration 문제

 

navigation, search에서 Link 태그를 사용을 했는데, 자동으로 밑줄이 들어가는 문제를 알게됐고, 

 

text-decoration: none; 적용을 해서 밑줄을 제거를 했다.

 

최종 Header Component

 

 

Main Component

Main Component

 

Main Component에서 시간이 오래 걸리고 어려웠던 부분은 오늘만 특가 부분에서 페이지네이션을 하는 부분이였다.

 

하이픈 값을 줬는데도 하이픈은 안나오고, (01-04) 부분의 간격을 조정해도 위의 이미지처럼 계속 삐뚫어지게 나왔다.

 

span 태그에서 하이픈을 줘도, 안나왔는데 이유는 :before 가상 요소에도 content 값으로 하이픈 값을 줘야 하는지 몰랐었다.

 

:before { contant : "-";} 값을 추가를 해줘서, 하이픈 문제는 해결을 할 수 있었고,

 

간격 문제에서는 display: inline -block 값을 안줘서 삐뚫어지게 된거였다. 

 

완성된 Main Component

 

 

Foouter Component

 

Footer에서 더보기 같은 버튼은 재사용을 할 수 있어서, 정말 빠르게 구현을 할 수 있었다. 

 

이전까지 CSS를 인강으로만 배웠고, 실제 프로젝트에서 적용해 본 경험이 적었기 때문에 CSS 작업에 대한 두려움이 있었는데, 

이번 클론 코딩을 하면서 직접 CSS를 다루다 보니 재미를 느끼게 되었고,

특히 처음에 어렵게 느껴졌던 부분도 하나씩 해결하면서 성취감을 느낄 수 있었다. 

 

 

최종 결과물