[React/Node] 마켓컬리 클론코딩 5 - 리뷰 및 문의 페이지

• 리뷰 페이지

 

• 문의 페이지

 

<Review.js>

import React from "react";
import { review } from "../images/imgidx";
import WeekItem from "../images/WeekItem";

import "../css/Review.css";

const Review = (props) => {
    let item = props.item - 1;

    return (
        <div className="review_wrap">
            <h2 className="review">상품 후기</h2>
            <div className="review_photo">
                {review.map((idx)=>(
                    <button onClick="loction.href='/review/detail/:id'" key={idx.id}>
                        <img src={idx.src} />
                    </button>
                ))}
            </div>
            <div className="review_top">
                <div className="review_count">총 {review.length}개</div>
                <div className="review_sort">
                    <button className="recommended">추천순</button>
                    <div className="separator"></div>
                    <button className="recent">최근등록순</button>
                </div>
            </div>
            <div className="review_main">
                {review.map((idx) => (
                    <Review_Main idx={idx} item={item}></Review_Main>
                ))}
            </div>
        </div>
    )
}

function Review_Main(props) {
    let strname = props.idx.name;
    let arrname = [...strname];
    let item = props.item;
    
    for (let i = 0; i < arrname.length; i++) {
        if (i > 0) {
            arrname[i] = "*";
        }
    }
    arrname = arrname.join('');

    return (
        <div className="review_main_item">
            <div className="writer_info">
                <p>{arrname}</p>
            </div>
            <article>
                <div className="item"><h3>{WeekItem[item].title}</h3></div>
                <p>{props.idx.desc}</p>
                <div className="photo">
                    <button onClick="location.href='review/detail/:id'"><img src={props.idx.src} /></button>
                </div>
                <footer>
                    <div className="date"><h3>{props.idx.date}</h3></div>
                </footer>
            </article>
        </div>
    )
}

export default Review;
//후기마다 사진 여러개 등록 구현 필요
//후기가 많을경우 후기를 페이지처럼 넘길 수 있도록 구현 필요
//후기 사진 많을 경우 "더보기" 구현 필요
//추후 추천순|최근등록순 정렬 구현 필요

 

이전의 다른 페이지와 크게 다른 부분은 없었다. 다만 중간에 각 데이터마다 이름을 가려주어야 하는데, 따로 빼서 하는게 좋을것 같아 Review_main이라는 함수를 만들었다.

 

<Review.css>

.review_photo button img {
    width: 120px; 
    height: 120px; 
    object-fit: cover;
}

.review_wrap h2 {
    font-size: 23px;
}

.review_wrap .review_photo {
    padding: 30px 0;
}

.review_wrap .review_photo button{
    background-color: transparent;
    padding-left: 5px;
    border: none;
}

.review_wrap .review_top {
    display: flex;
}

.review_wrap .review_count {
    font-size: 13px;
    font-weight: 600;
}

.review_wrap .review_sort{
    width: 20%;
    margin-left: auto;
    display: flex;
    justify-content: end;
    button {
        border: none;
        background-color: transparent;
        font-size: 13px;
        font-weight: 600;
    }
    padding-bottom: 60px;
}

.review_wrap .review_sort .separator {
    width: 1px;
    height: 13px;
    background-color: gray;
    margin: 3px 10px 0 10px;
}

.review_wrap .review_main_item {
    border-top: 1px solid rgb(232, 232, 232);
    border-bottom: 1px solid rgb(232, 232, 232);
    padding: 30px 0;
    display: flex;
    .writer_info{
        width: 20%;
        margin-left: 30px;
        font-size: 15px;
        font-weight: 600;
    }
    article{
        padding: 0;
        width: 80%;
    }
}

.review_wrap article {
    .item{ 
        color: rgb(163, 163, 163); padding-bottom: 15px;
        font-size: 12px;
    }
    p{
        font-size: 14px; font-weight: 600;
        padding-bottom: 15px;
    }
    .photo button{
        background-color: transparent;
        padding-left: 5px;
        border: none;
    }
    .photo button img {
        width: 120px;
        height: 120px;
        object-fit: cover;
        border-radius: 10px;
    }
    .date {
        color: rgb(163, 163, 163); 
        padding-top: 15px;
        font-size: 10px;
    }
}

전엔 잘몰랐는데 flex를 사용하는게 생각보다 편리한 부분이 많았다. 적용시키는 위치만 신경써주면 다양한 속성을 줄 수 있어서 좋은 것 같다.

나름 깔끔하게 작성한다고 작성했는데 여전히 바뀐게 없는 것 같다. 아무래도 선택자 네이밍도 네이밍이지만 선택자 선언에 대해서 좀 더 신경써야할 것 같다. 그리고 지금 보니 뭔가 겹치는 부분이 많아 보이는데, 이걸 한데 묶으면 좀 나아보일 것 같다.

 

