Client Component Atomic 분리

Page

MainPage [ Page / Template ]
- MainHeader [ Organism ]
  - RightSide [ Molecules ]
    - IconButton ( 로그인 버튼 ) [ Atom ]
    - IconButton ( 유저 버튼) [ Atom ]
    - DrowDown [ Atom ]
  - Center [ Molecules ]
    - DivButton ( 타이틀 ) [ Atom ]
- Body [ Template ]
  - LeftSide [ Organism ]
    - DivContainer[ Molecules ]
      - DivButton ( 1 : 1 ) [ Atom ]
      - DivButton ( 2 : 2 ) [ Atom ]
      - DivButton ( 3 : 3 ) [ Atom ]
      - DivButton ( 팀 생성 ) [ Atom ]
  - RightSide [ Organism ]
    - SmallImage [ Molecules ]
      - Image [ Atom ]
      - DivButton ( 이벤트 , ... ) [ Atom ]
    - SmallImage [ Molecules ]
      - Image [ Atom ]
      - DivButton ( 이벤트 , ... ) [ Atom ]
    - SmallImage [ Molecules ]
      - Image [ Atom ]
      - DivButton ( 이벤트 , ... ) [ Atom ]
- Footer [ Organism ]
  - IconButton [ Atom ]
  - DropDown [ Molecules ]
    - DropDownDiv [ Atom ]

공통

MainHeader [ Organism ]
- RightSide [ Molecules ]
  - IconButton ( 로그인 버튼 ) [ Atom ]
  - IconButton ( 유저 버튼) [ Atom ]
  - DrowDown ( header에 넣지 말고 밑에 빼둬야할듯? ) [ Atom ]
- Center [ Molecules ]
  - DivButton ( 타이틀 ) [ Atom ]
- LeftSide [ Molecules ]
  - IconButton ( 메뉴 아이콘 ) [ Atom ]
  - SideBar (사이드 바 header에 넣지 말고 밑에 빼둬야할 듯?) [ Atom ]
Footer [ Organism ]
- IconButton [ Atom ]
- DropDown [ Molecules ]
  - DropDownDiv [ Atom ]

LogInPage [ Template ]
- LoginForm [ Molecules ]
  - div ( Title ) [ Atom ]
    - input ( ID ) [ Atom ]
    - input ( PW ) [ Atom ]
    - SmallButton ( 회원가입 ) [ Atom ]
    - SmallButton ( 로그인 ) [ Atom ]
- SocialLogin [ Molecules ]
  - LargeButton ( 깃허브 ) [ Atom ]
  - LargeButton ( 카카오 ) [ Atom ]
  - LargeButton ( 네이버 ) [ Atom ]
RegisterPage [ Template ]
- TitleInput [ Molecules ]
  - div ( ID ) [ Atom ]
  - input ( ID ) [ Atom ]
  - smallButton ( ID 체크 ) [ Atom ]
- TitleInput [ Molecules ]
  - div ( pw ) [ Atom ]
  - input ( pw ) [ Atom ]
- TitleInput [ Molecules ]
  - div ( pw ) [ Atom ]
  - input ( pw ) [ Atom ]
- TitleInput [ Molecules ]
  - div ( email ) [ Atom ]
  - input ( email ) [ Atom ]
- TitleInput [ Molecules ]
  - div ( phone ) [ Atom ]
  - input ( phone ) [ Atom ]
- TitleInput [ Molecules ]
  - div ( location ) [ Atom ]
  - input ( location ) [ Atom ]
- TitleInput [ Molecules ]
  - div ( sex ) [ Atom ]
  - input ( sex ) [ Atom ]
- smallButton ( 회원가입 ) [ Atom ]
CowDogPage [ Template ]
- navBar [ Organism ]
  - CellContainer [ Molecules ]
    - DivButton [ Atom ]
- DropDownContainer [ Organism ]
  - DropDown [ Molecules ]
    - DropDownDiv [ Atom ]
- userProfileContainer [ Organism ]
  - userProfile [ Molecules ]
    - image [ Atom ]
    - info [ Molecules ]
      - Name [ Atom ]
      - description [ Atom ]
- teamProfileContainer [ Organism ]
  - TeamProfile [ Molecules ]
    - image [ Atom ]
    - info [ Molecules ]
      - Name [ Atom ]
      - description [ Atom ]
TeamPage [ Template ]
- TeamInfo [ Organism ]
  - Image [ Molecules ]
  - infoContainer [ Organism ]
    - info [ Molecules ]
      - label [ Atom ]
      - Input [ Atom ]
ProjectPage [ Template ]
- CanvasContainer [Organism]
  - canvas
- ImageContainer [Organism]
  - image
MyPage [ Template ]
- SideBar [ Organism ]
  - Cell [ Atom ]*5
