GPTea☕ 프로토타입 초기 스타일링(styled-components)

css 스타일링을 위해 styled-components를 사용했다. pages와 components들에 컴포넌트가 많다. 컴포넌트별로 스타일링을 하려면 각각 css또는 scss 파일을 만들어야 하는데, 복잡해질 것 같았다. styled-components는 리액트 파일에서 스타일링을 할 수 있어 파일을 따로 만들어줘야 할 필요가 없는 점이 가장 큰 장점이다. styled-components 라는 이름처럼 스타일링 또한 컴포넌트화 한다. 🙌 github repository 🙌 GitHub - evergarden0412/gptea-web Contribute to evergarden0412/gptea-web development by creating an account on GitHub. github.com
Project/GPTea.tsx 2023. 4. 6. 00:19
GPTea☕ 프로토타입 라우팅(react-router-dom)

라우팅으로 기본적인 화면들을 만들었다. dummy data로 채팅방 목록과 메세지 목록을 만들어서 임시로 그렸다. 스크랩 목록은 별도로 존재하지 않고 메세지 목록의 스크랩 프로퍼티 값으로 필터링하여 스크랩 페이지에 그린다. 각 데이터마다 id값이 있고 id값이 url의 param이 되어 페이지를 구분한다. 클릭하여 url을 이동하는 것 말고는 button의 기능과 form 기능은 없다. 🙌 github repository 🙌 GitHub - evergarden0412/gptea-web Contribute to evergarden0412/gptea-web development by creating an account on GitHub. github.com
Project/GPTea.tsx 2023. 4. 5. 15:04
GPTea☕ 컴포넌트, 라우트 분리

리액트 컴포넌트와 라우터를 정했다. 이름을 짓는데 시간이 오래 걸렸다. Chats, Chat, ChatItem 등 라우터로 쓸 것인지 단순 컴포넌트인지에 따라서 생각을 해보았다. Chats페이지에 chat 리스트가 뜨는데, 1. 하나하나의 chat 리스트아이템을 Chat이라고 하고 채팅방을 ChatRoom으로 하는 방법 2. 하나하나의 chat 리스트아이템을 ChatItem이라고 하고 채팅방을 Chat으로 하는 방법 중에서 2번을 택했다. 리스트는 채팅방 삭제 기능을 하기는 하지만 리스트 아이템일 뿐이고 조금 더 메인의 역할을 하는 채팅방을 Chat으로 하기로 했다. 채팅방의 path 엔드포인트는 /chats/chatId 로 할 것이다. Scraps페이지에 scrap 리스트가 뜨는데 따로 모달창을 띄우지..
Project/GPTea.tsx 2023. 3. 31. 15:22
GPTea☕ 와이어프레임2

Scrapbook 페이지와 Scraps 페이지 목업을 작성했다.
Project/GPTea.tsx 2023. 3. 30. 15:37
GPTea☕️ 와이어프레임1

Text Wireframe 순서 및 방향 원칙 목록은 위가 최신: scrap, highlight, chats 내용은 밑이 최신: 내용에서는 사람이 왼쪽 gptea가 오른쪽 pagination X 재정렬 기능 XLogin Page첫 페이지. 웰컴사인과 네이버로그인 처음에 표시Chat 목록 Page제목을 달’수‘있음(제목 없으면 ’제목없음‘) Chat 삭제 가능Chat 내용 Page메세지에 스크랩버튼 ♡, 본문, 작성시간 포함Scrap PageChat 목록 page와 유사한 구성이지만 내용이 일정 길이 이상에서 생략, 눌렀을때 새 창이 뜸 modal 방식으로 -> 딴걸 볼려면 꺼야함 새창에서 해당 Chat으로 이동할 수 있음. Chat으로 이동하면 URI fragment사용하여 해당 메세지로 스크롤 이동해있..
Project/GPTea.tsx 2023. 3. 30. 01:31
MyLifePlaylist💖 좋아하는 것(영화, 책, 음악 등) 목록 만들기

My Life Playlist 음악 어플리케이션의 플레이리스트처럼 내가 좋아하는 것들 목록을 만들고 순위를 조정하고 저장할 수 있는 웹 사이트이다. 진행기간: 2022년 9월~ 2022년 10월 프로젝트 개요 노래, 영화, 도서, 음식 등 카테고리를 생성하고, 타이핑 필드와 선택 필드를 추가할 수 있다. 타이핑 필드는 리스트 추가 시 사용자가 직접 타이핑한 값을 저장하고, 선택 필드는 카테고리 생성 시 원하는 옵션들을 같이 생성하여 리스트 추가 시 사용자가 선택한 옵션 값을 저장한다. TypeScript, React, firebase, Recoil, styled-components, react-hook-form, react-beautiful-dnd 회원가입과 로그인, 유효성 검사 카테고리 동적으로 생성하..
Project/MyLifePlaylists.tsx 2023. 3. 20. 20:38
질문 게시판👀 만들기

Agora States Project 자바스크립트의 기초 문법과 DOM조작법을 학습하고 이를 이용하여 질문 게시판 만들기 프로젝트를 진행했다. 바닐라 자바스크립트 프로젝트이다. 프로젝트 개요 이름과 제목, 내용을 입력하여 질문을 등록할 수 있다. localStorage를 사용하여 새로고침을 하여도 데이터가 저장되어 있다. localStorage를 이용하여 '좋아요'로 저장한 게시물을 따로 모아서 볼 수 있다. 더미 데이터에 있는 질문들의 내용은 외부링크로 접속하여 읽을 수 있다. 외부링크를 접속해야 하는 경우 질문을 클릭할 수 있게 하였고, 그렇지 않은 경우 클릭할 수 없다. 페이지네이션을 구현하였다. 페이지 개수에 맞게 페이지 리스트가 렌더되게 하였고, 전체 게시물과 '좋아요'한 게시물 모두 페이지네이..
Project/질문게시판.js 2023. 3. 10. 21:28
1 2 3