나의 애플,
profile 화면 디자인
pages/profile/index.tsx, edit.tsx, sold.tsx, buy.tsx, loved.tsx
다섯개의 page로 구성이 되나
sold, buy, loved 3개 page는 같기 때문에, 하나만 올려 놓는다.
1. pages/profile/index.tsx
import type { NextPage } from 'next'
import Link from 'next/link'
import Layout from '../../components/layout'
const Profile: NextPage = () => {
return (
<Layout hasTabBar title="나의 애플마켓">
<div className="py-10 px-4">
<div className="flex items-center space-x-5">
<div className="w-16 h-16 bg-slate-400 rounded-full" />
<div className="flex flex-col">
<span className="font-medium text-gray-900">Steve Jebs</span>
///Edit Prrfile을 클릭했을때, 페이지 이동시킴!!
<Link href="/profile/edit">
<a className="text-sm text-gray-700">Edit profile →</a>
</Link>
</div>
</div>
<div className="mt-10 flex justify-around">
<Link href="/profile/sold"> //판매내역 클릭시 sold.tsx(/profile/sold 로 이동)
<a className="flex flex-col items-center">
<div className="w-14 h-15 text-white bg-orange-500 rounded-full p-3 flex items-center justify-center">
<svg
className="w-6 h-6"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"
></path>
</svg>
</div>
<span className="text-sm font-medium text-gray-700 mt-2">
판매내역
</span>
</a>
</Link>
<Link href="/profile/buy">
<a className="flex flex-col items-center">
<div className="w-14 h-15 text-white bg-orange-500 rounded-full p-3 flex items-center justify-center">
<svg
className="w-6 h-6"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"
></path>
</svg>
</div>
<span className="text-sm font-medium text-gray-700 mt-2">
구매내역
</span>
</a>
</Link>
<Link href="/profile/loved">
<a className="flex flex-col items-center">
<div className="w-14 h-15 text-white bg-orange-500 rounded-full p-3 flex items-center justify-center">
<svg
className="w-6 h-6"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
></path>
</svg>
</div>
<span className="text-sm font-medium text-gray-700 mt-2">
관심목록
</span>
</a>
</Link>
</div>
<div className="mt-12">
<div className="flex items-center space-x-4">
<div className="w-12 h-12 bg-slate-400 rounded-full" />
<div>
<h4>니꼬</h4>
<div className="flex items-center">
<svg
className="text-yellow-400 h-5 w-5"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
</svg>
<svg
className="text-yellow-400 h-5 w-5"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
</svg>
<svg
className="text-yellow-400 h-5 w-5"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
</svg>
<svg
className="text-yellow-400 h-5 w-5"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
</svg>
<svg
className="text-gray-400 h-5 w-5"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
</svg>
</div>
</div>
</div>
<div className="mt-4 text-gray-600">
<p>
Normally, both your asses would be dead as fucking fried chicken,
but you happen to pull this shit while I'm in a transitional
period so I don't wanna kill you, I wanna help you. But I
can't give you this case, it don't belong to me.
Besides, I've already been through too much shit this morning
over this case to hand it over to your dumb ass.
</p>
</div>
</div>
</div>
</Layout>
)
}
export default Profile
2. pages/profile/edit.tsx
edirProfile page. 프로필 사진 바꾸는부분을 유심히 본다.
import type { NextPage } from 'next'
import Button from '../../components/button'
import Input from '../../components/input'
import Layout from '../../components/layout'
const EditProfile: NextPage = () => {
return (
<Layout canGoBack title="Edit Profile">
<form className="py-10 px-4 space-y-4">
<div className="flex items-center space-x-3">
<div className="w-14 h-14 rounded-full bg-slate-500" />
<label
htmlFor="picture"
className="cursor-pointer py-2 px-3 border border-gray-300 rounded-md shadow-sm text-sm font-medium focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 text-gray-700"
>
Change
<input
id="picture"
type="file"
className="hidden"
accept="image/*"
/>
///프로필 사진 바꾸는 input부분도 유심히 본다!!!
</label>
</div>
<Input required label="Email" name="email" type="email" />
<Input
required
label="Phone Number"
name="phone"
type="number"
kind="phone"
/>
<Button text="Update Profile" />
</form>
</Layout>
)
}
export default EditProfile3. pages/proflie/sold.tsx
import type { NextPage } from 'next'
import Item from '../../components/item'
import Layout from '../../components/layout'
const Sold: NextPage = () => {
return (
<Layout title="판매내역" canGoBack>
<div className="flex flex-col space-y-5 py-10 ">
{[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1].map((_, i) => (
<Item
key={i}
id={i}
title="iPhone 12"
price={99}
comments={3}
hearts={3}
></Item>
))}
</div>
</Layout>
)
}
export default Sold
코딩하는초딩쌤