Front-Vue-SCSS) MypageView

목표

UI 구성 및 배치

미리보기

전체코드

<script setup lang="ts"></script>

<template>
  <div class="main-container">
    <div class="profile-container">
      <div class="profile-img">
        <img src="@/assets/img/2023071701753_0.jpg" alt="profileImg" />
      </div>
      <div class="profile-box">
        <div class="nickname">cl0ud_</div>
        <div class="intro">
          안녕하세요안녕하세요안녕하세요안녕하세요안녕하세요안녕하세요안녕하세요안녕하세요
        </div>
      </div>
    </div>
    <div class="post-container">
      <div class="post-box" v-for="i in 5">
        <div class="post-preview-img">
          <img
            src="@/assets/img/E64AD629-05F6-4E88-8A2C-5A37046CD571_1_105_c.jpeg"
            alt=""
          />
        </div>
        <div class="post-title">글 제목</div>
        <div class="post-contents">
          내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용
          내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용
        </div>
        <div class="post-info">
          <div class="post-time">2023.08.15</div>
          <div class="post-coments">댓글 5개</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
@import '@/assets/View/Mypage.scss';
</style>

후기

대충 전체적인 구조만 구상하고 작업을 시작했다. 포스트 부분은 생각보다 괜찮게 나왔지만, 아무리봐도 프로필 부분이 마음에 안든다. 나중에 수정할 듯 하다. 프로필 아래쪽으로는 카테고리 같이 글을 구분해서 분류해줄 수 있는 무언가를 넣으려고 한다. 생각하고 있는 방식으로는

1. 태그로 분류 -> velog 방식
2. 직접 게시판을 선택해서 등록 시 분류 -> velog의 시리즈, 네이버블로그의 게시판

대표적인 두 가지의 형식을 따르고자 한다. 기능은 최대한 익숙하고 심플할수록 좋기 때문에.. 뭐가 됐든 넣어보고 디자인에 따라 우측으로 배치할 수도 있을 것 같다.

깃 허브 링크

Github