10월 18일 : 기술스택, 컴포넌트 분석 및 설계

기술 스택 선정

Front-End

• CSS: styled-Component

• React: CRA, React Router

• State management Lib: context API

• HTTP 통신 : Axios

Build

• Deploy: Netlify

• Bundler: Webpack

• Builder: npm

Communication

• github

• slack

• notion

• zoom

IDE

• vscode

• webstorm

아키텍처 설계

컴포넌트 설계(디렉토리 구조 설계 까지 수정 예정)

start page

• Header
• (Logo)Image → base
• (Logo)Title → base
• NavigationBar
• Link * 4 → base
• Button → base

• (Logo)Title → base

• StoryCard
• (StoryCard)Image → base
• (StoryCard)Title → Text → base
• (StoryCardSub)Title → Text → base
• Button → base

• Divider → base

Home, 추천 애완용품, 산책 메이트, 펫 플레이스, 입양

• Header
• (Logo)Image → base
• (Logo)Title → base
• Button
• NavigationBar
• Link * 4
• Wrapper → base
• Badge → base
• (Profile) Image → base
• DropDown → Button → base

• ArticleCard
• CardInfo
• (Profile)Image → base
• (Profile)Name → Text → base
• Category → Text → base
• ArticleContent → Wrapper → div → base (Wrapper base 안에 div 추가하는 방식) ... 보류
• (Article)Image → base
• ArticleStatus (좋아요, 댓글) → Text → base
• (Article)Button → base

• ArrowUp → Button → base

Login

• Header
• (Logo) Title → Text → base

• (Logo) Image → base

• Input → base

• (Error) Text → Text → base

• Button → base

• Link → base

Profile Edit Page

• Header
• (Logo) Image → base
• (Logo)Title → Text → base
• Button → base
• NavigationBar
• Link * 4 → base
• Wrapper → base
• Badge → base
• (Profile)Image → base
• DropDown → button → base

• (Cover) Image → base o←<

• ProfileCard
• (Profile)Image → base
• Upload → base
• Profilename → Text → base
• Divider → base
• CardIcon → Image → base
• Text → base
• Button → base

• Form
• Label → base
• Text → base
• Input → base
• SelectBox → base
• Button → base
 

Posting Page

페이지

• Header
• LogoImage
• LogoTitle
• Button
• NavigationBar
• Link * 4
• Wrapper (미정)
• Badge
• ProfileImage
• DropDown

• ProfileImage

• ProfileName

• Category

• Upload

• PostContent
• TextArea

• Button

• ImageSlider ..(위 생략)
• Image → base

Posting Detail

• Header
• LogoImage
• LogoTitle
• Button
• NavigationBar
• Link * 4
• Wrapper (미정)
• Badge
• ProfileImage
• DropDown

• ProfileImage

• ProfileName

• PostContent
• TextArea → base

• CommentList
• Comment
• CommentContent → Wrapper → div → Base
• ProfileName → Text → base
• CommentDate → Text → base

Sign Up Page

• Header
• LogoImage
• LogoTitle
• Button
• NavigationBar
• Link * 4
• Wrapper (미정)
• Badge
• ProfileImage
• DropDown

• Form
• Label
• Text
• Input
• SelectBox → base
• Button

• Box
• CheckBox → base
• Divider → base

• Button

• Text

• Text

• Link

Base Components 분류