Portfolio

진짜 웨더클로젯

20220308 회의

밸런스 게임을 주제로 제작하기

https://bellruns.com/ 를 뛰어넘는 페이지 만들기 (목표는 piku처럼 유입할수 있도록)

참고 블로그

https://velog.io/@getelementby_/redux-tool-kit을-추가해보자-featnext-js-typescript

환경설정

NextJS (typeScript)

eslint

prettier

chakraUi

Redux ToolKit (RTK)

다음에 할일

redux 기본 세팅

대략적인 와이어프레임으로 기능 정리, 역할 나누기?

메인페이지, 질문 등록(로그인해야지만 가능), 질문 보기(공유, 답변) - 선택 전/후, 마이페이지

테스트!!! 적용 - 가능하면 시범까지?

20220302 회의 (주제 구체화)

최소기능 구현1️⃣2️⃣3️⃣

회원가입

회원가입 시 별도의 정보는 받지 않음 (추후 링크를 입력 받을 수 있음)

질문 등록 기능

1️⃣링크는 기본적으로 uuid (추후에 링크를 설정 하게할지는 고민해보기)

1️⃣질문 내용 작성

1️⃣태그 추가하기(최대 3개까지)

1️⃣주관식 후 객관식 추가

2️⃣응답이 닫히는 날짜(자동적으로 닫히게?) or 수동으로 열고 닫기 → 우선순위 뒤로

질문 공유 기능

1️⃣링크 복사

1️⃣카카오, 트위터, 페이스북, 인스타 공유

답변 쓰기 기능

1️⃣익명으로 답변 쓰기 (우선 주관식 50자 이하)

기술 스택

next.js

Typescript

Chakra UI

Jest (React testing library)

redux

제목 : waggle

무물,

다물, 입다물?

.... ask answer... → aa

답답..

와글와글 wgwg waggle waggle

속닥속닥

사쿠라 페이퍼..

다음주까지 할일

주제 구체화 아이디어 가져오기, 레퍼런스 찾기

라우트 어떻게 설정할건지

테스트 적용하기

20220220 회의

푸름

좁혀진 웨더클로젯

타겟

시작은 10~30대 추후 사용자가 늘어난다면 중장년층도?

컨셉

기존과 동일

기능

사용자가 옷차림 등록시 해당 옷의 브랜드 태그 가능
해당 옷을 구매할 수 있는 링크 등록 가능
검색 시 다양한 필터로 검색 가능하도록 (온도, 태그, 브랜드 등등)
다른사람들의 옷차림을 볼 수 있지만 누가 등록한것인지는 알 수 없도록. (대신 해당 옷차림을 pick 하게 되면 사용자의 선호 패턴에 추가되도록)
사용자가 등록한 패턴을 기반으로 메인화면에 오늘은 ~~ 옷차림이 좋겠어요 같은 메세지 띄우기 or 최초 접속하면 토스트로 띄우기

나만의 미니 홈페이지

타겟

자신(사업체 포함)을 홍보하고 싶은 사람
포트폴리오, 이력서 용도로 사용하고 싶은 사람

컨셉

링크트리 - https://linktr.ee/

기능

링크 등록
링크 공유
....?

컴포넌트 백과사전

타겟

최초 타겟은 프론트엔드 개발자. 추후 모든 개발자

컨셉

codepen의 프론트엔드 버전
개발자가 구현하고자 하는 컴포넌트(기능)에 대한 좋은 코드를 참조할 수 있음

기능

코드에디터를 사용하여 해당 코드 공유 가능
해당 코드의 결과를 바로 볼 수 있도록 사진 첨부가능
본인의 깃허브 연동 가능 및 소스코드 직접 첨부가능
언어, 라이브러리 별 필터링 가능
daily, weekly, monthly 별 추천수 높은 코드들 리스팅

소정

좁혀진 웨더클로젯 (기록중점, 공유기능 축소)

문제

오늘 온도에 맞는 옷을 찾기 어렵다.

이전에 비슷한 온도일 때 내가 입었던 스타일과 만족도를 알고싶다

