20220308 회의
- 밸런스 게임을 주제로 제작하기
- https://bellruns.com/ 를 뛰어넘는 페이지 만들기 (목표는 piku처럼 유입할수 있도록)
환경설정
- NextJS (typeScript)
- eslint
- prettier
- chakraUi
- Redux ToolKit (RTK)
다음에 할일
- redux 기본 세팅
- 대략적인 와이어프레임으로 기능 정리, 역할 나누기?
- 메인페이지, 질문 등록(로그인해야지만 가능), 질문 보기(공유, 답변) - 선택 전/후, 마이페이지
- 테스트!!! 적용 - 가능하면 시범까지?
20220302 회의 (주제 구체화)
최소기능 구현1️⃣2️⃣3️⃣
로그인
- 1️⃣카카오를 먼저 시도 (최대한 firebase 사용할 수 있도록)
- 2️⃣카카오 로그인에 문제가 있으면 구글로그인 진행
회원가입
- 회원가입 시 별도의 정보는 받지 않음 (추후 링크를 입력 받을 수 있음)
질문 등록 기능
- 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일수도 있고, 화면일수도 있고?
- 좋아요를 많이 받은 코드가 상단으로 노출된다던지?
기타 아이디어
- 음식점 위생정보를 보여주는 서비스(잘하는 가게는 더 칭찬해주고, 문제가 있는 가게들을 조심할 수 있게) → api 확인 필요
- 슈퍼로컬과 같이 한 지역에 오래 있으면 뱃지를 주는 서비스 (지역체크인 -> 활동 -> 뱃지)
- 스터디원들을 위한 성취형 자기개발 서비스 ( 영어 등 특정 스터디 만을 위한 챌린저스를 만들면 어떨지?)
- 재밌는 성격테스트, MBTI 테스트 (나에게 맞는 식물?)
- 가구 큐레이션 서비스
웨더클로젯 이전에 논의중이였던 부분
기술스택
- Next Js
- Typescript
- emotion
- 상태관리 라이브러리 (recoil)
- 비동기 처리 라이브러리 (react-query)
- stylelint
- eslint (airbnb 끌 필요가 있는 부분은 끄기)
디자인시스템
- 메인 컬러는 뭘로할지? (진환 - 검정색도 좋을듯 싶네요)
- Figma
- 프레이머 + rollup.js (추후에 도입)
- 디자이너 한명 구하기
기획, 기능 명세
- 어디까지 가져갈건지
백엔드, API
- strapi + cloudinary (개인 아이디파서 환경변수 각자 저장)
(Cludinary 이미지 업로드 테스트 완료)
- firebase 로 다하기
- mork data로 하기.
API 명세
선협님 API
## 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 } ```
구현 안된 부분 (meta)
- 날씨 서울로만 되어있음.. → 사용자의 현재 위치 기반으로 가져오기
- 채팅?
- 스타일태그 - 유저가 추가할 수 있도록?
- 포스트 - 날씨 데이터 추가(포스트 등록 시에 - 현재 위치의 현재 날씨 정보를 디폴트로, 어디서/언제 찍었는지로 수정할 수 있게해서 해당 날씨데이터 불러올 수 있도록)
- 평가 - 추웠어요, 좋았어요, 더웠어요
앞으로의 일정
화,목요일 아침 10시에 만나기
- 환경설정
- api 모델 정리
- 디자인시스템 → 디자이너가 오면 수정하는 방식으로, 처음에는 자체적으로 컴포넌트 만들어서 진행
브랜치명
#이슈번호
커밋메세지
ex)✨ feat: 뭐시기 뭐시 (#이슈번호)
✨ feat: 뭐시기 뭐시 vs ✨feat: 뭐시기 뭐시 (이모지 뒤에 띄어쓰기 할 것인지 아닌지 정할 것)
TODO
reset css 적용