-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #6 from TEAM-CLIP/2-ui
feat: UI 구현 (#2)
- Loading branch information
Showing
25 changed files
with
544 additions
and
119 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,8 @@ | ||
| /** @type {import('next').NextConfig} */ | ||
| const nextConfig = {}; | ||
| const nextConfig = { | ||
| images: { | ||
| domains: ['picsum.photos'], // 허용할 외부 이미지 도메인 추가 | ||
| }, | ||
| }; | ||
|
|
||
| export default nextConfig; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| import React from 'react'; | ||
|
|
||
| const Loading = () => { | ||
| return ( | ||
| <div className="flex justify-center items-center h-screen"> | ||
| <div className="animate-spin rounded-full h-32 w-32 border-t-2 border-b-2 border-gray-900"></div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default Loading; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,100 @@ | ||
| 'use client'; | ||
|
|
||
| import { ChangeEvent, useState } from 'react'; | ||
| import Link from 'next/link'; | ||
| import Image from 'next/image'; | ||
| import ArrowBack from '@/data/arrowLeft.svg'; | ||
| import { useRouter } from 'next/navigation'; | ||
|
|
||
| const RequestCustom = () => { | ||
| const router = useRouter(); | ||
| const backFunction = () => { | ||
| router.back(); | ||
| }; | ||
|
|
||
| const [text, setText] = useState<string>(''); | ||
|
|
||
| const handleTextChange = (e: ChangeEvent<HTMLTextAreaElement>) => { | ||
| setText(e.target.value); | ||
| }; | ||
|
|
||
| const isOverLimit = text.length > 600; | ||
| const isTextEntered = text.length > 0; | ||
|
|
||
| return ( | ||
| <div className="relative flex flex-col mx-[1rem] mt-[3.5rem] lg:h-screen md:h-screen sm:h-screen"> | ||
| <div className="cursor-pointer" onClick={backFunction}> | ||
| <div className="flex w-[1.5rem] h-[1.5rem] my-[0.75rem]"> | ||
| <Image src={ArrowBack} alt="Back" objectFit="cover" /> | ||
| </div> | ||
| </div> | ||
| <h2 className="title-1 mt-[0.62rem] mb-[0.25rem]"> | ||
| 맞춤형 작가 요청하기 | ||
| </h2> | ||
| <h3 className="body-3 text-gray-500 mb-[1.75rem]"> | ||
| 칙스냅에서 회원님에게 최적화된 작가분들을 찾아 추천해드릴게요. 약 1~3일 | ||
| 정도 소요될 수 있어요. | ||
| </h3> | ||
| <div className="flex flex-col gap-[0.5rem]"> | ||
| <div className="flex justify-between"> | ||
| <h2 className="body-1">전화번호</h2> | ||
| <h2 className="body-3 text-gray-500">*필수</h2> | ||
| </div> | ||
| <div className="mb-[1.75rem]"> | ||
| <input | ||
| type="text" | ||
| placeholder="XXX - XXXX - XXXX" | ||
| className="w-full h-[3.125rem] px-[0.875rem] bg-gray-50 rounded-lg body-1 placeholder-gray-300 | ||
| hover:bg-gray-100 focus:bg-gray-100 focus:border-gray-200 focus:ring-0 focus:outline-none | ||
| border border-transparent transition-colors duration-200 | ||
| not-placeholder-shown:bg-gray-50" | ||
| /> | ||
| </div> | ||
| </div> | ||
| <div className="flex flex-col gap-[0.5rem]"> | ||
| <h2 className="body-1">희망하는 작가님 스타일 (분위기, 종류 등)</h2> | ||
| <div className="mb-[1.75rem]"> | ||
| <textarea | ||
| placeholder="예) 따뜻한 분위기의 숲속에서 찍는 스타일, " | ||
| className={`flex w-full min-h-[13rem] p-[0.875rem] rounded-lg body-3 placeholder-gray-300 resize-none | ||
| ${ | ||
| isOverLimit | ||
| ? 'border-red-100 focus:outline-red-100' | ||
| : 'border-gray-200' | ||
| } | ||
| ${isTextEntered ? 'bg-gray-100' : 'bg-gray-50'} | ||
| transition-colors duration-200 | ||
| hover:bg-gray-100 focus:outline-none focus:outline-1 focus:outline-gray-200`} | ||
| style={{ outlineOffset: '0px' }} | ||
| value={text} | ||
| onChange={handleTextChange} | ||
| /> | ||
| <div className="flex justify-end"> | ||
| <p | ||
| className={`caption text-gray-600 mt-[0.38rem] ${ | ||
| isOverLimit ? 'text-red-100' : 'text-gray-600' | ||
| }`} | ||
| > | ||
| 최대 600자 | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div className="flex"> | ||
| <Link | ||
| href={'/'} | ||
| // href={{ | ||
| // pathname: '/photographer', | ||
| // query: { type, moods: selectedMoods.join(',') }, | ||
| // }} | ||
| // aria-disabled={selectedMoods.length !== 3} | ||
| className={'btn-primary body-3 mb-[1rem]'} | ||
| > | ||
| 요청하기 | ||
| </Link> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default RequestCustom; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,61 @@ | ||
| 'use client'; | ||
|
|
||
| import { ChangeEvent, useState } from 'react'; | ||
| import Link from 'next/link'; | ||
| import Image from 'next/image'; | ||
| import Close from '@/data/close.svg'; | ||
| import Instagram from '@/data/instagram.svg'; | ||
|
|
||
| const RequestNotification = () => { | ||
| return ( | ||
| <div className="relative flex flex-col mx-[1rem] pt-[3.5rem] h-screen"> | ||
| <Link href={'/'} className="flex justify-end cursor-pointer"> | ||
| <div className="flex w-[1.5rem] h-[1.5rem] my-[0.75rem]"> | ||
| <Image src={Close} alt="Back" objectFit="cover" /> | ||
| </div> | ||
| </Link> | ||
| <h2 className="title-1 mt-[0.62rem] mb-[0.25rem]"> | ||
| 칙스냅이 오픈되면, 알려드릴게요! | ||
| </h2> | ||
| <h3 className="body-3 text-gray-500 mb-[1.75rem]"> | ||
| 안녕하세요, 순간을 Chik다 chiksnap입니다. | ||
| <br /> | ||
| Chiksnap은 스냅사진작가를 추천해주는 플랫폼으로 10월 출시 예정에 | ||
| 있습니다. | ||
| <br /> | ||
| 오픈 연락을 희망하신다면 아래 연락처를 남겨주세요! | ||
| </h3> | ||
| <div className="flex flex-col gap-[0.5rem]"> | ||
| <div className="flex justify-between"> | ||
| <h2 className="body-1">전화번호</h2> | ||
| <h2 className="body-3 text-gray-500">*필수</h2> | ||
| </div> | ||
| <div className="mb-[1.75rem]"> | ||
| <input | ||
| type="text" | ||
| placeholder="XXX - XXXX - XXXX" | ||
| className="w-full h-[3.125rem] px-[0.875rem] bg-gray-50 rounded-lg body-1 placeholder-gray-300 | ||
| hover:bg-gray-100 focus:bg-gray-100 focus:border-gray-200 focus:ring-0 focus:outline-none | ||
| border border-transparent transition-colors duration-200 | ||
| not-placeholder-shown:bg-gray-50" | ||
| /> | ||
| </div> | ||
| </div> | ||
| <div className="flex space-x-2 absolute bottom-[1rem] w-full"> | ||
| <a href={`https://www.instagram.com/chik_snap/`} className="w-1/2"> | ||
| <button className="btn-default flex justify-center items-center w-full body-3 rounded-lg gap-[0.25rem]"> | ||
| <div className="flex w-[1.5rem] h-[1.5rem]"> | ||
| <Image src={Instagram} alt="Back" objectFit="cover" /> | ||
| </div> | ||
| 칙스냅에 문의하기 | ||
| </button> | ||
| </a> | ||
| <Link href="/" className="flex-grow"> | ||
| <button className="btn-primary w-full body-3">신청하기</button> | ||
| </Link> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default RequestNotification; |
Oops, something went wrong.