컨셉, 방향성

공유보다는 기록에 초점을 맞춰서

날씨에 맞는 옷차림 기록에 최적화시키기 → 날씨+옷차림+나의 평가를 한번에 볼 수 있다

쌓이면 재미있는 시각화나 나의 성향같은걸 볼 수 있게 하면 재밌을 것 같기도

다른 사람들과 공유하는게 아닌 인기있는, 나와 비슷한 유저들의 대표 태그들을 보여주는 정도도 괜찮을 것 같음

장점

기존에 다뤘던 주제이기 때문에 개발과 관련된 새로운 학습이 크지 않다

단점

옷차림을 기록하기 위해 이 사이트를 쓰게 만드는 강력한 요소가 없다 → 재밋거나, 도움이되거나 둘 중 하나의 요소는 꼭 챙겨야 할 것 같음

나만의 미니 홈페이지 (스마트스토어 같은)

문제

가볍게 가질 수 있는 나만의 온라인 공간이 필요하다

컨셉, 방향성

어떤 온라인 공간이 필요할지 범위를 좁히면 좋을 것 같다(ex_이력서링크, 결제링크 등)

방문자 분석이 붙으면 차별점이 될 수 있을듯 → 기술적으로 가능할지 의문이 들긴함

장점

컨셉만 명확하면 흥미를 끌기 쉬울 것 같음

단점

노션, 우피같은 기존 서비스들과 차별점을 찾을 수 있을지가 관건일듯

UI 위키? 컴포넌트 백과사전 같은거

문제

코드펜은 바닐라js, css를 중심으로 되어있고, 이외의 라이브러리들은 내부 코드를 보기 어렵다

사람들마다 코드를 짜는 방식이 다양하고, 사용하는 프레임 워크가 다양하다

컨셉, 방향성

사람들이 자기가 만든 컴포넌트(코드 자체)를 올릴 수 있도록 한다(UI기반 코드펜, 언스플래쉬나 로띠파일즈 같은)

사용한 라이브러리, 프레임워크를 명시해서 자신이 원하는 코드를 필터해서 볼 수 있다.

깃헙에만 자신이 만든걸 보여주는게 아니라 더 오픈된 공간에서 피드백을 받는다거나 자랑을 할 수 있도록(자신의 깃헙 등과 연결시켜서 홍보 수단으로 삼을 수도 있다)

확장한다면, 디자이너가 디자인 파일을 올리면 참여하고 싶은 사람들이 코드로 만들어줄 수도 있을 것 같음.(이벤트성의 첼린지나 해커톤처럼 진행할 수도 있을듯, 아니면 초반에 데이터를 모으는 용도로 활용할 수도 있을듯)

장점

프론트엔드에 특화된 커뮤니티? 같은걸 만들 수 있다

학습과 프로젝트를 함께 가져갈 수 있다

단점

디자인적으로 흥미가 있을지

디자이너 직군까지 포함한다고 하면 스케일이 좀 커질 수도 있을듯

지수

웨더클로짓의 축약버전

컨셉(VP): 나에게 맞는 옷을 묶어주는 스타일북 + 일기

이모지를 활용해서 나의 옷을 평가하면 어떨까?
날씨가 비슷할 때 내가 좋게 평가한 옷을 가져올 수 있도록 구성하기

미니 홈페이지

컨셉1: 초기사업자들을 위한 미니 명함용 홈페이지
컨셉2: 스타트업에 구인구직을 하려는 사람들을 위한 포트폴리오 사이트

레퍼런스: 서핏 커리어 https://www.surfit.io/p/career

UI컴포넌트 백과사전

인터렉션 디자인 위주로 보여주면 어떨까?
비슷한 디자인 패턴끼리 묶어서 보여줄 수도 있을것 같다.

진환

...;

종현

구현의 용이성

드래그 앤드 드래그 방식으로 쉽게 모듈을 위 아래를 쉽게 바꿀 수 있으면 좋겠음

다른 것과의 차별점

노션: 너무 기능이 많음
우피: 유료

20200213 회의 (주제 1개 정하기)

