22.11.21

커피 내리는 그냥 사람·2022년 11월 21일

TIL

항해99

목록 보기

63/108

최종 팀 프로젝트 18일차

1. 오늘 한 일

스크럼 회의 및 디자이너 전체회의
프론트엔드 간 Merge 후 CSS 역할 분담 및 Jira 정리
(개인) CSS 작업(상품등록, 게시물 상세보기, 댓글, 상품 게시글 수정 + Seller페이지 완성)
jira 등 팀원 체크

1. 스크럼 회의 및 디자이너 전체회의

- 스크럼회의(14:00)
  - FE : CSS 작업(로그인, 회원가입, 마이페이지, 마이페이지 설정창, 게시물 상세보기) + CSS(상품등록), 무한스크롤 + 전체적 기능 다 되도록 세팅
  - BE : 이메일 가입 쪽 수정, DB쪽 어느 정도 완료 + 스웨거 태그 작업 + RestfullAPi화, 이슈 안되는거 고치기+ 무한스크롤, 검색, 정렬, AvatarUrl 받기 진행중
  - 협의사항 :
    - MVP 이후 차주 일정에 대해 미리 정리 ⇒ 백엔드에 전해주기(e.g. : 웹소캣 사용 유무 ; 실시간 알림, 실시간 채팅 + 판매중 & 판매완료, 가격책정 API, issueID, PostID 재활용방법)
    - 프론트끼리 맞춰볼 추후 협의사항 : 회원가입 벨리데이션(이메일)
디자이너 전체회의(20:30)
- 색감 : 단색 / 폰트 : 찾아보는 중
- 검색은 버튼 없이 엔터로
- 버튼 통일 : 가격책정은 데이터 나오는데로(익일 중)
- 댓글 : 네이버 블로그처럼
- 사진 올리는 버튼 : 올리는 버튼은 왼쪽 고정. 사진은 오른쪽에 균일하게 뜨기
- 수정페이지 : > 버튼만 눌리게
- 메인 : 더보기는 게시물로 navigate, 전체 레이아웃은 둥글게 or 각지게 선택할 것.

2. 프론트엔드 간 Merge 후 CSS 역할 분담 및 Jira 정리

    - CSS 나눠짐
        - 마이페이지 메인 
        - 가격책정 
        - 게시물 및 이의제기 , 시작화면 => 내가 맡은 부분

3. (개인) CSS 작업(상품등록, 게시물 상세보기, 댓글, 상품 게시글 수정 + 셀러페이지 완성)

디자이너 와이어프레임 보고 최대한 유사하게 제작 시작
난이도 있던 작업 : 댓글 파트
-> 컴포넌트 새로 나누고 props 주는 과정에서 팀원의 도움 받아 진행

문제 : 삭제 버튼 누르려고할 시 모든 토글이 열리는 현상 발생

(comment.jsx)
import React, {useState} from 'react'
import { useDispatch, useSelector } from "react-redux";
import photoIMG from "../assets/photoIMG.png";
import styled from "styled-components";

const Comment = ({comment, __deleteComment}) => {
  // Comment 컴포넌트에서 comment, __deleteComment 받아온 뒤(댓글 삭제)
  const { post } = useSelector((state) => state.details);
  const dispatch = useDispatch();
  const onDeleteButton = (payload) => {
    if (window.confirm("정말 삭제하시겠습니까?")) {
      dispatch(__deleteComment(payload));
    }
  };
  // 원래 진행하려던 코드 진행

  const [editTg, setEidtTg] = useState({
    isEdit: false,
  });
  const editToggleHandler = () => {
    const newEdit = {
      isEdit: !editTg.isEdit,
    };
    setEidtTg(newEdit);
  };
  
  // 토글값 지정
  return (
    <div>
          <StContainer>

            <Buttons>
              <div>
            <img
              style={{
                width: 25,
                height: 25,
                borderRadius: "50%",
                float: "left",
                marginRight: 10
              }}
              src={
                post.avatarUrl == (null || undefined)
                  ? photoIMG
                  : post.avatarUrl
              }
            />
              <span>{comment.nickname} </span>
              </div>
              <Tgbutton onClick={editToggleHandler}>···</Tgbutton>
          {editTg.isEdit === true ? (
          <Button onClick={() => onDeleteButton(comment.id)}>
                삭제
              </Button>
          ) : null}
          
          </Buttons>

              </StContainer>
              <span> {comment.comment}</span>
              <hr/>
              
            </div>

  )
}

//CSS도 다른 분 도움 받아 진행. Div 위치 잘 파악하자. 색깔 입혀서 하면 편하다.

export default Comment
// 전체 컨테이너
const StContainer = styled.div`
width: 100%;
height: 50px;
position: relative;
`


//삭제 토글
const Buttons = styled.div`
display: flex;
justify-content: space-between;
width: 100%;
height: 40px;
`

const Tgbutton = styled.button`
  border: none;
  font-weight: 600;
  width: 50px;
  background-color: white;
`;

const Button = styled.button`
  position : absolute;
  top : 40px;
  right : 0px;
  width: 50px;
  height: 40px;
  /* margin-bottom: 3px; */
  border: 1px solid #ddd;
  border-radius: 5px;
  background-color: #fff;
  &:hover {
    background-color: red;
  }
`;

(CommentList.jsx)
props 받아서 진행된 코드라 참고만 하려고 올림

import React, { useState } from "react";
import styled from "styled-components";
import Comment from "./Comment"
const CommentList = (props) => {
  return (
    <>
      {props.commentList &&
        props.commentList.map((comment, index) => {
          return (
            <div key={index}>
             <Comment comment={comment} __deleteComment={props.__deleteComment}/>
             </div>
          );
        })}
    </>
  );
};

export default CommentList;