Skip to content

Commit 4ac2112

Browse files
usamaru33usamaru33
committed
Tagのfix
1 parent 829f695 commit 4ac2112

File tree

4 files changed

+82
-38
lines changed

4 files changed

+82
-38
lines changed

‎client/src/components/tags/style.module.scss

+68-28
Original file line numberDiff line numberDiff line change
@@ -63,79 +63,119 @@
6363
.red {
6464
color: theme.$red;
6565
border-color: theme.$red;
66-
background-color: rgb(255 246 246);
66+
background-color: mix(theme.$red, theme.$white, 15%);
6767

6868
&:hover {
6969
color: theme.$red;
70-
background-color: rgb(254 226 226);
70+
background-color: mix(theme.$red, theme.$white, 5%);
7171
}
7272

7373
&.active {
74-
color: rgb(255 255 255);
74+
color: theme.$white;
7575
background-color: theme.$red;
7676

7777
&:hover {
78-
background-color: rgb(127 29 29);
78+
background-color: lighten(theme.$red, 10%);
7979
}
8080
}
8181
}
8282

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

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

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

9797
&:hover {
98-
background-color: rgb(30 58 138);
98+
background-color: lighten(theme.$blue, 10%);
99+
}
100+
}
101+
}
102+
.yellow{
103+
color: theme.$yellow;
104+
border-color: theme.$yellow;
105+
background-color: mix(theme.$yellow, theme.$white, 15%);
106+
107+
&:hover {
108+
color: theme.$yellow;
109+
background-color: mix(theme.$yellow, theme.$white, 5%);
110+
}
111+
112+
&.active {
113+
color: theme.$white;
114+
background-color: theme.$yellow;
115+
116+
&:hover {
117+
background-color: lighten(theme.$yellow, 10%);
99118
}
100119
}
101120
}
102121

103122
.green {
104-
color: rgb(22 101 52);
105-
border-color: rgb(22 101 52);
106-
background-color: rgb(240 252 241);
123+
color: theme.$green;
124+
border-color: theme.$green;
125+
background-color: mix(theme.$green, theme.$white, 15%);
107126

108127
&:hover {
109-
color: rgb(22 101 52);
110-
background-color: rgb(220 252 231);
128+
color: theme.$green;
129+
background-color: mix(theme.$green, theme.$white, 5%);
111130
}
112131

113132
&.active {
114-
color: rgb(255 255 255);
115-
background-color: rgb(22 101 52);
133+
color: theme.$white;
134+
background-color: theme.$green;
116135

117136
&:hover {
118-
background-color: rgb(20 83 45);
137+
background-color: lighten(theme.$green, 10%);
119138
}
120139
}
121140
}
122141

123142
.gray {
124-
color: rgb(31 41 55);
125-
border-color: rgb(31 41 55);
126-
background-color: rgb(253 254 255);
143+
color: theme.$gray;
144+
border-color: theme.$black;
145+
background-color: mix(theme.$gray, theme.$white, 15%);
146+
147+
&:hover {
148+
color: theme.$gray;
149+
background-color: mix(theme.$gray, theme.$white, 5%);
150+
}
151+
152+
&.active {
153+
color: theme.$white;
154+
background-color: theme.$gray;
155+
156+
&:hover {
157+
background-color: lighten(theme.$gray, 10%);
158+
}
159+
}
160+
}
161+
162+
163+
.purple {
164+
color: theme.$purple;
165+
border-color: theme.$purple;
166+
background-color: mix(theme.$purple, theme.$white, 15%);
127167

128168
&:hover {
129-
color: rgb(31 41 55);
130-
background-color: rgb(223 224 226);
169+
color: theme.$purple;
170+
background-color: mix(theme.$purple, theme.$white, 5%);
131171
}
132172

133173
&.active {
134-
color: rgb(255 255 255);
135-
background-color: rgb(31 41 55);
174+
color: theme.$white;
175+
background-color: theme.$purple;
136176

137177
&:hover {
138-
background-color: rgb(17 24 39);
178+
background-color: lighten(theme.$purple, 10%);
139179
}
140180
}
141181
}

‎client/src/features/menubar/components/Menubar.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ export const Menubar = () => {
3434
const profileURI = `${baseAccountURI}/profile`;
3535
const settingURI = `${profileURI}/setting`;
3636
const homeURI = `${baseAccountURI}/home`;
37-
const tagregisterURI = `${baseAccountURI}/tag`; //要修正
37+
const tagregisterURI = `${baseAccountURI}/signup/tags`; //要修正
3838
let accountName = "";
3939
let accountIcon = "https://github.com/shadcn.png";
4040

‎client/src/features/tags/components/TagCard.tsx

+12-9
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,6 @@ export const TagCard = ({ type }: TagCardProps) => {
3434
const [currentUser] = useAtom(userAtom);
3535
const [currentCommunity] = useAtom(communityAtom);
3636

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

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

136135
if (ws.current?.readyState === WebSocket.OPEN) {
136+
const tagName = isAiTag ? aiRecommendedTags[index].name : tags[index].name;
137137
const message = {
138-
tag: tags[index].name,
138+
tag: tagName,
139139
};
140140
ws.current.send(JSON.stringify(message));
141141
}
@@ -164,12 +164,14 @@ export const TagCard = ({ type }: TagCardProps) => {
164164
return;
165165
}
166166

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

172-
const selectedTagNames = Array.from(selectedTags).map(index => tags[index]?.name);
172+
const selectedTagNames = Array.from(selectedTags).map(index => (
173+
tags[index]?.name || aiRecommendedTags[index]?.name
174+
)).filter(Boolean);
173175

174176
try {
175177
if (ws.current) {
@@ -194,7 +196,7 @@ export const TagCard = ({ type }: TagCardProps) => {
194196
<CardHeader>
195197
<CardTitle className={style.cardTitle}>タグを探してみよう！</CardTitle>
196198
<CardDescription className={style.CardDescription}>
197-
気になるタグを3個以上選んでみよう！
199+
気になるタグを1つ以上選んでみよう！
198200
</CardDescription>
199201
</CardHeader>
200202
<CardContent>
@@ -221,7 +223,8 @@ export const TagCard = ({ type }: TagCardProps) => {
221223
<CardTag
222224
key={`ai-recommended-${index}`}
223225
variant={tag.color}
224-
className={style.aiTag}
226+
className={`${selectedTags.has(index) ? style.selected : ""}`}
227+
onClick={() => handleTagClick(index, true)}
225228
>
226229
{tag.name}
227230
</CardTag>
@@ -231,7 +234,7 @@ export const TagCard = ({ type }: TagCardProps) => {
231234
)}
232235
</CardContent>
233236
<CardFooter className={style.footer}>
234-
<Button onClick={onClick} className={style.button} disabled={selectedTags.size < 3}>
237+
<Button onClick={onClick} className={style.button} disabled={selectedTags.size < 1}>
235238
これが気に入った！
236239
</Button>
237240
</CardFooter>

‎client/src/styles/theme.scss

+1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ $gray: #C4BDBD;
77
$background: #F2F2F2;
88
$wheat: #F2F2F2;
99
$blue: #3F7AD5;
10+
$white: #FFFFFF;
1011

1112
$theme-user: #434141;
1213
$theme-user-sub: #FFFFFF1A;

0 commit comments

Comments
 (0)