From 8069bcc295264712c23af12f3449355320043b98 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EB=82=98=EA=B2=BD?= Date: Fri, 15 Mar 2024 11:48:28 +0900 Subject: [PATCH 01/42] =?UTF-8?q?Chore:=20STACKS=20=EC=83=81=EC=88=98=20?= =?UTF-8?q?=EB=B0=B0=EC=97=B4=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- co-kkiri/src/constants/stacks.ts | 32 ++++++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) create mode 100644 co-kkiri/src/constants/stacks.ts diff --git a/co-kkiri/src/constants/stacks.ts b/co-kkiri/src/constants/stacks.ts new file mode 100644 index 00000000..78591c41 --- /dev/null +++ b/co-kkiri/src/constants/stacks.ts @@ -0,0 +1,32 @@ +export const STACKS: Stack[] = [ + { name: "JavaScript", img: "https://cdn.svgporn.com/logos/javascript.svg", relatedPosition: ["FRONT_END", "BACK_END"] }, + { name: "TypeScript", img: "https://cdn.svgporn.com/logos/typescript-icon.svg", relatedPosition: ["FRONT_END", "BACK_END"] }, + { name: "React", img: "https://cdn.svgporn.com/logos/react.svg", relatedPosition: ["FRONT_END"] }, + { name: "Vue.js", img: "https://cdn.svgporn.com/logos/vue.svg", relatedPosition: ["FRONT_END"] }, + { name: "Angular", img: "https://cdn.svgporn.com/logos/angular-icon.svg", relatedPosition: ["FRONT_END"] }, + { name: "React Query", img: "https://cdn.svgporn.com/logos/react-query-icon.svg", relatedPosition: ["FRONT_END"] }, + { name: "Redux", img: "https://cdn.svgporn.com/logos/redux.svg", relatedPosition: ["FRONT_END"] }, + { name: "Node.js", img: "https://cdn.svgporn.com/logos/nodejs-icon.svg", relatedPosition: ["BACK_END"] }, + { name: "Spring", img: "https://cdn.svgporn.com/logos/spring-icon.svg", relatedPosition: ["BACK_END"] }, + { name: "Django", img: "https://cdn.svgporn.com/logos/django-icon.svg", relatedPosition: ["BACK_END"] }, + { name: "Python", img: "https://cdn.svgporn.com/logos/python.svg", relatedPosition: ["BACK_END", "OTHERS"] }, // AI 포함 + { name: "Java", img: "https://cdn.svgporn.com/logos/java.svg", relatedPosition: ["BACK_END", "MOBILE"] }, + { name: "MySQL", img: "https://cdn.svgporn.com/logos/mysql-icon.svg", relatedPosition: ["BACK_END"] }, // 데이터베이스 + { name: "MongoDB", img: "https://cdn.svgporn.com/logos/mongodb-icon.svg", relatedPosition: ["BACK_END"] }, // 데이터베이스 + { name: "PostgreSQL", img: "https://cdn.svgporn.com/logos/postgresql.svg", relatedPosition: ["BACK_END"] }, // 데이터베이스 + { name: "Redis", img: "https://cdn.svgporn.com/logos/redis.svg", relatedPosition: ["BACK_END"] }, // 데이터베이스 + { name: "GraphQL", img: "https://cdn.svgporn.com/logos/graphql.svg", relatedPosition: ["BACK_END", "FRONT_END"] }, // API + { name: "Kotlin", img: "https://cdn.svgporn.com/logos/kotlin-icon.svg", relatedPosition: ["BACK_END", "MOBILE"] }, + { name: "Swift", img: "https://cdn.svgporn.com/logos/swift.svg", relatedPosition: ["MOBILE"] }, + { name: "Flutter", img: "https://cdn.svgporn.com/logos/flutter.svg", relatedPosition: ["MOBILE"] }, + { name: "React Native", img: "https://cdn.svgporn.com/logos/react.svg", relatedPosition: ["MOBILE"] }, + { name: "Figma", img: "https://cdn.svgporn.com/logos/figma.svg", relatedPosition: ["OTHERS"] }, // 디자인 + { name: "Adobe XD", img: "https://cdn.svgporn.com/logos/adobe-xd.svg", relatedPosition: ["OTHERS"] }, // 디자인 + { name: "AWS", img: "https://cdn.svgporn.com/logos/aws.svg", relatedPosition: ["OTHERS"] }, // 클라우드 서비스 + { name: "Docker", img: "https://cdn.svgporn.com/logos/docker-icon.svg", relatedPosition: ["OTHERS"] }, // 데브옵스 + { name: "Kubernetes", img: "https://cdn.svgporn.com/logos/kubernetes.svg", relatedPosition: ["OTHERS"] }, // 데브옵스 + { name: "Git", img: "https://cdn.svgporn.com/logos/git-icon.svg", relatedPosition: ["OTHERS"] }, // 버전 관리 + { name: "Jira", img: "https://cdn.svgporn.com/logos/jira.svg", relatedPosition: ["OTHERS"] }, // 프로젝트 관리 + { name: "TensorFlow", img: "https://cdn.svgporn.com/logos/tensorflow.svg", relatedPosition: ["OTHERS"] }, // AI + { name: "PyTorch", img: "https://cdn.svgporn.com/logos/pytorch-icon.svg", relatedPosition: ["OTHERS"] }, // AI +]; From a8af40fb0d9e35fb45453a94a5e5494ecdc8cb04 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EB=82=98=EA=B2=BD?= Date: Fri, 15 Mar 2024 11:52:47 +0900 Subject: [PATCH 02/42] =?UTF-8?q?Feat:=20Stack=20=EB=B0=8F=20Stack?= =?UTF-8?q?=EC=9D=84=20=EC=82=AC=EC=9A=A9=ED=95=98=EB=8A=94=20Position=20T?= =?UTF-8?q?ype=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- co-kkiri/src/types/StackTypes.ts | 12 ++++++++++++ 1 file changed, 12 insertions(+) create mode 100644 co-kkiri/src/types/StackTypes.ts diff --git a/co-kkiri/src/types/StackTypes.ts b/co-kkiri/src/types/StackTypes.ts new file mode 100644 index 00000000..d2bb7488 --- /dev/null +++ b/co-kkiri/src/types/StackTypes.ts @@ -0,0 +1,12 @@ +type StackPosition = "FRONT_END" | "BACK_END" | "MOBILE" | "OTHERS" + +type Stack = { + name: string; + img: string; + relatedPosition: Array; +}; + +// type FilteredStacks = [ +// T extends StackPosition ? +// ] + From 566fb8ecf5b58e1fda7b4eb4d19f0dfb6a295d67 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EB=82=98=EA=B2=BD?= Date: Fri, 15 Mar 2024 15:58:51 +0900 Subject: [PATCH 03/42] =?UTF-8?q?Fix:=20StackType=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- co-kkiri/src/types/StackTypes.ts | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/co-kkiri/src/types/StackTypes.ts b/co-kkiri/src/types/StackTypes.ts index d2bb7488..f5bb9d2d 100644 --- a/co-kkiri/src/types/StackTypes.ts +++ b/co-kkiri/src/types/StackTypes.ts @@ -1,12 +1,11 @@ -type StackPosition = "FRONT_END" | "BACK_END" | "MOBILE" | "OTHERS" +export type StackPosition = "FRONT_END" | "BACK_END" | "MOBILE" | "OTHERS" -type Stack = { +export type Stack = { name: string; img: string; relatedPosition: Array; }; -// type FilteredStacks = [ -// T extends StackPosition ? -// ] - +export type Stacks = { + [key: string]: Stack; +}; From be251efd1b0e75701310deb1c68fb9ba601514d8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EB=82=98=EA=B2=BD?= Date: Fri, 15 Mar 2024 15:59:07 +0900 Subject: [PATCH 04/42] =?UTF-8?q?Feat:=20Image=EA=B4=80=EB=A0=A8=20?= =?UTF-8?q?=ED=83=80=EC=9E=85=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- co-kkiri/src/types/ImageTypes.ts | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 co-kkiri/src/types/ImageTypes.ts diff --git a/co-kkiri/src/types/ImageTypes.ts b/co-kkiri/src/types/ImageTypes.ts new file mode 100644 index 00000000..59c98527 --- /dev/null +++ b/co-kkiri/src/types/ImageTypes.ts @@ -0,0 +1,8 @@ +export type Image = { + src: string; + alt: string; +} + +export type Images = { + [key: string]: Image; +} From 565b6d28f93e9a49d2183d889d9f26008470e5f5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EB=82=98=EA=B2=BD?= Date: Fri, 15 Mar 2024 16:00:37 +0900 Subject: [PATCH 05/42] =?UTF-8?q?Chore:=20Stack=20=EB=8D=B0=EC=9D=B4?= =?UTF-8?q?=ED=84=B0=20=EB=B3=80=EA=B2=BD=20=EB=B0=8F=20STACK=5FNAMES?= =?UTF-8?q?=EB=A7=8C=20=EB=AA=A8=EC=9D=80=20=EB=B3=80=EC=88=98=20=EC=83=9D?= =?UTF-8?q?=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Stack_names는 stack 이름이 모두 저장된 배열, mock 데이터같이 쓸 수 있음 --- co-kkiri/src/constants/stacks.ts | 68 +++++++++++++++++--------------- 1 file changed, 36 insertions(+), 32 deletions(-) diff --git a/co-kkiri/src/constants/stacks.ts b/co-kkiri/src/constants/stacks.ts index 78591c41..51c5c180 100644 --- a/co-kkiri/src/constants/stacks.ts +++ b/co-kkiri/src/constants/stacks.ts @@ -1,32 +1,36 @@ -export const STACKS: Stack[] = [ - { name: "JavaScript", img: "https://cdn.svgporn.com/logos/javascript.svg", relatedPosition: ["FRONT_END", "BACK_END"] }, - { name: "TypeScript", img: "https://cdn.svgporn.com/logos/typescript-icon.svg", relatedPosition: ["FRONT_END", "BACK_END"] }, - { name: "React", img: "https://cdn.svgporn.com/logos/react.svg", relatedPosition: ["FRONT_END"] }, - { name: "Vue.js", img: "https://cdn.svgporn.com/logos/vue.svg", relatedPosition: ["FRONT_END"] }, - { name: "Angular", img: "https://cdn.svgporn.com/logos/angular-icon.svg", relatedPosition: ["FRONT_END"] }, - { name: "React Query", img: "https://cdn.svgporn.com/logos/react-query-icon.svg", relatedPosition: ["FRONT_END"] }, - { name: "Redux", img: "https://cdn.svgporn.com/logos/redux.svg", relatedPosition: ["FRONT_END"] }, - { name: "Node.js", img: "https://cdn.svgporn.com/logos/nodejs-icon.svg", relatedPosition: ["BACK_END"] }, - { name: "Spring", img: "https://cdn.svgporn.com/logos/spring-icon.svg", relatedPosition: ["BACK_END"] }, - { name: "Django", img: "https://cdn.svgporn.com/logos/django-icon.svg", relatedPosition: ["BACK_END"] }, - { name: "Python", img: "https://cdn.svgporn.com/logos/python.svg", relatedPosition: ["BACK_END", "OTHERS"] }, // AI 포함 - { name: "Java", img: "https://cdn.svgporn.com/logos/java.svg", relatedPosition: ["BACK_END", "MOBILE"] }, - { name: "MySQL", img: "https://cdn.svgporn.com/logos/mysql-icon.svg", relatedPosition: ["BACK_END"] }, // 데이터베이스 - { name: "MongoDB", img: "https://cdn.svgporn.com/logos/mongodb-icon.svg", relatedPosition: ["BACK_END"] }, // 데이터베이스 - { name: "PostgreSQL", img: "https://cdn.svgporn.com/logos/postgresql.svg", relatedPosition: ["BACK_END"] }, // 데이터베이스 - { name: "Redis", img: "https://cdn.svgporn.com/logos/redis.svg", relatedPosition: ["BACK_END"] }, // 데이터베이스 - { name: "GraphQL", img: "https://cdn.svgporn.com/logos/graphql.svg", relatedPosition: ["BACK_END", "FRONT_END"] }, // API - { name: "Kotlin", img: "https://cdn.svgporn.com/logos/kotlin-icon.svg", relatedPosition: ["BACK_END", "MOBILE"] }, - { name: "Swift", img: "https://cdn.svgporn.com/logos/swift.svg", relatedPosition: ["MOBILE"] }, - { name: "Flutter", img: "https://cdn.svgporn.com/logos/flutter.svg", relatedPosition: ["MOBILE"] }, - { name: "React Native", img: "https://cdn.svgporn.com/logos/react.svg", relatedPosition: ["MOBILE"] }, - { name: "Figma", img: "https://cdn.svgporn.com/logos/figma.svg", relatedPosition: ["OTHERS"] }, // 디자인 - { name: "Adobe XD", img: "https://cdn.svgporn.com/logos/adobe-xd.svg", relatedPosition: ["OTHERS"] }, // 디자인 - { name: "AWS", img: "https://cdn.svgporn.com/logos/aws.svg", relatedPosition: ["OTHERS"] }, // 클라우드 서비스 - { name: "Docker", img: "https://cdn.svgporn.com/logos/docker-icon.svg", relatedPosition: ["OTHERS"] }, // 데브옵스 - { name: "Kubernetes", img: "https://cdn.svgporn.com/logos/kubernetes.svg", relatedPosition: ["OTHERS"] }, // 데브옵스 - { name: "Git", img: "https://cdn.svgporn.com/logos/git-icon.svg", relatedPosition: ["OTHERS"] }, // 버전 관리 - { name: "Jira", img: "https://cdn.svgporn.com/logos/jira.svg", relatedPosition: ["OTHERS"] }, // 프로젝트 관리 - { name: "TensorFlow", img: "https://cdn.svgporn.com/logos/tensorflow.svg", relatedPosition: ["OTHERS"] }, // AI - { name: "PyTorch", img: "https://cdn.svgporn.com/logos/pytorch-icon.svg", relatedPosition: ["OTHERS"] }, // AI -]; +import { Stacks } from "@/types/StackTypes"; + +export const STACKS: Stacks = { + "JavaScript": { name: "JavaScript", img: "https://cdn.svgporn.com/logos/javascript.svg", relatedPosition: ["FRONT_END", "BACK_END"] }, + "TypeScript": { name: "TypeScript", img: "https://cdn.svgporn.com/logos/typescript-icon.svg", relatedPosition: ["FRONT_END", "BACK_END"] }, + "React": { name: "React", img: "https://cdn.svgporn.com/logos/react.svg", relatedPosition: ["FRONT_END"] }, + "Vue.js": { name: "Vue.js", img: "https://cdn.svgporn.com/logos/vue.svg", relatedPosition: ["FRONT_END"] }, + "Angular": { name: "Angular", img: "https://cdn.svgporn.com/logos/angular-icon.svg", relatedPosition: ["FRONT_END"] }, + "React Query": { name: "React Query", img: "https://cdn.svgporn.com/logos/react-query-icon.svg", relatedPosition: ["FRONT_END"] }, + "Redux": { name: "Redux", img: "https://cdn.svgporn.com/logos/redux.svg", relatedPosition: ["FRONT_END"] }, + "Node.js": { name: "Node.js", img: "https://cdn.svgporn.com/logos/nodejs-icon.svg", relatedPosition: ["BACK_END"] }, + "Spring": { name: "Spring", img: "https://cdn.svgporn.com/logos/spring-icon.svg", relatedPosition: ["BACK_END"] }, + "Django": { name: "Django", img: "https://cdn.svgporn.com/logos/django-icon.svg", relatedPosition: ["BACK_END"] }, + "Python": { name: "Python", img: "https://cdn.svgporn.com/logos/python.svg", relatedPosition: ["BACK_END", "OTHERS"] }, // AI 포함 + "Java": { name: "Java", img: "https://cdn.svgporn.com/logos/java.svg", relatedPosition: ["BACK_END", "MOBILE"] }, + "MySQL": { name: "MySQL", img: "https://cdn.svgporn.com/logos/mysql-icon.svg", relatedPosition: ["BACK_END"] }, // 데이터베이스 + "MongoDB": { name: "MongoDB", img: "https://cdn.svgporn.com/logos/mongodb-icon.svg", relatedPosition: ["BACK_END"] }, // 데이터베이스 + "PostgreSQL": { name: "PostgreSQL", img: "https://cdn.svgporn.com/logos/postgresql.svg", relatedPosition: ["BACK_END"] }, // 데이터베이스 + "Redis": { name: "Redis", img: "https://cdn.svgporn.com/logos/redis.svg", relatedPosition: ["BACK_END"] }, // 데이터베이스 + "GraphQL": { name: "GraphQL", img: "https://cdn.svgporn.com/logos/graphql.svg", relatedPosition: ["BACK_END", "FRONT_END"] }, // API + "Kotlin": { name: "Kotlin", img: "https://cdn.svgporn.com/logos/kotlin-icon.svg", relatedPosition: ["BACK_END", "MOBILE"] }, + "Swift": { name: "Swift", img: "https://cdn.svgporn.com/logos/swift.svg", relatedPosition: ["MOBILE"] }, + "Flutter": { name: "Flutter", img: "https://cdn.svgporn.com/logos/flutter.svg", relatedPosition: ["MOBILE"] }, + "React Native": { name: "React Native", img: "https://cdn.svgporn.com/logos/react.svg", relatedPosition: ["MOBILE"] }, + "Figma": { name: "Figma", img: "https://cdn.svgporn.com/logos/figma.svg", relatedPosition: ["OTHERS"] }, // 디자인 + "Adobe XD": { name: "Adobe XD", img: "https://cdn.svgporn.com/logos/adobe-xd.svg", relatedPosition: ["OTHERS"] }, // 디자인 + "AWS": { name: "AWS", img: "https://cdn.svgporn.com/logos/aws.svg", relatedPosition: ["OTHERS"] }, // 클라우드 서비스 + "Docker": { name: "Docker", img: "https://cdn.svgporn.com/logos/docker-icon.svg", relatedPosition: ["OTHERS"] }, // 데브옵스 + "Kubernetes": { name: "Kubernetes", img: "https://cdn.svgporn.com/logos/kubernetes.svg", relatedPosition: ["OTHERS"] }, // 데브옵스 + "Git": { name: "Git", img: "https://cdn.svgporn.com/logos/git-icon.svg", relatedPosition: ["OTHERS"] }, // 버전 관리 + "Jira": { name: "Jira", img: "https://cdn.svgporn.com/logos/jira.svg", relatedPosition: ["OTHERS"] }, // 프로젝트 관리 + "TensorFlow": { name: "TensorFlow", img: "https://cdn.svgporn.com/logos/tensorflow.svg", relatedPosition: ["OTHERS"] }, // AI + "PyTorch": { name: "PyTorch", img: "https://cdn.svgporn.com/logos/pytorch-icon.svg", relatedPosition: ["OTHERS"] }, // AI +} as const; + +export const STACK_NAMES = Object.keys(STACKS); From ceb43baa38f94c97646be3a26bfbcd82c1a6e977 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EB=82=98=EA=B2=BD?= Date: Fri, 15 Mar 2024 16:01:50 +0900 Subject: [PATCH 06/42] =?UTF-8?q?Refactor:=20ICONS=20=EB=B3=80=EC=88=98=20?= =?UTF-8?q?Images=20=ED=83=80=EC=9E=85=20=ED=95=A0=EB=8B=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- co-kkiri/src/constants/icons.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/co-kkiri/src/constants/icons.ts b/co-kkiri/src/constants/icons.ts index 1b4c4930..c0f1ac28 100644 --- a/co-kkiri/src/constants/icons.ts +++ b/co-kkiri/src/constants/icons.ts @@ -16,8 +16,9 @@ import post from "@/assets/icons/post.svg"; import questionMark from "@/assets/icons/question-mark.svg"; import categorySelected from "@/assets/icons/category_selected.svg"; import calendar from "@/assets/icons/calendar.svg"; +import { Images } from "@/types/ImageTypes"; -export const ICONS = { +export const ICONS: Images = { arrowRight: { src: arrowRight, alt: "다음", From 3aa67472c5abd1286d3a5d700e50d81b16b38ed3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EB=82=98=EA=B2=BD?= Date: Fri, 15 Mar 2024 16:02:05 +0900 Subject: [PATCH 07/42] =?UTF-8?q?Chore:=20stackIcons.ts=20=EC=82=AD?= =?UTF-8?q?=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- co-kkiri/src/constants/stackIcons.ts | 8 -------- 1 file changed, 8 deletions(-) delete mode 100644 co-kkiri/src/constants/stackIcons.ts diff --git a/co-kkiri/src/constants/stackIcons.ts b/co-kkiri/src/constants/stackIcons.ts deleted file mode 100644 index d37266da..00000000 --- a/co-kkiri/src/constants/stackIcons.ts +++ /dev/null @@ -1,8 +0,0 @@ -interface StackIcons { - [key: string]: { - src: string; - alt: string; - }; -} - -export const STACK_ICONS: StackIcons = { HTML: { src: "https://simpleicons.org/icons/html5.svg", alt: "HTML 아이콘" } }; From cc564f0d142254b00957cae9421af8825e1330e5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EB=82=98=EA=B2=BD?= Date: Fri, 15 Mar 2024 16:02:37 +0900 Subject: [PATCH 08/42] =?UTF-8?q?Fix:=20Stack=EC=97=90=20=EB=A7=9E?= =?UTF-8?q?=EA=B2=8C=20icon=20=EC=B6=9C=EB=A0=A5=20=EC=88=98=EC=A0=95=20?= =?UTF-8?q?=EB=B0=8F=20style?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- co-kkiri/src/components/commons/Stack.tsx | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/co-kkiri/src/components/commons/Stack.tsx b/co-kkiri/src/components/commons/Stack.tsx index 4d25e095..e5c2135c 100644 --- a/co-kkiri/src/components/commons/Stack.tsx +++ b/co-kkiri/src/components/commons/Stack.tsx @@ -1,15 +1,20 @@ import styled from "styled-components"; import DESIGN_TOKEN from "@/styles/tokens"; import { ICONS } from "@/constants/icons"; -import { STACK_ICONS } from "@/constants/stackIcons"; +import { Stack } from "@/types/StackTypes"; +import { Image } from "@/types/ImageTypes"; interface StackProps { - stack?: string; + stack?: Stack; } export default function Stack({ stack }: StackProps) { //임시 - const icon = stack && STACK_ICONS[stack] ? STACK_ICONS[stack] : ICONS.questionMark; + const icon: Image = stack && stack.img ? { + src: stack.img, + alt: stack.name + } : ICONS.questionMark; + return ( @@ -20,6 +25,8 @@ export default function Stack({ stack }: StackProps) { const { color } = DESIGN_TOKEN; const Background = styled.div` + padding: .8rem; + background-color: ${color.gray[3]}; border-radius: 50%; width: 3.6rem; @@ -31,7 +38,7 @@ const Background = styled.div` `; const Icon = styled.img` - //임시 - max-width: 2.4rem; - max-height: 2.4rem; + width: 100%; /* 컨테이너 너비에 맞춤 */ + height: 100%; /* 컨테이너 높이에 맞춤 */ + object-fit: contain; `; From b30ae1322cce9950dcf38e6a8d3c0881cea85ea1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EB=82=98=EA=B2=BD?= Date: Fri, 15 Mar 2024 16:02:52 +0900 Subject: [PATCH 09/42] =?UTF-8?q?Fix:=20=EB=B3=80=EA=B2=BD=EB=90=9C=20Stac?= =?UTF-8?q?k=EC=97=90=20=EB=94=B0=EB=9D=BC=20Stacks=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- co-kkiri/src/components/commons/Stacks.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/co-kkiri/src/components/commons/Stacks.tsx b/co-kkiri/src/components/commons/Stacks.tsx index a77a1d0a..5a94bcae 100644 --- a/co-kkiri/src/components/commons/Stacks.tsx +++ b/co-kkiri/src/components/commons/Stacks.tsx @@ -1,5 +1,6 @@ import styled from "styled-components"; -import Stack from "./Stack"; +import StackComponent from "./Stack"; +import { STACKS } from "@/constants/stacks"; interface StacksProps { stacks: string[]; @@ -7,7 +8,7 @@ interface StacksProps { export default function Stacks({ stacks }: StacksProps) { return ( - {stacks.length > 0 ? stacks.map((stack) => ) : } + {stacks.length > 0 ? stacks.map((stack) => ) : } ); } From 39973bcf50928bcbfb9d860c925a9f1ea4bb8813 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EB=82=98=EA=B2=BD?= Date: Fri, 15 Mar 2024 16:45:31 +0900 Subject: [PATCH 10/42] =?UTF-8?q?Fix:=20FilterButton=20=ED=81=B4=EB=A6=AD?= =?UTF-8?q?=EC=8B=9C=20=ED=99=94=EC=82=B4=ED=91=9C=20=EB=B0=A9=ED=96=A5=20?= =?UTF-8?q?=EB=92=A4=EC=A7=91=EC=96=B4=EC=A7=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../commons/DropDowns/commons/FilterDropButton.tsx | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/co-kkiri/src/components/commons/DropDowns/commons/FilterDropButton.tsx b/co-kkiri/src/components/commons/DropDowns/commons/FilterDropButton.tsx index a19da659..00bfb709 100644 --- a/co-kkiri/src/components/commons/DropDowns/commons/FilterDropButton.tsx +++ b/co-kkiri/src/components/commons/DropDowns/commons/FilterDropButton.tsx @@ -16,7 +16,7 @@ export default function FilterDropButton({ selectOption, onClick, isSelected }: {selectOption} {isSelected ? ( - + ) : ( )} @@ -48,7 +48,15 @@ const Container = styled.button` ${typography.font12Semibold} `; -const Arrow = styled.img` +interface Arrow { + $isSelected?: boolean; +} + +const Arrow = styled.img` width: 1.2rem; height: 1.2rem; + + ${({ $isSelected }) => + $isSelected && `transform: rotate(180deg);` + } `; From d7d7f970139bbd9eed6ffd8b2d3180fd4bc77e5d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EB=82=98=EA=B2=BD?= Date: Fri, 15 Mar 2024 17:51:18 +0900 Subject: [PATCH 11/42] =?UTF-8?q?Feat:=20FilterList=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EA=B8=B0?= =?UTF-8?q?=EB=B3=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/commons/FilterList.tsx | 47 +++++++++++++++++++ 1 file changed, 47 insertions(+) create mode 100644 co-kkiri/src/components/commons/FilterList.tsx diff --git a/co-kkiri/src/components/commons/FilterList.tsx b/co-kkiri/src/components/commons/FilterList.tsx new file mode 100644 index 00000000..34ea9327 --- /dev/null +++ b/co-kkiri/src/components/commons/FilterList.tsx @@ -0,0 +1,47 @@ +import DESIGN_TOKEN from "@/styles/tokens"; +import { MouseEvent } from "react"; +import styled from "styled-components"; + +interface FilterListProps { + filters: string[]; + onFilterClick(filter: string): void; +} + +export default function FilterList({ filters, onFilterClick }: FilterListProps) { + const handleFilterClick = (e: MouseEvent) => { + const filter = e.currentTarget.textContent; + if (filter) { + console.log(filter + " clicked"); + onFilterClick(filter); + } + } + + return + {filters.map(filter =>
{filter}
)} + + +} + +const { color, typography, mediaQueries } = DESIGN_TOKEN; + +const Container = styled.div` + display: flex; + + color: ${color.gray[1]}; + + ${mediaQueries.mobile}{ + gap: 1.6rem; + + ${typography.font14Bold} + } + ${mediaQueries.tablet}{ + gap: 2rem; + + ${typography.font16Bold} + } + + :hover{ + cursor: pointer; + color: ${color.black[3]}; + } +` From f05123ba5d030641b41b5ceec47f135c92145a32 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EB=82=98=EA=B2=BD?= Date: Fri, 15 Mar 2024 18:06:01 +0900 Subject: [PATCH 12/42] =?UTF-8?q?Feat:=20FilterList=EB=82=B4=20=EA=B0=9C?= =?UTF-8?q?=EB=B3=84=20Filter=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/commons/FilterList.tsx | 23 +++++++++++++++---- 1 file changed, 18 insertions(+), 5 deletions(-) diff --git a/co-kkiri/src/components/commons/FilterList.tsx b/co-kkiri/src/components/commons/FilterList.tsx index 34ea9327..10610da8 100644 --- a/co-kkiri/src/components/commons/FilterList.tsx +++ b/co-kkiri/src/components/commons/FilterList.tsx @@ -1,5 +1,5 @@ import DESIGN_TOKEN from "@/styles/tokens"; -import { MouseEvent } from "react"; +import { MouseEvent, useState } from "react"; import styled from "styled-components"; interface FilterListProps { @@ -8,16 +8,19 @@ interface FilterListProps { } export default function FilterList({ filters, onFilterClick }: FilterListProps) { + const [currentFilter, setCurrentFilter] = useState(filters[0]); + const handleFilterClick = (e: MouseEvent) => { const filter = e.currentTarget.textContent; if (filter) { console.log(filter + " clicked"); onFilterClick(filter); + setCurrentFilter(filter); } } return - {filters.map(filter =>
{filter}
)} + {filters.map(filter => {filter})} } @@ -40,8 +43,18 @@ const Container = styled.div` ${typography.font16Bold} } - :hover{ +` + +interface BoxProps { + $isSelected?: boolean; +} + +const Box = styled.div` + + ${({ $isSelected }) => $isSelected && `color: ${color.black[1]};`} + + &:hover{ cursor: pointer; - color: ${color.black[3]}; + ${({ $isSelected }) => !$isSelected && `color: ${color.black[3]};`} } -` +`; From 9de5f8ec419b259af6bd006390398b567e11635a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EB=82=98=EA=B2=BD?= Date: Fri, 15 Mar 2024 18:07:05 +0900 Subject: [PATCH 13/42] =?UTF-8?q?Feat:=20SelectLayout=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EA=B8=B0=EB=B3=B8=20=EB=94=94=EC=9E=90?= =?UTF-8?q?=EC=9D=B8=20=EC=84=B8=ED=8C=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../domains/StacksPopover/SelectLayout.tsx | 37 +++++++++++++++++++ 1 file changed, 37 insertions(+) create mode 100644 co-kkiri/src/components/domains/StacksPopover/SelectLayout.tsx diff --git a/co-kkiri/src/components/domains/StacksPopover/SelectLayout.tsx b/co-kkiri/src/components/domains/StacksPopover/SelectLayout.tsx new file mode 100644 index 00000000..34f5d516 --- /dev/null +++ b/co-kkiri/src/components/domains/StacksPopover/SelectLayout.tsx @@ -0,0 +1,37 @@ +import styled from "styled-components"; +import FilterList from "../../commons/FilterList"; +import DESIGN_TOKEN from "@/styles/tokens"; + +export default function SelectLayout() { + return ( + + { }} /> + + ) +} + +const {color, mediaQueries} = DESIGN_TOKEN; + +const Container = styled.div` + height: fit-content; + + padding: 3rem 4rem; + + position: relative; + top: .6rem; + + border-radius: 2rem; + border: .1rem solid ${color.gray[2]}; + + ${mediaQueries.mobile}{ + width: 32rem; + } + + ${mediaQueries.tablet}{ + width: 69.8rem; + } + + ${mediaQueries.desktop}{ + width: 85.4rem; + } +` From 7cc2a0d1e1fd7fd410fd5c62f308e3cdb921eaf5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EB=82=98=EA=B2=BD?= Date: Fri, 15 Mar 2024 18:09:02 +0900 Subject: [PATCH 14/42] =?UTF-8?q?Feat:=20StackPopover=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EA=B8=B0=EB=B3=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/domains/StacksPopover/index.tsx | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) create mode 100644 co-kkiri/src/components/domains/StacksPopover/index.tsx diff --git a/co-kkiri/src/components/domains/StacksPopover/index.tsx b/co-kkiri/src/components/domains/StacksPopover/index.tsx new file mode 100644 index 00000000..698bafa3 --- /dev/null +++ b/co-kkiri/src/components/domains/StacksPopover/index.tsx @@ -0,0 +1,16 @@ +import FilterButton from "@/components/commons/FilterButton"; +import { useState } from "react"; +import SelectLayout from "./SelectLayout"; + +export default function StacksPopover() { + const [isButtonSelected, setIsButtonSelected] = useState(false); + const handleButtonClick = () => { + setIsButtonSelected(!isButtonSelected); + } + + return (
+ + {isButtonSelected && } +
+ ) +} From aa7961abfa99794aedac848218059b185fed8785 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EB=82=98=EA=B2=BD?= Date: Sat, 16 Mar 2024 03:25:18 +0900 Subject: [PATCH 15/42] =?UTF-8?q?Chore:=20reset.svg=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- co-kkiri/src/assets/icons/reset.svg | 7 +++++++ co-kkiri/src/constants/icons.ts | 5 +++++ 2 files changed, 12 insertions(+) create mode 100644 co-kkiri/src/assets/icons/reset.svg diff --git a/co-kkiri/src/assets/icons/reset.svg b/co-kkiri/src/assets/icons/reset.svg new file mode 100644 index 00000000..433b5cc1 --- /dev/null +++ b/co-kkiri/src/assets/icons/reset.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/co-kkiri/src/constants/icons.ts b/co-kkiri/src/constants/icons.ts index c0f1ac28..2446598c 100644 --- a/co-kkiri/src/constants/icons.ts +++ b/co-kkiri/src/constants/icons.ts @@ -16,6 +16,7 @@ import post from "@/assets/icons/post.svg"; import questionMark from "@/assets/icons/question-mark.svg"; import categorySelected from "@/assets/icons/category_selected.svg"; import calendar from "@/assets/icons/calendar.svg"; +import reset from "@/assets/icons/reset.svg"; import { Images } from "@/types/ImageTypes"; export const ICONS: Images = { @@ -91,4 +92,8 @@ export const ICONS: Images = { src: calendar, alt: "날짜선택 달력", }, + reset: { + src: reset, + alt: "초기화" + } }; From 090b219e829cc1214827be7ba5bcbb546a73ed47 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EB=82=98=EA=B2=BD?= Date: Sat, 16 Mar 2024 03:25:30 +0900 Subject: [PATCH 16/42] =?UTF-8?q?Feat:=20ResetButton=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../domains/StacksPopover/ResetButton.tsx | 52 +++++++++++++++++++ 1 file changed, 52 insertions(+) create mode 100644 co-kkiri/src/components/domains/StacksPopover/ResetButton.tsx diff --git a/co-kkiri/src/components/domains/StacksPopover/ResetButton.tsx b/co-kkiri/src/components/domains/StacksPopover/ResetButton.tsx new file mode 100644 index 00000000..c9899d9f --- /dev/null +++ b/co-kkiri/src/components/domains/StacksPopover/ResetButton.tsx @@ -0,0 +1,52 @@ +import { ICONS } from "@/constants/icons"; +import DESIGN_TOKEN from "@/styles/tokens"; +import styled from "styled-components"; + +interface ResetButtonProps { + onReset: () => void; +} + +export default function ResetButton({ onReset }: ResetButtonProps) { + return ( + + {ICONS.reset.alt} +

초기화

+ + ); +} + +const { color, typography } = DESIGN_TOKEN; + +const Container = styled.div` + display: flex; + align-items: center; + gap: 0.8rem; + + color: ${color.black[3]}; + + ${typography.font12Semibold} + + img { + width: 1.4rem; + height: 1.4rem; + fill: ${color.black[3]}; + } + + &:hover { + cursor: pointer; + color: ${color.black[1]}; + + img { + animation: rotateAnimation 1s ease-in-out infinite; + } + } + + @keyframes rotateAnimation { + from { + transform: rotate(0deg); + } + to { + transform: rotate(-360deg); + } + } +`; From abfb205be91083549091fe73fb98e27857dd0b04 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EB=82=98=EA=B2=BD?= Date: Sat, 16 Mar 2024 03:26:24 +0900 Subject: [PATCH 17/42] =?UTF-8?q?Chore:=20=EC=BD=94=EB=93=9C=20=EC=97=AC?= =?UTF-8?q?=EB=B0=B1=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/commons/FilterList.tsx | 68 +++++++++---------- 1 file changed, 34 insertions(+), 34 deletions(-) diff --git a/co-kkiri/src/components/commons/FilterList.tsx b/co-kkiri/src/components/commons/FilterList.tsx index 10610da8..9c5bf8c8 100644 --- a/co-kkiri/src/components/commons/FilterList.tsx +++ b/co-kkiri/src/components/commons/FilterList.tsx @@ -3,58 +3,58 @@ import { MouseEvent, useState } from "react"; import styled from "styled-components"; interface FilterListProps { - filters: string[]; - onFilterClick(filter: string): void; + filters: string[]; + onFilterClick(filter: string): void; } export default function FilterList({ filters, onFilterClick }: FilterListProps) { - const [currentFilter, setCurrentFilter] = useState(filters[0]); - - const handleFilterClick = (e: MouseEvent) => { - const filter = e.currentTarget.textContent; - if (filter) { - console.log(filter + " clicked"); - onFilterClick(filter); - setCurrentFilter(filter); - } - } + const [currentFilter, setCurrentFilter] = useState(filters[0]); - return - {filters.map(filter => {filter})} + const handleFilterClick = (e: MouseEvent) => { + const filter = e.currentTarget.textContent; + if (filter) { + onFilterClick(filter); + setCurrentFilter(filter); + } + }; + + return ( + + {filters.map((filter) => ( + + {filter} + + ))} - + ); } const { color, typography, mediaQueries } = DESIGN_TOKEN; const Container = styled.div` - display: flex; + display: flex; + gap: 2rem; - color: ${color.gray[1]}; + color: ${color.gray[1]}; - ${mediaQueries.mobile}{ - gap: 1.6rem; + ${typography.font16Bold} - ${typography.font14Bold} - } - ${mediaQueries.tablet}{ - gap: 2rem; + ${mediaQueries.mobile} { + gap: 1.6rem; - ${typography.font16Bold} - } - -` + ${typography.font14Bold} + } +`; interface BoxProps { - $isSelected?: boolean; + $isSelected?: boolean; } const Box = styled.div` + ${({ $isSelected }) => $isSelected && `color: ${color.black[1]};`} - ${({ $isSelected }) => $isSelected && `color: ${color.black[1]};`} - - &:hover{ - cursor: pointer; - ${({ $isSelected }) => !$isSelected && `color: ${color.black[3]};`} - } + &:hover { + cursor: pointer; + ${({ $isSelected }) => !$isSelected && `color: ${color.black[3]};`} + } `; From b08202e2fb349615ba39237e53da403b9d386958 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EB=82=98=EA=B2=BD?= Date: Sat, 16 Mar 2024 03:43:35 +0900 Subject: [PATCH 18/42] =?UTF-8?q?Fix:=20=EC=8A=A4=ED=83=80=EC=9D=BC?= =?UTF-8?q?=EB=93=9C=20=EC=83=81=EC=86=8D=EC=9D=84=20=EC=9C=84=ED=95=B4=20?= =?UTF-8?q?className=20=ED=94=84=EB=A1=AD=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- co-kkiri/src/components/commons/FilterList.tsx | 5 +++-- .../src/components/domains/StacksPopover/ResetButton.tsx | 5 +++-- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/co-kkiri/src/components/commons/FilterList.tsx b/co-kkiri/src/components/commons/FilterList.tsx index 9c5bf8c8..42f85117 100644 --- a/co-kkiri/src/components/commons/FilterList.tsx +++ b/co-kkiri/src/components/commons/FilterList.tsx @@ -5,9 +5,10 @@ import styled from "styled-components"; interface FilterListProps { filters: string[]; onFilterClick(filter: string): void; + className?: string; } -export default function FilterList({ filters, onFilterClick }: FilterListProps) { +export default function FilterList({ filters, onFilterClick, className }: FilterListProps) { const [currentFilter, setCurrentFilter] = useState(filters[0]); const handleFilterClick = (e: MouseEvent) => { @@ -19,7 +20,7 @@ export default function FilterList({ filters, onFilterClick }: FilterListProps) }; return ( - + {filters.map((filter) => ( {filter} diff --git a/co-kkiri/src/components/domains/StacksPopover/ResetButton.tsx b/co-kkiri/src/components/domains/StacksPopover/ResetButton.tsx index c9899d9f..33fe56bf 100644 --- a/co-kkiri/src/components/domains/StacksPopover/ResetButton.tsx +++ b/co-kkiri/src/components/domains/StacksPopover/ResetButton.tsx @@ -4,11 +4,12 @@ import styled from "styled-components"; interface ResetButtonProps { onReset: () => void; + className?: string; } -export default function ResetButton({ onReset }: ResetButtonProps) { +export default function ResetButton({ onReset, className }: ResetButtonProps) { return ( - + {ICONS.reset.alt}

초기화

 From 46ef5b3068a46951eee44371c0d43b63c85575ec Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EB=82=98=EA=B2=BD?= Date: Sat, 16 Mar 2024 03:47:22 +0900 Subject: [PATCH 19/42] =?UTF-8?q?Fix:=20StackPopover=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20position=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../domains/StacksPopover/index.tsx | 24 ++++++++++++------- 1 file changed, 15 insertions(+), 9 deletions(-) diff --git a/co-kkiri/src/components/domains/StacksPopover/index.tsx b/co-kkiri/src/components/domains/StacksPopover/index.tsx index 698bafa3..95a54120 100644 --- a/co-kkiri/src/components/domains/StacksPopover/index.tsx +++ b/co-kkiri/src/components/domains/StacksPopover/index.tsx @@ -1,16 +1,22 @@ import FilterButton from "@/components/commons/FilterButton"; import { useState } from "react"; import SelectLayout from "./SelectLayout"; +import styled from "styled-components"; export default function StacksPopover() { - const [isButtonSelected, setIsButtonSelected] = useState(false); - const handleButtonClick = () => { - setIsButtonSelected(!isButtonSelected); - } + const [isButtonSelected, setIsButtonSelected] = useState(false); + const handleButtonClick = () => { + setIsButtonSelected(!isButtonSelected); + }; - return (
- - {isButtonSelected && } -
- ) + return ( + + + {isButtonSelected && } + + ); } + +const Container = styled.div` + position: relative; +`; From 3bd9b26c621d2fc756fe9ce4be43e02a13a57b7b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EB=82=98=EA=B2=BD?= Date: Sat, 16 Mar 2024 04:16:04 +0900 Subject: [PATCH 20/42] =?UTF-8?q?Fix:=20DefaultChip=20=EC=9D=B4=EB=AF=B8?= =?UTF-8?q?=EC=A7=80=EB=B6=80=EB=B6=84=20Stack=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=EB=A1=9C=20=EB=8C=80=EC=B2=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/commons/Chips/DefaultChip.tsx | 45 +++++++++++++------ 1 file changed, 32 insertions(+), 13 deletions(-) diff --git a/co-kkiri/src/components/commons/Chips/DefaultChip.tsx b/co-kkiri/src/components/commons/Chips/DefaultChip.tsx index 85734a80..573798ef 100644 --- a/co-kkiri/src/components/commons/Chips/DefaultChip.tsx +++ b/co-kkiri/src/components/commons/Chips/DefaultChip.tsx @@ -1,6 +1,7 @@ import { MouseEvent } from "react"; import DESIGN_TOKEN from "@/styles/tokens"; import styled from "styled-components"; +import Stack from "../Stack"; interface Icon { src: string; @@ -19,10 +20,24 @@ interface DefaultChipProps { className?: string; } -export default function DefaultChip({ label, imgUrl, icon, isSelected, onClick, onIconClick, isVertical, className }: DefaultChipProps) { +export default function DefaultChip({ + label, + imgUrl, + icon, + isSelected, + onClick, + onIconClick, + isVertical, + className, +}: DefaultChipProps) { return ( - - {imgUrl &&
{label}
} + + {imgUrl && } {label} {icon && {icon.alt}} @@ -37,7 +52,7 @@ export default function DefaultChip({ label, imgUrl, icon, isSelected, onClick, export interface DefaultChipContainerStyleProps { $isVertical?: boolean; $isSelected?: boolean; - $isClickable?: boolean + $isClickable?: boolean; } const { color, typography } = DESIGN_TOKEN; @@ -56,24 +71,26 @@ const Container = styled.div` ${typography.font12Semibold} - ${({$isClickable}) => $isClickable && `cursor: pointer;`} + ${({ $isClickable }) => $isClickable && `cursor: pointer;`} - & .image-container{ + & .image-container { width: 3.6rem; height: 3.6rem; } - & .image{ + & .image { object-fit: cover; } - & .icon{ + & .icon { width: 1.4rem; height: 1.4rem; - ${({$isClickable}) => $isClickable && `cursor: pointer;`} + ${({ $isClickable }) => $isClickable && `cursor: pointer;`} } - ${({ $isVertical }) => $isVertical ? ` + ${({ $isVertical }) => + $isVertical + ? ` flex-direction: column; border-radius: 1rem; align-items: center; @@ -85,15 +102,17 @@ const Container = styled.div` top: .4rem; right: .4rem; } - ` : ` + ` + : ` flex-direction: row; align-items: center; gap: 1.2rem; - ` - } + `} -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; `; + +const Image = styled(Stack)``; From d74ef559b9e9166ab0ff14a9407e5421dd315623 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EB=82=98=EA=B2=BD?= Date: Sat, 16 Mar 2024 04:16:30 +0900 Subject: [PATCH 21/42] =?UTF-8?q?Fix:=20Stack=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20prop=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- co-kkiri/src/components/commons/Stack.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/co-kkiri/src/components/commons/Stack.tsx b/co-kkiri/src/components/commons/Stack.tsx index e5c2135c..681e216e 100644 --- a/co-kkiri/src/components/commons/Stack.tsx +++ b/co-kkiri/src/components/commons/Stack.tsx @@ -5,7 +5,7 @@ import { Stack } from "@/types/StackTypes"; import { Image } from "@/types/ImageTypes"; interface StackProps { - stack?: Stack; + stack?: Pick; } export default function Stack({ stack }: StackProps) { From f2455aaf43feb6558c176c4d1c7c96919755f8d1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EB=82=98=EA=B2=BD?= Date: Sat, 16 Mar 2024 04:16:50 +0900 Subject: [PATCH 22/42] =?UTF-8?q?Feat:=20StackChipGrid=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../domains/StacksPopover/StackChipGrid.tsx | 25 +++++++++++++++++++ 1 file changed, 25 insertions(+) create mode 100644 co-kkiri/src/components/domains/StacksPopover/StackChipGrid.tsx diff --git a/co-kkiri/src/components/domains/StacksPopover/StackChipGrid.tsx b/co-kkiri/src/components/domains/StacksPopover/StackChipGrid.tsx new file mode 100644 index 00000000..e9ff4ed5 --- /dev/null +++ b/co-kkiri/src/components/domains/StacksPopover/StackChipGrid.tsx @@ -0,0 +1,25 @@ +import StackChip from "@/components/commons/Chips/StackChip"; +import { STACKS } from "@/constants/stacks"; +import { StackPosition } from "@/types/StackTypes"; + +interface StackChipGridProps { + filter: StackPosition; + onStackChipClick: (stack: string) => void; +} + +export default function StackChipGrid({ filter, onStackChipClick }: StackChipGridProps) { + const filteredStacks = Object.values(STACKS).filter((stack) => stack.relatedPosition.includes(filter)); + return ( +
+ {filteredStacks.map((stack) => ( + { + onStackChipClick(stack.name); + }} + /> + ))} +
+ ); +} From 4e63810035afe4923137679b0b2933ef4c32e3f0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EB=82=98=EA=B2=BD?= Date: Sat, 16 Mar 2024 04:17:21 +0900 Subject: [PATCH 23/42] =?UTF-8?q?Fix:=20FilterList=20filter=20=EC=99=B8?= =?UTF-8?q?=EB=B6=80=EC=97=90=EC=84=9C=20=EA=B4=80=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- co-kkiri/src/components/commons/FilterList.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/co-kkiri/src/components/commons/FilterList.tsx b/co-kkiri/src/components/commons/FilterList.tsx index 42f85117..5accd0d7 100644 --- a/co-kkiri/src/components/commons/FilterList.tsx +++ b/co-kkiri/src/components/commons/FilterList.tsx @@ -1,21 +1,21 @@ import DESIGN_TOKEN from "@/styles/tokens"; -import { MouseEvent, useState } from "react"; +import { StackPosition } from "@/types/StackTypes"; +import { MouseEvent } from "react"; import styled from "styled-components"; interface FilterListProps { - filters: string[]; - onFilterClick(filter: string): void; + currentFilter: StackPosition + filters: StackPosition[]; + onFilterClick(filter: StackPosition): void; className?: string; } -export default function FilterList({ filters, onFilterClick, className }: FilterListProps) { - const [currentFilter, setCurrentFilter] = useState(filters[0]); +export default function FilterList({ currentFilter, filters, onFilterClick, className }: FilterListProps) { const handleFilterClick = (e: MouseEvent) => { - const filter = e.currentTarget.textContent; + const filter = e.currentTarget.textContent as StackPosition; if (filter) { onFilterClick(filter); - setCurrentFilter(filter); } }; From 10623c011d5c8af220ff453c27af92a6a05e4c5a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EB=82=98=EA=B2=BD?= Date: Sat, 16 Mar 2024 04:24:19 +0900 Subject: [PATCH 24/42] =?UTF-8?q?Fix:=20StackChip=20=EC=9E=98=EB=AA=BB?= =?UTF-8?q?=EB=90=9C=20=EB=84=88=EB=B9=84=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/commons/Chips/StackChip.tsx | 58 +++++++++---------- 1 file changed, 29 insertions(+), 29 deletions(-) diff --git a/co-kkiri/src/components/commons/Chips/StackChip.tsx b/co-kkiri/src/components/commons/Chips/StackChip.tsx index ecdaaad6..cfd75f09 100644 --- a/co-kkiri/src/components/commons/Chips/StackChip.tsx +++ b/co-kkiri/src/components/commons/Chips/StackChip.tsx @@ -4,54 +4,54 @@ import DefaultChip from "./DefaultChip"; import DESIGN_TOKEN from "@/styles/tokens"; interface StackChipProps { - label: string; - imgUrl: string; - isSelected?: boolean; - onClick: (e: MouseEvent) => void; + label: string; + imgUrl: string; + isSelected?: boolean; + onClick: (e: MouseEvent) => void; } -export default function StackChip({ label, imgUrl, isSelected, onClick }: StackChipProps -) { - return ; +export default function StackChip({ label, imgUrl, isSelected, onClick }: StackChipProps) { + return ; } const { color, typography, mediaQueries } = DESIGN_TOKEN; const Container = styled(DefaultChip)` - width: 7rem; - height: 7.2rem; + width: 7.2rem; + height: 7rem; - padding: .8rem; - gap: .4rem; + padding: 0.8rem; + gap: 0.4rem; - background-color: ${color.white}; - border: .1rem solid ${color.gray[2]}; - border-radius: 1rem; - color: ${color.black[1]}; + background-color: ${color.white}; + border: 0.1rem solid ${color.gray[2]}; + border-radius: 1rem; + color: ${color.black[1]}; - ${({ isSelected }) => !isSelected && `opacity: .4;`} + ${({ isSelected }) => !isSelected && `opacity: .4;`} - ${typography.font12Regular} + ${typography.font12Regular} - ${mediaQueries.mobile}{ - width: fit-content; - height: fit-content; + ${mediaQueries.mobile} { + width: fit-content; + height: fit-content; - padding: .3rem 1.2rem; + padding: 0.3rem 1.2rem; - border-radius: 9999rem; + border-radius: 9999rem; - & .image-container{ - display: none; - } + & .image-container { + display: none; + } - ${({ isSelected }) => isSelected && ` + ${({ isSelected }) => + isSelected && + ` background-color: ${color.white}; color: ${color.secondary}; border-color: ${color.secondary}; `} - } - -` \ No newline at end of file + } +`; From 0ca2ae3fd312685b738789d649013fc3109060ed Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EB=82=98=EA=B2=BD?= Date: Sat, 16 Mar 2024 04:45:24 +0900 Subject: [PATCH 25/42] =?UTF-8?q?Feat:=20DefaultChip=20=EB=94=94=EC=9E=90?= =?UTF-8?q?=EC=9D=B8=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/commons/Chips/DefaultChip.tsx | 20 +++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) diff --git a/co-kkiri/src/components/commons/Chips/DefaultChip.tsx b/co-kkiri/src/components/commons/Chips/DefaultChip.tsx index 573798ef..3c5ddca5 100644 --- a/co-kkiri/src/components/commons/Chips/DefaultChip.tsx +++ b/co-kkiri/src/components/commons/Chips/DefaultChip.tsx @@ -55,7 +55,7 @@ export interface DefaultChipContainerStyleProps { $isClickable?: boolean; } -const { color, typography } = DESIGN_TOKEN; +const { color, typography, mediaQueries } = DESIGN_TOKEN; const Container = styled.div` width: fit-content; @@ -73,13 +73,13 @@ const Container = styled.div` ${({ $isClickable }) => $isClickable && `cursor: pointer;`} - & .image-container { - width: 3.6rem; - height: 3.6rem; - } + & > span { + text-align: center; - & .image { - object-fit: cover; + white-space: nowrap; /* 텍스트를 한 줄로 유지 */ + overflow: hidden; /* 내용이 넘칠 경우 숨김 처리 */ + text-overflow: ellipsis; /* 오버플로된 텍스트의 말줄임표 표시 */ + width: 100%; /* 또는 부모 요소의 너비에 맞추어 설정 */ } & .icon { @@ -115,4 +115,8 @@ const Container = styled.div` user-select: none; `; -const Image = styled(Stack)``; +const Image = styled(Stack)` + ${mediaQueries.mobile} { + display: none; + } +`; From 038323e0e4fd7fe5edd228a8306eb989fa8fb8b9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EB=82=98=EA=B2=BD?= Date: Sat, 16 Mar 2024 04:45:41 +0900 Subject: [PATCH 26/42] =?UTF-8?q?Feat:=20StackChip=20=EB=94=94=EC=9E=90?= =?UTF-8?q?=EC=9D=B8=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/commons/Chips/StackChip.tsx | 20 ++++++++++++++++--- 1 file changed, 17 insertions(+), 3 deletions(-) diff --git a/co-kkiri/src/components/commons/Chips/StackChip.tsx b/co-kkiri/src/components/commons/Chips/StackChip.tsx index cfd75f09..cf1ad5e4 100644 --- a/co-kkiri/src/components/commons/Chips/StackChip.tsx +++ b/co-kkiri/src/components/commons/Chips/StackChip.tsx @@ -28,12 +28,13 @@ const Container = styled(DefaultChip)` color: ${color.black[1]}; ${({ isSelected }) => !isSelected && `opacity: .4;`} + &:hover { + ${({ isSelected }) => !isSelected && `opacity: 1;`} + } ${typography.font12Regular} - - - ${mediaQueries.mobile} { + ${mediaQueries.mobile} { width: fit-content; height: fit-content; @@ -41,6 +42,8 @@ const Container = styled(DefaultChip)` border-radius: 9999rem; + opacity: 1; + & .image-container { display: none; } @@ -53,5 +56,16 @@ const Container = styled(DefaultChip)` border-color: ${color.secondary}; `} + + &:hover { + ${({ isSelected }) => + !isSelected && + ` + background-color: ${color.white}; + color: ${color.secondary}; + + border-color: ${color.secondary}; + `} + } } `; From 7fd77721540a8911a8044bd32cb7e659611c29be Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EB=82=98=EA=B2=BD?= Date: Sat, 16 Mar 2024 04:45:56 +0900 Subject: [PATCH 27/42] =?UTF-8?q?Feat:=20Stack=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=ED=99=95=EC=9E=A5=20=EA=B0=80=EB=8A=A5?= =?UTF-8?q?=ED=95=98=EA=B2=8C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- co-kkiri/src/components/commons/Stack.tsx | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/co-kkiri/src/components/commons/Stack.tsx b/co-kkiri/src/components/commons/Stack.tsx index 681e216e..fd6e88c8 100644 --- a/co-kkiri/src/components/commons/Stack.tsx +++ b/co-kkiri/src/components/commons/Stack.tsx @@ -6,17 +6,21 @@ import { Image } from "@/types/ImageTypes"; interface StackProps { stack?: Pick; + className?: string; } -export default function Stack({ stack }: StackProps) { +export default function Stack({ stack, className }: StackProps) { //임시 - const icon: Image = stack && stack.img ? { - src: stack.img, - alt: stack.name - } : ICONS.questionMark; + const icon: Image = + stack && stack.img + ? { + src: stack.img, + alt: stack.name, + } + : ICONS.questionMark; return ( - + ); @@ -25,7 +29,7 @@ export default function Stack({ stack }: StackProps) { const { color } = DESIGN_TOKEN; const Background = styled.div` - padding: .8rem; + padding: 0.8rem; background-color: ${color.gray[3]}; border-radius: 50%; From 2db8d1c70cf42fb600a3972445127a4b7aec8bdf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EB=82=98=EA=B2=BD?= Date: Sat, 16 Mar 2024 04:49:17 +0900 Subject: [PATCH 28/42] =?UTF-8?q?Fix:=20FilterList=20=EB=B2=94=EC=9A=A9?= =?UTF-8?q?=EC=84=B1=EC=9E=88=EA=B2=8C=20=EC=9B=90=EB=B3=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- co-kkiri/src/components/commons/FilterList.tsx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/co-kkiri/src/components/commons/FilterList.tsx b/co-kkiri/src/components/commons/FilterList.tsx index 5accd0d7..8a2ac619 100644 --- a/co-kkiri/src/components/commons/FilterList.tsx +++ b/co-kkiri/src/components/commons/FilterList.tsx @@ -1,19 +1,18 @@ import DESIGN_TOKEN from "@/styles/tokens"; -import { StackPosition } from "@/types/StackTypes"; import { MouseEvent } from "react"; import styled from "styled-components"; interface FilterListProps { - currentFilter: StackPosition - filters: StackPosition[]; - onFilterClick(filter: StackPosition): void; + currentFilter: string + filters: string[]; + onFilterClick(filter: string): void; className?: string; } export default function FilterList({ currentFilter, filters, onFilterClick, className }: FilterListProps) { const handleFilterClick = (e: MouseEvent) => { - const filter = e.currentTarget.textContent as StackPosition; + const filter = e.currentTarget.textContent; if (filter) { onFilterClick(filter); } From 79ff50e4bd86e6a36eb2aefacfb5e1721ab1a13f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EB=82=98=EA=B2=BD?= Date: Sat, 16 Mar 2024 10:57:40 +0900 Subject: [PATCH 29/42] =?UTF-8?q?Fix:=20Chip=20overflow=20=EB=8B=B4?= =?UTF-8?q?=EB=8B=B9=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- co-kkiri/src/components/commons/Chips/DefaultChip.tsx | 5 ----- co-kkiri/src/components/commons/Chips/StackChip.tsx | 7 +++++++ 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/co-kkiri/src/components/commons/Chips/DefaultChip.tsx b/co-kkiri/src/components/commons/Chips/DefaultChip.tsx index 3c5ddca5..3baff98c 100644 --- a/co-kkiri/src/components/commons/Chips/DefaultChip.tsx +++ b/co-kkiri/src/components/commons/Chips/DefaultChip.tsx @@ -75,11 +75,6 @@ const Container = styled.div` & > span { text-align: center; - - white-space: nowrap; /* 텍스트를 한 줄로 유지 */ - overflow: hidden; /* 내용이 넘칠 경우 숨김 처리 */ - text-overflow: ellipsis; /* 오버플로된 텍스트의 말줄임표 표시 */ - width: 100%; /* 또는 부모 요소의 너비에 맞추어 설정 */ } & .icon { diff --git a/co-kkiri/src/components/commons/Chips/StackChip.tsx b/co-kkiri/src/components/commons/Chips/StackChip.tsx index cf1ad5e4..1b48b849 100644 --- a/co-kkiri/src/components/commons/Chips/StackChip.tsx +++ b/co-kkiri/src/components/commons/Chips/StackChip.tsx @@ -32,6 +32,13 @@ const Container = styled(DefaultChip)` ${({ isSelected }) => !isSelected && `opacity: 1;`} } + & > span { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + width: 100%; + } + ${typography.font12Regular} ${mediaQueries.mobile} { From cb538dae163438596217806ce5ff23371eadbcd9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EB=82=98=EA=B2=BD?= Date: Sat, 16 Mar 2024 10:58:12 +0900 Subject: [PATCH 30/42] =?UTF-8?q?Fix:=20DeleteStackChip=20onClick=EC=9C=BC?= =?UTF-8?q?=EB=A1=9C=20prop=EB=84=98=EA=B8=B4=20=EC=98=A4=EB=A5=98=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../commons/Chips/DeleteStackChip.tsx | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/co-kkiri/src/components/commons/Chips/DeleteStackChip.tsx b/co-kkiri/src/components/commons/Chips/DeleteStackChip.tsx index 3f6d1e06..c41ce6f8 100644 --- a/co-kkiri/src/components/commons/Chips/DeleteStackChip.tsx +++ b/co-kkiri/src/components/commons/Chips/DeleteStackChip.tsx @@ -4,15 +4,18 @@ import { MouseEvent } from "react"; import { ICONS } from "@/constants/icons"; interface DeleteStackChipProps { - label: string; - onClick: (e: MouseEvent) => void; + label: string; + onDelete: (stack: string) => void; } -export default function DeleteStackChip({ label, onClick }: DeleteStackChipProps -) { - return ; +export default function DeleteStackChip({ label, onDelete }: DeleteStackChipProps) { + const onClick = (e: MouseEvent) => { + onDelete(label); + }; + + return ; } const Container = styled(DefaultChip)` - padding: 0.4rem .8rem .4rem 1.2rem; -` + padding: 0.4rem 0.8rem 0.4rem 1.2rem; +`; From 3d7aa9dc4c49063fb8578a0b0bd59680bb438ebf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EB=82=98=EA=B2=BD?= Date: Sat, 16 Mar 2024 11:12:20 +0900 Subject: [PATCH 31/42] =?UTF-8?q?Feat:=20DeleteStackChipList=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../StacksPopover/DeleteStackChipList.tsx | 24 +++++++++++++++++++ 1 file changed, 24 insertions(+) create mode 100644 co-kkiri/src/components/domains/StacksPopover/DeleteStackChipList.tsx diff --git a/co-kkiri/src/components/domains/StacksPopover/DeleteStackChipList.tsx b/co-kkiri/src/components/domains/StacksPopover/DeleteStackChipList.tsx new file mode 100644 index 00000000..7c3fd59f --- /dev/null +++ b/co-kkiri/src/components/domains/StacksPopover/DeleteStackChipList.tsx @@ -0,0 +1,24 @@ +import DeleteStackChip from "@/components/commons/Chips/DeleteStackChip"; +import styled from "styled-components"; + +interface DeleteStackChipListProps { + stacks: string[]; + onDeleteStack: (stack: string) => void; + className?: string; +} + +export default function DeleteStackChipList({ stacks, onDeleteStack, className }: DeleteStackChipListProps) { + return ( + + {stacks.map((stack) => ( + + ))} + + ); +} + +const Container = styled.div` + display: flex; + flex-wrap: wrap; + gap: 0.6rem; +`; From 28db387ed6d9c371d2c2f89ee6d9010467596cd0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EB=82=98=EA=B2=BD?= Date: Sat, 16 Mar 2024 11:12:42 +0900 Subject: [PATCH 32/42] =?UTF-8?q?Chore:=20StackChipGrid=20->=20StackChipLi?= =?UTF-8?q?st=20=EC=9D=B4=EB=A6=84=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../domains/StacksPopover/StackChipGrid.tsx | 25 --------- .../domains/StacksPopover/StackChipList.tsx | 54 +++++++++++++++++++ 2 files changed, 54 insertions(+), 25 deletions(-) delete mode 100644 co-kkiri/src/components/domains/StacksPopover/StackChipGrid.tsx create mode 100644 co-kkiri/src/components/domains/StacksPopover/StackChipList.tsx diff --git a/co-kkiri/src/components/domains/StacksPopover/StackChipGrid.tsx b/co-kkiri/src/components/domains/StacksPopover/StackChipGrid.tsx deleted file mode 100644 index e9ff4ed5..00000000 --- a/co-kkiri/src/components/domains/StacksPopover/StackChipGrid.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import StackChip from "@/components/commons/Chips/StackChip"; -import { STACKS } from "@/constants/stacks"; -import { StackPosition } from "@/types/StackTypes"; - -interface StackChipGridProps { - filter: StackPosition; - onStackChipClick: (stack: string) => void; -} - -export default function StackChipGrid({ filter, onStackChipClick }: StackChipGridProps) { - const filteredStacks = Object.values(STACKS).filter((stack) => stack.relatedPosition.includes(filter)); - return ( -
- {filteredStacks.map((stack) => ( - { - onStackChipClick(stack.name); - }} - /> - ))} -
- ); -} diff --git a/co-kkiri/src/components/domains/StacksPopover/StackChipList.tsx b/co-kkiri/src/components/domains/StacksPopover/StackChipList.tsx new file mode 100644 index 00000000..d93898fa --- /dev/null +++ b/co-kkiri/src/components/domains/StacksPopover/StackChipList.tsx @@ -0,0 +1,54 @@ +import StackChip from "@/components/commons/Chips/StackChip"; +import { STACKS } from "@/constants/stacks"; +import DESIGN_TOKEN from "@/styles/tokens"; +import styled from "styled-components"; +import { StackPositionFilter } from "./constants"; + +interface StackChipGridProps { + selectedStacks: string[]; + filter: StackPositionFilter; + onStackChipClick: (stack: string) => void; + className?: string; +} + +export default function StackChipList({ selectedStacks, filter, onStackChipClick, className }: StackChipGridProps) { + const filteredStacks = + filter === "ALL" + ? Object.values(STACKS) + : Object.values(STACKS).filter((stack) => stack.relatedPosition.includes(filter)); + + return ( + + {filteredStacks.map((stack) => ( + { + onStackChipClick(stack.name); + }} + isSelected={selectedStacks.includes(stack.name)} + /> + ))} + + ); +} + +const { mediaQueries } = DESIGN_TOKEN; +const Container = styled.div` + width: fit-content; + + display: grid; + grid-template-columns: repeat(10, 1fr); + gap: 0.6rem; + + ${mediaQueries.mobile} { + width: 100%; + display: flex; + flex-wrap: wrap; + } + + ${mediaQueries.tablet} { + grid-template-columns: repeat(8, 1fr); + } +`; From 809271605f6be0a966d5cacc085a86d966016b9a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EB=82=98=EA=B2=BD?= Date: Sat, 16 Mar 2024 11:13:26 +0900 Subject: [PATCH 33/42] =?UTF-8?q?Refactor:=20StacksPopover=20toogle?= =?UTF-8?q?=EB=A1=9C=20=EC=83=81=ED=83=9C=20=EA=B4=80=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/domains/StacksPopover/index.tsx | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/co-kkiri/src/components/domains/StacksPopover/index.tsx b/co-kkiri/src/components/domains/StacksPopover/index.tsx index 95a54120..825b51fd 100644 --- a/co-kkiri/src/components/domains/StacksPopover/index.tsx +++ b/co-kkiri/src/components/domains/StacksPopover/index.tsx @@ -1,18 +1,19 @@ import FilterButton from "@/components/commons/FilterButton"; -import { useState } from "react"; import SelectLayout from "./SelectLayout"; import styled from "styled-components"; +import useOpenToggle from "@/hooks/useOpenToggle"; -export default function StacksPopover() { - const [isButtonSelected, setIsButtonSelected] = useState(false); - const handleButtonClick = () => { - setIsButtonSelected(!isButtonSelected); - }; +interface StacksPopoverProps { + onStacksChange: (stacks: string[]) => void; +} + +export default function StacksPopover({ onStacksChange }: StacksPopoverProps) { + const {isOpen, openToggle} = useOpenToggle(); return ( - - {isButtonSelected && } + + {isOpen && } ); } From 844edf9cf84bb2bd52ef4739ac7b7bd63b95ff09 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EB=82=98=EA=B2=BD?= Date: Sat, 16 Mar 2024 11:15:35 +0900 Subject: [PATCH 34/42] =?UTF-8?q?Chore:=20StacksPopover=EC=97=90=20?= =?UTF-8?q?=EC=82=AC=EC=9A=A9=EB=90=98=EB=8A=94=20constant=20=ED=8C=8C?= =?UTF-8?q?=EC=9D=BC=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/domains/StacksPopover/constants.ts | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 co-kkiri/src/components/domains/StacksPopover/constants.ts diff --git a/co-kkiri/src/components/domains/StacksPopover/constants.ts b/co-kkiri/src/components/domains/StacksPopover/constants.ts new file mode 100644 index 00000000..f34694b8 --- /dev/null +++ b/co-kkiri/src/components/domains/StacksPopover/constants.ts @@ -0,0 +1,11 @@ +import { StackPosition } from "@/types/StackTypes"; + +export type StackPositionFilter = "ALL" | StackPosition; + +export const mappedFilter: Record = { + "전체": "ALL", + "프론트엔드": "FRONT_END", + "백엔드": "BACK_END", + "모바일": "MOBILE", + "기타": "OTHERS", +}; From 43fed1ed57e7ff3b3b05d7101f1b067f7300b5f3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EB=82=98=EA=B2=BD?= Date: Sat, 16 Mar 2024 11:21:59 +0900 Subject: [PATCH 35/42] =?UTF-8?q?Chore:=20StackPopover=20=ED=8F=B4?= =?UTF-8?q?=EB=8D=94=20=EC=9C=84=EC=B9=98=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../domains/StacksPopover/SelectLayout.tsx | 37 ------ .../StackPopover}/DeleteStackChipList.tsx | 0 .../StackPopover}/ResetButton.tsx | 0 .../detail/StackPopover/SelectLayout.tsx | 119 ++++++++++++++++++ .../StackPopover}/StackChipList.tsx | 0 .../StackPopover}/constants.ts | 0 .../StackPopover}/index.tsx | 0 7 files changed, 119 insertions(+), 37 deletions(-) delete mode 100644 co-kkiri/src/components/domains/StacksPopover/SelectLayout.tsx rename co-kkiri/src/components/domains/{StacksPopover => detail/StackPopover}/DeleteStackChipList.tsx (100%) rename co-kkiri/src/components/domains/{StacksPopover => detail/StackPopover}/ResetButton.tsx (100%) create mode 100644 co-kkiri/src/components/domains/detail/StackPopover/SelectLayout.tsx rename co-kkiri/src/components/domains/{StacksPopover => detail/StackPopover}/StackChipList.tsx (100%) rename co-kkiri/src/components/domains/{StacksPopover => detail/StackPopover}/constants.ts (100%) rename co-kkiri/src/components/domains/{StacksPopover => detail/StackPopover}/index.tsx (100%) diff --git a/co-kkiri/src/components/domains/StacksPopover/SelectLayout.tsx b/co-kkiri/src/components/domains/StacksPopover/SelectLayout.tsx deleted file mode 100644 index 34f5d516..00000000 --- a/co-kkiri/src/components/domains/StacksPopover/SelectLayout.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import styled from "styled-components"; -import FilterList from "../../commons/FilterList"; -import DESIGN_TOKEN from "@/styles/tokens"; - -export default function SelectLayout() { - return ( - - { }} /> - - ) -} - -const {color, mediaQueries} = DESIGN_TOKEN; - -const Container = styled.div` - height: fit-content; - - padding: 3rem 4rem; - - position: relative; - top: .6rem; - - border-radius: 2rem; - border: .1rem solid ${color.gray[2]}; - - ${mediaQueries.mobile}{ - width: 32rem; - } - - ${mediaQueries.tablet}{ - width: 69.8rem; - } - - ${mediaQueries.desktop}{ - width: 85.4rem; - } -` diff --git a/co-kkiri/src/components/domains/StacksPopover/DeleteStackChipList.tsx b/co-kkiri/src/components/domains/detail/StackPopover/DeleteStackChipList.tsx similarity index 100% rename from co-kkiri/src/components/domains/StacksPopover/DeleteStackChipList.tsx rename to co-kkiri/src/components/domains/detail/StackPopover/DeleteStackChipList.tsx diff --git a/co-kkiri/src/components/domains/StacksPopover/ResetButton.tsx b/co-kkiri/src/components/domains/detail/StackPopover/ResetButton.tsx similarity index 100% rename from co-kkiri/src/components/domains/StacksPopover/ResetButton.tsx rename to co-kkiri/src/components/domains/detail/StackPopover/ResetButton.tsx diff --git a/co-kkiri/src/components/domains/detail/StackPopover/SelectLayout.tsx b/co-kkiri/src/components/domains/detail/StackPopover/SelectLayout.tsx new file mode 100644 index 00000000..be06e724 --- /dev/null +++ b/co-kkiri/src/components/domains/detail/StackPopover/SelectLayout.tsx @@ -0,0 +1,119 @@ +import DESIGN_TOKEN from "@/styles/tokens"; +import styled from "styled-components"; +import DefaultFilterList from "../../../commons/FilterList"; +import DefaultResetButton from "./ResetButton"; +import DefaultStackChipList from "./StackChipList"; +import DefaultDeleteStackChipList from "./DeleteStackChipList"; +import { useEffect, useState } from "react"; +import { StackPositionFilter, mappedFilter } from "./constants"; + +interface SelectLayoutProps { + onStacksChange: (selectedStacks: string[]) => void; +} + +export default function SelectLayout({ onStacksChange }: SelectLayoutProps) { + const [filter, setFilter] = useState("ALL"); + const [selectedStacks, setSelectedStacks] = useState([]); + + useEffect(() => { + onStacksChange(selectedStacks); + }, [selectedStacks, onStacksChange]); + + return ( + + { + setFilter(mappedFilter[filter]); + }} + /> + { + if (selectedStacks.includes(stack)) { + setSelectedStacks((prevStacks) => prevStacks.filter((prevStack) => prevStack !== stack)); + } else { + setSelectedStacks((prevStacks) => [...prevStacks, stack]); + } + }} + /> + { + setSelectedStacks([]); + }} + /> + {selectedStacks.length !== 0 && ( + { + setSelectedStacks((prevStacks) => prevStacks.filter((prevStack) => prevStack !== stack)); + }} + /> + )} + + ); +} + +const { color, mediaQueries } = DESIGN_TOKEN; + +interface ContainerProps { + $isSelectedStacks: boolean; +} +const Container = styled.div` + height: fit-content; + + padding: 3rem 4rem; + + display: grid; + position: absolute; + top: 4.2rem; + z-index: 997; + + border-radius: 2rem; + border: 0.1rem solid ${color.gray[2]}; + + background-color: ${color.white}; + + grid-template-areas: + "filterlist resetbutton" + "stackchips stackchips" + ${({ $isSelectedStacks }) => $isSelectedStacks && `"deletestackchips deletestackchips"`}; + + ${mediaQueries.mobile} { + width: 32rem; + padding: 2rem 3rem; + + display: flex; + flex-direction: column; + gap: 2rem; + } + + ${mediaQueries.tablet} { + width: 69.8rem; + gap: 3rem; + } + + ${mediaQueries.desktop} { + width: 85.4rem; + gap: 3rem; + } +`; + +const FilterList = styled(DefaultFilterList)` + grid-area: filterlist; +`; + +const ResetButton = styled(DefaultResetButton)` + grid-area: resetbutton; + justify-self: end; +`; + +const StackChipGrid = styled(DefaultStackChipList)` + grid-area: stackchips; +`; + +const DeleteStackChipList = styled(DefaultDeleteStackChipList)` + grid-area: deletestackchips; +`; diff --git a/co-kkiri/src/components/domains/StacksPopover/StackChipList.tsx b/co-kkiri/src/components/domains/detail/StackPopover/StackChipList.tsx similarity index 100% rename from co-kkiri/src/components/domains/StacksPopover/StackChipList.tsx rename to co-kkiri/src/components/domains/detail/StackPopover/StackChipList.tsx diff --git a/co-kkiri/src/components/domains/StacksPopover/constants.ts b/co-kkiri/src/components/domains/detail/StackPopover/constants.ts similarity index 100% rename from co-kkiri/src/components/domains/StacksPopover/constants.ts rename to co-kkiri/src/components/domains/detail/StackPopover/constants.ts diff --git a/co-kkiri/src/components/domains/StacksPopover/index.tsx b/co-kkiri/src/components/domains/detail/StackPopover/index.tsx similarity index 100% rename from co-kkiri/src/components/domains/StacksPopover/index.tsx rename to co-kkiri/src/components/domains/detail/StackPopover/index.tsx From 7d944b732d38c9aba7af9f830afb9e0c306c367a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EB=82=98=EA=B2=BD?= Date: Sat, 16 Mar 2024 11:42:03 +0900 Subject: [PATCH 36/42] =?UTF-8?q?Fix:=20DefaultChip=20title=20=ED=88=B4?= =?UTF-8?q?=ED=8C=81=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- co-kkiri/src/components/commons/Chips/DefaultChip.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/co-kkiri/src/components/commons/Chips/DefaultChip.tsx b/co-kkiri/src/components/commons/Chips/DefaultChip.tsx index 3baff98c..27795f53 100644 --- a/co-kkiri/src/components/commons/Chips/DefaultChip.tsx +++ b/co-kkiri/src/components/commons/Chips/DefaultChip.tsx @@ -32,6 +32,7 @@ export default function DefaultChip({ }: DefaultChipProps) { return ( Date: Sat, 16 Mar 2024 14:12:07 +0900 Subject: [PATCH 37/42] =?UTF-8?q?Chore:=20DetailCard,=20FilterDropButton?= =?UTF-8?q?=20=ED=8F=B4=EB=8D=94=20=EC=9C=84=EC=B9=98=20=EB=B0=8F=20?= =?UTF-8?q?=ED=8C=8C=EC=9D=BC=20=EC=9D=B4=EB=A6=84=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- co-kkiri/src/components/commons/DropDowns/FilterDropdown.tsx | 2 +- .../commons/{FilterDropButton.tsx => FilterButton.tsx} | 2 +- .../{domains => commons}/ProjectDetailCard/ProjectDetailRow.tsx | 0 .../ProjectDetailCard/ProjectDetailTable.tsx | 0 .../components/{domains => commons}/ProjectDetailCard/index.tsx | 0 .../components/{domains => commons}/ProjectDetailCard/types.ts | 0 6 files changed, 2 insertions(+), 2 deletions(-) rename co-kkiri/src/components/commons/DropDowns/commons/{FilterDropButton.tsx => FilterButton.tsx} (93%) rename co-kkiri/src/components/{domains => commons}/ProjectDetailCard/ProjectDetailRow.tsx (100%) rename co-kkiri/src/components/{domains => commons}/ProjectDetailCard/ProjectDetailTable.tsx (100%) rename co-kkiri/src/components/{domains => commons}/ProjectDetailCard/index.tsx (100%) rename co-kkiri/src/components/{domains => commons}/ProjectDetailCard/types.ts (100%) diff --git a/co-kkiri/src/components/commons/DropDowns/FilterDropdown.tsx b/co-kkiri/src/components/commons/DropDowns/FilterDropdown.tsx index 9e18f0aa..4ea18b9b 100644 --- a/co-kkiri/src/components/commons/DropDowns/FilterDropdown.tsx +++ b/co-kkiri/src/components/commons/DropDowns/FilterDropdown.tsx @@ -1,6 +1,6 @@ import { useState } from "react"; import styled from "styled-components"; -import FilterButton from "./commons/FilterDropButton"; +import FilterButton from "./commons/FilterButton"; import useOpenToggle from "@/hooks/useOpenToggle"; import DropMenu from "./commons/DropMenu"; import { DROPDOWN_INFO } from "@/constants/dropDown"; diff --git a/co-kkiri/src/components/commons/DropDowns/commons/FilterDropButton.tsx b/co-kkiri/src/components/commons/DropDowns/commons/FilterButton.tsx similarity index 93% rename from co-kkiri/src/components/commons/DropDowns/commons/FilterDropButton.tsx rename to co-kkiri/src/components/commons/DropDowns/commons/FilterButton.tsx index 00bfb709..2c9ce154 100644 --- a/co-kkiri/src/components/commons/DropDowns/commons/FilterDropButton.tsx +++ b/co-kkiri/src/components/commons/DropDowns/commons/FilterButton.tsx @@ -11,7 +11,7 @@ interface FilterButtonProps { const { popover, popoverSelected } = ICONS; -export default function FilterDropButton({ selectOption, onClick, isSelected }: FilterButtonProps) { +export default function FilterButton({ selectOption, onClick, isSelected }: FilterButtonProps) { return ( {selectOption} diff --git a/co-kkiri/src/components/domains/ProjectDetailCard/ProjectDetailRow.tsx b/co-kkiri/src/components/commons/ProjectDetailCard/ProjectDetailRow.tsx similarity index 100% rename from co-kkiri/src/components/domains/ProjectDetailCard/ProjectDetailRow.tsx rename to co-kkiri/src/components/commons/ProjectDetailCard/ProjectDetailRow.tsx diff --git a/co-kkiri/src/components/domains/ProjectDetailCard/ProjectDetailTable.tsx b/co-kkiri/src/components/commons/ProjectDetailCard/ProjectDetailTable.tsx similarity index 100% rename from co-kkiri/src/components/domains/ProjectDetailCard/ProjectDetailTable.tsx rename to co-kkiri/src/components/commons/ProjectDetailCard/ProjectDetailTable.tsx diff --git a/co-kkiri/src/components/domains/ProjectDetailCard/index.tsx b/co-kkiri/src/components/commons/ProjectDetailCard/index.tsx similarity index 100% rename from co-kkiri/src/components/domains/ProjectDetailCard/index.tsx rename to co-kkiri/src/components/commons/ProjectDetailCard/index.tsx diff --git a/co-kkiri/src/components/domains/ProjectDetailCard/types.ts b/co-kkiri/src/components/commons/ProjectDetailCard/types.ts similarity index 100% rename from co-kkiri/src/components/domains/ProjectDetailCard/types.ts rename to co-kkiri/src/components/commons/ProjectDetailCard/types.ts From 4ee44421d39ae2e8cde95e5a0152b38b121c90c3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EB=82=98=EA=B2=BD?= Date: Sat, 16 Mar 2024 14:15:56 +0900 Subject: [PATCH 38/42] =?UTF-8?q?Refactor:=20StackPopover=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=B3=80=EA=B2=BD=EB=90=9C=20?= =?UTF-8?q?=ED=95=98=EC=9C=84=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?= =?UTF-8?q?=EC=9D=B4=EB=A6=84=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- co-kkiri/src/components/domains/detail/StackPopover/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/co-kkiri/src/components/domains/detail/StackPopover/index.tsx b/co-kkiri/src/components/domains/detail/StackPopover/index.tsx index 825b51fd..777da74f 100644 --- a/co-kkiri/src/components/domains/detail/StackPopover/index.tsx +++ b/co-kkiri/src/components/domains/detail/StackPopover/index.tsx @@ -1,4 +1,4 @@ -import FilterButton from "@/components/commons/FilterButton"; +import FilterDropdown from "@/components/commons/DropDowns/commons/FilterButton"; import SelectLayout from "./SelectLayout"; import styled from "styled-components"; import useOpenToggle from "@/hooks/useOpenToggle"; @@ -12,7 +12,7 @@ export default function StacksPopover({ onStacksChange }: StacksPopoverProps) { return ( - + {isOpen && } ); From 8241597555f70e7d78fb2a59febcd9954d9985ed Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EB=82=98=EA=B2=BD?= Date: Sat, 16 Mar 2024 14:40:12 +0900 Subject: [PATCH 39/42] =?UTF-8?q?Feat:=20FilterValue=EC=97=90=EC=84=9C=20F?= =?UTF-8?q?ilterKey=EA=B0=80=EC=A7=80=EA=B3=A0=20=EC=98=A4=EB=8A=94=20?= =?UTF-8?q?=ED=95=A8=EC=88=98=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../domains/detail/StackPopover/constants.ts | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/co-kkiri/src/components/domains/detail/StackPopover/constants.ts b/co-kkiri/src/components/domains/detail/StackPopover/constants.ts index f34694b8..a9df8fdb 100644 --- a/co-kkiri/src/components/domains/detail/StackPopover/constants.ts +++ b/co-kkiri/src/components/domains/detail/StackPopover/constants.ts @@ -3,9 +3,13 @@ import { StackPosition } from "@/types/StackTypes"; export type StackPositionFilter = "ALL" | StackPosition; export const mappedFilter: Record = { - "전체": "ALL", - "프론트엔드": "FRONT_END", - "백엔드": "BACK_END", - "모바일": "MOBILE", - "기타": "OTHERS", + 전체: "ALL", + 프론트엔드: "FRONT_END", + 백엔드: "BACK_END", + 모바일: "MOBILE", + 기타: "OTHERS", +}; + +export const getFilterKey = (value: StackPositionFilter) => { + return Object.keys(mappedFilter).find((key) => mappedFilter[key] === value) || "ALL"; }; From 9287a96e1abab4a522d915ca40182feda647f95d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EB=82=98=EA=B2=BD?= Date: Sat, 16 Mar 2024 14:40:40 +0900 Subject: [PATCH 40/42] =?UTF-8?q?Chore:=20Design=5FToken=20=EA=B0=92=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80=20=EB=B0=8F=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- co-kkiri/src/components/commons/Chips/StackChip.tsx | 10 +++++----- co-kkiri/src/styles/tokens.ts | 1 + 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/co-kkiri/src/components/commons/Chips/StackChip.tsx b/co-kkiri/src/components/commons/Chips/StackChip.tsx index 1b48b849..28e5bc53 100644 --- a/co-kkiri/src/components/commons/Chips/StackChip.tsx +++ b/co-kkiri/src/components/commons/Chips/StackChip.tsx @@ -39,7 +39,7 @@ const Container = styled(DefaultChip)` width: 100%; } - ${typography.font12Regular} + ${typography.font11Regular} ${mediaQueries.mobile} { width: fit-content; @@ -58,11 +58,11 @@ const Container = styled(DefaultChip)` ${({ isSelected }) => isSelected && ` - background-color: ${color.white}; - color: ${color.secondary}; + background-color: ${color.white}; + color: ${color.secondary}; - border-color: ${color.secondary}; - `} + border-color: ${color.secondary}; + `} &:hover { ${({ isSelected }) => diff --git a/co-kkiri/src/styles/tokens.ts b/co-kkiri/src/styles/tokens.ts index f12e4d00..246b144d 100644 --- a/co-kkiri/src/styles/tokens.ts +++ b/co-kkiri/src/styles/tokens.ts @@ -26,6 +26,7 @@ const DESIGN_TOKEN = { secondary: "#FF9B52", }, typography: { + font11Regular: "font-size: 1.1rem; line-height: normal; font-weight: 400;", font12Regular: "font-size: 1.2rem; line-height: normal; font-weight: 400;", font12Semibold: "font-size: 1.2rem; line-height: normal; font-weight: 600;", font14Regular: "font-size: 1.4rem; line-height: 150%; font-weight: 400;", From 7439bf861c511519a322f45b51e31c3015b1c1cd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EB=82=98=EA=B2=BD?= Date: Sat, 16 Mar 2024 14:41:08 +0900 Subject: [PATCH 41/42] =?UTF-8?q?Refactor:=20filter=20key=EA=B0=80?= =?UTF-8?q?=EC=A7=80=EA=B3=A0=20=EC=98=A4=EB=8A=94=20=EB=A9=94=EC=86=8C?= =?UTF-8?q?=EB=93=9C=20=EC=A0=81=EC=9A=A9=20=EB=B0=8F=20css=20=EC=A1=B0?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../domains/detail/StackPopover/SelectLayout.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/co-kkiri/src/components/domains/detail/StackPopover/SelectLayout.tsx b/co-kkiri/src/components/domains/detail/StackPopover/SelectLayout.tsx index be06e724..858790d1 100644 --- a/co-kkiri/src/components/domains/detail/StackPopover/SelectLayout.tsx +++ b/co-kkiri/src/components/domains/detail/StackPopover/SelectLayout.tsx @@ -5,7 +5,7 @@ import DefaultResetButton from "./ResetButton"; import DefaultStackChipList from "./StackChipList"; import DefaultDeleteStackChipList from "./DeleteStackChipList"; import { useEffect, useState } from "react"; -import { StackPositionFilter, mappedFilter } from "./constants"; +import { StackPositionFilter, getFilterKey, mappedFilter } from "./constants"; interface SelectLayoutProps { onStacksChange: (selectedStacks: string[]) => void; @@ -22,7 +22,7 @@ export default function SelectLayout({ onStacksChange }: SelectLayoutProps) { return ( { setFilter(mappedFilter[filter]); @@ -91,12 +91,12 @@ const Container = styled.div` } ${mediaQueries.tablet} { - width: 69.8rem; + width: fit-content; gap: 3rem; } ${mediaQueries.desktop} { - width: 85.4rem; + width: fit-content; gap: 3rem; } `; From f8de1a81a6dd0e78632fa74670532688148fe859 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EB=82=98=EA=B2=BD?= Date: Sat, 16 Mar 2024 15:00:39 +0900 Subject: [PATCH 42/42] =?UTF-8?q?Fix:=20SelectLayout=20width=20css=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../domains/detail/StackPopover/SelectLayout.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/co-kkiri/src/components/domains/detail/StackPopover/SelectLayout.tsx b/co-kkiri/src/components/domains/detail/StackPopover/SelectLayout.tsx index 858790d1..a27e9b35 100644 --- a/co-kkiri/src/components/domains/detail/StackPopover/SelectLayout.tsx +++ b/co-kkiri/src/components/domains/detail/StackPopover/SelectLayout.tsx @@ -28,7 +28,7 @@ export default function SelectLayout({ onStacksChange }: SelectLayoutProps) { setFilter(mappedFilter[filter]); }} /> - { @@ -91,12 +91,12 @@ const Container = styled.div` } ${mediaQueries.tablet} { - width: fit-content; + width: 70rem; gap: 3rem; } ${mediaQueries.desktop} { - width: fit-content; + width: 85.6rem; gap: 3rem; } `; @@ -110,7 +110,7 @@ const ResetButton = styled(DefaultResetButton)` justify-self: end; `; -const StackChipGrid = styled(DefaultStackChipList)` +const StackChipList = styled(DefaultStackChipList)` grid-area: stackchips; `;