From 535ed431503b537d0c86c282451fa4376e41c4af Mon Sep 17 00:00:00 2001 From: seondal Date: Tue, 15 Aug 2023 19:33:22 +0900 Subject: [PATCH 01/44] =?UTF-8?q?=F0=9F=92=84=20style=20:=20=20=EB=B0=94?= =?UTF-8?q?=ED=85=80=EC=8B=9C=ED=8A=B8=20=EB=A0=88=EC=9D=B4=EC=95=84?= =?UTF-8?q?=EC=9B=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../(Main)/feed/components/BottomSheet.tsx | 25 +++++++++++++++++++ src/app/(Main)/feed/components/Thumbnails.tsx | 4 +-- src/app/(Main)/feed/page.tsx | 22 ++++++++-------- src/constants/icon.ts | 1 + 4 files changed, 38 insertions(+), 14 deletions(-) create mode 100644 src/app/(Main)/feed/components/BottomSheet.tsx diff --git a/src/app/(Main)/feed/components/BottomSheet.tsx b/src/app/(Main)/feed/components/BottomSheet.tsx new file mode 100644 index 00000000..827d0dae --- /dev/null +++ b/src/app/(Main)/feed/components/BottomSheet.tsx @@ -0,0 +1,25 @@ +import { ICON } from '@/constants/icon'; +import Image from 'next/image'; + +export default function BottomSheet() { + return ( +
+
+ +
+
+
+ 인원 수 +
+
+ 프레임 수 +
+
+ 태그 +
+
+
+ ); +} diff --git a/src/app/(Main)/feed/components/Thumbnails.tsx b/src/app/(Main)/feed/components/Thumbnails.tsx index c2f8eeda..883b4b0b 100644 --- a/src/app/(Main)/feed/components/Thumbnails.tsx +++ b/src/app/(Main)/feed/components/Thumbnails.tsx @@ -1,3 +1,3 @@ -export default function Thumbnails({ height }: { height: number }) { - return
; +export default function Thumbnails() { + return
; } diff --git a/src/app/(Main)/feed/page.tsx b/src/app/(Main)/feed/page.tsx index 7d7765ec..1901ffcb 100644 --- a/src/app/(Main)/feed/page.tsx +++ b/src/app/(Main)/feed/page.tsx @@ -1,27 +1,25 @@ 'use client'; +import BottomSheet from './components/BottomSheet'; import Filter from './components/Filter'; import Thumbnails from './components/Thumbnails'; -const tmp = [ - 44, 203, 250, 7, 136, 44, 105, 193, 122, 270, 232, 213, 243, 35, 244, 73, 271, 109, 30, 76, 11, - 198, 132, 48, 227, 201, 241, 140, 63, 115, 187, 80, 35, 6, 123, 55, 286, 220, 23, 293, 50, 297, - 50, 265, 117, 89, 27, 77, 143, 37, 87, 267, 158, 11, 99, 203, 229, 287, 258, 78, 213, 176, 214, - 11, 11, 141, 290, 258, 223, 109, 125, 217, 267, 288, 0, 274, 270, 34, 274, 219, 49, 137, 27, 2, - 52, 202, 2, 101, 101, 287, 17, 43, 210, 146, 170, 68, 163, 89, 191, 62, -]; - export default function Feed() { return ( <>
-
- {tmp.map((item, idx) => ( - - ))} +
+ + + + + + +
+ ); } diff --git a/src/constants/icon.ts b/src/constants/icon.ts index 22e4a7ef..7d419880 100644 --- a/src/constants/icon.ts +++ b/src/constants/icon.ts @@ -1,4 +1,5 @@ export const ICON = { + close: '/icons/close.svg', arrow: { back: '/icons/arrow_back.svg', }, From d00d95568a5856c539e6a418d99de0d3754b8209 Mon Sep 17 00:00:00 2001 From: seondal Date: Tue, 15 Aug 2023 20:01:38 +0900 Subject: [PATCH 02/44] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor=20:=20=20Se?= =?UTF-8?q?lection=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=AA=A8?= =?UTF-8?q?=EB=93=88=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../(Main)/pick/components/PickSection.tsx | 34 ++----------------- src/components/Selection/SelectionBasic.tsx | 27 +++++++++++++++ src/components/Selection/index.ts | 1 + 3 files changed, 30 insertions(+), 32 deletions(-) create mode 100644 src/components/Selection/SelectionBasic.tsx create mode 100644 src/components/Selection/index.ts diff --git a/src/app/(Main)/pick/components/PickSection.tsx b/src/app/(Main)/pick/components/PickSection.tsx index 9411cf70..22096004 100644 --- a/src/app/(Main)/pick/components/PickSection.tsx +++ b/src/app/(Main)/pick/components/PickSection.tsx @@ -6,6 +6,7 @@ import Image from 'next/image'; import { useState } from 'react'; import lottieJson from '../../../../../public/lotties/posepicker.json'; import Lottie from 'react-lottie-player'; +import { SelectionBasic } from '@/components/Selection'; const countList = ['1인', '2인', '3인', '4인', '5인+']; @@ -22,17 +23,7 @@ export default function PickSection() { return (
-
- {countList.map((count) => ( - setCountState(count)} - isSelected={count === countState} - count={count} - /> - ))} -
- +
{isLoading ? ( @@ -47,24 +38,3 @@ export default function PickSection() {
); } - -interface CountItemProps { - isSelected: boolean; - count: string; - onClick: () => void; -} - -function CountItem({ isSelected, count, onClick }: CountItemProps) { - return ( -
-
{count}
-
- ); -} diff --git a/src/components/Selection/SelectionBasic.tsx b/src/components/Selection/SelectionBasic.tsx new file mode 100644 index 00000000..5b93d341 --- /dev/null +++ b/src/components/Selection/SelectionBasic.tsx @@ -0,0 +1,27 @@ +interface SelectionBasic { + data: string[]; + state: string; + setState: React.Dispatch>; +} + +export default function SelectionBasic({ data, state, setState }: SelectionBasic) { + return ( +
+ {data.map((item, idx) => ( +
setState(item)} + > +
+ {item} +
+
+ ))} +
+ ); +} diff --git a/src/components/Selection/index.ts b/src/components/Selection/index.ts new file mode 100644 index 00000000..f503bf1a --- /dev/null +++ b/src/components/Selection/index.ts @@ -0,0 +1 @@ +export { default as SelectionBasic } from './SelectionBasic'; From 0e777203c13fae537091ac3ba9fb47894588f4d7 Mon Sep 17 00:00:00 2001 From: seondal Date: Tue, 15 Aug 2023 20:31:40 +0900 Subject: [PATCH 03/44] =?UTF-8?q?=F0=9F=92=84=20style=20:=20=20=ED=95=84?= =?UTF-8?q?=ED=84=B0=20=EB=B0=94=ED=85=80=EC=8B=9C=ED=8A=B8=20=EC=9A=94?= =?UTF-8?q?=EC=86=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../(Main)/feed/components/BottomSheet.tsx | 50 +++++++++++++------ .../(Main)/pick/components/PickSection.tsx | 4 +- src/components/Selection/SelectionBasic.tsx | 9 ++-- styles/theme/colors.ts | 6 +-- 4 files changed, 48 insertions(+), 21 deletions(-) diff --git a/src/app/(Main)/feed/components/BottomSheet.tsx b/src/app/(Main)/feed/components/BottomSheet.tsx index 827d0dae..fde56d67 100644 --- a/src/app/(Main)/feed/components/BottomSheet.tsx +++ b/src/app/(Main)/feed/components/BottomSheet.tsx @@ -1,25 +1,47 @@ +import { Button } from '@/components/Button'; +import { SelectionBasic } from '@/components/Selection'; import { ICON } from '@/constants/icon'; import Image from 'next/image'; +import { useState } from 'react'; export default function BottomSheet() { + const countList = ['전체', '1인', '2인', '3인', '4인', '5인+']; + const [countState, setCountState] = useState('전체'); + + const frameList = ['전체', '1컷', '3컷', '4컷', '6컷', '8컷+']; + const [frameState, setFrameState] = useState('전체'); + return ( -
-
- -
-
-
- 인원 수 + <> +
+
+
-
- 프레임 수 +
+
+
+ 인원 수 +
+ +
+
+
+ 프레임 수 +
+ +
+
+
+ 태그 +
+
-
- 태그 +
+
-
+ ); } diff --git a/src/app/(Main)/pick/components/PickSection.tsx b/src/app/(Main)/pick/components/PickSection.tsx index 22096004..9b453cdb 100644 --- a/src/app/(Main)/pick/components/PickSection.tsx +++ b/src/app/(Main)/pick/components/PickSection.tsx @@ -23,7 +23,9 @@ export default function PickSection() { return (
- +
+ +
{isLoading ? ( diff --git a/src/components/Selection/SelectionBasic.tsx b/src/components/Selection/SelectionBasic.tsx index 5b93d341..9396dc69 100644 --- a/src/components/Selection/SelectionBasic.tsx +++ b/src/components/Selection/SelectionBasic.tsx @@ -6,18 +6,21 @@ interface SelectionBasic { export default function SelectionBasic({ data, state, setState }: SelectionBasic) { return ( -
+
{data.map((item, idx) => (
setState(item)} > -
+
{item}
diff --git a/styles/theme/colors.ts b/styles/theme/colors.ts index 747f3c7c..7d0e8824 100644 --- a/styles/theme/colors.ts +++ b/styles/theme/colors.ts @@ -8,9 +8,9 @@ export const colors = { 'card-ui': COLOR.gray[30], // border - default: COLOR.gray[300], - active: COLOR.gray[900], - disabled: COLOR.gray[100], + 'border-default': COLOR.gray[300], + 'border-active': COLOR.gray[900], + 'border-disabled': COLOR.gray[100], // brand colors 'main-violet-bright': COLOR.violet[100], From bd5db6b8f7ccff311689f8e85487716d01958e36 Mon Sep 17 00:00:00 2001 From: seondal Date: Tue, 15 Aug 2023 21:15:57 +0900 Subject: [PATCH 04/44] =?UTF-8?q?=E2=9C=A8=20feat=20:=20=20PrimaryButton?= =?UTF-8?q?=20=EB=AA=A8=EB=93=88=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/icons/restart.svg | 10 +++---- .../(Main)/feed/components/BottomSheet.tsx | 10 +++++-- src/components/Button/PrimaryButton.tsx | 29 +++++++++++++++++++ src/components/Button/index.ts | 1 + src/constants/color.ts | 2 +- src/constants/icon.ts | 1 + 6 files changed, 44 insertions(+), 9 deletions(-) create mode 100644 src/components/Button/PrimaryButton.tsx diff --git a/public/icons/restart.svg b/public/icons/restart.svg index c7272ae1..34dd5890 100644 --- a/public/icons/restart.svg +++ b/public/icons/restart.svg @@ -1,10 +1,8 @@ - - - + + - - - + + diff --git a/src/app/(Main)/feed/components/BottomSheet.tsx b/src/app/(Main)/feed/components/BottomSheet.tsx index fde56d67..96a768f6 100644 --- a/src/app/(Main)/feed/components/BottomSheet.tsx +++ b/src/app/(Main)/feed/components/BottomSheet.tsx @@ -1,4 +1,4 @@ -import { Button } from '@/components/Button'; +import { PrimaryButton } from '@/components/Button'; import { SelectionBasic } from '@/components/Selection'; import { ICON } from '@/constants/icon'; import Image from 'next/image'; @@ -39,7 +39,13 @@ export default function BottomSheet() {
-
diff --git a/src/components/Button/PrimaryButton.tsx b/src/components/Button/PrimaryButton.tsx new file mode 100644 index 00000000..8bad190a --- /dev/null +++ b/src/components/Button/PrimaryButton.tsx @@ -0,0 +1,29 @@ +import { COLOR } from '@/constants/color'; +import Image from 'next/image'; + +interface Button { + icon?: string; + text: string; + onClick: () => void; + type?: 'fill' | 'outline'; + flex?: number; +} + +const style = { + fill: `bg-main-violet text-white`, + outline: `border-1 border-main-violet text-main-violet bg-[${COLOR.violet[50]}]`, +}; + +export default function PrimaryButton({ icon, text, onClick, type = 'fill', flex = 1 }: Button) { + const flexCss = 'flex-' + flex; + + return ( +
+ {icon && {''}} +
{text}
+
+ ); +} diff --git a/src/components/Button/index.ts b/src/components/Button/index.ts index 19b31973..e4e7ef68 100644 --- a/src/components/Button/index.ts +++ b/src/components/Button/index.ts @@ -1,2 +1,3 @@ export { default as Button } from './Button'; export { default as BottomFixedButton } from './BottomFixedButton'; +export {default as PrimaryButton} from "./PrimaryButton" \ No newline at end of file diff --git a/src/constants/color.ts b/src/constants/color.ts index 31ae1ed8..a3602d20 100644 --- a/src/constants/color.ts +++ b/src/constants/color.ts @@ -16,7 +16,7 @@ export const COLOR = { }, black: '#141218', violet: { - 50: '#141218', + 50: '#F4F1FE', 100: '#E2D9FC', 200: '#C8B8FA', 300: '#B29BF8', diff --git a/src/constants/icon.ts b/src/constants/icon.ts index 7d419880..21b16cf9 100644 --- a/src/constants/icon.ts +++ b/src/constants/icon.ts @@ -1,5 +1,6 @@ export const ICON = { close: '/icons/close.svg', + restart: '/icons/restart.svg', arrow: { back: '/icons/arrow_back.svg', }, From f1e3e88f7b6d6b42aaaeefecca210a575d5006b7 Mon Sep 17 00:00:00 2001 From: seondal Date: Thu, 17 Aug 2023 09:47:54 +0900 Subject: [PATCH 05/44] =?UTF-8?q?=E2=9C=A8=20feat=20:=20=20SelectionTag?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../(Main)/feed/components/BottomSheet.tsx | 6 ++- src/components/Selection/SelectionTag.tsx | 39 +++++++++++++++++++ src/components/Selection/index.ts | 1 + 3 files changed, 45 insertions(+), 1 deletion(-) create mode 100644 src/components/Selection/SelectionTag.tsx diff --git a/src/app/(Main)/feed/components/BottomSheet.tsx b/src/app/(Main)/feed/components/BottomSheet.tsx index 96a768f6..da4a5796 100644 --- a/src/app/(Main)/feed/components/BottomSheet.tsx +++ b/src/app/(Main)/feed/components/BottomSheet.tsx @@ -1,5 +1,5 @@ import { PrimaryButton } from '@/components/Button'; -import { SelectionBasic } from '@/components/Selection'; +import { SelectionBasic, SelectionTag } from '@/components/Selection'; import { ICON } from '@/constants/icon'; import Image from 'next/image'; import { useState } from 'react'; @@ -11,6 +11,9 @@ export default function BottomSheet() { const frameList = ['전체', '1컷', '3컷', '4컷', '6컷', '8컷+']; const [frameState, setFrameState] = useState('전체'); + const tagList = ['친구', '연인', '유명프레임', '기념일', '소품']; + const [tagState, setTagState] = useState([]); + return ( <>
@@ -36,6 +39,7 @@ export default function BottomSheet() {
태그
+
diff --git a/src/components/Selection/SelectionTag.tsx b/src/components/Selection/SelectionTag.tsx new file mode 100644 index 00000000..d57d6b31 --- /dev/null +++ b/src/components/Selection/SelectionTag.tsx @@ -0,0 +1,39 @@ +import { COLOR } from '@/constants/color'; +import { ICON } from '@/constants/icon'; +import Image from 'next/image'; + +interface SelectionTag { + data: string[]; + state: string[]; + setState: React.Dispatch>; +} + +export default function SelectionTag({ data, state, setState }: SelectionTag) { + function clickTag(tag: string) { + if (state.includes(tag)) { + setState((prev) => prev.filter((item) => item !== tag)); + } else { + setState((prev) => [...prev, tag]); + } + } + return ( +
+ {data.map((item, idx) => { + const selected = state.includes(item); + const bg = `bg-[${selected ? COLOR.violet[100] : COLOR.gray[50]}]`; + return ( +
clickTag(item)} + > +
+ {item} +
+ {selected && x} +
+ ); + })} +
+ ); +} diff --git a/src/components/Selection/index.ts b/src/components/Selection/index.ts index f503bf1a..e3731f67 100644 --- a/src/components/Selection/index.ts +++ b/src/components/Selection/index.ts @@ -1 +1,2 @@ export { default as SelectionBasic } from './SelectionBasic'; +export { default as SelectionTag } from './SelectionTag'; From 194fddc8f7a2147cdc938c7d78361cc80e3f6995 Mon Sep 17 00:00:00 2001 From: seondal Date: Thu, 17 Aug 2023 09:51:55 +0900 Subject: [PATCH 06/44] =?UTF-8?q?=E2=9C=A8=20feat=20:=20=20=ED=95=84?= =?UTF-8?q?=ED=84=B0=20=EC=B4=88=EA=B8=B0=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/(Main)/feed/components/BottomSheet.tsx | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/src/app/(Main)/feed/components/BottomSheet.tsx b/src/app/(Main)/feed/components/BottomSheet.tsx index da4a5796..45569f11 100644 --- a/src/app/(Main)/feed/components/BottomSheet.tsx +++ b/src/app/(Main)/feed/components/BottomSheet.tsx @@ -6,14 +6,20 @@ import { useState } from 'react'; export default function BottomSheet() { const countList = ['전체', '1인', '2인', '3인', '4인', '5인+']; - const [countState, setCountState] = useState('전체'); + const [countState, setCountState] = useState(countList[0]); const frameList = ['전체', '1컷', '3컷', '4컷', '6컷', '8컷+']; - const [frameState, setFrameState] = useState('전체'); + const [frameState, setFrameState] = useState(frameList[0]); const tagList = ['친구', '연인', '유명프레임', '기념일', '소품']; const [tagState, setTagState] = useState([]); + function resetFilter() { + setCountState(countList[0]); + setFrameState(frameList[0]); + setTagState([]); + } + return ( <>
@@ -47,7 +53,7 @@ export default function BottomSheet() { type="outline" icon={ICON.restart} text="필터 초기화" - onClick={() => console.log('포즈보기')} + onClick={resetFilter} /> console.log('포즈보기')} />
From 50cbe99b8bd62b8c4dcb3f39e0bbb11c6f7d4995 Mon Sep 17 00:00:00 2001 From: seondal Date: Thu, 17 Aug 2023 10:26:26 +0900 Subject: [PATCH 07/44] =?UTF-8?q?=F0=9F=9B=A0=20fix=20:=20=20tailwindCSS?= =?UTF-8?q?=20className=EC=97=90=20=EB=B3=80=EC=88=98=20=EB=84=A3=EC=A7=80?= =?UTF-8?q?=20=EC=95=8A=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/(Main)/feed/components/BottomSheet.tsx | 3 ++- src/components/Button/PrimaryButton.tsx | 10 +++------- src/components/Selection/SelectionTag.tsx | 6 +++--- styles/theme/colors.ts | 2 ++ 4 files changed, 10 insertions(+), 11 deletions(-) diff --git a/src/app/(Main)/feed/components/BottomSheet.tsx b/src/app/(Main)/feed/components/BottomSheet.tsx index 45569f11..c6144225 100644 --- a/src/app/(Main)/feed/components/BottomSheet.tsx +++ b/src/app/(Main)/feed/components/BottomSheet.tsx @@ -22,6 +22,7 @@ export default function BottomSheet() { return ( <> +
-
+
void; type?: 'fill' | 'outline'; - flex?: number; } const style = { fill: `bg-main-violet text-white`, - outline: `border-1 border-main-violet text-main-violet bg-[${COLOR.violet[50]}]`, + outline: `border-1 border-main-violet text-main-violet bg-main-violet-base`, }; -export default function PrimaryButton({ icon, text, onClick, type = 'fill', flex = 1 }: Button) { - const flexCss = 'flex-' + flex; - +export default function PrimaryButton({ icon, text, onClick, type = 'fill' }: Button) { return (
{icon && {''}}
{text}
diff --git a/src/components/Selection/SelectionTag.tsx b/src/components/Selection/SelectionTag.tsx index d57d6b31..85000111 100644 --- a/src/components/Selection/SelectionTag.tsx +++ b/src/components/Selection/SelectionTag.tsx @@ -1,4 +1,3 @@ -import { COLOR } from '@/constants/color'; import { ICON } from '@/constants/icon'; import Image from 'next/image'; @@ -20,11 +19,12 @@ export default function SelectionTag({ data, state, setState }: SelectionTag) {
{data.map((item, idx) => { const selected = state.includes(item); - const bg = `bg-[${selected ? COLOR.violet[100] : COLOR.gray[50]}]`; return (
clickTag(item)} >
diff --git a/styles/theme/colors.ts b/styles/theme/colors.ts index 7d0e8824..2cd5c2f0 100644 --- a/styles/theme/colors.ts +++ b/styles/theme/colors.ts @@ -6,6 +6,7 @@ export const colors = { 'sub-white': COLOR.gray[50], divider: COLOR.gray[100], 'card-ui': COLOR.gray[30], + dimmed: COLOR.black, // border 'border-default': COLOR.gray[300], @@ -13,6 +14,7 @@ export const colors = { 'border-disabled': COLOR.gray[100], // brand colors + 'main-violet-base': COLOR.violet[50], 'main-violet-bright': COLOR.violet[100], 'main-violet-light': COLOR.violet[300], 'main-violet': COLOR.violet[600], From 2850cea5bd0e67652b6b6485399e08103c888921 Mon Sep 17 00:00:00 2001 From: seondal Date: Thu, 17 Aug 2023 11:03:25 +0900 Subject: [PATCH 08/44] =?UTF-8?q?=E2=9A=99=EF=B8=8F=20set=20:=20=20?= =?UTF-8?q?=EC=A0=84=EC=97=AD=EC=83=81=ED=83=9C=EB=9D=BC=EC=9D=B4=EB=B8=8C?= =?UTF-8?q?=EB=9F=AC=EB=A6=AC=20recoil?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + yarn.lock | 12 ++++++++++++ 2 files changed, 13 insertions(+) diff --git a/package.json b/package.json index f636a06d..20e54907 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "react-dom": "18.2.0", "react-lottie-player": "^1.5.4", "react-tooltip": "^5.20.0", + "recoil": "^0.7.7", "typescript": "5.1.6" }, "devDependencies": { diff --git a/yarn.lock b/yarn.lock index 00337fc6..0ac89d36 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1652,6 +1652,11 @@ graphemer@^1.4.0: resolved "https://registry.yarnpkg.com/graphemer/-/graphemer-1.4.0.tgz#fb2f1d55e0e3a1849aeffc90c4fa0dd53a0e66c6" integrity sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag== +hamt_plus@1.0.2: + version "1.0.2" + resolved "https://registry.yarnpkg.com/hamt_plus/-/hamt_plus-1.0.2.tgz#e21c252968c7e33b20f6a1b094cd85787a265601" + integrity sha512-t2JXKaehnMb9paaYA7J0BX8QQAY8lwfQ9Gjf4pg/mk4krt+cmwmU652HOoWonf+7+EQV97ARPMhhVgU1ra2GhA== + has-bigints@^1.0.1, has-bigints@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/has-bigints/-/has-bigints-1.0.2.tgz#0871bd3e3d51626f6ca0966668ba35d5602d6eaa" @@ -2519,6 +2524,13 @@ readdirp@~3.6.0: dependencies: picomatch "^2.2.1" +recoil@^0.7.7: + version "0.7.7" + resolved "https://registry.yarnpkg.com/recoil/-/recoil-0.7.7.tgz#c5f2c843224384c9c09e4a62c060fb4c1454dc8e" + integrity sha512-8Og5KPQW9LwC577Vc7Ug2P0vQshkv1y3zG3tSSkWMqkWSwHmE+by06L8JtnGocjW6gcCvfwB3YtrJG6/tWivNQ== + dependencies: + hamt_plus "1.0.2" + regenerator-runtime@^0.13.11: version "0.13.11" resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9" From d0a76f42f3dc01421cf6d2cc0acfdef81d9e8318 Mon Sep 17 00:00:00 2001 From: seondal Date: Thu, 17 Aug 2023 11:03:42 +0900 Subject: [PATCH 09/44] =?UTF-8?q?=E2=9C=A8=20feat=20:=20=20useBottomSheet?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../(Main)/feed/components/BottomSheet.tsx | 84 +++++++++++-------- src/app/(Main)/feed/components/Filter.tsx | 8 +- src/app/RecoilContextProvider.tsx | 7 ++ src/app/layout.tsx | 12 +-- src/hooks/useBottomSheet.tsx | 19 +++++ 5 files changed, 88 insertions(+), 42 deletions(-) create mode 100644 src/app/RecoilContextProvider.tsx create mode 100644 src/hooks/useBottomSheet.tsx diff --git a/src/app/(Main)/feed/components/BottomSheet.tsx b/src/app/(Main)/feed/components/BottomSheet.tsx index c6144225..c51f01b1 100644 --- a/src/app/(Main)/feed/components/BottomSheet.tsx +++ b/src/app/(Main)/feed/components/BottomSheet.tsx @@ -1,10 +1,14 @@ import { PrimaryButton } from '@/components/Button'; +import { AnimatedPortal } from '@/components/Portal'; import { SelectionBasic, SelectionTag } from '@/components/Selection'; import { ICON } from '@/constants/icon'; +import useBottomSheet from '@/hooks/useBottomSheet'; import Image from 'next/image'; import { useState } from 'react'; export default function BottomSheet() { + const { isBottomSheetOpen, closeBottomSheet } = useBottomSheet(); + const countList = ['전체', '1인', '2인', '3인', '4인', '5인+']; const [countState, setCountState] = useState(countList[0]); @@ -20,45 +24,53 @@ export default function BottomSheet() { setTagState([]); } + if (!isBottomSheetOpen) return null; return ( <> -
-
-
- -
-
-
-
- 인원 수 -
- -
-
-
- 프레임 수 -
- -
-
-
- 태그 -
- -
-
-
- - console.log('포즈보기')} /> + +
+
+
+ +
+
+
+
+ 인원 수 +
+ +
+
+
+ 프레임 수 +
+ +
+
+
+ 태그 +
+ +
+
+
+ + console.log('포즈보기')} /> +
-
+ ); } diff --git a/src/app/(Main)/feed/components/Filter.tsx b/src/app/(Main)/feed/components/Filter.tsx index 098fbb68..9be64ba5 100644 --- a/src/app/(Main)/feed/components/Filter.tsx +++ b/src/app/(Main)/feed/components/Filter.tsx @@ -1,10 +1,16 @@ import { ICON } from '@/constants/icon'; +import useBottomSheet from '@/hooks/useBottomSheet'; import Image from 'next/image'; export default function Filter() { + const { openBottomSheet } = useBottomSheet(); + return (
- diff --git a/src/app/RecoilContextProvider.tsx b/src/app/RecoilContextProvider.tsx new file mode 100644 index 00000000..a548c0e3 --- /dev/null +++ b/src/app/RecoilContextProvider.tsx @@ -0,0 +1,7 @@ +'use client'; + +import { RecoilRoot } from 'recoil'; + +export default function RecoilContextProvider({ children }: { children: React.ReactNode }) { + return {children}; +} diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 5ab3f375..6c1ab8b5 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,9 +1,9 @@ -import { Header } from '@/components/Header'; import './globals.css'; import '../../styles/font.css'; import '../../styles/typography.css'; import type { Metadata } from 'next'; +import RecoilContextProvider from './RecoilContextProvider'; export const metadata: Metadata = { title: 'PosePicker', @@ -47,10 +47,12 @@ export default function RootLayout({ children }: { children: React.ReactNode }) return ( -
- {children} -
-
+ +
+ {children} +
+
+ ); diff --git a/src/hooks/useBottomSheet.tsx b/src/hooks/useBottomSheet.tsx new file mode 100644 index 00000000..13d254bc --- /dev/null +++ b/src/hooks/useBottomSheet.tsx @@ -0,0 +1,19 @@ +import { atom, useRecoilState } from 'recoil'; + +const BottomSheetState = atom({ + key: 'BottomSheetState', + default: false, +}); + +export default function useBottomSheet() { + const [isBottomSheetOpen, setIsBottomSheetOpen] = useRecoilState(BottomSheetState); + + function openBottomSheet() { + setIsBottomSheetOpen(true); + } + function closeBottomSheet() { + setIsBottomSheetOpen(false); + } + + return { isBottomSheetOpen, openBottomSheet, closeBottomSheet }; +} From 15a412fa63495446599ca8d9a23bfc9a55493828 Mon Sep 17 00:00:00 2001 From: seondal Date: Thu, 17 Aug 2023 11:59:00 +0900 Subject: [PATCH 10/44] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor=20:=20=20Bo?= =?UTF-8?q?ttomSheet=20=EB=AA=A8=EB=93=88=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../(Main)/feed/components/BottomSheet.tsx | 76 ------------------- .../(Main)/feed/components/FilterSheet.tsx | 56 ++++++++++++++ src/app/(Main)/feed/page.tsx | 4 +- src/components/Modal/BottomSheet.tsx | 31 ++++++++ 4 files changed, 89 insertions(+), 78 deletions(-) delete mode 100644 src/app/(Main)/feed/components/BottomSheet.tsx create mode 100644 src/app/(Main)/feed/components/FilterSheet.tsx create mode 100644 src/components/Modal/BottomSheet.tsx diff --git a/src/app/(Main)/feed/components/BottomSheet.tsx b/src/app/(Main)/feed/components/BottomSheet.tsx deleted file mode 100644 index c51f01b1..00000000 --- a/src/app/(Main)/feed/components/BottomSheet.tsx +++ /dev/null @@ -1,76 +0,0 @@ -import { PrimaryButton } from '@/components/Button'; -import { AnimatedPortal } from '@/components/Portal'; -import { SelectionBasic, SelectionTag } from '@/components/Selection'; -import { ICON } from '@/constants/icon'; -import useBottomSheet from '@/hooks/useBottomSheet'; -import Image from 'next/image'; -import { useState } from 'react'; - -export default function BottomSheet() { - const { isBottomSheetOpen, closeBottomSheet } = useBottomSheet(); - - const countList = ['전체', '1인', '2인', '3인', '4인', '5인+']; - const [countState, setCountState] = useState(countList[0]); - - const frameList = ['전체', '1컷', '3컷', '4컷', '6컷', '8컷+']; - const [frameState, setFrameState] = useState(frameList[0]); - - const tagList = ['친구', '연인', '유명프레임', '기념일', '소품']; - const [tagState, setTagState] = useState([]); - - function resetFilter() { - setCountState(countList[0]); - setFrameState(frameList[0]); - setTagState([]); - } - - if (!isBottomSheetOpen) return null; - return ( - <> - -
-
-
- -
-
-
-
- 인원 수 -
- -
-
-
- 프레임 수 -
- -
-
-
- 태그 -
- -
-
-
- - console.log('포즈보기')} /> -
-
- - - ); -} diff --git a/src/app/(Main)/feed/components/FilterSheet.tsx b/src/app/(Main)/feed/components/FilterSheet.tsx new file mode 100644 index 00000000..e7b3a6ca --- /dev/null +++ b/src/app/(Main)/feed/components/FilterSheet.tsx @@ -0,0 +1,56 @@ +import { PrimaryButton } from '@/components/Button'; +import BottomSheet from '@/components/Modal/BottomSheet'; +import { SelectionBasic, SelectionTag } from '@/components/Selection'; +import { ICON } from '@/constants/icon'; +import { useState } from 'react'; + +export default function FilterSheet() { + const countList = ['전체', '1인', '2인', '3인', '4인', '5인+']; + const [countState, setCountState] = useState(countList[0]); + + const frameList = ['전체', '1컷', '3컷', '4컷', '6컷', '8컷+']; + const [frameState, setFrameState] = useState(frameList[0]); + + const tagList = ['친구', '연인', '유명프레임', '기념일', '소품']; + const [tagState, setTagState] = useState([]); + + function resetFilter() { + setCountState(countList[0]); + setFrameState(frameList[0]); + setTagState([]); + } + + return ( + <> + +
+
+ 인원 수 +
+ +
+
+
+ 프레임 수 +
+ +
+
+
+ 태그 +
+ +
+
+ + console.log('포즈보기')} /> +
+ + + ); +} diff --git a/src/app/(Main)/feed/page.tsx b/src/app/(Main)/feed/page.tsx index 1901ffcb..122921e0 100644 --- a/src/app/(Main)/feed/page.tsx +++ b/src/app/(Main)/feed/page.tsx @@ -1,8 +1,8 @@ 'use client'; -import BottomSheet from './components/BottomSheet'; import Filter from './components/Filter'; import Thumbnails from './components/Thumbnails'; +import FilterSheet from './components/FilterSheet'; export default function Feed() { return ( @@ -19,7 +19,7 @@ export default function Feed() {
- + ); } diff --git a/src/components/Modal/BottomSheet.tsx b/src/components/Modal/BottomSheet.tsx new file mode 100644 index 00000000..7438a1a0 --- /dev/null +++ b/src/components/Modal/BottomSheet.tsx @@ -0,0 +1,31 @@ +import { AnimatedPortal } from '@/components/Portal'; +import { ICON } from '@/constants/icon'; +import useBottomSheet from '@/hooks/useBottomSheet'; +import { StrictPropsWithChildren } from '@/types'; +import Image from 'next/image'; + +export default function BottomSheet({ children }: StrictPropsWithChildren) { + const { isBottomSheetOpen, closeBottomSheet } = useBottomSheet(); + + if (!isBottomSheetOpen) return null; + return ( + <> + +
+
+
+ +
+
{children}
+
+ + + ); +} From ebfcb6905367a20840a01ae0e18f044676dc7256 Mon Sep 17 00:00:00 2001 From: seondal Date: Fri, 18 Aug 2023 19:40:01 +0900 Subject: [PATCH 11/44] =?UTF-8?q?style=20:=20=EB=B6=81=EB=A7=88=ED=81=AC?= =?UTF-8?q?=20=ED=83=AD=20=EC=B6=94=EA=B0=80=20=EB=B0=8F=20=EB=A0=88?= =?UTF-8?q?=EC=9D=B4=EC=95=84=EC=9B=83=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/(Main)/bookmark/page.tsx | 3 +++ src/app/(Main)/components/Tab.tsx | 1 + src/app/(Main)/layout.tsx | 2 +- src/app/(Main)/pick/components/PickSection.tsx | 8 +++----- .../(Sub)/bookmark/components/BookmarkHeader.tsx | 16 ---------------- src/app/(Sub)/bookmark/page.tsx | 10 ---------- 6 files changed, 8 insertions(+), 32 deletions(-) create mode 100644 src/app/(Main)/bookmark/page.tsx delete mode 100644 src/app/(Sub)/bookmark/components/BookmarkHeader.tsx delete mode 100644 src/app/(Sub)/bookmark/page.tsx diff --git a/src/app/(Main)/bookmark/page.tsx b/src/app/(Main)/bookmark/page.tsx new file mode 100644 index 00000000..2bcc3565 --- /dev/null +++ b/src/app/(Main)/bookmark/page.tsx @@ -0,0 +1,3 @@ +export default function BookmarkPage() { + return <>북마크; +} diff --git a/src/app/(Main)/components/Tab.tsx b/src/app/(Main)/components/Tab.tsx index 8b0ebd9a..b74e3ff6 100644 --- a/src/app/(Main)/components/Tab.tsx +++ b/src/app/(Main)/components/Tab.tsx @@ -7,6 +7,7 @@ const tabData = [ { path: '/pick', title: '포즈픽' }, { path: '/talk', title: '포즈톡' }, { path: '/feed', title: '포즈피드' }, + { path: '/bookmark', title: '북마크' }, ]; export default function Tab() { diff --git a/src/app/(Main)/layout.tsx b/src/app/(Main)/layout.tsx index 920ff0a6..277dee37 100644 --- a/src/app/(Main)/layout.tsx +++ b/src/app/(Main)/layout.tsx @@ -7,7 +7,7 @@ export default function MainLayout({ children }: StrictPropsWithChildren) { <> - {children} +
{children}
); } diff --git a/src/app/(Main)/pick/components/PickSection.tsx b/src/app/(Main)/pick/components/PickSection.tsx index 9b453cdb..acb08dcf 100644 --- a/src/app/(Main)/pick/components/PickSection.tsx +++ b/src/app/(Main)/pick/components/PickSection.tsx @@ -22,11 +22,9 @@ export default function PickSection() { }; return ( -
-
- -
- +
+ +
{isLoading ? ( diff --git a/src/app/(Sub)/bookmark/components/BookmarkHeader.tsx b/src/app/(Sub)/bookmark/components/BookmarkHeader.tsx deleted file mode 100644 index 0d7de3ca..00000000 --- a/src/app/(Sub)/bookmark/components/BookmarkHeader.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { Header } from '@/components/Header'; -import { Spacing } from '@/components/Spacing'; -import Image from 'next/image'; - -export default function BookmarkHeader() { - const LeftNode = ( -
- back - -

북마크

-
- ); - const RightNode = back; - - return
; -} diff --git a/src/app/(Sub)/bookmark/page.tsx b/src/app/(Sub)/bookmark/page.tsx deleted file mode 100644 index 1d8d630c..00000000 --- a/src/app/(Sub)/bookmark/page.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import BookmarkHeader from './components/BookmarkHeader'; - -export default function BookmarkPage() { - return ( - <> - - 북마크 - - ); -} From ee2fae249b5ab2c96e5a2434157b84657ed54dd3 Mon Sep 17 00:00:00 2001 From: seondal Date: Fri, 18 Aug 2023 20:05:44 +0900 Subject: [PATCH 12/44] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor=20:=20=20Ph?= =?UTF-8?q?otoList=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/(Main)/bookmark/page.tsx | 8 +++++++- src/app/(Main)/feed/components/PhotoList.tsx | 17 +++++++++++++++++ src/app/(Main)/feed/page.tsx | 12 ++---------- 3 files changed, 26 insertions(+), 11 deletions(-) create mode 100644 src/app/(Main)/feed/components/PhotoList.tsx diff --git a/src/app/(Main)/bookmark/page.tsx b/src/app/(Main)/bookmark/page.tsx index 2bcc3565..e30d9748 100644 --- a/src/app/(Main)/bookmark/page.tsx +++ b/src/app/(Main)/bookmark/page.tsx @@ -1,3 +1,9 @@ +import PhotoList from '../feed/components/PhotoList'; + export default function BookmarkPage() { - return <>북마크; + return ( + <> + + + ); } diff --git a/src/app/(Main)/feed/components/PhotoList.tsx b/src/app/(Main)/feed/components/PhotoList.tsx new file mode 100644 index 00000000..72ad0bde --- /dev/null +++ b/src/app/(Main)/feed/components/PhotoList.tsx @@ -0,0 +1,17 @@ +import Thumbnails from './Thumbnails'; + +export default function PhotoList() { + return ( + <> +
+ + + + + + + +
+ + ); +} diff --git a/src/app/(Main)/feed/page.tsx b/src/app/(Main)/feed/page.tsx index 122921e0..79a39900 100644 --- a/src/app/(Main)/feed/page.tsx +++ b/src/app/(Main)/feed/page.tsx @@ -1,23 +1,15 @@ 'use client'; import Filter from './components/Filter'; -import Thumbnails from './components/Thumbnails'; import FilterSheet from './components/FilterSheet'; +import PhotoList from './components/PhotoList'; export default function Feed() { return ( <>
-
- - - - - - - -
+
From dfb2db7ca9f28eff8c862d7e6a960765f22ee58b Mon Sep 17 00:00:00 2001 From: seondal Date: Fri, 18 Aug 2023 20:21:06 +0900 Subject: [PATCH 13/44] =?UTF-8?q?=F0=9F=92=84=20style=20:=20=20=EB=B6=81?= =?UTF-8?q?=EB=A7=88=ED=81=AC=20=EB=B2=84=ED=8A=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/(Main)/feed/components/Photo.tsx | 12 ++++++++++++ src/app/(Main)/feed/components/PhotoList.tsx | 16 ++++++++-------- src/app/(Main)/feed/components/Thumbnails.tsx | 3 --- src/constants/icon.ts | 4 ++++ 4 files changed, 24 insertions(+), 11 deletions(-) create mode 100644 src/app/(Main)/feed/components/Photo.tsx delete mode 100644 src/app/(Main)/feed/components/Thumbnails.tsx diff --git a/src/app/(Main)/feed/components/Photo.tsx b/src/app/(Main)/feed/components/Photo.tsx new file mode 100644 index 00000000..f2696361 --- /dev/null +++ b/src/app/(Main)/feed/components/Photo.tsx @@ -0,0 +1,12 @@ +import { ICON } from '@/constants/icon'; +import Image from 'next/image'; + +export default function Photo() { + return ( +
+
+ 🔖 +
+
+ ); +} diff --git a/src/app/(Main)/feed/components/PhotoList.tsx b/src/app/(Main)/feed/components/PhotoList.tsx index 72ad0bde..5dc8e079 100644 --- a/src/app/(Main)/feed/components/PhotoList.tsx +++ b/src/app/(Main)/feed/components/PhotoList.tsx @@ -1,16 +1,16 @@ -import Thumbnails from './Thumbnails'; +import Photo from './Photo'; export default function PhotoList() { return ( <>
- - - - - - - + + + + + + +
); diff --git a/src/app/(Main)/feed/components/Thumbnails.tsx b/src/app/(Main)/feed/components/Thumbnails.tsx deleted file mode 100644 index 883b4b0b..00000000 --- a/src/app/(Main)/feed/components/Thumbnails.tsx +++ /dev/null @@ -1,3 +0,0 @@ -export default function Thumbnails() { - return
; -} diff --git a/src/constants/icon.ts b/src/constants/icon.ts index 21b16cf9..76b30e15 100644 --- a/src/constants/icon.ts +++ b/src/constants/icon.ts @@ -1,6 +1,10 @@ export const ICON = { close: '/icons/close.svg', restart: '/icons/restart.svg', + bookmark: { + fill: '/icons/bookmark_fill.svg', + empty: '/icons/bookmark.svg', + }, arrow: { back: '/icons/arrow_back.svg', }, From a60409febb7fbf6130babb39759c39ac2da5055f Mon Sep 17 00:00:00 2001 From: seondal Date: Fri, 18 Aug 2023 20:45:29 +0900 Subject: [PATCH 14/44] =?UTF-8?q?=F0=9F=92=84=20style=20:=20=20=ED=8F=AC?= =?UTF-8?q?=EC=A6=88=EB=A5=BC=20=EB=B3=B4=EA=B4=80=ED=95=B4=EB=B3=B4?= =?UTF-8?q?=EC=84=B8=EC=9A=94=20!?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/(Main)/bookmark/page.tsx | 2 ++ src/app/(Main)/feed/components/EmptyCase.tsx | 19 +++++++++++++++++++ src/components/Button/PrimaryButton.tsx | 12 +++++++++--- 3 files changed, 30 insertions(+), 3 deletions(-) create mode 100644 src/app/(Main)/feed/components/EmptyCase.tsx diff --git a/src/app/(Main)/bookmark/page.tsx b/src/app/(Main)/bookmark/page.tsx index e30d9748..6f483dc9 100644 --- a/src/app/(Main)/bookmark/page.tsx +++ b/src/app/(Main)/bookmark/page.tsx @@ -1,8 +1,10 @@ import PhotoList from '../feed/components/PhotoList'; +import EmptyCase from '../feed/components/EmptyCase'; export default function BookmarkPage() { return ( <> + ); diff --git a/src/app/(Main)/feed/components/EmptyCase.tsx b/src/app/(Main)/feed/components/EmptyCase.tsx new file mode 100644 index 00000000..a2383141 --- /dev/null +++ b/src/app/(Main)/feed/components/EmptyCase.tsx @@ -0,0 +1,19 @@ +import { PrimaryButton } from '@/components/Button'; +import { Spacing } from '@/components/Spacing'; +import Link from 'next/link'; + +export default function EmptyCase() { + return ( +
+

포즈를 보관해 보세요!

+ +

{`북마크 버튼으로 포즈를 보관할 수 있어요.\n포즈피드에서 멋진 포즈를 찾아 보관해 보세요.`}

+ +
+ + + +
+
+ ); +} diff --git a/src/components/Button/PrimaryButton.tsx b/src/components/Button/PrimaryButton.tsx index 423ea07f..c6614c40 100644 --- a/src/components/Button/PrimaryButton.tsx +++ b/src/components/Button/PrimaryButton.tsx @@ -3,13 +3,19 @@ import Image from 'next/image'; interface Button { icon?: string; text: string; - onClick: () => void; - type?: 'fill' | 'outline'; + onClick?: () => void; + type?: keyof style; } -const style = { +interface style { + fill: string; + outline: string; + secondary: string; +} +const style: style = { fill: `bg-main-violet text-white`, outline: `border-1 border-main-violet text-main-violet bg-main-violet-base`, + secondary: `bg-sub-white text-secondary w-fit`, }; export default function PrimaryButton({ icon, text, onClick, type = 'fill' }: Button) { From 2db4089d409050a130ce9548904a932ee9794d7c Mon Sep 17 00:00:00 2001 From: seondal Date: Fri, 18 Aug 2023 20:54:33 +0900 Subject: [PATCH 15/44] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor=20:=20=20Em?= =?UTF-8?q?ptyCase=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/(Main)/bookmark/page.tsx | 7 ++++++- src/app/(Main)/feed/components/EmptyCase.tsx | 19 ++++++++++++++----- src/app/(Main)/feed/page.tsx | 7 +++++++ 3 files changed, 27 insertions(+), 6 deletions(-) diff --git a/src/app/(Main)/bookmark/page.tsx b/src/app/(Main)/bookmark/page.tsx index 6f483dc9..98b66f4a 100644 --- a/src/app/(Main)/bookmark/page.tsx +++ b/src/app/(Main)/bookmark/page.tsx @@ -4,7 +4,12 @@ import EmptyCase from '../feed/components/EmptyCase'; export default function BookmarkPage() { return ( <> - + ); diff --git a/src/app/(Main)/feed/components/EmptyCase.tsx b/src/app/(Main)/feed/components/EmptyCase.tsx index a2383141..537c154f 100644 --- a/src/app/(Main)/feed/components/EmptyCase.tsx +++ b/src/app/(Main)/feed/components/EmptyCase.tsx @@ -2,16 +2,25 @@ import { PrimaryButton } from '@/components/Button'; import { Spacing } from '@/components/Spacing'; import Link from 'next/link'; -export default function EmptyCase() { +interface EmptyCase { + title: string; + text: string; + button: string; + path: string; +} + +export default function EmptyCase(props: EmptyCase) { + const { title, text, button, path } = props; + return (
-

포즈를 보관해 보세요!

+

{title}

-

{`북마크 버튼으로 포즈를 보관할 수 있어요.\n포즈피드에서 멋진 포즈를 찾아 보관해 보세요.`}

+

{text}

- - + +
diff --git a/src/app/(Main)/feed/page.tsx b/src/app/(Main)/feed/page.tsx index 79a39900..e156a19e 100644 --- a/src/app/(Main)/feed/page.tsx +++ b/src/app/(Main)/feed/page.tsx @@ -1,5 +1,6 @@ 'use client'; +import EmptyCase from './components/EmptyCase'; import Filter from './components/Filter'; import FilterSheet from './components/FilterSheet'; import PhotoList from './components/PhotoList'; @@ -9,6 +10,12 @@ export default function Feed() { <>
+
From efcf98795c3c4934e88e252f479ae98adfcdf693 Mon Sep 17 00:00:00 2001 From: seondal Date: Tue, 22 Aug 2023 10:52:43 +0900 Subject: [PATCH 16/44] =?UTF-8?q?=E2=9C=82=EF=B8=8F=20edit=20:=20=20select?= =?UTF-8?q?iontag=20->=20selectionTagList?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/(Main)/feed/components/FilterSheet.tsx | 4 ++-- .../Selection/{SelectionTag.tsx => SelectionTagList.tsx} | 4 ++-- src/components/Selection/index.ts | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) rename src/components/Selection/{SelectionTag.tsx => SelectionTagList.tsx} (89%) diff --git a/src/app/(Main)/feed/components/FilterSheet.tsx b/src/app/(Main)/feed/components/FilterSheet.tsx index e7b3a6ca..9be20eb6 100644 --- a/src/app/(Main)/feed/components/FilterSheet.tsx +++ b/src/app/(Main)/feed/components/FilterSheet.tsx @@ -1,6 +1,6 @@ import { PrimaryButton } from '@/components/Button'; import BottomSheet from '@/components/Modal/BottomSheet'; -import { SelectionBasic, SelectionTag } from '@/components/Selection'; +import { SelectionBasic, SelectionTagList } from '@/components/Selection'; import { ICON } from '@/constants/icon'; import { useState } from 'react'; @@ -39,7 +39,7 @@ export default function FilterSheet() {
태그
- +
>; } -export default function SelectionTag({ data, state, setState }: SelectionTag) { +export default function SelectionTagList({ data, state, setState }: SelectionTagList) { function clickTag(tag: string) { if (state.includes(tag)) { setState((prev) => prev.filter((item) => item !== tag)); diff --git a/src/components/Selection/index.ts b/src/components/Selection/index.ts index e3731f67..8920c635 100644 --- a/src/components/Selection/index.ts +++ b/src/components/Selection/index.ts @@ -1,2 +1,2 @@ export { default as SelectionBasic } from './SelectionBasic'; -export { default as SelectionTag } from './SelectionTag'; +export { default as SelectionTagList } from './SelectionTagList'; From 208a1a84ec4a114a446df427fd11f2f7a81edf66 Mon Sep 17 00:00:00 2001 From: seondal Date: Tue, 22 Aug 2023 11:14:44 +0900 Subject: [PATCH 17/44] =?UTF-8?q?=F0=9F=92=84=20style=20:=20=20=EB=A0=88?= =?UTF-8?q?=EC=9D=B4=EC=95=84=EC=9B=83=20=EC=98=A4=EB=A5=98=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/(Main)/components/Tab.tsx | 2 +- src/app/(Main)/pick/components/PickSection.tsx | 14 +++----------- src/app/layout.tsx | 18 +++++++++--------- 3 files changed, 13 insertions(+), 21 deletions(-) diff --git a/src/app/(Main)/components/Tab.tsx b/src/app/(Main)/components/Tab.tsx index c844aaf6..196b623d 100644 --- a/src/app/(Main)/components/Tab.tsx +++ b/src/app/(Main)/components/Tab.tsx @@ -14,7 +14,7 @@ export default function Tab() { const path = usePathname(); return ( -