주제 정하기

결정된 주제

나만의 미니 홈페이지 (스마트스토어 같은)

명함, 커리어 관련 홈페이지

업체 홍보

후보 (문제, 타겟, 컨셉, 방향성 서치 및 고민하기)✅

좁혀진 웨더클로젯 (기록중점, 공유기능 축소) ✅✅✅

공유보다는 기록에 초점을 맞춰서 → 기록하면 뭐가 좋지? 검색?? 선택할 수 있는 태그를 많이 늘려서 코디 대세나 흐름을 볼 수 있게? → MBTI로 온보딩

나만의 미니 홈페이지 (스마트스토어 같은) ✅✅✅✅

UI 위키? 컴포넌트 백과사전 같은거

디자인시스템, 라이브러리 만드는걸 좀 더 확장시킨다면, 로띠처럼 사람들이 자기가 만든 컴포넌트 올릴 수 있게…?

UI기반 코드펜, 언스플래쉬나 로띠파일즈 같은…? 라이브러리, 프레임워크에 맞는 컴포넌트를 골라서 사용할 수 있게, 깃헙레포와 연결시킨다던지

디자인 파일을 올리면 참여하고 싶은 사람들이 코드로 만들어준다던지? 단순한 UI일수도 있고, 화면일수도 있고?

좋아요를 많이 받은 코드가 상단으로 노출된다던지?

https://wwit.design/

기타 아이디어

음식점 위생정보를 보여주는 서비스(잘하는 가게는 더 칭찬해주고, 문제가 있는 가게들을 조심할 수 있게) → api 확인 필요

슈퍼로컬과 같이 한 지역에 오래 있으면 뱃지를 주는 서비스 (지역체크인 -> 활동 -> 뱃지)

스터디원들을 위한 성취형 자기개발 서비스 ( 영어 등 특정 스터디 만을 위한 챌린저스를 만들면 어떨지?)

재밌는 성격테스트, MBTI 테스트 (나에게 맞는 식물?)

가구 큐레이션 서비스

웨더클로젯 이전에 논의중이였던 부분

기술스택

Next Js

Typescript

emotion

상태관리 라이브러리 (recoil)

비동기 처리 라이브러리 (react-query)

stylelint

eslint (airbnb 끌 필요가 있는 부분은 끄기)

디자인시스템

메인 컬러는 뭘로할지? (진환 - 검정색도 좋을듯 싶네요)

Figma

프레이머 + rollup.js (추후에 도입)

디자이너 한명 구하기

기획, 기능 명세

어디까지 가져갈건지

백엔드, API

strapi + cloudinary (개인 아이디파서 환경변수 각자 저장)

(Cludinary 이미지 업로드 테스트 완료)

firebase 로 다하기

mork data로 하기.

API 명세

선협님 API

구현 안된 부분 (meta)

날씨 서울로만 되어있음.. → 사용자의 현재 위치 기반으로 가져오기

채팅?

스타일태그 - 유저가 추가할 수 있도록?

포스트 - 날씨 데이터 추가(포스트 등록 시에 - 현재 위치의 현재 날씨 정보를 디폴트로, 어디서/언제 찍었는지로 수정할 수 있게해서 해당 날씨데이터 불러올 수 있도록)

평가 - 추웠어요, 좋았어요, 더웠어요

앞으로의 일정

화,목요일 아침 10시에 만나기

환경설정

api 모델 정리

디자인시스템 → 디자이너가 오면 수정하는 방식으로, 처음에는 자체적으로 컴포넌트 만들어서 진행

브랜치명

#이슈번호

커밋메세지

