LikeLion 출석부 제작하기#4

minsgy·2021년 1월 21일
1

Toyproject

목록 보기
4/6

해당 프로젝트는 이곳 에 들어가시면 확인 가능하며, 개인 미니 프로젝트 입니다.


완료 구현

  • 총 출석 현황 리스트 페이지 구현
  • 출석현황 페이지 이동 버튼 SidePanel_Header에 추가
  • 왼쪽 / 오른쪽 스크롤 구현

**하루만에 2번이나 갈아엎은 피땀눈물 가득했던 AttendanceList 페이지였다. **

바둑판 UI가 얼마나 구현이 힘들고, 고려해야 할 사항이 많은지 느꼈다...^^
나는 행/열 둘 다 계속 변화되어서 적용되는 페이지를 구성해야 했다.

사실 모양 상 테이블 형식의 표 모양이기 때문에...
table 태그를 이용해서 구성을 시작했다. 이 선택은 고통의 시작이였다.

페이지 구성방식에 대해서 간단하게 과정을 적어보도록 하겠다.


종합 출석 리스트 구현하기 -<table> 이용

사실이 table 태그는 정말 사용하기 어렵고, 생각해야 할 점이 많은 태그이다.
여러 이슈도 존재할 뿐더러, 적용되지 않는 스타일 형식 값들이 많기 때문이다.

참고사이트를 보면서 해도 **왜!! 스타일이 안먹히는지 스트레스를 받았다. **
그렇지만, 여기 굉장히 좋은 내용이 많아서 추천한다.

<div style={{ textAlign: 'center',
    width: '1000px',
      height: '600px', 
        overflow: 'scroll'
            }}>
                <table style={{ width: "100%",
      height: '80vh',
        overflow: 'auto' }} hover responsive>
                    <thead>
                        <tr>
                            <th style={{ width: '100px', 
                              display: Schedule.length <= 0 && 'none', 
                                borderBottom: '2px solid #e4e4e4',
                                  borderRight: '2px solid #e4e4e4' }}> 이름 / 스케줄</th>
                            {renderScheduleList(Schedule)}
                        </tr>
                    </thead>
                    <tbody>
                        {renderUserStateList(User)}
                    </tbody>
                </table>
            </div > 

이게 무슨 잡코드인가...?
스타일 안먹혀서 Inline CSS로 어떻게든 해결하려는 나의 모습이 보인다..

결과 로딩 페이지 화면

생각보다 UI 구성이 잘 짜진 것 같다.
그런데...? **값이 추가되면 Table 태그에 맞춘 크기대로 적용되어서, Cell 크기가 자꾸 바뀐다.
**

진짜 별 짓을 다하고, 여러 스타일을 먹여봐도 Scroll도 적용되지 않고 여러 고생을 하다가...
유지 보수 등을 고려해서 새로운 방식으로 코드를 짜기로 결심했다... 몇 시간의 고생을 .. 버리고...

그렇게 선정한 다른 방법은 리스트( ul, li )를 이용한 UI 구성이였다.


종합 출석 리스트 구현하기 -<ul>, <li> 이용

왜 이걸 선택했을까?

내 서비스의 방식으로 Data set을 받아와서 출력하는 방식은 **한 줄 마다의 데이터를 입력하고 있다. **

그래서 리스트의 나열 방식을 이용하면 코드도 깔끔하고 보기도 좋아 질 것 같아, 리스트 태그를 선택했다.

결과적으로 나오게 된 페이지이다.

Flex를 이용한 레이아웃 구성으로 큰 어려움은 없었지만, table에 비해 커스텀 할게 많았다.
맘대로 바꿀 수 있어서 너무 행복하다는 것~!

	<div style={{
                width: '70%',
                overflow: 'auto'
            }}>
                <ul className="Header_Container">
                    <li className="Header_list">이름 / 스케줄</li>
                    {renderScheduleList(Schedule)}
                </ul>

                <ul className="UserState_Container">
                    {renderUserStateList(User)}
                </ul>
            </div>

아까보다 훨~~씬 간결하면서, 스타일도 잘 먹혀서 깔끔하게 작성하였다.
**좀 더 효율적으로 관리를 하기위해서, Header, List**를 나누어서 작성하였다.

두 가지 방법을 이용하면서 느낀 점으로, 마크업 관련하여 관리를 해야한다고는 생각했지만...
** Table을 사용하지 않고 List를 이용했다고 마크업이 파괴되었다고 보기는 어렵다고 생각한다.**

내용 목록 값도 보여주고 의미 상 리스트랑 크게 벗어나지 않는다고 생각하기 때문.

이렇게 주요 필수적인 페이지들은 전부 완성했다. 나머지 권한 부여에 대해서 고민해보면 될 것 같다.


남은 구현 목록

  • 벌금 시스템 구현 ( 출석 입력 페이지에서 입력 Modal 고민중 )
  • Auth 인증 페이지 구현 ( 운영진 전용 코드 제공 )

벌금 같은 경우는 무조건적으로 완성 할 계획이고, Auth 인증 페이지의 경우는 좀 더 구상해볼 생각이다.


주요 로직 설명은 다음 글에서 좀 더 다뤄보도록 할 예정이다.

짧았던 5일 정도의 프로젝트 기간 동안 많은 걸 배워서 뿌듯했다.
😍 좋은 마무리를 위해 더 열심히 할 것이다~

profile
커뮤니케이션은 내 성장제🔨

관심 있을 만한 포스트

0개의 댓글