- Main [ Organism ]
  - 내 페이지
    - Data [ Molecules]
      - Edit버튼 [ Atom ]
      - Name [ Atom ]
      - Age [ Atom ]
      - Address [ Atom ]
      - Email [ Atom ]
      - Description [ Atom ]
    - Image [ Molecules ]
      - Image [ Atom ]
      - Edit 버튼 [ Atom ]
  - 리뷰 보기
    - ReviewContainer [Organism]
      - Review [ Molcules ]
        
        image [Atom]
        
        info [ Molcules ]
        
        peopleInfo [ Atom ]
        
        score [ Atom ]
        
        context [ Atom ]
  - 내가 고른 이상형 [지하 던전 ]
  - 문의사항 보기 [ 지하 던전 ]
ChatPage [ Template ]
- ChatProfile Container [ Organism ]
  - ChatProfile [ Molecules ]
    - image [ Atom ]
    - info [ Molcules ]
      - name [Atom]
      - lastChat [Atom]
- ChatList Container [ Organism ]
  - Header [Organism]
    - ProfileImageContainer [ Molecules]
      - smallImage [ Atom ]
    - Small Button ( 나가기 ) [ Atom ]
    - Small Button ( 추가 기능 ) [ Atom ]
  - ChatList [ Molecules ]
    - Chat [ Atom ]
  - Footer [Molecules]
    - - Button [ Atom ]
    - Input [ Atom ]
    - 전송 Button [ Atom ]
RequestPage [ Template ]
- 내가 보낸 요청 [ Organism ]
  - Profile [ Molecules ]
    - image [Atom]
    - info [ Molecules ]
      - name
      - sex
      - age
      - description
  - status [ Atom ]
- 나에게 온 요청 [ Organism ]
  - Info [ Molecules ]
    - Image [ Atom ]
    - Name [ Atom ]
    - Sex [ Atom ]
    - Age [ Atom ]
    - Description [ Atom ]
ChatDetailPage [ Template ]
- LeftSide [ Organism ]
  - ChatList [ Molecules ]
    - Chat [ Atom ]
  - Footer [Molecules]
    - - Button [ Atom ]
    - Input [ Atom ]
    - 전송 Button [ Atom ]
- RightSide
  - Main [ Organism ]
    - Header [ Molecules ]
      - Small Button ( 나가기 ) [ Atom ]
    - Body [ Molecules ]
      - 화상채팅
    - Footer [ Molecules ]
      - LeftSide [ Molecules ]
        
        Small Button ( 마이크 ) [ Atom ]
        
        Small Button ( 비디오 ) [ Atom ]
      - RightSide [ Molecules ]
        
        Small Button ( 게임하기 ) [ Atom ]
        
        Small Button ( 게더타운 ) [ Atom ]
  - Game [ Organism ]
    - Header
      - Small Button ( 나가기 ) [ Atom ]
      - Small Button ( 마이크 ) [ Atom ]
      - Small Button ( 비디오 ) [ Atom ]
      - 화상채팅 [ Atom ]
    - Body
      - Screen [ Molecules ]
        
        Questioner [ Atom ]
        
        TotalScore [ Molecules ]
        
        id [ Atom ]
        
        score [ Atom ]
        
        canvasContainer [ Molecules ]
        
        canvas
      - ChatMessageList [ Molecules ]
        
        Chat [ Molecules ]
        
        Name [ Atom ]
        
        Message [ Atom ]
      - ChatInput [ Molecules ]
        
        Input [ Atom ]
        
        SendButton [ Atom ]
  - Gather [ Organism ]
    - canvasContainer [ Molecules ]
      - canvas [ Atom ]
      - Header
        
        얼굴
      - Footer
        
        Left [ Molecules ]
        
        Small Button ( 마이크 ) [ Atom ]
        
        Small Button ( 비디오 ) [ Atom ]
        
        Right [ Molecules ]
        
        Small Button ( 나가기 ) [ Atom ]
Detatil Profile Modal [ Template ]
- image [ Atom ]
- info [ Molecules ]
  - name [ Atom ]
  - age [ Atom ]
  - sex [ Atom ]
  - description [ Atom ]
  - rate [ Atom ]
  - review [ Atom ]
- 채팅신청하기 button [Atom]
apply Compelete Modal [ Template ]
- image [Atom]
- info [molecules]
  - name [ Atom ]
  - sex [ Atom ]
  - age [ Atom ]
  - decription [ Atom ]
- text [Atom]
Character Choice Modal [ Template ]
- text [ Atom ]
- Choice Contanier [ Molcules ]
  - left button [ Atom ]
  - Chracter Image [ Atom ]
  - right button [ Atom ]
- 선택하기 button [ Atom ]
Game Choice Modal [ Template ]
- text [ Atom ]
- Choice Contanier [ Molcules ]
  - left button [ Atom ]
  - Game Image [ Atom ]
  - right button [ Atom ]
- 선택하기 button [ Atom ]
Invite Team Modal [ TemPlate ]
- input [ Atom ]
- 초대하기 button [ Atom ]
문의Page (지하)
EventPage (지하)
공지사항Page (지하)