Skip to content

Commit

Permalink
Tagのfix
Browse files Browse the repository at this point in the history
  • Loading branch information
@usamaru33
usamaru33 committed Dec 13, 2024
1 parent 829f695 commit 4ac2112
Show file tree
Hide file tree
Showing 4 changed files with 82 additions and 38 deletions.
96 changes: 68 additions & 28 deletions client/src/components/tags/style.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,79 +63,119 @@
.red {
color: theme.$red;
border-color: theme.$red;
background-color: rgb(255 246 246);
background-color: mix(theme.$red, theme.$white, 15%);

&:hover {
color: theme.$red;
background-color: rgb(254 226 226);
background-color: mix(theme.$red, theme.$white, 5%);
}

&.active {
color: rgb(255 255 255);
color: theme.$white;
background-color: theme.$red;

&:hover {
background-color: rgb(127 29 29);
background-color: lighten(theme.$red, 10%);
}
}
}

.blue {
color: rgb(30 64 175);
border-color: rgb(30 64 175);
background-color: rgb(239 244 254);
color: theme.$blue;
border-color: theme.$blue;
background-color: mix(theme.$blue, theme.$white, 15%);

&:hover {
color: rgb(30 64 175);
background-color: rgb(219 234 254);
color: theme.$blue;
background-color: mix(theme.$blue, theme.$white, 5%);
}

&.active {
color: rgb(255 255 255);
background-color: rgb(30 64 175);
color: theme.$white;
background-color: theme.$blue;

&:hover {
background-color: rgb(30 58 138);
background-color: lighten(theme.$blue, 10%);
}
}
}
.yellow{
color: theme.$yellow;
border-color: theme.$yellow;
background-color: mix(theme.$yellow, theme.$white, 15%);

&:hover {
color: theme.$yellow;
background-color: mix(theme.$yellow, theme.$white, 5%);
}

&.active {
color: theme.$white;
background-color: theme.$yellow;

&:hover {
background-color: lighten(theme.$yellow, 10%);
}
}
}

.green {
color: rgb(22 101 52);
border-color: rgb(22 101 52);
background-color: rgb(240 252 241);
color: theme.$green;
border-color: theme.$green;
background-color: mix(theme.$green, theme.$white, 15%);

&:hover {
color: rgb(22 101 52);
background-color: rgb(220 252 231);
color: theme.$green;
background-color: mix(theme.$green, theme.$white, 5%);
}

&.active {
color: rgb(255 255 255);
background-color: rgb(22 101 52);
color: theme.$white;
background-color: theme.$green;

&:hover {
background-color: rgb(20 83 45);
background-color: lighten(theme.$green, 10%);
}
}
}

.gray {
color: rgb(31 41 55);
border-color: rgb(31 41 55);
background-color: rgb(253 254 255);
color: theme.$gray;
border-color: theme.$black;
background-color: mix(theme.$gray, theme.$white, 15%);

&:hover {
color: theme.$gray;
background-color: mix(theme.$gray, theme.$white, 5%);
}

&.active {
color: theme.$white;
background-color: theme.$gray;

&:hover {
background-color: lighten(theme.$gray, 10%);
}
}
}


.purple {
color: theme.$purple;
border-color: theme.$purple;
background-color: mix(theme.$purple, theme.$white, 15%);

&:hover {
color: rgb(31 41 55);
background-color: rgb(223 224 226);
color: theme.$purple;
background-color: mix(theme.$purple, theme.$white, 5%);
}

&.active {
color: rgb(255 255 255);
background-color: rgb(31 41 55);
color: theme.$white;
background-color: theme.$purple;

&:hover {
background-color: rgb(17 24 39);
background-color: lighten(theme.$purple, 10%);
}
}
}
2 changes: 1 addition & 1 deletion client/src/features/menubar/components/Menubar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ export const Menubar = () => {
const profileURI = `${baseAccountURI}/profile`;
const settingURI = `${profileURI}/setting`;
const homeURI = `${baseAccountURI}/home`;
const tagregisterURI = `${baseAccountURI}/tag`; //要修正
const tagregisterURI = `${baseAccountURI}/signup/tags`; //要修正
let accountName = "";
let accountIcon = "https://github.com/shadcn.png";

Expand Down
21 changes: 12 additions & 9 deletions client/src/features/tags/components/TagCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,6 @@ export const TagCard = ({ type }: TagCardProps) => {
const [currentUser] = useAtom(userAtom);
const [currentCommunity] = useAtom(communityAtom);

// aiRecommendedTagsの変更を監視
useEffect(() => {
console.log("aiRecommendedTags updated:", aiRecommendedTags);
}, [aiRecommendedTags]);
Expand Down Expand Up @@ -125,7 +124,7 @@ export const TagCard = ({ type }: TagCardProps) => {
};
}, [type, currentUser?.uuid, currentCommunity?.uuid]);

const handleTagClick = (index: number) => {
const handleTagClick = (index: number, isAiTag: boolean = false) => {
setSelectedTags(prev => {
const newSet = new Set(prev);
if (newSet.has(index)) {
Expand All @@ -134,8 +133,9 @@ export const TagCard = ({ type }: TagCardProps) => {
newSet.add(index);

if (ws.current?.readyState === WebSocket.OPEN) {
const tagName = isAiTag ? aiRecommendedTags[index].name : tags[index].name;
const message = {
tag: tags[index].name,
tag: tagName,
};
ws.current.send(JSON.stringify(message));
}
Expand Down Expand Up @@ -164,12 +164,14 @@ export const TagCard = ({ type }: TagCardProps) => {
return;
}

if (selectedTags.size < 3) {
alert("3つ以上のタグを選択してください");
if (selectedTags.size < 1) {
alert("1つ以上のタグを選択してください");
return;
}

const selectedTagNames = Array.from(selectedTags).map(index => tags[index]?.name);
const selectedTagNames = Array.from(selectedTags).map(index => (
tags[index]?.name || aiRecommendedTags[index]?.name
)).filter(Boolean);

try {
if (ws.current) {
Expand All @@ -194,7 +196,7 @@ export const TagCard = ({ type }: TagCardProps) => {
<CardHeader>
<CardTitle className={style.cardTitle}>タグを探してみよう！</CardTitle>
<CardDescription className={style.CardDescription}>
気になるタグを3個以上選んでみよう！
気になるタグを1つ以上選んでみよう！
</CardDescription>
</CardHeader>
<CardContent>
Expand All @@ -221,7 +223,8 @@ export const TagCard = ({ type }: TagCardProps) => {
<CardTag
key={`ai-recommended-${index}`}
variant={tag.color}
className={style.aiTag}
className={`${selectedTags.has(index) ? style.selected : ""}`}
onClick={() => handleTagClick(index, true)}
>
{tag.name}
</CardTag>
Expand All @@ -231,7 +234,7 @@ export const TagCard = ({ type }: TagCardProps) => {
)}
</CardContent>
<CardFooter className={style.footer}>
<Button onClick={onClick} className={style.button} disabled={selectedTags.size < 3}>
<Button onClick={onClick} className={style.button} disabled={selectedTags.size < 1}>
これが気に入った！
</Button>
</CardFooter>
Expand Down
1 change: 1 addition & 0 deletions client/src/styles/theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ $gray: #C4BDBD;
$background: #F2F2F2;
$wheat: #F2F2F2;
$blue: #3F7AD5;
$white: #FFFFFF;

$theme-user: #434141;
$theme-user-sub: #FFFFFF1A;
Expand Down

0 comments on commit 4ac2112

Please sign in to comment.