feat: Add Travel Components (#11)

* feat: add default layout and nav bar (#1)

* feat: add background (#2)

* fix: remove navigation bar from login-page (#2)

* feat: add login-page layout (#2)

* fix: change mail image file (#2)

* feat: add my-page layout (#3)

* feat: add routes

* fix: modified condition on the navigation bar

* style: Fixed code with linter rule

* style: Rearrange code

* fix: Change image src url

* feat: Add PuppleBackground Component

* feat: Add Travel Components

* feat: Add white hamburger button

* feat: Modified ContentsCard height

* feat: Add seperated ChoiceList component

* feat: Modified ContentsCard CSS style

* feat: Modified ContentsCard component max-height value

* feat: Modified component rendering to seperate functions

src/app/pages/index.ts

@@ -1,2 +1,3 @@
 export * from './login-page';
 export * from './my-page';
+export * from './travel-auto-page';

src/app/pages/login-page.tsx

@@ -4,6 +4,39 @@ import styled from '@emotion/styled';
 
 import { Background } from '@/components';
 
+interface ButtonProps {
+  $type?: string;
+}
+
+export function LoginPage() {
+  return (
+    <>
+      <Background page='login' />
+      <styles.container>
+        <h2>
+          P의 여행과 함께
+          <br /> 지금 여행을 시작하세요!
+        </h2>
+        <styles.socialSection>
+          <styles.bubble>간편 로그인 시작하기</styles.bubble>
+          <styles.kakaoLoginBtn />
+        </styles.socialSection>
+        <styles.customBtn $type='login'>
+          <span>이메일로 로그인</span>
+        </styles.customBtn>
+        <styles.customBtn $type='sign'>
+          <span>회원가입</span>
+        </styles.customBtn>
+        <styles.loginMenuContainer>
+          <li>아이디 찾기</li>
+          <li>비밀번호 찾기</li>
+          <li>문의하기</li>
+        </styles.loginMenuContainer>
+      </styles.container>
+    </>
+  );
+}
+
 const styles = {
   container: styled.section`
     width: 100%;
@@ -46,13 +79,13 @@ const styles = {
 
     width: 10.1875rem;
     height: 2.8125rem;
-    background: url('./start-social-login.svg') no-repeat center;
+    background: url('/start-social-login.svg') no-repeat center;
     background-size: 100%;
   `,
   kakaoLoginBtn: styled.button`
     width: 3.25rem;
     height: 3.25rem;
-    background: url('./kakao.svg') no-repeat center;
+    background: url('/kakao.svg') no-repeat center;
     background-size: 100%;
     border: none;
   `,
@@ -84,7 +117,7 @@ const styles = {
         display: inline-block;
         width: 1.12906rem; 
         height: 1.16669rem; 
-        background: url('./mail.png') no-repeat center; 
+        background: url('/mail.png') no-repeat center; 
         margin-right: 0.5rem; 
         background-size: 100%;
         transform: translateY(0.2rem);
@@ -124,36 +157,3 @@ const styles = {
     }
   `,
 };
-
-interface ButtonProps {
-  $type?: string;
-}
-
-export function LoginPage() {
-  return (
-    <>
-      <Background page='login' />
-      <styles.container>
-        <h2>
-          P의 여행과 함께
-          <br /> 지금 여행을 시작하세요!
-        </h2>
-        <styles.socialSection>
-          <styles.bubble>간편 로그인 시작하기</styles.bubble>
-          <styles.kakaoLoginBtn />
-        </styles.socialSection>
-        <styles.customBtn $type='login'>
-          <span>이메일로 로그인</span>
-        </styles.customBtn>
-        <styles.customBtn $type='sign'>
-          <span>회원가입</span>
-        </styles.customBtn>
-        <styles.loginMenuContainer>
-          <li>아이디 찾기</li>
-          <li>비밀번호 찾기</li>
-          <li>문의하기</li>
-        </styles.loginMenuContainer>
-      </styles.container>
-    </>
-  );
-}

src/app/pages/my-page.tsx

@@ -3,6 +3,125 @@
 import styled from '@emotion/styled';
 import { useState } from 'react';
 
+interface Travel {
+  name: string;
+  date: string;
+  with: string;
+}
+
+interface User {
+  name: string;
+  travel: {
+    [id: number]: Travel;
+  };
+  record: { [id: number]: string };
+  scrap: { [id: number]: string };
+}
+
+export function MyPage() {
+  const user = {
+    name: 'P의 여행자님',
+    travel: {
+      1: {
+        name: '부산 여행',
+        date: '2024.6.23 - 6.25',
+        with: '친구들과 함께',
+      },
+      2: {
+        name: '부산 여행',
+        date: '2024.6.23 - 6.25',
+        with: '친구들과 함께',
+      },
+      3: {
+        name: '부산 여행',
+        date: '2024.6.23 - 6.25',
+        with: '친구들과 함께',
+      },
+    },
+    record: {},
+    scrap: {},
+  };
+
+  const [activeTab, setActiveTab] = useState('travel');
+
+  const renderTabContent = () => {
+    switch (activeTab) {
+      case 'travel':
+        return <TravelTab user={user} />;
+      case 'record':
+        return <RecordTab />;
+      case 'scrap':
+        return <ScrapTab />;
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <styles.container>
+      <styles.top>
+        <styles.header>
+          <styles.xBtn src='/x.svg' alt='x' />
+          <span>프로필 편집</span>
+        </styles.header>
+        <styles.profileSection>
+          <styles.profileImg />
+          <p>{user.name}</p>
+        </styles.profileSection>
+      </styles.top>
+      <styles.tabContainer>
+        <styles.tabList>
+          <styles.tabItem
+            $active={activeTab === 'travel'}
+            onClick={() => setActiveTab('travel')}
+          >
+            내 여행 {Object.keys(user.travel).length}
+          </styles.tabItem>
+          <styles.tabItem
+            $active={activeTab === 'record'}
+            onClick={() => setActiveTab('record')}
+          >
+            내 기록
+          </styles.tabItem>
+          <styles.tabItem
+            $active={activeTab === 'scrap'}
+            onClick={() => setActiveTab('scrap')}
+          >
+            내 저장
+          </styles.tabItem>
+        </styles.tabList>
+        {renderTabContent()}
+      </styles.tabContainer>
+    </styles.container>
+  );
+}
+
+function TravelTab({ user }: { user: User }) {
+  return (
+    <styles.tabContents>
+      {Object.values(user.travel).map((travel, id) => (
+        <styles.list key={id}>
+          <styles.thumbnail />
+          <section>
+            <h3>{travel.name}</h3>
+            <p>{travel.date}</p>
+            <p>{travel.with}</p>
+          </section>
+          <styles.ellipsisBtn />
+        </styles.list>
+      ))}
+    </styles.tabContents>
+  );
+}
+
+function RecordTab() {
+  return <></>;
+}
+
+function ScrapTab() {
+  return <></>;
+}
+
 const styles = {
   container: styled.div`
     display: flex;
@@ -152,100 +271,9 @@ const styles = {
   ellipsisBtn: styled.button`
     width: 1rem;
     height: 100%;
-    background: url('./ellipsis.svg') no-repeat center;
+    background: url('/ellipsis.svg') no-repeat center;
     background-size: 100%;
     border: none;
     cursor: pointer;
   `,
 };
-
-export function MyPage() {
-  const user = {
-    name: 'P의 여행자님',
-    travel: {
-      1: {
-        name: '부산 여행',
-        date: '2024.6.23 - 6.25',
-        with: '친구들과 함께',
-      },
-      2: {
-        name: '부산 여행',
-        date: '2024.6.23 - 6.25',
-        with: '친구들과 함께',
-      },
-      3: {
-        name: '부산 여행',
-        date: '2024.6.23 - 6.25',
-        with: '친구들과 함께',
-      },
-    },
-    record: {},
-    scrap: {},
-  };
-
-  const [activeTab, setActiveTab] = useState('travel');
-
-  const renderTabContent = () => {
-    switch (activeTab) {
-      case 'travel':
-        return (
-          <styles.tabContents>
-            {Object.values(user.travel).map((travel, index) => (
-              <styles.list key={index}>
-                <styles.thumbnail />
-                <section>
-                  <h3>{travel.name}</h3>
-                  <p>{travel.date}</p>
-                  <p>{travel.with}</p>
-                </section>
-                <styles.ellipsisBtn />
-              </styles.list>
-            ))}
-          </styles.tabContents>
-        );
-      case 'record':
-        return <div></div>;
-      case 'scrap':
-        return <div></div>;
-      default:
-        return null;
-    }
-  };
-  return (
-    <styles.container>
-      <styles.top>
-        <styles.header>
-          <styles.xBtn src='./x.svg' alt='x' />
-          <span>프로필 편집</span>
-        </styles.header>
-        <styles.profileSection>
-          <styles.profileImg />
-          <p>{user.name}</p>
-        </styles.profileSection>
-      </styles.top>
-      <styles.tabContainer>
-        <styles.tabList>
-          <styles.tabItem
-            $active={activeTab === 'travel'}
-            onClick={() => setActiveTab('travel')}
-          >
-            내 여행 {Object.keys(user.travel).length}
-          </styles.tabItem>
-          <styles.tabItem
-            $active={activeTab === 'record'}
-            onClick={() => setActiveTab('record')}
-          >
-            내 기록
-          </styles.tabItem>
-          <styles.tabItem
-            $active={activeTab === 'scrap'}
-            onClick={() => setActiveTab('scrap')}
-          >
-            내 저장
-          </styles.tabItem>
-        </styles.tabList>
-        {renderTabContent()}
-      </styles.tabContainer>
-    </styles.container>
-  );
-}

src/app/pages/travel-auto-page.tsx

@@ -0,0 +1,19 @@
+'use client';
+
+import { TravelComponent } from '@/components';
+import { ChoiceList } from '@/components/travel';
+
+export function TravelAutoPage() {
+  const data = {
+    where: '부산 (Busan)',
+    what: '웰니스 관광',
+    when: '늦은 오후',
+  };
+
+  const Contents = {
+    backgroundNode: <ChoiceList choiceList={data} />,
+    childNode: <></>,
+    type: 'auto',
+  };
+  return <TravelComponent contents={Contents} />;
+}

src/app/travel/auto/page.tsx

@@ -0,0 +1,5 @@
+import { TravelAutoPage } from '@/app/pages';
+
+export default function Login() {
+  return <TravelAutoPage />;
+}