ex)✨ feat: 뭐시기 뭐시 (#이슈번호)

✨ feat: 뭐시기 뭐시 vs ✨feat: 뭐시기 뭐시 (이모지 뒤에 띄어쓰기 할 것인지 아닌지 정할 것)

TODO

reset css 적용

## API 안내 API Host는 `http://13.209.30.200` 입니다. API 사용에 문제가 있다면 문의바랍니다. * 주의할 점으로 API에 예외처리가 안되어있는 경우가 있습니다. 이 경우 프론트엔드에서 Form Validation을 해주시면 됩니다. * 응답이 모델로 되어있는 경우 하단 모델 안내를 확인해주세요. * Optional<Type>으로 적혀있는 경우 값을 넣지 않아도 동작하는 필드입니다. * Nullable<Type>으로 적혀있는 경우 null이 내려올 수 있는 필드입니다. * []는 리스트 타입입니다. * API URL에 중괄호로 감싸져 있는 부분은 Path Variable 입니다. ### 인증 #### 로그인 사용자가 이메일과 비밀번호로 서비스에 로그인합니다. > POST /login ##### Request Body ```json { "email": String, "password": String } ``` ##### Response 200 OK ```json { "user": User, "token": String } ``` #### 회원가입 사용자가 이메일과 비밀번호로 서비스에 가입합니다. > POST /signup ##### Request Body ```json { "email": String, "fullName": String, "password": String } ``` ##### Response 200 OK ```json { "user": User, "token": String } ``` #### 로그아웃 사용자가 로그아웃 합니다. > POST /logout #### 인증 확인 사용자가 인증이 되었는지 확인합니다. > GET /auth-user ##### Request Header ``` Authorization: bearer JWT토큰 ``` ##### Response ``` User ``` ### 사용자 #### 사용자 목록 사용자 목록을 불러옵니다. > GET /users/get-users ##### Request Params ``` offset: Optional<Number> limit: Optional<Number> ``` ##### Response ``` User[] ``` #### 현재 접속 중인 사용자 목록 현재 접속 중인 사용자 목록을 불러옵니다. > GET /users/online-users ##### Response ``` User[] ``` #### 사용자 정보 특정 사용자 정보를 불러옵니다. > GET /users/{userId} ##### Response ``` User ``` #### 프로필 이미지 변경 나의 프로필 이미지를 변경합니다. > POST /users/upload-photo ##### Request Header ``` Authorization: bearer JWT토큰 ``` ##### Request Body FormData `isCover`를 반드시 `false`로 넣어야 합니다. ``` isCover: false image: Binary ``` ##### Response ``` User ``` #### 커버 이미지 변경 나의 커버 이미지를 변경합니다. > POST /users/upload-photo ##### Request Header ``` Authorization: bearer JWT토큰 ``` ##### Request Body FormData `isCover`를 반드시 `true`로 넣어야 합니다. ``` isCover: true image: Binary ``` ##### Response ``` User ``` ### 설정 #### 내 정보 변경 나의 정보를 변경합니다. > PUT /settings/update-user ##### Request Header ``` Authorization: bearer JWT토큰 ``` ##### Request Body ```json { "fullName": String, "username": String } ``` ##### Response ``` User ``` #### 비밀번호 변경 내 계정 비밀번호를 변경합니다. > PUT /settings/update-password ##### Request Header ``` Authorization: bearer JWT토큰 ``` ##### Request Body ```json { "password": String } ``` ### 채널 #### 채널 목록 채널 목록을 불러옵니다. > GET /channels ##### Response ``` Channel[] ``` #### 채널 정보 특정 채널 정보를 불러옵니다. > GET /channels/{channelName} ##### Response ``` Channel ``` ### 포스트 #### 특정 채널의 포스트 목록 특정 채널의 포스트 목록을 불러옵니다. > GET /posts/channel/{channelId} ##### Request Params ```json offset: Optional<Number> limit: Optional<Number> ``` ##### Response ``` Post[] ``` #### 특정 사용자의 포스트 목록 특정 사용자의 포스트 목록을 불러옵니다. > GET /posts/author/{authorId} ##### Request Params ```json offset: Optional<Number> limit: Optional<Number> ``` ##### Response ``` Post[] ``` #### 특정 채널에 포스트 작성하기 특정 채널에 포스트를 작성합니다. > POST /posts/create ##### Request Header ``` Authorization: bearer JWT토큰 ``` ##### Request Body FormData ``` title: String, image: Binary | null, channelId: String ``` #### 특정 포스트 상세 보기 특정 포스트의 정보를 불러옵니다. > POST /posts/{postId} ##### Response ``` Post ``` #### 내가 작성한 포스트 수정하기 내가 작성한 포스트를 수정합니다. > PUT /posts/update ##### Request Header ``` Authorization: bearer JWT토큰 ``` ##### Request Body FormData 이미지를 삭제하려면 `imageToDeletePublicId`에 `imagePublicId`를 넣어주세요. ``` postId: String title: String image: Binary | null imageToDeletePublicId: Optional<String> channelId: String ``` #### 내가 작성한 포스트 삭제하기 내가 작성한 포스트를 삭제합니다. > DELETE /posts/delete ##### Request Header ``` Authorization: bearer JWT토큰 ``` ##### Request Body ```json { "id": String } ``` ### 좋아요 #### 특정 포스트 좋아요 특정 포스트에 좋아요합니다. > POST /likes/create ##### Request Header ``` Authorization: bearer JWT토큰 ``` ##### Request Body ```json { "postId": String } ``` ##### Response ``` Like ``` #### 특정 포스트 좋아요 취소 특정 포스트에 좋아요한 것을 취소합니다. > DELETE /likes/delete ##### Request Header ``` Authorization: bearer JWT토큰 ``` ##### Request Body ```json { "id": String } ``` ##### Response ``` Like ``` ### 댓글 #### 특정 포스트에 댓글 달기 특정 포스트에 댓글을 작성합니다. > POST /comments/create ##### Request Header ``` Authorization: bearer JWT토큰 ``` ##### Request Body ```json { "comment": String, "postId": String } ``` ##### Response ``` Comment ``` #### 특정 포스트에 작성한 내 댓글 지우기 특정 포스트에 작성한 내 댓글을 삭제합니다. > DELETE /comments/delete ##### Request Header ``` Authorization: bearer JWT토큰 ``` ##### Request Body ```json { "id": String } ``` ##### Response ``` Comment ``` ### 알림 #### 나의 알림 목록 나의 알림 목록을 불러옵니다. > GET /notifications ##### Request Header ``` Authorization: bearer JWT토큰 ``` ##### Response ``` Notification[] ``` #### 알림 확인 처리 나에게 온 알림을 읽음처리 합니다. > GET /notifications/seen ##### Request Header ``` Authorization: bearer JWT토큰 ``` #### 알림 생성 상대방에게 알림을 보냅니다. > POST /notifications/create 원래는 서버에서 해주는게 맞는 작업이지만 API 호출로 알림을 보낼 수 있도록 작성했습니다. ##### Request Header ``` Authorization: bearer JWT토큰 ``` ##### Request Body `notificationTypeId`는 type에 해당하는 객체의 id를 넣어주세요. * COMMENT일 경우엔 댓글 id * FOLLOW일 경우엔 팔로우 id * LIKE일 경우엔 좋아요 id * MESSAGE일 경우엔 메시지 id `postId`는 type이 FOLLOW일 경우엔 null로 보내주세요. ```json { "notificationType": "COMMENT" | "FOLLOW" | "LIKE" | "MESSAGE", "notificationTypeId": String, "userId": String, "postId": Nullable<String> } ``` ##### Response ``` Notification ``` ### 팔로우 #### 특정 유저 팔로우 특정 유저를 팔로우합니다. > POST /follow/create ##### Request Header ``` Authorization: bearer JWT토큰 ``` ##### Request Body ```json { "userId": String } ``` ##### Response ``` Follow ``` #### 특정 유저 언팔 특정 유저를 언팔합니다. > DELETE /follow/delete ##### Request Header ``` Authorization: bearer JWT토큰 ``` ##### Request Body ```json { "id": String } ``` ##### Response ``` Follow ``` ### 메시지 #### 나의 메시지함 (소통한 유저 목록) 나와 메시지함을 불러옵니다. > GET /messages/conversations ##### Request Header ``` Authorization: bearer JWT토큰 ``` ##### Response ```json Conversation[] ``` #### 특정 사용자와 소통한 메시지 목록 특정 사용자와 소통한 메시지 목록을 불러옵니다. > GET /messages ##### Request Header ``` Authorization: bearer JWT토큰 ``` ##### Request Params ``` userId: String ``` ##### Response ``` Message[] ``` #### 특정 사용자에게 메시지 전송 특정 사용자에게 메시지를 전송합니다. > POST /messages/create ##### Request Header ``` Authorization: bearer JWT토큰 ``` ##### Request Body ```json { "message": String, "receiver": String // 사용자 id } ``` ##### Response ``` Message ``` #### 메시지 확인 처리 특정 사용자와 나눈 메시지를 읽음처리 합니다. > PUT /messages/update-seen ##### Request Header ``` Authorization: bearer JWT토큰 ``` ##### Request Body ```json { "sender": String // 사용자 id } ``` ## 검색 #### 사용자 검색 사용자를 검색합니다. > GET /search/users/{query} ##### Response ``` User[] ``` #### 전체 검색 (포스트, 사용자) 포스트와 사용자를 검색합니다. > GET /search/all/{query} ##### Response ``` (User | Post)[] ``` ## WebSocket 안내 ### on 클라이언트가 서버에게 데이터를 받습니다. #### SEND_MESSAGE 실시간으로 메시지를 받습니다. ``` Message[] ``` #### CREATE_NOTIFICATION_REQUEST 실시간으로 생성된 알림을 받습니다. ``` Notification[] ``` ### emit 클라이언트가 서버에게 데이터를 보냅니다. #### CREATE_MESSAGE ``` Message ``` #### CREATE_NOTIFICATION ``` Notification ``` ## 모델 안내 API에 따라 모델 필드에서 일부분이 빠진 상태로 내려올 수 있습니다. `ex) 로그인 후 내려오는 User에는 프로필 이미지와 커버 이미지 필드가 제거됩니다.` ### User ```json { "coverImage": String, // 커버 이미지 "image": String, // 프로필 이미지 "role": String, "emailVerified": Boolean, // 사용되지 않음 "banned": Boolean, // 사용되지 않음 "isOnline": Boolean, "posts": Post[], "likes": Like[], "comments": String[], "followers": [], "following": [ { "_id": "6169e91316cb2265df003c6d", "user": "6169e58216cb2265df003bf4", "follower": "6169e206aa57d952c6dc1edd", "createdAt": "2021-10-15T20:48:19.816Z", "updatedAt": "2021-10-15T20:48:19.816Z", "__v": 0 } ], "notifications": Notification[], "messages": Message[], "_id": String, "fullName": String, "email": String, "createdAt": String, "updatedAt": String } ``` ### Channel ```json { "authRequired": Boolean, // 사용되지 않음 "posts": String[], "_id": String, "name": String, "description": String, "createdAt": String, "updatedAt": String } ``` ### Post ```json { "likes": Like[], "comments": Comment[], "_id": String, "image": Optional<String>, "imagePublicId": Optional<String>, "title": String, "channel": Channel, "author": User, "createdAt": String, "updatedAt": String } ``` ### Like ```json { "_id": String, "user": String, // 사용자 id "post": String, // 포스트 id "createdAt": String, "updatedAt": String } ``` ### Comment ```json { "_id": String, "comment": String, "author": User, "post": String, // 포스트 id "createdAt": String, "updatedAt": String } ``` ### Notification ```json { "seen": Boolean, "_id": String, "author": User, "user": User | String, "post": Nullable<String>, // 포스트 id "follow": Optional<String>, // 사용자 id "comment": Optional<Comment>, "message": Optional<String>, // 메시지 id "createdAt": String, "updatedAt": String } ``` ### Follow ```json { "_id": String, "user": String, // 사용자 id "follower": String, // 사용자 id "createdAt": String, "updatedAt": String } ``` ### Conversation ```json { "_id": String[], "message": String, "sender": User, "receiver": User, "seen": Boolean, "createdAt": String } ``` ### Message ```json { "_id": String, "message": String, "sender": User, "receiver": User, "seen": Boolean, "createdAt": String, "updatedAt": String } ```