리뷰 페이지는 간단한건 만들기 쉬웠지만, 아직 구현하지 못한 부분이 어렵다. 당장 사진의 갯수가 10개만 넘어가도 특정 개수 이상부터 더보기 표시로 치환해주어야하고, 리뷰도 게시판처럼 여러 페이지화 해야하고, 각 사용자마다 리뷰에 2개 이상의 사진을 올리면 이걸 또 어떻게 저장할 것인가가 문제이다. 일단은 다른 방법을 찾아볼 수도 있지만, 나중에 db를 연결해서 해야하기에 그 과정에서 해결해보려한다.

 

<QnA.js>

import React from "react";
import qnas from "../elements/Qnas";

import "../css/QnA.css";

const QnA = () => {
    return (
        <div className="qna_list_wrap">
            <div className="qna_head_wrap">
                <table>
                    <thead>
                        <tr>
                            <th className="title">제목</th>
                            <th className="writer">작성자</th>
                            <th className="date">작성일</th>
                            <th className="checked">답변상태</th>
                        </tr>
                    </thead>
                </table>
            </div>
            <div className="qna_list">
                <table>
                    <tbody>
                        {qnas.map((list) => (
                            <Qna_List list={list}></Qna_List>
                        ))}
                    </tbody>
                </table>
            </div>
        </div>
    )
}

function Qna_List(props) {
    const list = props.list;
    let checked = "";
    let strwriter = list.writer;
    let arrwriter = [...strwriter];
    
    for (let i = 0; i < arrwriter.length; i++) {
        if (i === 1) {
            arrwriter[i] = "*";
        }
    }
    arrwriter = arrwriter.join('');

    if (list.secret === true) {
        list.title = "비밀글입니다.";
    }

    if (list.checked === true) {
        checked = "답변완료";
    } else if (list.checked === false) {
        checked = "답변대기";
    }

    return (
        <tr key={list.id}>
            <td className="title">{list.title}</td>
            <td className="writer">{arrwriter}</td>
            <td className="date">{list.date}</td>
            <td className="checked">{checked}</td>
        </tr>
    )
}

export default QnA;
//문의 순서(최근 날짜가 상단에 오게 정렬)

 

이전에 게시판을 만들때와 매우 흡사했다. 다만 이번에는 table태그를 활용해서 구분(?)이 잘되도록 사용한다는 것을 배워 활용했다.

마찬가지로 반복되는 구간에 조건이 들어가서 따로 빼서 작성하였는데, 조건부분은 마땅히 좋은 방법이 생각나지 않아 약간 하드코딩 같은 느낌으로 해두었다.

이름 가리기는 더 나은 방법이 있는지는 모르겠는데, 저장된 이름은 string값이므로 배열로 바꾸어 2번째 인자부터 *로 바꾸어 저장하고 다시 string값으로 바꾸도록 하였다.

 

<QnA.css>

.qna_head_wrap table {
    border-top: 2px solid black;
    border-bottom: 1px solid black;
    padding: 20px 0;
    width: 100%;
}

.qna_head_wrap th {
    font-size: 15px;
}

.title {
    text-indent: 20px;
    width: 55%;
}

.writer {
    width: 15%;
    color: gray;
}

.date {
    width: 15%;
    color: gray;
}

.checked {
    width: 15%;
    color: rgb(111, 0, 128);
}

.qna_list table {
    width: 100%;
    td {text-align: center;}
    .title {
        margin-left: 10px;
        text-align: left;
    }
}

tr td {
    padding: 20px 0;
    border-top: 1px solid rgb(232, 232, 232);
}

'들여쓰기'라는 단어가 생각이 안나서 검색이 안되어서 그동안 패딩, 마진 등.. 억지로 어떻게든 앞에 들여쓰기를 하려고 했는데, 역시 있었다.. text-indent를 이용하면 된다.

 

 

 

일단은 뭔가 틀이 있어야 뭘 해보겠다 싶기도 했고, 이왕 만드는거 최대한 흡사하게 하다보면 react와 css 공부에 도움이 많이 될거 같아서 그렇게 진행했다. 아직까지는 일단 만족스럽게 하는 중이긴한데, 슬슬 아이템이 많이 들어가는 페이지를 만들다보니 약간의 한계가 느껴진다.

게시판을 만들때도 불편함을 느껴서 계획과 달리 db까지 손을 댔던 것인데, 그러니 당연히 지금도 불편한거 같기도 하다.

일단 하나하나 코드로 데이터를 저장해두어야 하는 것도 불편하지만, 페이지 구현을 하면서 '어차피 이 부분은 나중에 다른 코드(백엔드를 이용한)로 바꾸어야 하는 거 아닌가?' 하는 생각이 드니까 중간중간 넘어갈까 하는 생각도 많이 든다. 가급적이면 그런 부분도 만들어보는게 도움이 될거같아 최대한 해두었지만, 슬슬 java도 공부를 해두어야하지 싶다.

이어서 로그인 부분을 만들어두고 다른 페이지들은 사실 메인디쉬는 아니니 백엔드에 관심을 두어야겠다.

 

 

 

https://memo-code.tistory.com/39

마켓컬리 클론코딩 6 - 로그인 페이지