codestates / codestates/MUNADU-client

[Dev-Log] 5월 21일 금요일 / 류제천

Open
#65 0 comments 0 reactions 1 assignee Claimed by @rjc1704 View on GitHub
Dominant language
TypeScript
Stars
0
Forks
1
PR merge metrics
No merged PRs in 30d

Description

### 오늘은 어떻게 프로젝트에 기여했나요?
* 준비된 6가지 설문지를 통해 얻은 필터링 기준으로 30개의 무술 중 순차적으로 필터해서 남은 결과에 화면에 보여주는 작업 수행
* 필터링 결과가 0개일 경우, 무나두 운영진이 선별한 추천무술 6가지를 추천해주는 것을 Bare minimum으로 우선적으로 수행(추후 Advanced로 설문 답변에 따라 다음 질문과 선택지가 유동적으로 변하는 알고리즘 구현 예정)
### 오늘의 프로젝트에서 힘든 점은 무엇인가요?
* 설문조사 박스 세로 가운데 정렬하기.
공용 컴포넌트로 Header를 사용해야 하고 그 다음 Block 컴포넌트로 설문조사 Box를 두었을 때 헤더 컴포넌트 때문에 단순히 justify-content: center 로는 세로 가운데 정렬이 되지 않았다. 그래서 처음엔 margin-top 속성을 이용해서 정렬했으나, 설문 필터링 결과가 5개 이상 많이 나오면 설문조사 Box의 높이가 달라져 margin-top 값이 유동적으로 변해야만 했다. 추후에 모바일에서도 볼 수 있게 필히 반응형을 구현할 예정이기 때문에 absolute나 fixed는 사용하지 않기로 해서 설문조사 box의 offsetHeight를 받아와서 margin-top값을 유동적으로 변경하려고 했으나.. 더 간단한 방법을 결국 찾아 냈다. 우선 margin: auto 0; 으로 헤더부분 제외하고 최대한 가운데 정렬을 맞춘 뒤, 헤더 높이만큼을 전체 page에서 padding-bottom을 줌으로써 유동적인 세로 가운데 정렬을 구현했다.
![image](https://user-images.githubusercontent.com/77093944/119160376-2b0a8280-ba93-11eb-9063-71182fb1ead6.png)

### 내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?

- [ ] 무술 상세페이지 전체 디자인 틀 잡기 (Styled Component 작업).
- [ ] 상세페이지에서 사형의 조언(리뷰) 서버에서 읽어 오고 수정/삭제 할 수 있도록 작업

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.