[프로젝트 1차] Cha.Dam.Hwa (3/1 - 2일차)

프로젝트1차 표지

---

1.  Nav 만들기 (컴포넌트화 완료)

1-1. logo 만들기

차담화 로고

SoolDamHwa의 로고처럼 우리가 만들 ChaDamHwa의 로고도 의미있게 만들고 싶었다. 차(TEA)를 파는 사이트이니, 찻잎과 꽃, 그리고 차를 마시면서 대화하는 의미를 주고 싶어서 말풍선도 함께 추가해서 한 송이의 꽃처럼 표현했다. 또한, 우리나라 전통차를 파는 사이트라서 영어를 사용하기 보다, 한글을 사용해서 만들고 싶었다. 그래서 한글 초성만을 이용해서 깔끔하고 심플하게 만들어보았다. 

 

1-2. Nav 만들기 (컴포넌트화)

차담화 - nav

웹사이트에서 계속 반복적으로 나타나는 Nav는 컴포넌트화를 시켜주었다. 
우리는 "구독하기" 메뉴를 이번 프로젝트에서 하지 않기로 했기때문에 메뉴에는 "담화마켓(스토어)"과 "로그인"만 보여진다.
flex를 사용해서, 가로 정렬을 했고, 로고와 메뉴가 세로선상으로 가운데에 위치하게 하기위해 align-items : center;를 사용했다. 또한, 스크롤을 내렸을 때, 고정된 위치를 유지하고 싶어서 position:fixed;와 z-index값을 주었다.

---

2.  Footer 만들기 (컴포넌트화 완료)

차담화 footer

2-1. Footer aside-left 만들기

Footer는 왼쪽에 배치한 내용과 오른쪽에 배치한 내용을 하나의 태그로 묶어서 작성했다.
그래서 부모태그에 flex를 주어서 가로정렬로 배치한 모습이다. 컴포넌트화를 시킬 때, HTML의 <b></b>태그가 적용되지 않아서 span태그로 클래스를 주어서 글씨를 진하게 나올 수 있게 만들었다. 또한, 간격도 같이 주어서 위의 사진처럼 나올 수 있도록 구현해보았다.  

2-2. Footer aside-right 만들기

오른쪽의 내용을 작성할 때, 컴포넌트화를 시키는데 이미지가 엑박이 떴었다. 그 이유는 절대경로를 써야하는데, 상대경로를 써서 엑박이 떴다. 살짝 당황했다. 그리고,고객센터의 글과 sns이미지들을 flex를 준 후, flex-direction: column;으로 세로로 배치 후에 space-between을 주어서 끝 쪽에 배치 될 수 있게 했고, 오른쪽에 배치하게 하기 위해서 text-align : right;를 주었다.

---

3.  Login-Page 만들기

3-1. form 만들기

input요소를 사용하는 이메일, 비밀번호, 버튼을 form요소 안에서 작성했다. 그 이유는 나중에 리액트에서 이벤트 기능을 줄 때, 엔터를 누르거나 클릭버튼을 직접 클릭해도, 자연스럽게 로그인할 수 있게 만들기 위해서다. submit 이벤트를 주기위해서 form요소 안에 작성했다. border값에 none을 주면 input창의 border선이 사라진다. 그 후 border-bottom을 주어서 아래 영상처럼, 밑줄 부분만 남겨서 깔끔하게 만들 수 있다.

3-2. a 태그 밑줄 수정하기

a 태그를 쓰면 자연스럽게 밑줄 기능이 생긴다. 하지만 글자와 바로 붙어있어서 답답함을 주었다. 그래서, a 태그에 text-decoration : none;을 주어서 a태그의 밑줄 기능을 없앤 뒤, border-bottom을 주어서 바로 붙어있는 밑줄이 아닌 좀 간격이 있는 밑줄로 구현해보았다. 

완성된 login페이지

---

성장 포인트
(깨달은 점, 어려운 점 등..)

• 리액트 이미지 넣는 부분에서 상대경로로 길게 써줬는데 이미지가 엑박이 떴다. 그래서 다시 경로를 절대경로로 바꾸어주니 엑박이 수정되었다. 이런 이미지 엑박 상황에서 벗어날 수 있는 경험을 해보았다.
• nav에 메뉴중 '로그인' 메뉴에 노란색 속성을 주고 싶었는데 잘 안되서 inline style을 주어야하나 고민했지만(인라인에 스타일주는건 최대한 지양해야 했기에..), 다시 상세하게 셀렉터 값을 주고 스타일 속성을 주니, 색이 제대로 들어오게 되었다.
  
  
• nav와 subnav에 스크롤을 내려도 상단위치로 고정을 주어서 사용자가 다시 메뉴를 보기위해 스크롤을 올려야하는 불편함을 해소했다. 하지만, 이 과정에서 position : fixed를 주게 되니 nav와 subnav가 붕뜨게 되어 나머지 요소들이 nav와 subnav를 인식하지 못해서 상단위로 붙어서 figure의 일부가 가려지게 되었다. 이를 해결하기 위해서 우선, nav와 subnav에 z-index값을 주어서 메뉴들이 다른 요소에 가려지지않게 수정했고, figure가 전체 다 보이게 하기위해서 margin-top값을 주어 해결하였다.
  
  
• 리액트에서 컴포넌트 작업이 가장 어렵게 느껴지고, 상대적으로 html,css에 비해서 리액트 실력이 많이 부족한데, 로그인 페이지를 만들면서 컴포넌트를 해보게 되니, 좀 이제 익숙해지는 기분과 함꼐 좀 알 것 같다는 생각이 들게 되었다.
  
  
• Footer의 inner에서 flex를 줬는데 justify-content : center가 먹히질 않았다. 그래서 margin-left로 간격을 줘서 눈대중으로 가운데에 맞췄지만, 너무 찜찜한데.. 왜 적용이 안되는지 몰라서 답답했다. 왜냐면 html, css파일에서는 제대로 작동이 됬기 때문이다. => (width 값에 fit-content를 주니 해결되었다 !)