0416 TIL (댓글 틀 만들기) 미니 팀 프로젝트 2일차!

안녕하세요~
미니 팀 프로젝트를 시작한 지 2일차인 오늘이지만 팀원 분들의 실력이 다들 월등하신 덕분에 생각했던 것보다 굉장히 잘 나아가고 있는 거 같아요

내일배움캠프에서 약 4~50일 간의 사전캠프를 수강한 후에 어제 본캠프에 뛰어들었는데요. 사실 본캠프가 기대되기도 했고 본캠프때는 팀 프로젝트 위주로 진행을 한다는 걸 알고 있었기에 더더욱 기대 반 두려움 반이였습니다!

본캠프가 시작함과 동시에 주어진 미니 팀 프로젝트 과제라서 괜히 내가 못 해서 팀원 분들한테 민폐를 끼치진 않을까, 속도가 너무 뒤쳐지진 않을까 하는 걱정이 앞섰지만 이런 걱정을 한 제가 무색할 정도로 모르는 게 있을 때 서로 물어보며 문제를 하나하나 헤쳐나가고, 다들 서로 맡은 바 엄청 열심히 진행해 주신 덕에 주어진 과제에 대한 두려움보단 팀원들과의 커뮤니케이션, 협업의 재미를 깨달은 거 같습니다.

협업을 할 시에, Git을 얼마나 사용할까? 했는데 막상 해보니 생각보다 훠어얼씬 중요하고 없어선 안 될 존재라는 걸 몸소 느꼈습니다 팀 프로젝트를 하면 할수록
"Git이 없었다면 엄청 불편했겠다..." 하는 생각이 머릿 속에서 떠나질 않았습니다..

떨리는 팀 프로젝트의 첫 주제는!!

• 우리 팀, 우리만의 이야기를 담을 수 있는 ”팀 소개 웹페이지”

  • 포함 내용
    1. 객관적으로 살펴본 자신의 장점
    2. [팀]과 [자신]에 대한 설명 및 MBTI
    3. 자신의 스타일, 협업 스타일 소개
    4. 우리 팀만의 특징과 추구하는 궁극적인 목표
    5. 우리 팀의 약속
    6. 팀원들의 블로그 주소

  이렇게 우리 팀의 특징, 성격 등 우리가 추구하는 목표!
  또한, 우리 팀 개인의 프로필 카드가 주된 주제였습니다.

  이렇게 주제를 받고 나서 본격적으로 이제 Figma를 킨 후..
  서로의 캠과 마이크를 킨 상태로 열심히.. 정말 열심히 회의를 한 결과
  
  

우리의 각오! 목표를 담아놓은 푸릇푸릇 새싹들이 생각나는 메인 페이지를
와이어프레임 형식으로 구성해 봤습니다.
(사전캠프 때 조별 과제 1등 조입니다✌️ 운이 좋았기에 다행ㅠㅠ)
예 죄송합니다 tmi 좀 티 안 나게 적어봤는데 티 많이 나나요?

여튼 메인 페이지를 구성한 뒤에 다음으로 어떤 페이지를 넣을까 고민하다가
두 번째로 구성한 페이지가 바로 팀원 소개 페이지입니다!

나름 동글동글 두리뭉슬 귀엽게 표현하고 싶은 욕심은 많은데 과연 구현을
할 수 있을 것인가에 대하여..

그리고 그 옆에는 각종 팝업창도 팀원끼리 다같이 만들어 봤습니다.

메인 페이지에 비하면 팝업창이 각져보이고 딱딱해 보이지만

지금은 예쁘게 꾸미는 것도 좋지만 원래 튜닝의 끝은 순정이라고들 많이 하시니깐 심플하게 가겠습니다

(예쁘게 꾸미지 못 한 핑계입니다 죄송합니다)

그래도 생각했던 것보단 진행 상황이 빨라서 다행인 거 같기도 하면서
더 열심히 잘하고 싶다는 욕심이 생깁니다

홈페이지를 구성하기 위한 요소들이 왼쪽에 하나하나 쌓일 때마다 되게 뿌듯한 거 같습니다. 특히 저 중에서도 제가 역할 분담을 맡은 곳이 있었는데요
멤버 프로필 소개 페이지에서 왼쪽 css와 그 게시글 아래 댓글 리스트, 댓글 등록을 위한 닉네임, 패스워드 그리고 댓글 등록 버튼을 포함한 댓글 폼을 맡았습니다!

멤버 프로필 소개 왼쪽 부분은 다른 팀원 분이 오른쪽 border를 만드는 김에 왼쪽도 border 박스를 만들어 주셔서
덕분에 편하게 했던 거 같습니다!

왼쪽 border를 짤 때는 사진에 보이는 4개의 항목들에 div class를 하나씩 붙인 다음, 내용을 적어주세요. 부분도 p태그로 감쌌습니다.

그리고 아래 댓글 폼 부분..은 만들면서도 제 미숙한 css 실력에 대해 반성을 하는 계기가 됐습니다! 다행스럽게도 모르는 부분이 있으면 팀원 분이
도와주시고 알려주셔서 우여곡절 끝에 코드를 어느정도 짰지만
더 열심히 해야겠다란 생각이 매분 매초 들었던 거 같습니다 ㅠㅠ 어쩜 이렇게
머리에 1개가 들어오면 기존에 들어있던 1개의 지식이 날아가는 거 같은지..

이 댓글폼을 만드는데에는 이 코드를 사용하였습니다. required()를 사용하여 닉네임,패스워드, 댓글 입력칸 중 하나라도 비어있다면 댓글 작성이 안 되도록 하였습니다. (백엔드 작업은 백엔드 맡으신 팀원 분이 해주셨습니다!)

이 css 코드를 사용하였습니다.

.commentList {
padding: 30px;
width: 1440px;
margin: 30px auto;
border: 1px solid #000000;
font-size: 18px;
box-sizing: border-box;
}
.commentList > h3 {
margin-bottom: 20px;
}

.userComment {
line-height: 50px;
border-radius: 1px;
}

.commentNickPw {
display: flex;
gap: 20px;
margin-bottom: 20px;
}
.nickname {
font-size: 18px;
font-weight: 550;
}

pw {
font-size: 18px;
font-weight: 550;
}

.comment {
width: 100%;
border-style: solid;
font-size: 18px;
font-weight: 450;
}
.commentLi {
border: 1px solid green;
padding: 10px;
}
.commentLi + .commentLi {
margin-top: 10px;
}
.commentForm {
width: 1440px;
border: 1px solid rgb(144, 198, 239);
box-sizing: border-box;
padding: 60px;
margin: 0 auto;
}
.button {
width: 100px;
font-size: 15px;
font-style: inherit;
background-color:#88fba6;
color: rgb(18, 10, 10);
}
.commentUp {
display: flex;
gap: 20px;
}

모르는 부분이 있으면 팀원분께 여쭤보고 열심히 전에 지급받았던 웹 개발 강의를
복습하면서 열심히 만들어 봤는데 확실히 전에 아무리 css 강의를 3회독 했어도
요 몇 주 동안은 자바스크립트 입문 공부를 하면서 JS만 해도 머리 과부하가 오면서 비교적 ss, html이랑은 거리가 멀어졌었는데 이번에 뼈저리게 느꼈습니다 다시는 멀리 하지 않겠습니다.. 그동안 자바스크립트만 신경써서 죄송합니다 css, html님들..

오늘 하루도 많이 깨닫고 배워가는 하루였습니다 다들 좋은 하루 보내세요~